/* ScanStar — shared design system (glass on ink-tinted mesh). 8px grid, 1.25 type scale. */
@font-face{font-family:"Sora";src:url(../fonts/sora.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink-950:#060b20; --ink-900:#0a1230; --ink-800:#101a42; --ink-700:#18265c;
  --t1:#f3f6ff; --t2:#b7c1e2; --t3:#8794c2;
  --gold:#ffc233; --gold-2:#ff9f1c; --gold-ink:#3a2500;
  --ok:#3ddc97; --bad:#ff6b7f; --info:#7aa2ff;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08);
  --glass-a:rgba(255,255,255,.10); --glass-b:rgba(255,255,255,.04);
  --panel:rgba(16,26,66,.62);
  --r-s:12px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --fs-xs:.8rem; --fs-s:.9rem; --fs-m:1rem; --fs-l:1.25rem; --fs-xl:1.5625rem; --fs-2xl:1.953rem; --fs-3xl:2.441rem; --fs-4xl:3.052rem;
  --sh-1:0 1px 0 rgba(255,255,255,.10) inset, 0 2px 6px rgba(3,8,30,.30), 0 12px 32px rgba(3,8,30,.34);
  --sh-2:0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(3,8,30,.36), 0 24px 64px rgba(3,8,30,.44);
  --f-head:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari","Nirmala UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari","Nirmala UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--ink-900);color:var(--t1);font:400 var(--fs-m)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(58% 46% at 12% 6%,rgba(99,102,241,.46),transparent 62%),
   radial-gradient(46% 42% at 88% 14%,rgba(20,184,166,.26),transparent 62%),
   radial-gradient(44% 40% at 72% 96%,rgba(255,194,51,.13),transparent 62%),
   radial-gradient(40% 40% at 6% 88%,rgba(56,189,248,.14),transparent 62%),
   linear-gradient(180deg,#0b1334,#060b20)}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:rgba(255,194,51,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:min(1200px,100% - 32px);margin-inline:auto}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}
.muted{color:var(--t2)} .faint{color:var(--t3)}
.gold{color:var(--gold)}
.grad-text{background:linear-gradient(100deg,#fff 10%,#ffe08a 55%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hide{display:none!important}
.row{display:flex;align-items:center;gap:8px}
.grow{flex:1;min-width:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- glass ---------- */
.glass{position:relative;background:linear-gradient(145deg,var(--glass-a),var(--glass-b)),var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(16,26,66,.92)}}
.glass-strong{box-shadow:var(--sh-2)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 32%);opacity:.5;mask:linear-gradient(#000,transparent 55%);-webkit-mask:linear-gradient(#000,transparent 55%)}
.glass > *{position:relative;z-index:1}
.card{padding:24px}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.card-h h3{font-size:var(--fs-l)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:var(--t1);font-weight:600;font-size:var(--fs-m);line-height:1;white-space:nowrap;overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s,opacity .18s;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 18px rgba(3,8,30,.3);-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 10px 26px rgba(3,8,30,.4)}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none}
.btn-primary{border-color:rgba(255,224,138,.6);background:linear-gradient(180deg,#ffd35e,#ffb21e 60%,#ff9f1c);color:var(--gold-ink);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(180,90,0,.25) inset,0 8px 24px rgba(255,159,28,.32),0 2px 6px rgba(3,8,30,.3)}
.btn-primary:hover{border-color:#fff2c4;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(180,90,0,.25) inset,0 12px 32px rgba(255,159,28,.44),0 2px 6px rgba(3,8,30,.3)}
.btn-primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn-primary:hover::before{left:130%}
.btn-ghost{background:transparent;box-shadow:none}
.btn-danger{color:#ffd3d9;border-color:rgba(255,107,127,.45);background:rgba(255,107,127,.12)}
.btn-sm{min-height:40px;padding:0 16px;font-size:var(--fs-s)}
.btn-lg{min-height:56px;padding:0 32px;font-size:var(--fs-l)}
.btn-block{width:100%}
.btn-icon{width:44px;min-height:44px;padding:0}
.btn-sm.btn-icon{width:40px;min-height:40px}

/* ---------- forms ---------- */
.field{display:grid;gap:8px;margin-bottom:16px}
.field>label,.label{font-size:var(--fs-s);font-weight:600;color:var(--t2)}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 16px;font-size:var(--fs-m);border-radius:var(--r-s);border:1px solid var(--line);background:rgba(6,11,32,.45);color:var(--t1);transition:border-color .18s,box-shadow .18s,background .18s}
.textarea{min-height:120px;resize:vertical;line-height:1.55}
.input::placeholder,.textarea::placeholder{color:var(--t3)}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(255,255,255,.26)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,194,51,.16);background:rgba(6,11,32,.6)}
.select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b7c1e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.select option{background:var(--ink-800);color:var(--t1)}
.hint{font-size:var(--fs-xs);color:var(--t3)}
.err{font-size:var(--fs-xs);color:var(--bad)}
.switch{position:relative;width:48px;height:28px;flex:none;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.1);transition:background .2s;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s var(--ease)}
.switch[aria-checked=true]{background:linear-gradient(180deg,#ffd35e,#ff9f1c);border-color:transparent}
.switch[aria-checked=true]::after{transform:translateX(20px)}

/* ---------- chips, badges ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--t1);font-size:var(--fs-s);font-weight:500;transition:all .18s var(--ease);-webkit-tap-highlight-color:transparent}
.chip:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.chip:active{transform:scale(.97)}
.chip.on{background:rgba(255,194,51,.16);border-color:var(--gold);color:#ffe7a6}
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--t2);letter-spacing:.02em}
.badge-gold{background:rgba(255,194,51,.14);border-color:rgba(255,194,51,.4);color:#ffe3a0}
.badge-ok{background:rgba(61,220,151,.12);border-color:rgba(61,220,151,.4);color:#a4f2d0}
.badge-bad{background:rgba(255,107,127,.12);border-color:rgba(255,107,127,.4);color:#ffc4cc}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(61,220,151,.18)}
.stars-row{display:inline-flex;gap:2px;color:var(--gold)}
.stars-row .ic{width:1em;height:1em}
.stars-row .off{color:rgba(255,255,255,.2)}

/* ---------- toast + modal ---------- */
.toast-wrap{position:fixed;z-index:200;left:0;right:0;bottom:calc(24px + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:min(480px,100%);padding:12px 16px;border-radius:var(--r-m);background:rgba(16,26,66,.92);border:1px solid var(--line);box-shadow:var(--sh-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:var(--fs-s);font-weight:500;animation:toast-in .3s var(--ease)}
.toast.ok .ic{color:var(--ok)} .toast.bad .ic{color:var(--bad)} .toast.gold .ic{color:var(--gold)}
.toast.out{opacity:0;transform:translateY(8px);transition:all .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.modal-back{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;background:rgba(4,8,24,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .2s}
.modal{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:32px;animation:pop .28s var(--ease)}
.modal h3{font-size:var(--fs-xl);margin-bottom:8px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}

/* ---------- skeleton + misc ---------- */
.skel{border-radius:var(--r-s);background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06));background-size:200% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:48px 24px;color:var(--t2)}
.empty .ic{width:48px;height:48px;color:var(--t3)}
.empty h4{font-size:var(--fs-l);color:var(--t1)}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:800;font-size:var(--fs-l);letter-spacing:-.03em}
.logo-mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,#ffd35e,#ff9f1c);color:var(--gold-ink);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 14px rgba(255,159,28,.4)}
.logo-mark .ic{width:18px;height:18px}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:var(--gold);animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:640px){
  :root{--fs-4xl:2.441rem;--fs-3xl:1.953rem;--fs-2xl:1.5625rem}
  .card{padding:16px}.modal{padding:24px}
}

/* ---------- pricing cards (landing + dashboard) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.plan{padding:32px 24px;display:flex;flex-direction:column;gap:16px;transition:transform .25s var(--ease),border-color .25s}
.plan:hover{transform:translateY(-4px)}
.plan.pop{border-color:rgba(255,194,51,.6);background:linear-gradient(160deg,rgba(255,194,51,.2),rgba(255,194,51,.04) 55%),var(--panel);box-shadow:var(--sh-2),0 0 0 1px rgba(255,194,51,.25),0 24px 80px rgba(255,159,28,.18)}
.plan .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;padding:4px 16px;border-radius:99px;background:linear-gradient(180deg,#ffd35e,#ff9f1c);color:var(--gold-ink);font:700 var(--fs-xs) var(--f-head);letter-spacing:.04em;white-space:nowrap}
.plan h3{font-size:var(--fs-xl)}
.plan .tag{color:var(--t2);font-size:var(--fs-s)}
.price{display:flex;align-items:baseline;gap:8px}
.price b{font:800 var(--fs-4xl) var(--f-head);letter-spacing:-.04em;line-height:1}
.price span{color:var(--t2);font-size:var(--fs-s)}
.plan ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:12px;flex:1}
.plan li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-s);color:var(--t1)}
.plan li .ic{width:18px;height:18px;color:var(--ok);margin-top:2px}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* scrollbars: quiet, on-brand */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);background-clip:content-box;border:2px solid transparent}
::-webkit-scrollbar-track{background:transparent}