:root{--blue: #4f46e5;--blue-dark: #3730a3;--blue-light: #eef2ff;--bg: #f8fafc;--surface: #ffffff;--surface-alt: #f1f5f9;--text: #0f172a;--text-muted: #64748b;--border: rgba(15, 23, 42, .09);--green: #059669;--green-light: #d1fae5;--red: #dc2626;--red-light: #fee2e2;--amber: #d97706;--amber-light: #fef3c7;--gold: #d97706;--gold-light: #fef3c7;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--page-pad-x: clamp(16px, 4vw, 24px);--touch-min: 44px;--header-h: 3.5rem;--nav-h: 4rem;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow: 0 4px 16px rgba(15, 23, 42, .08);--shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);--font: "Inter", system-ui, -apple-system, sans-serif;--focus-ring: 0 0 0 3px rgba(79, 70, 229, .22);color-scheme:light}[data-theme=dark]{--blue: #818cf8;--blue-dark: #a5b4fc;--blue-light: #1e1b4b;--bg: #0b0f1a;--surface: #131827;--surface-alt: #1c2438;--text: #f1f5f9;--text-muted: #94a3b8;--border: rgba(241, 245, 249, .1);--green: #34d399;--green-light: #064e3b;--red: #f87171;--red-light: #7f1d1d;--amber: #fbbf24;--amber-light: #78350f;--gold: #fbbf24;--gold-light: #78350f;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);--shadow: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);--focus-ring: 0 0 0 3px rgba(129, 140, 248, .35);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}body{padding-bottom:env(safe-area-inset-bottom)}#app{min-height:100dvh}a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.18em}a:hover{color:var(--blue-dark)}:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn,.btn-primary,.btn-secondary,.btn-danger,.btn-warning,.btn-ghost,.btn-link-like{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:var(--touch-min);padding:0 1.1rem;border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font);font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s,color .18s,transform .12s}.btn:disabled,.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover:not(:disabled){background:var(--blue-dark);color:#fff}.btn-secondary,.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}.btn-secondary:hover,.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}.btn-danger{background:var(--red);color:#fff}.btn-warning{background:var(--amber);color:#fff}.btn-link-like{background:transparent;color:var(--blue);min-height:auto;padding:.25rem 0;font-weight:500}.btn-small{min-height:2.25rem;padding:0 .75rem;font-size:.85rem}.btn-theme-toggle,.btn-logout,.btn-info-help,.btn-icon{min-width:var(--touch-min);min-height:var(--touch-min);padding:0;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}.btn-camera-scan{width:100%;min-height:3rem;background:var(--blue-light);color:var(--blue-dark);border:1px solid transparent;border-radius:var(--radius);font-weight:700}.input-std,.field input,.field select,.field textarea,.pin-input{width:100%;min-height:var(--touch-min);padding:0 .85rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;color:var(--text);background:var(--surface)}.field textarea{min-height:5rem;padding:.75rem .85rem;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.input-std:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--blue)}.app-login-label,.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.35rem}.field{display:grid;gap:0}.form{display:grid;gap:1rem}.password-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}.page{min-height:100dvh;display:flex;flex-direction:column}.page-pad{padding:1.25rem var(--page-pad-x) 2rem;width:100%;max-width:72rem;margin:0 auto}.auth-page{min-height:100dvh;display:grid;place-items:center;padding:1.5rem var(--page-pad-x);background:radial-gradient(ellipse 80% 50% at 10% -10%,var(--blue-light),transparent 55%),radial-gradient(ellipse 60% 40% at 100% 0%,var(--green-light),transparent 50%),var(--bg)}.auth-card,.panel-card{width:100%;max-width:26rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.5rem}.auth-card h1,.panel-card h1{margin:0 0 .35rem;font-size:1.35rem;font-weight:800;letter-spacing:-.02em}.auth-lead{margin:0 0 1.25rem;color:var(--text-muted);font-size:.95rem}.auth-brand{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;color:var(--text);text-decoration:none;font-weight:800;font-size:1.1rem}.auth-brand:hover{color:var(--blue)}.form-footer{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;margin-top:.25rem;font-size:.9rem}.alert{padding:.75rem .9rem;border-radius:var(--radius-sm);font-size:.92rem}.alert-error,.alert[data-tone=error]{background:var(--red-light);color:var(--red)}.alert-ok,.alert[data-tone=success]{background:var(--green-light);color:var(--green)}.alert-info,.alert[data-tone=info]{background:var(--blue-light);color:var(--blue-dark)}.alert-warning,.alert[data-tone=warning]{background:var(--amber-light);color:var(--amber)}.toast-container{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translate(-50%);z-index:5000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;width:min(92vw,22rem)}.toast{background:#0f172a;color:#fff;padding:.75rem 1rem;border-radius:999px;font-size:.9rem;font-weight:600;text-align:center;box-shadow:var(--shadow-lg)}[data-theme=dark] .toast{background:#f1f5f9;color:#0f172a}.chip,.user-role-badge,.status-indicator,.scan-count-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;background:var(--blue-light);color:var(--blue-dark)}.status-indicator[data-online=true]{background:var(--green-light);color:var(--green)}.status-indicator[data-online=false]{background:var(--amber-light);color:var(--amber)}.status-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;padding:.35rem .75rem;border-radius:999px;background:var(--green-light);color:var(--green)}.status-pill[data-ok=false]{background:var(--red-light);color:var(--red)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:var(--header-h);padding:.5rem var(--page-pad-x);padding-top:calc(.5rem + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.app-header__brand{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:var(--text);text-decoration:none}.app-header__actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.app-nav{display:flex;gap:.25rem;padding:.4rem var(--page-pad-x);background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto}.nav-tab{flex:1 1 0;min-width:4.5rem;min-height:var(--touch-min);padding:.35rem .5rem;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer}.nav-tab[aria-selected=true],.nav-tab.is-active{background:var(--blue-light);color:var(--blue-dark)}.app-main{flex:1;padding:1.25rem var(--page-pad-x) 2rem;max-width:56rem;margin:0 auto;width:100%}.scan-card,.stat-card,.panel,.landing-feature-card,.class-picker-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.15rem}.stat-card{text-align:left}.stat-card__label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.stat-card__value{font-size:1.75rem;font-weight:800;margin-top:.25rem}.stat-card--primary .stat-card__value{color:var(--blue)}.stat-card--warning .stat-card__value{color:var(--amber)}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media(min-width:600px){.stat-grid{grid-template-columns:repeat(4,1fr)}}.scan-pulse{width:5.5rem;height:5.5rem;margin:.75rem auto;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--blue-light);color:var(--blue-dark);border:3px solid var(--blue)}.scan-pulse[data-state=success]{background:var(--green-light);color:var(--green);border-color:var(--green)}.scan-pulse[data-state=error]{background:var(--red-light);color:var(--red);border-color:var(--red)}.scan-pulse[data-state=warning]{background:var(--amber-light);color:var(--amber);border-color:var(--amber)}.landing-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem var(--page-pad-x);padding-top:calc(.85rem + env(safe-area-inset-top));background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}.landing-header__nav{display:none;gap:1.25rem;font-size:.9rem;font-weight:500}.landing-header__nav a{color:var(--text);text-decoration:none}.landing-header__nav a:hover{color:var(--blue)}.landing-header__actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.landing-hero{position:relative;padding:2.5rem var(--page-pad-x) 3rem;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 0% 0%,var(--blue-light),transparent 55%),radial-gradient(ellipse 70% 50% at 100% 20%,#ecfdf5,transparent 45%),var(--bg)}[data-theme=dark] .landing-hero{background:radial-gradient(ellipse 90% 70% at 0% 0%,#1e1b4b,transparent 55%),radial-gradient(ellipse 70% 50% at 100% 20%,#064e3b55,transparent 45%),var(--bg)}.landing-kicker{margin:0 0 .75rem;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}.landing-hero h1{margin:0 0 .75rem;font-size:clamp(1.85rem,5.5vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;max-width:18ch}.landing-hero h1 em{font-style:normal;color:var(--blue)}.landing-sub{margin:0 0 1.5rem;max-width:36rem;color:var(--text-muted);font-size:1.05rem}.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}.trust-row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0;padding:0;list-style:none;color:var(--text-muted);font-size:.88rem;font-weight:500}.stats-band{display:grid;grid-template-columns:1fr;gap:1rem;padding:1.75rem var(--page-pad-x);background:var(--surface);border-block:1px solid var(--border)}.stats-band strong{display:block;font-size:1.35rem;font-weight:800}.stats-band span{color:var(--text-muted);font-size:.9rem}.landing-section{padding:2.5rem var(--page-pad-x);max-width:72rem;margin:0 auto}.landing-section h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}.landing-section>.muted{margin:0 0 1.5rem;color:var(--text-muted);max-width:36rem}.feature-grid{display:grid;grid-template-columns:1fr;gap:.85rem}.landing-feature-card h3{margin:0 0 .35rem;font-size:1rem;font-weight:700}.landing-feature-card p{margin:0;color:var(--text-muted);font-size:.92rem}.flow-steps{display:grid;gap:.85rem;margin:0;padding:0;list-style:none;counter-reset:step}.flow-steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.flow-steps li:before{content:counter(step);width:2rem;height:2rem;display:grid;place-items:center;border-radius:999px;background:var(--blue);color:#fff;font-weight:800;font-size:.85rem}.cta-band{margin:1rem var(--page-pad-x) 2rem;padding:2rem 1.5rem;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;text-align:center}.cta-band h2{margin:0 0 .5rem;font-size:1.45rem;font-weight:800}.cta-band p{margin:0 0 1.25rem;opacity:.9}.cta-band .btn-primary{background:#fff;color:var(--blue-dark)}.landing-footer{padding:2rem var(--page-pad-x);border-top:1px solid var(--border);color:var(--text-muted);font-size:.9rem}.landing-footer strong{color:var(--text)}.muted{color:var(--text-muted)}.placeholder-panel h2{margin:0 0 .5rem;font-size:1.15rem;font-weight:800}@media(min-width:768px){.landing-header__nav{display:flex}.stats-band,.feature-grid,.flow-steps{grid-template-columns:repeat(3,1fr)}}@media(max-width:599px){.landing-header__actions .btn-secondary{display:none}.cta-row .btn,.form .btn-primary{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}