:root{--sky-100:#e0f2fe;--sky-400:#38bdf8;--sky-500:#0ea5e9;--sky-600:#0284c7;--page-bg:#f8fafc;--card-bg:#fff;--card-border:#f1f5f9;--divider:#e5e7eb;--neutral-bg:#f1f5f9;--info-bg:#dbeafe;--info-border:#bfdbfe;--text-title:#0f172a;--text-value:#111827;--text-muted:#6b7280;--text-dark:#374151;--text-body:#475569;--text-subtle:#64748b;--text-light:#9ca3af;--field-fill:#f9fafb;--field-border:#e5e7eb;--success:#16a34a;--success-bg:#f0fdf4;--success-border:#bbf7d0;--warning:#ea580c;--warning-bg:#fff7ed;--warning-border:#fed7aa;--error:#b91c1c;--weekend:#dc2626;--error-bg:#fef2f2;--error-border:#fecaca;--slate:#475569;--slate-light:#94a3b8;--teal:#0f766e;--teal-light:#2dd4bf;--amber:#f59e0b;--amber-dark:#d97706;--green:#22c55e;--on-grad-soft:#ffffff29;--on-grad-border:#ffffff2e;--on-grad-inside-bg:#ffffff26;--on-grad-inside-border:#fff6;--on-grad-inside-text:#dcfce7;--on-grad-outside-bg:#fff7ed33;--on-grad-outside-border:#fed7aa7a;--on-grad-outside-text:#ffedd5;--circle-large:#ffffff1a;--circle-small:#ffffff14;--grad-header:linear-gradient(135deg, #38bdf8, #0ea5e9, #0284c7);--grad-button:linear-gradient(90deg, #0ea5e9, #0284c7);--grad-teal:linear-gradient(135deg, #0f766e, #2dd4bf);--grad-scrolled-under:linear-gradient(180deg, #00000014, transparent);--grad-slate:linear-gradient(135deg, #475569, #94a3b8);--shadow-card:0 6px 16px #00000014;--shadow-header:0 10px 24px #0284c747;--shadow-button:0 5px 12px #0284c733;--shadow-tile:0 2px 8px #00000014;--shadow-logo:0 7px 16px #0003;--shadow-nav:0 -4px 18px #00000014;--space-xs:4px;--space-sm:8px;--space-md:14px;--space-lg:22px;--gutter:16px;--radius-sm:10px;--radius-tile:18px;--radius-md:14px;--radius-card:22px;--radius-nav:28px;--radius-panel:30px;--radius-header:40px;--button-height:46px;--touch-min:44px;--card-padding:16px;--nav-height:74px;--floating-space:56px;--header-overlap:48px;--page-max-width:500px;--dialog-max-width:340px;--calendar-cell:46px;--calendar-gap:3px;--legend-dot:12px;--menu-group-gap:18px;--face-scan-max:340px;--face-ring:4px;--ease:cubic-bezier(.215, .61, .355, 1);--duration:.22s;color:var(--text-body);font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;line-height:1.35}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}html,body{overscroll-behavior-y:contain}body{background:var(--page-bg);-webkit-tap-highlight-color:transparent;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}.text-section-title{color:var(--text-title);font-size:20px;font-weight:800}.text-card-title{color:var(--text-title);font-size:15px;font-weight:700}.text-caption{color:var(--text-subtle);font-size:11.5px;font-weight:600}.text-body{color:var(--text-body);font-size:13px}.text-value{color:var(--text-title);font-size:20px;font-weight:800}.stack{gap:var(--space-md);flex-direction:column;display:flex}.row{align-items:center;gap:var(--space-sm);display:flex}.row-between{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important}}.logo-box{border-radius:var(--radius-card);background:#fff;place-items:center;width:110px;height:110px;padding:12px;display:grid;box-shadow:0 7px 16px #0003}.logo-image{object-fit:contain;width:86px;height:86px}.splash{justify-content:center;align-items:center;gap:var(--space-lg);background:var(--grad-header);flex-direction:column;min-height:100vh;display:flex}.login{background:var(--grad-header);flex-direction:column;min-height:100vh;display:flex}.login-header{padding:calc(env(safe-area-inset-top) + 20px) 24px 18px;color:#fff;text-align:center;flex-direction:column;align-items:center;display:flex}.login-header-compact{padding-top:calc(env(safe-area-inset-top) + 12px);padding-bottom:12px}.login-brand{margin-top:var(--space-md);font-size:26px;font-weight:800}.login-tagline{margin-top:var(--space-xs);color:var(--sky-100);font-size:13px}.login-welcome{margin-top:var(--space-md);font-size:22px;font-weight:700}.login-subtitle{color:var(--sky-100);margin-top:6px;font-size:14px}.login-header-compact .login-welcome{margin-top:0;font-size:18px}.login-header-compact .login-subtitle{font-size:12.5px}.login-panel{width:100%;max-width:var(--page-max-width);padding:var(--space-lg) var(--space-lg) calc(env(safe-area-inset-bottom) + 22px);border-radius:var(--radius-panel) var(--radius-panel) 0 0;background:#fff;flex-direction:column;flex:1;margin:0 auto;display:flex}.login-fields{gap:var(--space-md);flex-direction:column;display:flex}.login-footer{margin-top:var(--space-md);color:var(--text-muted);text-align:center;font-size:12px}.login-link{color:var(--sky-600);background:0 0;border:0;padding:0;font-weight:700}.login-copyright{color:var(--text-light);margin-top:6px;font-size:11px}.center-button{border-radius:var(--radius-nav);color:#fff;border:4px solid #fff;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:76px;height:76px;padding:0;display:flex;position:absolute;top:-18px;left:10px}.center-button:disabled{cursor:default}.center-label{max-width:100%;font-size:10.5px;font-weight:700}.center-content{max-width:100%;animation:value-in .18s var(--ease);flex-direction:column;align-items:center;gap:2px;display:flex}.greeting{justify-content:space-between;align-items:flex-start;gap:var(--space-md);color:#fff;display:flex}.greeting-left{align-items:flex-start;gap:var(--space-xs);flex-direction:column;min-width:0;display:flex}.greeting-hello{color:var(--sky-100);font-size:13px;font-weight:600}.greeting-name{max-width:100%;margin-bottom:var(--space-sm);text-overflow:ellipsis;white-space:nowrap;font-size:28px;font-weight:800;overflow:hidden}.greeting-right{text-align:right;flex-shrink:0}.greeting-time{font-size:24px;font-weight:800}.greeting-date{color:var(--sky-100);font-size:11.5px}.home-site{margin-top:var(--space-lg)}.site-card{align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);color:#fff;border:1px solid;display:flex}.site-card-inside{background:var(--on-grad-inside-bg);border-color:var(--on-grad-inside-border)}.site-card-outside{background:var(--on-grad-outside-bg);border-color:var(--on-grad-outside-border)}.site-card-body{min-width:0}.site-card-title{text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:700;overflow:hidden}.site-card-message,.site-card-warning{font-size:11.5px;font-weight:600}.site-card-inside .site-card-message{color:var(--on-grad-inside-text)}.site-card-outside .site-card-message,.site-card-warning{color:var(--on-grad-outside-text)}.attendance-card{align-items:stretch;display:flex}.attendance-col{gap:var(--space-sm);flex-direction:column;flex:1;min-width:0;display:flex}.attendance-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.attendance-divider{background:var(--divider);flex:0 0 1px;margin:0 11px}.attendance-state{font-size:11.5px;font-weight:600}.attendance-state-success{color:var(--success)}.attendance-state-warning{color:var(--warning)}.attendance-state-neutral{color:var(--text-subtle)}.home-body{padding:0 var(--gutter);flex-direction:column;gap:24px;display:flex}.quick-grid{gap:var(--space-sm);grid-template-columns:repeat(4,1fr);display:grid}.quick-tile{align-items:center;gap:var(--space-xs);min-width:0;color:var(--text-dark);background:0 0;border:0;flex-direction:column;padding:0;display:flex}.quick-icon{border-radius:var(--radius-tile);width:100%;height:50px;box-shadow:var(--shadow-tile);color:var(--sky-500);background:#fff;place-items:center;display:grid}.quick-label{text-align:center;font-size:11.5px;font-weight:600;line-height:1.2}.face-pill{bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 18px + 8px);z-index:11;min-height:var(--touch-min);box-shadow:var(--shadow-card);color:var(--sky-600);opacity:0;visibility:hidden;transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;background:#fff;border:0;border-radius:999px;align-items:center;gap:6px;padding:10px 14px;font-size:12px;font-weight:700;display:inline-flex;position:fixed;left:50%;transform:translate(-50%)scale(.8)}.face-pill-visible{opacity:1;visibility:visible;transition-delay:0s;transform:translate(-50%)scale(1)}.home-body-top{padding-top:var(--space-lg)}