:root{--navy: #0a1d38;--navy-2: #0f2750;--green: #2e6b3a;--green-dark: #245a2f;--text: #1a1a1a;--muted: #6b7280;--border: #e5e7eb;--bg: #ffffff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;height:100%;background:#fff;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;color:var(--text);overscroll-behavior:none}.app{min-height:100dvh;display:flex;flex-direction:column;background:#fff;max-width:480px;margin:0 auto;position:relative}.body{flex:1;display:flex;flex-direction:column;background:var(--bg);padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}.header{background:var(--navy);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 10px) 22px 28px;position:relative;overflow:hidden}.header:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 0%,rgba(36,165,226,.08),transparent 60%);pointer-events:none}.header-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.bi-mark{width:clamp(36px,11vw,46px);height:clamp(36px,11vw,46px);display:block}.dots{font-size:clamp(24px,7vw,30px)}.bg-drift{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.drift-item{position:absolute;display:block;will-change:transform;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.drift-rot{display:block}@keyframes drift-a{0%{transform:translate3d(-40px,-20px,0)}to{transform:translate3d(140px,110px,0)}}@keyframes drift-b{0%{transform:translate3d(30px,-30px,0)}to{transform:translate3d(-170px,100px,0)}}@keyframes drift-c{0%{transform:translate3d(-50px,40px,0)}to{transform:translate3d(130px,-120px,0)}}@keyframes drift-d{0%{transform:translate3d(40px,30px,0)}to{transform:translate3d(-130px,-130px,0)}}@media (prefers-reduced-motion: reduce){.drift-item{animation:none}}.dots{background:transparent;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}.avatar-wrap{display:flex;flex-direction:column;align-items:center;margin-top:8px;position:relative;z-index:1}.avatar{width:clamp(110px,34vw,160px);height:clamp(110px,34vw,160px);border-radius:50%;object-fit:cover;background:#d9d9d9;border:2px solid #fff2}.avatar-placeholder{display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:40px;background:#d9d9d9}.name{font-size:clamp(20px,6.2vw,27px);font-weight:800;margin-top:14px;letter-spacing:.2px;text-align:center}.meta{font-size:clamp(14px,4.4vw,18px);color:#d5deec;margin-top:6px;text-align:center}.meta b{color:#fff;font-weight:700}.dob{font-size:clamp(14px,4.4vw,18px);color:#d5deec;margin-top:3px;text-align:center}.card-area{flex:1;padding:26px 20px 28px;display:flex;flex-direction:column;align-items:center}.school{font-size:clamp(18px,5.6vw,26px);font-weight:800;margin:28px 0 24px;text-align:center}.valid-card{width:100%;background:var(--green);color:#fff;border-radius:4px;padding:20px 22px;display:flex;align-items:center;gap:16px;box-shadow:0 1px #0000000d}.valid-card>div:last-child{flex:1;text-align:center}.valid-card .check{width:clamp(42px,13vw,54px);height:clamp(42px,13vw,54px);border-radius:50%;background:#fff;color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:30px;font-weight:900}.valid-card .label{font-size:clamp(13px,4vw,17px);opacity:.95}.valid-card .big{font-size:clamp(20px,6.4vw,27px);font-weight:800;line-height:1.15}.valid-until{margin-top:18px;font-size:clamp(13px,4vw,16px);color:#111;font-weight:600}.toggle{display:flex;background:#eef0f3;border-radius:6px;padding:5px;width:100%;max-width:420px;margin-top:4px}.toggle button{flex:1;background:transparent;border:none;padding:12px 10px;font-size:clamp(13px,4vw,16px);font-weight:700;color:#111;border-radius:4px;cursor:pointer}.toggle button.active{background:var(--navy);color:#fff}.s-mark{width:56px;height:56px;margin-top:22px}.pill{background:var(--green);color:#fff;font-weight:800;letter-spacing:.5px;padding:12px 26px;border-radius:4px;font-size:14px}.barcode-wrap{margin-top:14px;text-align:center}.barcode-number{font-size:14px;color:#111;margin-top:6px;letter-spacing:1px}.biso-header{display:flex;gap:10px;align-items:center;margin-bottom:14px}.biso-logo{width:44px;height:44px}.biso-title{font-size:14px;font-weight:700;color:#111;line-height:1.15}.row{display:flex;align-items:center;gap:14px;width:100%;padding:16px 4px;border-top:1px solid var(--border)}.row:last-child{border-bottom:1px solid var(--border)}.row .icon{width:38px;height:38px;border:1.5px solid #111;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}.row .txt{flex:1}.row .txt .t{font-weight:800;font-size:15px}.row .txt .s{color:var(--muted);font-size:13px;margin-top:2px}.row .chev{color:#9ca3af;font-size:22px}.tabbar{display:flex;background:#fff;border-top:1px solid var(--border);padding:0;position:fixed;left:50%;transform:translate(-50%);bottom:0;width:100%;max-width:480px;z-index:1000}.tabbar button{flex:1;background:transparent;border:none;color:#9ca3af;font-size:clamp(10px,3vw,12px);display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 2px);cursor:pointer;font-weight:600}.tabbar button.active{color:var(--navy)}.tabbar button svg{display:block}.settings{min-height:100dvh;background:#f7f8fa;display:flex;flex-direction:column;max-width:480px;margin:0 auto}.settings header{background:var(--navy);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;display:flex;align-items:center;gap:12px}.settings header button{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px}.settings header h1{margin:0;font-size:18px;font-weight:700}.settings form{padding:18px 16px 28px;display:flex;flex-direction:column;gap:16px}.settings label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#374151}.settings input,.settings select{padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-size:15px;background:#fff;color:#111;font-family:inherit}.settings .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings .img-row{display:flex;gap:14px;align-items:center}.settings .img-row .preview{width:72px;height:72px;border-radius:50%;background:#e5e7eb;object-fit:cover;flex-shrink:0}.settings .save{margin-top:8px;background:var(--navy);color:#fff;border:none;padding:14px;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer}.settings .admin-link{margin-top:4px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;padding:12px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}.settings .logout{margin-top:4px;background:transparent;color:#b91c1c;border:1px solid #fecaca;padding:12px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}.login-shell{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:#0f172a;color:#e5e7eb}.login-card{width:100%;max-width:360px;background:#111c30;border:1px solid #1f2b44;border-radius:8px;padding:28px 22px}.login-card .brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.login-card .brand-mark{width:42px;height:42px;border-radius:4px;background:linear-gradient(135deg,#3b82f6,#0ea5e9);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;letter-spacing:.5px}.login-card .brand-name{font-size:20px;font-weight:800;color:#fff}.login-card .login-hint{color:#9ca3af;font-size:14px;margin:0 0 14px}.login-card form{display:flex;flex-direction:column;gap:12px}.login-card input{background:#0b1425;border:1px solid #1f2b44;color:#fff;padding:14px 16px;border-radius:6px;font-size:16px;font-family:inherit}.login-card input.otp{letter-spacing:10px;text-align:center;font-size:22px;font-weight:700}.login-card button[type=submit]{background:#3b82f6;color:#fff;border:none;padding:14px;border-radius:6px;font-size:15px;font-weight:700;cursor:pointer}.login-card button[type=submit]:disabled{opacity:.6}.login-card button.link{background:transparent;border:none;color:#60a5fa;font-size:13px;cursor:pointer;padding:4px 0}.login-error{margin-top:12px;color:#fca5a5;font-size:13px;text-align:center}.login-spinner{width:32px;height:32px;border:3px solid #1f2b44;border-top-color:#60a5fa;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}