:root{
  --ink:#0B0F0D;--ink2:#121815;--ink3:#1A221E;--paper:#FAFAF7;--white:#fff;--line:#E9E7E1;--muted:#5F6661;
  --g:#1FA35B;--g2:#E7F6EE;--y:#F4B400;--y2:#FFF6DB;--r:#E2412E;--r2:#FDECEA;--b:#2F7DF6;--b2:#EAF2FF;--o:#F07C2B;
  --grad:linear-gradient(90deg,#1FA35B 0%,#9CC63B 25%,#F4B400 50%,#F07C2B 72%,#E2412E 100%);
  --rad:18px;--f-head:'Sora',system-ui,sans-serif;--f-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.2;letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.stack>*+*{margin-top:12px}
.hidden{display:none!important}

/* wordmark */
.mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:700;font-size:18px}
.mark .logo{width:34px;height:34px;border-radius:10px;background:var(--ink3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);display:grid;place-items:center;position:relative;overflow:hidden}
.mark .logo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.mark .logo svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
.mark b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* demo banner */
.demo-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--y2);color:#7A5A00;border:1px solid #F2DC94}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14.5px;transition:transform .15s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:#fff}
.btn-green{background:var(--g);color:#fff}
.btn-red{background:var(--r);color:#fff}
.btn-blue{background:var(--b);color:#fff}
.btn-line{border:1px solid var(--line);background:#fff}
.btn-soft{background:#F1F0EB}
.btn-block{width:100%}
.btn-sm{padding:8px 13px;font-size:13px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* cards & bits */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:#F1F0EB;color:var(--ink3)}
.pill.g{background:var(--g2);color:#11703C}.pill.r{background:var(--r2);color:#A8251A}.pill.y{background:var(--y2);color:#7A5A00}.pill.b{background:var(--b2);color:#1B55B3}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--f-head);flex:none}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:#fff;outline:none;font-size:14.5px}
.input:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(31,163,91,.15)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sep{height:1px;background:var(--line);margin:14px 0}
.list>*{border-bottom:1px solid var(--line)}
.list>*:last-child{border-bottom:0}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:500;opacity:0;transition:.3s;z-index:999;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* health card */
.hcard{width:100%;aspect-ratio:1.586;border-radius:16px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0F3B26 0%,#0B0F0D 70%);padding:16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.hcard::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(244,180,0,.25),transparent 45%),radial-gradient(circle at 10% 100%,rgba(31,163,91,.35),transparent 50%)}
.hcard>*{position:relative}
.hcard .flag{display:flex;height:5px;width:46px;border-radius:3px;overflow:hidden}
.hcard .flag i{flex:1}
.hcard .t1{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.hcard .t2{font-family:var(--f-head);font-weight:700;font-size:15px}
.hcard .num{font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:.06em}
.hcard .qr{background:#fff;padding:5px;border-radius:8px;line-height:0}
.hcard .strip{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad)}
.hcard.back{background:#F6F5F0;color:var(--ink)}
.hcard.back::before{display:none}
.hcard.special{background:linear-gradient(135deg,#3a2c05 0%,#0B0F0D 70%)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid #E4E2DC;border-top-color:var(--g);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}