:root{--bg-dark:#07090e;--bg-card:#0f172abf;--bg-card-hover:#1e293bd9;--bg-input:#0f172ae6;--border-subtle:#ffffff14;--border-accent:#6366f166;--border-glow:#06b6d480;--accent-primary:#6366f1;--accent-primary-hover:#4f46e5;--accent-cyan:#06b6d4;--accent-emerald:#10b981;--accent-rose:#f43f5e;--accent-amber:#f59e0b;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--shadow-card:0 10px 30px -10px #00000080, 0 0 0 1px var(--border-subtle);--shadow-glow:0 0 25px -5px #6366f159;--shadow-emerald:0 0 25px -5px #10b98159;--shadow-rose:0 0 25px -5px #f43f5e59;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-display:"Outfit", "Inter", sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 0 0,#6366f11f 0,#0000 50%),radial-gradient(at 100% 0,#06b6d41a 0,#0000 50%),radial-gradient(at 50% 100%,#0f172acc 0,#0000 50%);background-attachment:fixed;min-height:100vh;line-height:1.5}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:#ffffff26}::-webkit-scrollbar-thumb:hover{background:#ffffff40}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #6366f166}50%{box-shadow:0 0 30px #6366f1cc}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:.35s cubic-bezier(.16,1,.3,1) forwards fadeIn}.animate-spin{animation:1s linear infinite spin}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:all .25s}.glass-panel:hover{border-color:#ffffff1f}.btn-primary{background:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-cyan) 100%);color:#fff;font-family:var(--font-display);border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex;box-shadow:0 4px 15px #6366f14d}.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 20px #6366f180}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{color:var(--text-main);border:1px solid var(--border-subtle);font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;background:#ffffff0d;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-secondary:hover:not(:disabled){background:#ffffff1a;border-color:#fff3}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.badge{border-radius:var(--radius-full);letter-spacing:.02em;text-transform:uppercase;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-emerald{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.badge-rose{color:#fb7185;background:#f43f5e26;border:1px solid #f43f5e4d}.badge-amber{color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d}.badge-cyan{color:#38bdf8;background:#06b6d426;border:1px solid #06b6d44d}.input-field{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-main);font-family:var(--font-sans);outline:none;padding:.75rem 1rem;font-size:.95rem;transition:all .2s}.input-field:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f133}.input-field::placeholder{color:var(--text-dim)}.app-navbar{-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);z-index:100;background:#07090ed9;justify-content:space-between;align-items:center;padding:.875rem 2rem;transition:padding .2s;display:flex;position:sticky;top:0}.app-navbar-brand{align-items:center;gap:.85rem;display:flex}.app-navbar-logo{object-fit:contain;width:auto;height:28px}.app-navbar-divider{background:var(--border-subtle);width:1px;height:20px}.app-navbar-subtitle{color:var(--text-muted);font-size:.725rem}.login-container{justify-content:center;align-items:center;min-height:calc(100vh - 75px);padding:2rem 1.25rem;display:flex}.login-card{border:1px solid #ffffff1a;width:100%;max-width:440px;padding:2.5rem;position:relative;overflow:hidden;box-shadow:0 20px 50px -10px #000000b3,0 0 40px #6366f126}.view-container{width:100%;max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem 5rem}.view-header{text-align:center;margin-bottom:2.5rem}.view-title{font-family:var(--font-display);letter-spacing:-.03em;background:linear-gradient(#fff 30%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.75rem;font-size:clamp(1.65rem,4.5vw,2.6rem);font-weight:800;line-height:1.2}.view-description{max-width:650px;color:var(--text-muted);margin:0 auto;font-size:clamp(.875rem,2.2vw,1rem);line-height:1.6}.picture-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.75rem;margin-bottom:2.5rem;display:grid}.picture-card{flex-direction:column;padding:1.75rem;display:flex}.dropzone-container{border-radius:var(--radius-md);background:#00000040;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:280px;transition:all .2s;display:flex;position:relative;overflow:hidden}.dropzone-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.85rem;width:100%;height:100%;padding:1.5rem 1rem;display:flex}.selfie-action-group{flex-wrap:wrap;justify-content:center;gap:.65rem;width:100%;display:flex}.btn-verify-wrapper{text-align:center;margin-bottom:3rem}.btn-verify-main{border-radius:var(--radius-full);width:100%;max-width:440px;padding:.95rem 2rem;font-size:1.05rem}.results-panel{padding:2.25rem}.results-header{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.75rem;padding-bottom:1.5rem;display:flex}.results-header-left{align-items:center;gap:1.25rem;display:flex}.status-icon-box{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex}.status-title{font-family:var(--font-display);margin-top:.25rem;font-size:clamp(1.2rem,3.5vw,1.6rem);font-weight:800;line-height:1.25}.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.25rem;display:grid}.metric-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#0000004d;padding:1.25rem}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:200;background:#000000d9;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-panel{border-radius:var(--radius-lg);border:1px solid #ffffff26;width:100%;max-width:560px;padding:1.5rem}.webcam-viewport{border-radius:var(--radius-md);background:#000;justify-content:center;align-items:center;width:100%;height:340px;display:flex;position:relative;overflow:hidden}.modal-actions{justify-content:flex-end;gap:.75rem;margin-top:1.25rem;display:flex}@media (width<=768px){.app-navbar{padding:.75rem 1rem}.app-navbar-subtitle{display:none}.login-container{min-height:calc(100vh - 65px);padding:1rem .85rem}.login-card{padding:1.75rem 1.25rem}.view-container{padding:1.5rem 1rem 3.5rem}.view-header{margin-bottom:1.75rem}.picture-grid{gap:1.25rem;margin-bottom:1.75rem}.picture-card{padding:1.25rem}.dropzone-container{min-height:240px}.btn-verify-wrapper{margin-bottom:2rem}.btn-verify-main{padding:.85rem 1.5rem;font-size:.95rem}.results-panel{padding:1.25rem}.results-header-left{gap:.85rem}.status-icon-box{border-radius:12px;width:44px;height:44px}.modal-overlay{padding:.75rem}.modal-panel{padding:1rem}.webcam-viewport{height:260px}}@media (width<=480px){.app-navbar-brand{gap:.65rem}.app-navbar-divider{display:none}.selfie-action-group{flex-direction:column}.selfie-action-group .btn-primary,.selfie-action-group .btn-secondary{justify-content:center;width:100%}.results-header{flex-direction:column;align-items:flex-start}.results-header button{justify-content:center;width:100%}.modal-actions{flex-direction:column-reverse}.modal-actions button{justify-content:center;width:100%}}