@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('../assets/fonts/dmsans.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../assets/fonts/spacegrotesk.woff2') format('woff2')}

/* tokens: light = warm ivory/champagne; dark = warm LIT black + amber (thelit.app) */
:root{
  --bg:#F5F0E6;--bg-card:#FFFDF8;--bg-card2:#F1ECE2;--champagne:#E9DDC4;
  --amber:#F59E0B;--gold:#FFD700;--amber-dim:rgba(245,158,11,.12);--amber-glow:rgba(245,158,11,.35);
  --white:#17140F;--muted:#665D4C;--border:rgba(40,30,10,.10);--border-ctl:#857C68;--border-amber:rgba(168,115,26,.42);
  --focus:#8A5300;--amber-text:#7F4E00;--on-amber:#140D00;--bad:#B42318;--ok:#06764F;--track:rgba(40,30,10,.08);
  --glass:rgba(255,253,248,.72);--glass-hover:#FFFFFF;--hi:rgba(255,255,255,.9);
  --grad:linear-gradient(100deg,#8A4B00 0%,#B36B00 45%,#9C7400 100%);
  --sh-1:0 1px 1px rgba(60,40,10,.04),0 2px 6px -2px rgba(60,40,10,.08);
  --sh-2:0 1px 2px rgba(60,40,10,.05),0 10px 30px -12px rgba(60,40,10,.18),0 30px 60px -30px rgba(120,80,10,.18);
  --sh-cta:0 1px 0 rgba(255,255,255,.45) inset,0 8px 24px -8px rgba(217,119,6,.55);
  --sh-cta-rest:0 1px 0 rgba(255,255,255,.45) inset,0 1px 3px rgba(120,70,0,.22);
  /* scale: spacing (4pt), type (1.25), radius, motion */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.25rem;--fs-xl:1.625rem;--fs-2xl:2.25rem;
  --lh-tight:1.15;--lh:1.5;
  --r-1:8px;--r-2:12px;--r-3:20px;--r-pill:999px;
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--dur-4:480ms;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-io:cubic-bezier(.65,0,.35,1);
  --spring-ok:cubic-bezier(.34,1.56,.64,1);
  --font-head:'Space Grotesk',system-ui,sans-serif;--font-body:'DM Sans',system-ui,sans-serif;--font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* legacy aliases (page CSS still uses these): remove once every file is migrated */
  --radius:var(--r-2);--radius-lg:var(--r-3);--r-sm:var(--r-2);
  --ease:var(--ease-out);--spring:var(--ease-out);--t-fast:var(--dur-1);--t:var(--dur-2);
  --blob1:rgba(245,158,11,.11);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --shadow:var(--sh-cta);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0E0D0B;--bg-card:#161512;--bg-card2:#1D1B17;--champagne:#1E1A12;
  --white:#F5F2EA;--muted:#9A9488;--border:rgba(255,255,255,.06);--border-ctl:#7C776D;--border-amber:rgba(245,158,11,.32);
  --focus:#F59E0B;--amber-text:#F5A524;--bad:#F87171;--ok:#34D399;--track:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.04);--glass-hover:rgba(255,255,255,.07);--hi:rgba(255,255,255,.06);
  --grad:linear-gradient(100deg,#F59E0B 0%,#FFC531 55%,#FFD700 100%);
  --sh-1:0 1px 0 rgba(255,255,255,.04) inset;
  --sh-2:0 1px 0 rgba(255,255,255,.05) inset,0 20px 50px -20px rgba(0,0,0,.8);
  --sh-cta:0 0 0 1px rgba(255,215,0,.25) inset,0 10px 35px -6px var(--amber-glow);
  --sh-cta-rest:0 1px 0 rgba(255,255,255,.35) inset;
  --blob1:rgba(245,158,11,.06);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{max-width:100%;overflow-x:hidden;scroll-padding-top:calc(var(--hdr,64px) + 150px);scroll-padding-bottom:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--white);font:16px/1.6 var(--font-body);min-height:100dvh;max-width:100%;overflow-x:clip;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;touch-action:manipulation}
a{color:var(--amber-text);text-underline-offset:3px}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--amber);color:var(--on-amber)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:var(--fs-sm)}.mono{font-variant-numeric:tabular-nums}
.sp{flex:1}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.label{font:500 var(--fs-sm) var(--font-body);color:var(--muted);margin-bottom:.35rem}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.6rem 1rem;border-radius:100px;background:var(--amber);color:var(--on-amber);font-weight:600;text-decoration:none;transition:top var(--t) var(--ease)}
.skip:focus{top:1rem}

/* ambient background: one static amber light (no stars, grain or drift) */
.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aura i{position:absolute;display:none}
.aura .b1{display:block;width:62vmax;height:62vmax;border-radius:50%;left:-18vmax;top:-26vmax;background:radial-gradient(circle,var(--blob1),transparent 62%)}

/* header */
.top{display:flex;align-items:center;gap:.75rem;padding:.75rem max(1.5rem,var(--sar)) .75rem max(1.5rem,var(--sal));padding-top:max(.75rem,var(--sat));border-bottom:1px solid var(--border);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);z-index:20}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;border-radius:12px}
.brand .mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--bg-card),var(--bg-card2));border:1px solid var(--border);box-shadow:var(--sh-1)}
.brand img{width:26px;height:26px;filter:drop-shadow(0 0 10px var(--amber-glow))}
.brand b{font:700 var(--fs-lg)/1 var(--font-head);letter-spacing:.14em}
.studio-brand{display:flex;align-items:center;gap:.5rem;min-width:0;text-decoration:none;color:inherit;margin-left:.15rem;padding:.1rem 0 .1rem .75rem;border-left:1px solid var(--border-amber,var(--border));border-radius:0}
.studio-brand[hidden]{display:none}
.studio-brand img{width:30px;height:30px;border-radius:9px;object-fit:cover;background:#fff;border:1px solid var(--border);flex:none}
.studio-brand span{font:600 var(--fs-sm)/1.1 var(--font-head);letter-spacing:.02em;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand i{font:600 var(--fs-xs)/1 var(--font-head);letter-spacing:.16em;font-style:normal;color:var(--amber-text);border:1px solid var(--border-amber);background:var(--amber-dim);padding:.3rem .62rem;border-radius:100px;white-space:nowrap}
.who{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);color:var(--muted)}
.nav{display:flex;gap:.25rem;margin-left:1rem;padding:.25rem;border:1px solid var(--border);border-radius:100px;background:var(--glass)}
.nav a{padding:.4rem .95rem;border-radius:100px;color:var(--muted);text-decoration:none;font:600 var(--fs-sm) var(--font-head);min-height:34px;display:inline-flex;align-items:center;transition:color var(--t-fast),background-color var(--t-fast)}
.nav a:hover{color:var(--white)}
.nav a[aria-current=page]{color:var(--white);background:var(--bg-card);box-shadow:var(--sh-1)}

/* buttons */
.btn{position:relative;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.65rem 1.3rem;font:600 var(--fs-sm) var(--font-head);border-radius:var(--r-pill);white-space:nowrap;letter-spacing:-.01em;min-height:44px;transition-property:transform,box-shadow,border-color,background-color;transition-duration:var(--dur-2);transition-timing-function:var(--ease-out)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn:active:not(:disabled){transform:scale(.97);transition-duration:var(--dur-1)}
.btn-primary{background:linear-gradient(180deg,#FBB22E,var(--amber));color:var(--on-amber);box-shadow:var(--sh-cta-rest);transition-property:transform,box-shadow}
.btn-ghost{border:1px solid var(--border-ctl);color:var(--white);background:transparent}
.btn-lg{min-height:52px;font-size:var(--fs-md);padding:.8rem 1.6rem}
.btn-sm{padding:.4rem .95rem;font-size:var(--fs-sm);min-height:36px}
.btn-icon{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:var(--r-pill);background:transparent;transition:border-color var(--dur-1),background-color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.btn-icon:active{transform:scale(.94)}
@media(hover:hover){
  .btn-primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--sh-cta)}
  .btn-ghost:not(:disabled):hover{border-color:var(--amber);background:var(--amber-dim)}
  .btn-icon:hover{border-color:var(--amber);background:var(--amber-dim)}
  #theme:hover svg{transform:rotate(25deg)}
}
#theme svg{transition:transform var(--dur-3) var(--ease-out)}
.btn-danger:not(:disabled):hover{border-color:var(--bad)!important;background:transparent!important;color:var(--bad)}
.tick{animation:tickp var(--dur-2) var(--ease-out)}
@keyframes tickp{50%{transform:scale(1.06)}}

/* banners + toast */
.banners{display:grid;gap:.5rem;padding:0 1.5rem;max-width:1200px;margin:0 auto}.banners:not(:empty){padding-top:1rem}
.banner{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;border-radius:var(--radius);background:var(--amber-dim);border:1px solid var(--border-amber);font-size:var(--fs-sm);box-shadow:var(--sh-1);animation:rise .4s var(--ease) both}
.banner.bad{background:color-mix(in srgb,var(--bad) 9%,var(--bg-card));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.banner .grow{flex:1;min-width:14rem}
.toast:empty{visibility:hidden;animation:none}
.toast{position:fixed;left:50%;bottom:calc(1.25rem + var(--sab));transform:translateX(-50%);background:var(--white);color:var(--bg);padding:.7rem 1.2rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:500;z-index:90;max-width:92vw;box-shadow:var(--sh-2);animation:toast var(--dur-2) var(--ease-out) both}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}}
.toast .btn{display:inline;min-height:0;margin-left:.6rem;padding:0 .2rem;border:0;background:none;color:var(--bg);font-weight:700;text-decoration:underline;text-underline-offset:3px;vertical-align:baseline}

/* layout + surfaces */
main{max-width:min(1200px,100%);margin:0 auto;padding:clamp(1rem,2.4vw,2.25rem);padding-bottom:calc(2.5rem + var(--sab))}
main:focus{outline:none}
.card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--s-5);box-shadow:var(--sh-1)}
.glass{background:var(--bg-card)}
.card h2{font-size:var(--fs-md);display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.step{display:inline-grid;place-items:center;flex:none;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--amber-dim);border:1px solid var(--border-amber);color:var(--amber-text);font:700 var(--fs-xs) var(--font-head)}
.note{font-size:var(--fs-sm);color:var(--muted);margin-top:.6rem}
.warn{color:var(--amber-text)}
.err{color:var(--bad);font-size:var(--fs-sm);min-height:1.3em}
.err:not(:empty){animation:shake .35s var(--ease)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* forms */
input[type=text],input[type=tel],input[type=search],input[type=number],input[type=email],select{width:100%;padding:.72rem 1rem;border-radius:var(--r-sm);border:1px solid var(--border-ctl);background:var(--bg-card);color:var(--white);font:inherit;min-height:46px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input:hover,select:hover{border-color:color-mix(in srgb,var(--amber) 55%,var(--border-ctl))}
input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input::placeholder{color:var(--muted);opacity:1}
label.f{display:grid;gap:.35rem;font-size:var(--fs-sm);color:var(--muted);font-weight:500}
.cc{display:flex;align-items:stretch;border:1px solid var(--border-ctl);border-radius:var(--r-sm);background:var(--bg-card);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.cc:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.cc b{display:grid;place-items:center;padding:0 .85rem;border-right:1px solid var(--border);color:var(--white);font:600 var(--fs-md) var(--font-head)}
.cc input{border:0!important;box-shadow:none!important;outline:none!important;background:transparent;font-size:var(--fs-md);letter-spacing:.04em}
input.otp{font:600 var(--fs-xl) var(--font-head);letter-spacing:.7em;text-indent:.7em;text-align:center;min-height:62px;font-variant-numeric:tabular-nums}

/* welcome / login hero */
.welcome{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,440px);gap:clamp(2rem,5vw,5.5rem);align-items:center;min-height:calc(100dvh - 64px - 4.5rem);max-width:1320px;margin:0 auto;padding:clamp(.5rem,3vh,2.5rem) 0}
.hero{display:grid;gap:1.4rem;align-content:center}
.chip{justify-self:start;display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .9rem .42rem .55rem;border-radius:100px;border:1px solid var(--border-amber);background:color-mix(in srgb,var(--bg-card) 70%,var(--amber-dim));color:var(--amber-text);font:600 var(--fs-sm) var(--font-head);letter-spacing:.01em;box-shadow:var(--sh-1)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--amber-dim)}
.hero h1{font-size:clamp(2.5rem,5.4vw,5.1rem);font-weight:700;letter-spacing:-.045em;line-height:1.02;max-width:13ch}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.lede{font-size:clamp(1.05rem,1.35vw,1.22rem);color:var(--muted);max-width:52ch;line-height:1.6}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:var(--fs-sm);font-weight:500}
.trust li{display:flex;align-items:center;gap:.45rem}
.trust svg,.fc svg{width:18px;height:18px;fill:none;stroke:var(--amber-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:.8rem}
.fc{position:relative;padding:1.1rem 1.1rem 1.2rem;border-radius:var(--r-2);border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--sh-1);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2)}
@media(hover:hover){.fc:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-amber)}}
.fc svg{width:38px;height:38px;padding:9px;border-radius:12px;background:var(--amber-dim);border:1px solid var(--border-amber);margin-bottom:.8rem}
.fc h3{font-size:var(--fs-md);margin-bottom:.25rem}
.fc p{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}

.login{width:100%;max-width:440px;justify-self:end;text-align:center;padding:2rem 1.8rem 1.6rem}
.login .emblem{position:relative;width:76px;height:76px;margin:0 auto 1rem;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--bg-card),var(--bg-card2));border:1px solid var(--border-amber);box-shadow:0 0 0 6px var(--amber-dim)}
.login .emblem img{width:44px;margin:0}
.login h2{font-size:var(--fs-xl);margin-bottom:.3rem;justify-content:center}
.login>p.muted{font-size:var(--fs-sm)}
.login form{display:grid;gap:.85rem;margin-top:1.3rem;text-align:left}
.login form .btn-lg{width:100%}
#otpBack{justify-self:center}
.login .err:empty{min-height:0;margin-top:-.85rem}
.login .or{display:flex;align-items:center;gap:.75rem;margin:1.1rem 0;color:var(--muted);font-size:var(--fs-sm)}
.login .or::before,.login .or::after{content:"";flex:1;height:1px;background:var(--border)}
.login .newhere{margin-top:1rem;color:var(--muted)}
.login .newhere a{font-weight:600}

/* sign-in stepper: current step follows which form is visible */
.steps{list-style:none;display:flex;align-items:center;justify-content:center;gap:.4rem;margin:1.2rem auto 0;counter-reset:s;font:600 var(--fs-xs) var(--font-head);color:var(--muted)}
.steps li{display:flex;align-items:center;gap:.4rem;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--border-ctl);font-size:var(--fs-xs);transition:background-color var(--t),border-color var(--t),color var(--t),box-shadow var(--t)}
.steps li:not(:last-child){padding-right:.4rem}
.steps li:not(:last-child)::after{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--track);margin-left:.4rem;transition:background-color .5s var(--ease)}
.login:has(#fMobile:not([hidden])) .s1,.login:has(#fOtp:not([hidden])) .s2{color:var(--white)}
.login:has(#fMobile:not([hidden])) .s1::before,.login:has(#fOtp:not([hidden])) .s2::before{background:var(--amber);border-color:var(--amber);color:var(--on-amber);box-shadow:0 0 0 4px var(--amber-dim)}
.login:has(#fOtp:not([hidden])) .s1::before{content:"\2713";background:var(--amber-dim);border-color:var(--border-amber);color:var(--amber-text)}
.login:has(#fOtp:not([hidden])) .s1::after{background:var(--amber)}

/* entrance: one soft fade-up on the welcome screen */
.welcome .hero>*,.welcome .login{animation:rise var(--dur-3) var(--ease-out) both}

/* app shell */
.grid{display:grid;grid-template-columns:minmax(300px,clamp(300px,26vw,420px)) minmax(0,1fr);gap:1.4rem;align-items:start}
.col{display:grid;gap:1.4rem}
.col#destCol{position:sticky;top:calc(var(--hdr,64px) + 1.2rem)}
.list{list-style:none;display:grid;gap:.35rem;max-height:260px;overflow:auto;margin:.7rem 0;padding:2px 4px 2px 2px}
.opt{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;padding:.55rem .8rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-card);min-height:44px;transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t) var(--spring);animation:rise .35s var(--ease) both}
.opt:hover{border-color:var(--border-amber)}
.opt[aria-pressed=true],.opt[aria-current=true]{border-color:var(--amber);background:var(--amber-dim);box-shadow:inset 3px 0 0 var(--amber)}
.opt .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.opt .c{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums;padding:.05rem .5rem;border-radius:100px;background:var(--track)}
.tree{margin:.7rem 0;max-height:280px;overflow:auto;padding:2px}
.tree ul{list-style:none;margin-left:.9rem;border-left:1px solid var(--border);padding-left:.55rem;display:grid;gap:.3rem;margin-top:.3rem}
.tree>ul{margin-left:0;border:0;padding:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;padding:.3rem;border-radius:14px;background:var(--track)}
.seg label{position:relative;display:grid;place-items:center;text-align:center;padding:.5rem .3rem;border-radius:11px;cursor:pointer;font-size:var(--fs-sm);font-weight:500;min-height:48px;line-height:1.25;transition:background-color var(--t),box-shadow var(--t),color var(--t)}
.seg label small{color:var(--muted);font-size:var(--fs-xs);font-weight:400}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--bg-card);box-shadow:var(--sh-1),0 0 0 1px var(--border-amber);color:var(--amber-text);font-weight:600}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.9rem}

/* dropzone: dashed hairline, amber + 2% tint on drag-over, icon lifts 4px */
.drop{position:relative;display:grid;place-items:center;text-align:center;gap:.65rem;padding:3.2rem 1.25rem;border-radius:var(--r-3);border:1px dashed var(--border-ctl);background:var(--bg-card);overflow:hidden;transition:background-color var(--dur-2),border-color var(--dur-2)}
.drop img{width:60px;transition:transform var(--dur-2) var(--ease-out)}
.drop h2{font-size:clamp(1.2rem,1.8vw,1.55rem);margin:0;justify-content:center}
.drop #dropSub{max-width:46ch}
.drop .btn-row{margin-top:.4rem}
.drop.over{border-style:solid;border-color:var(--amber);background:color-mix(in srgb,var(--amber) 2%,var(--bg-card))}
.drop.over img{transform:translateY(-4px)}
.drop.off{pointer-events:none;border-color:var(--border);background:var(--bg-card2)}
.drop.off img{opacity:.5;filter:saturate(.4)}
.drop[aria-busy=true] img{animation:breathe 1.6s var(--ease-io) infinite}
@keyframes breathe{50%{transform:translateY(-3px)}}

/* global progress */
.gbar{display:grid;gap:.8rem;margin-top:1.3rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-2);padding:1rem 1.1rem;box-shadow:var(--sh-1)}
.gtop{display:grid;gap:.65rem;position:sticky;top:calc(var(--hdr,64px) + var(--sat));z-index:10;background:var(--bg-card);margin:-1rem -1.1rem 0;padding:1rem 1.1rem .8rem;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 1px 0 var(--border)}
#gTitle{font:700 var(--fs-md) var(--font-head);letter-spacing:-.01em}
.bar{position:relative;height:8px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{position:relative;display:block;height:100%;width:0;background:var(--amber);border-radius:99px;transition:width var(--dur-3) linear}
#gProg{height:10px}
.stats{display:flex;gap:.5rem 1.5rem;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
.stats b{color:var(--white);font-weight:600}
.pills{display:flex;gap:.4rem;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:600;padding:.2rem .65rem;border-radius:100px;border:1px solid var(--border);color:var(--muted);background:var(--bg-card);font-variant-numeric:tabular-nums;animation:pop var(--dur-2) var(--ease-out) both}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--bg-card))}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--bg-card))}
.pill.dup{color:var(--amber-text);border-color:var(--border-amber);background:var(--amber-dim)}
@keyframes pop{from{opacity:0;transform:scale(.85)}}

/* queue rows */
.q{list-style:none;margin-top:1rem;display:grid;gap:.45rem}
.qr{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:.85rem;align-items:center;padding:.5rem .6rem .5rem .5rem;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);content-visibility:auto;contain-intrinsic-size:auto 68px;transition:border-color var(--t-fast),box-shadow var(--t),background-color var(--t)}
.qr:hover{border-color:var(--border-amber);box-shadow:var(--sh-1)}
.qr .th{width:52px;height:52px;border-radius:10px;background:var(--bg-card2) url('../assets/logo-mark.png') center/42% no-repeat;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.qr .th img{width:100%;height:100%;object-fit:cover;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
.qr .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);font-weight:500}
.qr .meta{font-size:var(--fs-xs);color:var(--muted);display:flex;gap:.6rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.qr .bar{height:4px;margin-top:.4rem}
.qr .st{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:600;padding:.2rem .7rem;border-radius:100px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.qr .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.qr .rx .btn-icon{width:36px;height:36px;font-size:var(--fs-lg);line-height:1;border-color:transparent;background:transparent;color:var(--muted)}
.qr .rx .btn-icon:hover{color:var(--white);border-color:var(--border)}
.qr[data-s=done] .st{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.qr[data-s=done] .st::before{content:"\2713";width:auto;height:auto;background:none;font-size:var(--fs-sm)}
.qr[data-s=done] .bar i{background:var(--ok)}
.qr[data-s=failed]{border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
.qr[data-s=failed] .st{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.qr[data-s=duplicate] .st,.qr[data-s=paused] .st{color:var(--amber-text);border-color:var(--border-amber)}
.qr[data-s=uploading] .st,.qr[data-s=verifying] .st,.qr[data-s=preparing] .st{color:var(--amber-text);border-color:var(--border-amber);background:var(--amber-dim)}
.qr[data-s=uploading] .st::before,.qr[data-s=verifying] .st::before,.qr[data-s=preparing] .st::before{animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.qr[data-s=uploading]{border-color:var(--border-amber)}
.qr[data-s=cancelled] .th{opacity:.5}
.qmore{margin-top:.7rem;text-align:center}

/* done / celebration: check draw + one amber ring, no confetti */
.done-card{position:relative;text-align:center;padding:1.8rem 1rem 1.6rem;margin-top:1.3rem;border-radius:var(--r-3);background:var(--bg-card);border:1px solid var(--border-amber);overflow:hidden;box-shadow:var(--sh-1);animation:rise var(--dur-3) var(--ease-out) both}
.done-card h2{justify-content:center;font-size:clamp(1.3rem,2vw,1.75rem);margin-bottom:.25rem}
.done-card h2::before{content:"\2713";display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--amber);color:var(--on-amber);font-size:var(--fs-md);box-shadow:0 0 0 6px var(--amber-dim);animation:pop var(--dur-3) .1s var(--spring-ok) both,ring var(--dur-4) .2s var(--ease-out) both}
@keyframes ring{from{box-shadow:0 0 0 0 var(--amber-glow)}to{box-shadow:0 0 0 6px var(--amber-dim)}}
.burst{display:none}

/* empty + loading */
.empty{padding:2rem;text-align:center;color:var(--muted)}
.empty-s{display:grid;justify-items:center;align-content:center;gap:var(--s-2);text-align:center;padding:var(--s-8) var(--s-4);color:var(--muted)}
.empty-s img,.empty-s svg{width:48px;height:48px;margin-bottom:var(--s-2);color:var(--muted);opacity:.85}
.empty-s svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.empty-s b{color:var(--white);font:600 var(--fs-lg) var(--font-head);letter-spacing:-.01em}
.empty-s p{max-width:36ch;font-size:var(--fs-sm);line-height:var(--lh)}
.empty-s .btn{margin-top:var(--s-3)}
.sk{min-height:44px;border-radius:var(--r-1);background:linear-gradient(100deg,var(--track) 30%,color-mix(in srgb,var(--white) 8%,var(--track)) 50%,var(--track) 70%) 100% 0/250% 100%;opacity:0;animation:skin var(--dur-2) 150ms both,sk 1.4s var(--ease-io) 150ms infinite}
@keyframes skin{to{opacity:1}}
@keyframes sk{to{background-position:0 0}}
.imgfade{opacity:0;transition:opacity var(--dur-3) var(--ease-out)}.imgfade.ld{opacity:1}
.fadein{animation:fade var(--dur-3) var(--ease-out) both}
.spin{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .7s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(1turn)}}
.rise{animation:rise var(--dur-3) var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-in>*{animation:rise var(--dur-3) var(--ease-out) both}
.th img{animation:fade .35s both}@keyframes fade{from{opacity:0}}

/* dialogs: desktop = centred fade+scale, phone = bottom sheet; enter/exit via allow-discrete (older browsers just snap) */
dialog{--from:scale(.98);margin:auto;border:1px solid var(--border);border-radius:var(--r-3);background:var(--bg-card);color:var(--white);padding:1.6rem;width:min(92vw,520px);box-shadow:var(--sh-2);opacity:0;transform:var(--from);transition:opacity var(--dur-1) var(--ease-in),transform var(--dur-1) var(--ease-in),overlay var(--dur-1) allow-discrete,display var(--dur-1) allow-discrete}
dialog[open]{opacity:1;transform:none;transition-duration:var(--dur-2);transition-timing-function:var(--ease-out)}
@starting-style{dialog[open]{opacity:0;transform:var(--from)}}
dialog::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--dur-2),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
dialog form{display:grid;gap:.95rem}
dialog h2{font-size:var(--fs-lg)}
.destbar{display:none;width:100%;justify-content:flex-start;text-align:left;border-radius:var(--r-2);background:var(--bg-card);padding:.55rem 1rem;grid-column:1/-1;font-weight:500;box-shadow:var(--sh-1)}
.destbar .sp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.sheet{--from:translateY(100%);margin:auto auto 0;width:100%;max-width:640px;max-height:88vh;border-radius:var(--r-3) var(--r-3) 0 0;padding:.6rem 1rem calc(1rem + var(--sab));overflow:auto;border-bottom:0}
@media(max-width:560px){dialog:not(.sheet){--from:translateY(100%);margin:auto auto 0;width:100%;max-width:none;max-height:92dvh;overflow:auto;border-radius:var(--r-3) var(--r-3) 0 0;border-bottom:0;padding:.75rem 1.1rem calc(1.2rem + var(--sab))}dialog:not(.sheet)::before{content:"";display:block;width:36px;height:4px;border-radius:9px;background:var(--border-ctl);margin:0 auto .9rem}}
.grab{width:36px;height:4px;border-radius:9px;background:var(--border-ctl);margin:0 auto .7rem}
#sheetBody{display:grid;gap:1rem;margin-top:.8rem}
#sheetBody>#destCol{display:grid!important;position:static}
#sheetBody .card{box-shadow:none}

::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--border-ctl);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--amber)}

/* responsive: desktop-first */
@media(min-width:2000px){html{font-size:18px}}
@media(max-width:1100px){
  .welcome{grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:2rem}
  .feats{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:900px){
  .welcome{grid-template-columns:minmax(0,1fr);min-height:0;gap:1.4rem;max-width:620px}
  .hero{display:contents}
  .welcome>*{grid-column:1}
  .chip{order:1}.hero h1{order:2;max-width:none}.lede{order:3}.login{order:4;justify-self:stretch;max-width:none}.trust{order:5}.feats{order:6;grid-template-columns:1fr;margin-top:0}
  .grid{grid-template-columns:minmax(0,1fr)}
  .destbar{display:flex}.col#destCol{display:none}
  #hUp .step{display:none}
  .nav{display:none}.top .who>span{display:none}
}
@media(max-width:700px){.studio-brand span{display:none}.studio-brand{padding-left:.55rem}}
@media(max-width:560px){
  main{padding:.9rem}.top{padding:.6rem .9rem}.banners{padding:0 .9rem}.card{padding:var(--s-4)}
  .brand i{display:none}.brand .mark{width:34px;height:34px}
  .hero h1{font-size:clamp(2.2rem,10.5vw,2.8rem)}
  .login{padding:1.6rem 1.15rem 1.2rem}
  .drop{padding:2rem .9rem}
  .qr{grid-template-columns:44px minmax(0,1fr) 44px;gap:.6rem}.qr .th{width:44px;height:44px}
  .qr .rx{grid-column:3;grid-row:1}.qr .st{grid-column:2;grid-row:2;justify-self:start}
  .stats{gap:.3rem .9rem;font-size:var(--fs-sm)}
  .btn-row .btn{flex:1}.btn-row .btn-sm{min-height:44px}
  .gtop .row{flex-wrap:wrap}
}
@media(max-width:360px){.brand b{font-size:var(--fs-md)}.top{gap:.4rem}.who .btn{padding:.3rem .6rem}}
@media(hover:none){.fc:hover,.opt:hover,.tt:hover,.steps4 li:hover,.btn-primary:hover{transform:none}}
@media(max-height:500px){.top,.gtop{position:static}}
/* phone: primary action pinned above the tab bar */
@media(max-width:900px){.cta-bar{position:sticky;bottom:calc(4.6rem + var(--sab));z-index:12;padding:var(--s-2) 0}.cta-bar .btn{width:100%;min-height:52px}}
@media(max-width:900px){html{scroll-padding-bottom:calc(5.5rem + var(--sab))}}
@media(forced-colors:active){
  .grad{background:none;color:CanvasText}
  .bar i{background:Highlight}
  .sw[aria-checked=true]{background:Highlight}
  .opt[aria-pressed=true],.opt[aria-current=true],.seg label:has(input:checked),.tt:has(input:checked),.nav a[aria-current=page]{outline:2px solid Highlight}
}
@media(forced-colors:active){.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:CanvasText;filter:none}}