:root {
    --weui-color-primary: #07C160; /* WeChat Green */
    --weui-color-warn: #FA5151;    /* WeChat Red for errors/warnings */
    --weui-color-link: #576B95;    /* WeChat Link Blue */
    --weui-bg-color-page: #FFFFFF; /* Changed to white */
    --weui-bg-color-container: #FFFFFF;
    --weui-line-color-light: rgba(0,0,0,0.1);
    --weui-text-color-title: rgba(0,0,0,0.9);
    --weui-text-color-desc: rgba(0,0,0,0.5);
    --weui-text-color-placeholder: rgba(0,0,0,0.3);
    --weui-text-color-primary-button: #FFFFFF;
    --weui-text-color-disabled: rgba(0,0,0,0.2);
    --weui-btn-disabled-bg: #F2F2F2;
    --weui-white: #FFFFFF;
    --weui-font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --navbar-height: 50px; /* Increased navbar height */
}

html {
    font-size: calc(100vw / 375 * 16); /* Basic responsive font size */
}

body {
    font-family: var(--weui-font-sans);
    margin: 0;
    background-color: var(--weui-bg-color-page);
    color: var(--weui-text-color-title);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#app-container {
    flex-grow: 1;
    width: 100%;
}

.view {
    width: 100%;
    box-sizing: border-box;
}

/* Navbar styles (from screenshot) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background-color: var(--weui-bg-color-container);
    border-bottom: 1px solid var(--weui-line-color-light);
    display: flex;
    align-items: center;
    /* padding: 0 0.5rem; Removed to allow precise balancing */
    z-index: 1000;
}
.nav_placeholer { /* Placeholder to push content below fixed navbar */
    height: var(--navbar-height);
    border-bottom: 1px solid var(--weui-line-color-light); /* Match navbar border */
}
.navbar .back_zone, .navbar .nav_right_placeholder {
    /* padding: 0 0.5rem; /* Original padding making it 1rem wide */
    width: 44px; /* Typical width for an icon button area, adjust as needed */
    flex-shrink: 0; /* Prevent shrinking */
    display: flex; /* For aligning potential content like an icon */
    align-items: center;
    justify-content: center;
}
.navbar .back_zone {
    /* Specific styles for back button if any, e.g., actual icon */
}
.navbar .nav_right_placeholder {
    /* This is just a spacer, can be empty or have a non-visible element */
}
.navbar .custom_zone {
    flex-grow: 1;
    display: flex;
    justify-content: center; 
    text-align: center; 
    overflow: hidden; /* Prevents title from pushing placeholders if too long */
}
.navbar .center_zone { 
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar .center_zone .zone-title {
    font-size: 1.0625rem; /* ~17px */
    font-weight: 600;
    color: var(--weui-text-color-title);
}

/* Initial View Specific Styles */
#initialView .page-header {
    padding: 1rem;
    text-align: center;
    background-color: var(--weui-bg-color-container);
}
#initialView .page-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
#initialView .ua-notice { 
    display: none; 
    padding: 1rem; 
    text-align: center; 
    background-color: #FFF3CD; 
    color: #856404; 
    margin: 0.625rem 1rem;
    border-radius: 0.25rem;
}
#initialView .button-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background-color: var(--weui-bg-color-container);
    border-top: 1px solid var(--weui-line-color-light);
}
#initialView button#scanQRCodeButton {
    background-color: var(--weui-color-primary);
    color: var(--weui-text-color-primary-button);
    border: none;
    height: 2.75rem;
    line-height: 2.75rem;
    padding: 0;
    font-size: 1.0625rem;
    border-radius: 0.25rem;
    width: 100%;
    font-weight: 500;
}
#initialView button#scanQRCodeButton:disabled {
    background-color: var(--weui-btn-disabled-bg);
    color: var(--weui-text-color-disabled);
}
#initialView .result-area { /* For #mainResult div */
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-align: center;
    min-height: 1.25rem;
    margin: 1rem;
    border-radius: 0.1875rem;
}
#initialView .status-initial { color: var(--weui-text-color-desc); }
#initialView .status-success { color: var(--weui-color-primary); }
#initialView .status-error { color: var(--weui-color-warn); }
#initialView .status-warning { color: #FA9D3B; }
#initialView .status-processing { color: var(--weui-color-link); }


/* Loading View Styles */
#loadingView {
    display: flex; /* Will be set to 'flex' by JS when shown */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed; /* Keep it fixed to overlay content */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0, 0, 0, 0.3); Removed, will be transparent or handled by card */
    z-index: 2000;
    /* display: none; initially hidden by JS or inline style */
}

.loading-card {
    background-color: rgba(40, 40, 40, 0.85); /* Dark semi-transparent background for the card */
    padding: 25px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-width: 120px; /* Ensure a minimum card size */
}

.spinner {
    /* Spinner itself remains the same */
    border: 0.25rem solid rgba(255,255,255,0.3); /* Lighter border for dark card */
    border-top: 0.25rem solid var(--weui-white); /* White top border for contrast */
    border-radius: 50%;
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
    animation: spin 1s linear infinite;
    margin-bottom: 1rem; /* Or adjust if card padding is enough */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#loadingView .loading-card p { /* Target p inside loading-card */
    font-size: 0.9375rem; /* ~15px */
    color: #FFFFFF; /* White text for dark card */
    margin-top: 0.5rem; /* Consistent spacing */
    margin-bottom: 0; /* Remove default p margin if any */
}

/* Result Page Styles (Success/Failure) - based on user's CSS */
.checkin-final-state-area { /* This class is on the #successView and #failureView */
    padding-top: var(--navbar-height); /* Account for fixed navbar */
}
.checkin-result .checkin-state {
    display: flex;
    flex-direction: column;
    background: var(--weui-white);
    align-items: center;
    padding: 4.125rem 1rem 1.5rem 1rem; /* 66px 16px 24px 16px */
}
.checkin-result .checkin-state img {
    width: 4rem; /* 64px */
    height: 4rem; /* 64px */
}
.checkin-result .checkin-state h3 {
    font-size: 1.125rem; /* 18px */
    margin: 1rem 0.5rem; /* 16px 8px */
    color: #3c4043; /* From user CSS */
    font-weight: 600;
}
.checkin-result .checkin-state span {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5rem; /* 24px */
    color: #5f6368; /* From user CSS */
    margin-bottom: 0.25rem;
}
.checkin-result .checkin-state .btn {
    width: 90%;
    max-width: 300px;
    height: 3rem; /* 48px */
    background: #4285f4; /* From user CSS - Google Blue */
    border-radius: 0.25rem; /* 4px */
    color: var(--weui-white);
    line-height: 3rem; /* 48px */
    text-align: center;
    margin-top: 1.5rem; /* 24px */
    font-size: 1rem; /* ~16px */
    cursor: pointer;
}
.checkin-result .checkin-state .btn:active {
    background-color: #3367D6; /* Darker blue */
}

.student_attence_info {
    background: #f8f9ff; /* From user CSS */
    text-align: left;
    width: calc(100% - 2rem); /* Account for parent padding */
    margin: 0.75rem auto; /* ~12px auto */
    padding: 0.625rem 1.25rem; /* 10px 20px */
    border-radius: 0.25rem; /* 4px */
}
.student_attence_info .info_title {
    line-height: 1.75;
    margin-bottom: 0.3em; /* Add some space between lines */
}
.student_attence_info .info_title .title {
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
    color: #b3bbce; /* From user CSS */
    /* white-space: nowrap; /* Optional, can be removed */
    /* margin-right: 0.5rem; /* No longer needed for space-between */
}
.student_attence_info .info_title .info {
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
    color: #585858; /* From user CSS */
    /* text-align: right; /* Removed */
    margin-left: 0.25em; /* Space after the title colon */
}
/* Ensure SVG icon in info_title aligns well */
.student_attence_info .info_title .info svg.icon {
    vertical-align: -0.15em; /* Adjust for better alignment with text */
    margin-left: 8px; /* Keep consistent margin if it was from inline style */
}


/* Server Status Footer (now inside .button-area) */
#initialView .button-area #serverStatusFooter {
    color: var(--weui-text-color-placeholder); /* Placeholder text color */
    font-size: 0.75rem; /* ~12px */
    text-align: center;
    margin-top: 0.5rem; /* Space below the button */
    /* Removed width, padding, background, border-top, margin-top:auto as it's now a child */
}