:root{--canvas: #fbfcff;--canvas-2: #eef1f9;--surface: #ffffff;--surface-2: #f6f8ff;--ink: #0b1020;--ink-soft: #3a4256;--muted: #7a8499;--muted-2: #9aa3b5;--line: #e9edf6;--line-2: #dfe5f1;--primary: #6d5ef6;--primary-2: #3b82f6;--primary-ink: #4b3fd6;--accent: #2dd4bf;--grad: linear-gradient(135deg, #6d5ef6 0%, #3b82f6 100%);--grad-soft: linear-gradient(135deg, rgba(109, 94, 246, .12), rgba(59, 130, 246, .12));--active: #0ea672;--active-bg: #dcf6ec;--warn: #d97706;--warn-bg: #fdf0dd;--danger: #e11d48;--danger-bg: #fce4ee;--radius: 18px;--radius-sm: 12px;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgba(11, 16, 32, .05), 0 2px 6px rgba(45, 55, 90, .06);--shadow: 0 10px 30px -12px rgba(45, 55, 90, .28);--shadow-lg: 0 30px 70px -24px rgba(20, 26, 50, .5);--sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;--display: "General Sans", "Satoshi", system-ui, sans-serif;--stage: #e7ebf6}:root[data-theme=dark]{--canvas: #0a0d18;--canvas-2: #11162a;--surface: #141a2c;--surface-2: #1b2238;--ink: #eef2fb;--ink-soft: #c5cde0;--muted: #8a93ad;--muted-2: #626b88;--line: #242c46;--line-2: #313a5c;--primary: #7c6ff8;--primary-2: #4f93ff;--primary-ink: #b9aeff;--accent: #2dd4bf;--grad: linear-gradient(135deg, #7c6ff8 0%, #4f93ff 100%);--grad-soft: linear-gradient(135deg, rgba(124, 111, 248, .22), rgba(79, 147, 255, .2));--active: #3ddc97;--active-bg: #11301f;--warn: #f0b357;--warn-bg: #382a12;--danger: #fb6f9c;--danger-bg: #381726;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);--shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .8);--stage: #05070f}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{font-family:var(--sans);background:var(--stage);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}input{font-family:inherit}h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.15}.muted{color:var(--muted)}.soft{color:var(--ink-soft)}.row{display:flex;align-items:center}.col{display:flex;flex-direction:column}.between{justify-content:space-between}.center{align-items:center;justify-content:center}.grow{flex:1}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.tiny{font-size:12.5px}.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}.stage{height:100%;display:grid;place-items:center;padding:22px;background:radial-gradient(120% 80% at 50% 0%,rgba(109,94,246,.1),transparent 60%),var(--stage)}.device{width:412px;height:min(880px,calc(100vh - 44px));background:var(--canvas);border-radius:44px;border:10px solid #0c1020;box-shadow:var(--shadow-lg);overflow:hidden;position:relative;display:flex;flex-direction:column}.device:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:120px;height:26px;background:#0c1020;border-radius:0 0 16px 16px;z-index:30}@media (max-width: 480px){.stage{padding:0}.device{width:100%;height:100%;border-radius:0;border:none}.device:before{display:none}}.screen{display:flex;flex-direction:column;height:100%;background:var(--canvas)}.opbar{display:flex;align-items:center;gap:10px;padding:30px 18px 14px;flex:none}.opbar .title{font-family:var(--display);font-weight:600;font-size:17px}.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink);flex:none}.icon-btn:active{background:var(--surface-2)}.body{flex:1;overflow-y:auto;padding:6px 18px 24px}.foot{flex:none;padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}.h-lg{font-size:24px;font-weight:600}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;width:100%;padding:0 18px;border-radius:15px;font-weight:600;font-size:15.5px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);transition:transform .1s,box-shadow .15s}.btn:active{transform:scale(.985)}.btn-primary{background:var(--grad);color:#fff;border:none;box-shadow:0 12px 26px -12px #6d5ef6cc}.btn-success{background:var(--active);color:#fff;border:none}.btn-ghost{background:transparent;border-color:transparent}.btn-sm{height:42px;font-size:14px;border-radius:12px}.btn:disabled{opacity:.5}.tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:transform .12s,border-color .12s}.tile:active{transform:scale(.99)}.tile.selected{border-color:var(--primary);box-shadow:0 0 0 3px #6d5ef629}.tile-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}.tile-nm{font-weight:600;font-size:15.5px}.tile-sub{font-size:12.5px;color:var(--muted);margin-top:2px}.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;text-transform:capitalize}.badge-active{background:var(--active-bg);color:var(--active)}.badge-warn{background:var(--warn-bg);color:var(--warn)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-soft{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}.dot{width:6px;height:6px;border-radius:50%;background:currentColor}.section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 2px 10px}.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}.seg button{flex:1;height:38px;border-radius:10px;font-weight:600;font-size:13px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px}.seg button.on{background:var(--surface);color:var(--primary-ink);box-shadow:var(--shadow-sm)}.viewfinder{position:relative;width:100%;aspect-ratio:1;border-radius:28px;background:linear-gradient(160deg,#0c1228,#131a36);overflow:hidden;display:grid;place-items:center;color:#ffffff80}.viewfinder .frame{position:absolute;top:36px;right:36px;bottom:36px;left:36px;border-radius:20px}.viewfinder .frame span{position:absolute;width:34px;height:34px;border:3px solid var(--accent)}.viewfinder .frame .tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:14px 0 0}.viewfinder .frame .tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 14px 0 0}.viewfinder .frame .bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 14px}.viewfinder .frame .br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 14px}.scanline{position:absolute;left:36px;right:36px;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 14px var(--accent);animation:scan 2.4s ease-in-out infinite}@keyframes scan{0%,to{top:40px}50%{top:calc(100% - 40px)}}.result{text-align:center;padding:8px 0 4px}.result-ic{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:6px auto 16px;color:#fff}.ic-ok{background:var(--active);box-shadow:0 14px 34px -12px var(--active)}.ic-err{background:var(--danger);box-shadow:0 14px 34px -12px var(--danger)}.ic-warn{background:var(--warn)}.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);text-align:left}.grow-line{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;border-top:1px solid var(--line)}.grow-line:first-of-type{border-top:none}.avatar{border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex:none}.input{height:54px;width:100%;border:1px solid var(--line-2);border-radius:15px;padding:0 16px;font-size:17px;letter-spacing:.04em;background:var(--surface);color:var(--ink);outline:none;text-align:center;font-variant-numeric:tabular-nums}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6d5ef629}.hrow{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line)}.empty{text-align:center;color:var(--muted);padding:50px 16px}.fade{animation:fade .22s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}}.login-hero{height:44%;background:var(--grad);display:flex;flex-direction:column;justify-content:flex-end;padding:30px 24px;color:#fff;position:relative;overflow:hidden}.login-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,.5),transparent 65%);top:-80px;right:-60px}