/* Saiyan Gym FITT — built on the ASC v6 "Hanssen" design system (manbeardog13/ASC app/app.css + page layers),
   copied verbatim and re-tinted: Lava Rush #FF4E1B -> Ki Gold #FFAE1A. Layout, radii, motion, glass and twin
   themes are unchanged. Saiyan-specific additions live in css/saiyan.css. */
/* =========================================================================
   ASC design system · v6 "Hanssen" — shared reusable stylesheet
   Extracted VERBATIM from dashboard.html. Values are locked — do not rewrite.
   Palette: Cloud Ash #EDF0F5 · Black Core #0a0c11 · Lava Rush #FFAE1A ·
   Gunmetal #2E2F31 · green #2fbf5b (online/success only). Inter + Sora.
   Twin light/dark themes toggled by html.dark.
   ========================================================================= */

/* ============================== Tokens · twin themes ====================== */
:root{
  --bg:#eef0f1; --shell:rgba(255,255,255,.44); --shell-solid:rgba(255,255,255,.70);
  --panel:#f4f4f3; --panel-2:#fdfdfc;
  --ink:#0a0c11; --ink-2:#3a3c40; --muted:#63676f;
  --lava:#ffae1a; --lava-2:#ffd566; --lava-ink:#9a5700; --lava-tint:rgba(255,174,26,.11); --lava-ring:rgba(255,174,26,.30);
  --gun:#2e2f31; --hairline:rgba(28,22,16,.06); --line:rgba(28,22,16,.09);
  --stage-1:#0b0c0e; --stage-2:#17181b; --on-stage:#f4f5f7; --on-stage-2:rgba(244,245,247,.72); --tab-surf:#f7f9fc;
  --rim-top:rgba(255,255,255,.75); --rim:rgba(255,255,255,.42);
  --green:#2fbf5b; --green-ink:#1c894a;
  --smooth:cubic-bezier(.25,1,.5,1); --snap:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 1px 2px -1px rgba(20,18,15,.10),0 6px 16px -8px rgba(20,18,15,.15),0 20px 40px -22px rgba(20,18,15,.22);
  --gap:14px; --pad:20px; --radius:22px;
  --tap:44px;
}
html.dark{
  --bg:#0a0c11; --shell:rgba(30,32,38,.55); --shell-solid:rgba(30,32,38,.88);
  --panel:#22242a; --panel-2:#2b2d33;
  --ink:#f4f5f7; --ink-2:#d6d8dc; --muted:rgba(244,245,247,.62);
  --hairline:rgba(244,245,247,.09); --line:rgba(244,245,247,.12);
  --lava-ink:#ffd566; --tab-surf:#14161c; --green-ink:#57d484;
  --stage-1:#0d0f14; --stage-2:#15171d;
  --rim-top:rgba(255,255,255,.16); --rim:rgba(255,255,255,.08);
  --shadow-card:0 1px 2px -1px rgba(0,0,0,.5),0 8px 20px -10px rgba(0,0,0,.55),0 24px 48px -24px rgba(0,0,0,.62);
}

/* ============================== Base reset · canvas ====================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--bg);
  padding:calc(14px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 40px) max(18px,env(safe-area-inset-left,0px));
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  transition:background 380ms var(--smooth),color 380ms var(--smooth)}
@media(min-width:1021px){ body{padding:calc(30px + env(safe-area-inset-top,0px)) 26px 30px} }

.canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 56vmax at 6% -14%,rgba(255,184,60,.11),transparent 60%),
    radial-gradient(54vmax 50vmax at 98% 116%,rgba(84,120,152,.08),transparent 60%),
    radial-gradient(44vmax 40vmax at 86% -8%,rgba(46,47,49,.12),transparent 62%)}
html.dark .canvas{
  background:
    radial-gradient(60vmax 56vmax at 6% -14%,rgba(255,176,50,.09),transparent 60%),
    radial-gradient(54vmax 50vmax at 98% 116%,rgba(90,130,165,.07),transparent 60%),
    radial-gradient(44vmax 40vmax at 86% -8%,rgba(244,245,247,.04),transparent 62%)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Hidden for the live push (was the "Preview · nije uživo" ribbon). */
.preview-tag{display:none!important;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:70;font:700 10px Inter;letter-spacing:.14em;text-transform:uppercase;background:var(--gun);color:#f4f5f7;padding:4px 12px;border-radius:0 0 10px 10px;opacity:.9}

/* ============================== Glass shell ============================== */
.shell{max-width:var(--shell-max,1180px);margin:0 auto;border-radius:32px;position:relative;z-index:2;
  background:var(--shell-solid);border:1px solid var(--rim);border-top-color:var(--rim-top);
  box-shadow:0 25px 50px rgba(2,3,5,.22);padding:var(--gap);animation:sheetIn 550ms var(--smooth) both;transition:background 380ms var(--smooth)}
@media(min-width:1021px){ .shell{padding:18px} }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .shell{background:var(--shell);-webkit-backdrop-filter:blur(30px) saturate(150%) brightness(108%);backdrop-filter:blur(30px) saturate(150%) brightness(108%)}
}
@media(prefers-reduced-transparency:reduce){ .shell{background:var(--panel-2)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .canvas{display:none} }
@keyframes sheetIn{from{opacity:0;transform:translateY(24px) scale(.985)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.reveal{animation:rise 620ms var(--smooth) both}
/* Prag splash: while the launch surface is up, the page's entrance choreography
   holds at frame 0 (paused freezes the DELAY clock too) and plays from zero the
   instant html.splashing drops — the app's own entrance IS the splash's second
   act, never a double animation, never a dead reveal behind the veil. */
html.splashing .reveal,html.splashing .shell,html.splashing .auth-card{animation-play-state:paused}
/* Warm in-app navigation (dock/tab hops, stamped pre-paint in each head):
   content is simply THERE — native tab bars never replay entrances, and the
   rise reading as "the page got pushed up" on short pages goes away. Cold
   entries (fresh tab, splash) keep the full choreography. */
html.warm-nav .reveal,html.warm-nav .shell{animation:none}

/* ============================== Top bar (real logo) ====================== */
.top{display:flex;align-items:center;gap:14px;height:40px;margin-bottom:var(--gap);padding:0 4px}
.logo{height:26px;width:auto;display:block;filter:drop-shadow(0 3px 8px rgba(255,174,26,.28))}
.pill{margin-left:auto;display:flex;align-items:center;gap:2px;background:rgba(2,3,5,.88);color:#f4f5f7;border-radius:20px;padding:6px 8px;font:500 12.5px Inter;border-top:1px solid rgba(255,255,255,.14)}
html.dark .pill{background:rgba(244,245,247,.10)}
.pill a{position:relative;color:#f4f5f7;opacity:.62;padding:6px 11px;border-radius:13px;text-decoration:none;transition:opacity 150ms var(--snap),background 150ms var(--snap)}
.pill a.on{opacity:1;background:rgba(244,245,247,.14)}
@media(any-hover:hover){ .pill a:hover{opacity:1} }
.mode{border:0;cursor:pointer;width:38px;height:38px;border-radius:50%;flex:none;background:var(--panel);display:grid;place-items:center;position:relative;transition:transform 380ms var(--smooth),background 380ms var(--smooth)}
@media(any-hover:hover){ .mode:hover{background:var(--panel-2)} }
.mode:active{transform:scale(.92)}
.mode i{width:12px;height:12px;border-radius:50%;background:var(--ink);display:block;transition:background 380ms ease,box-shadow 380ms ease}
html.dark .mode i{background:transparent;box-shadow:inset 0 0 0 2.5px #f4f5f7}

/* ============================== Notched corner tabs ===================== */
/* Hanssen notched corner tabs — the label nests INTO the card corner, and the
   inter-card gap curves around it via inverse-rounded notches (the ::before /
   ::after radial-gradients paint the gap colour back in). */
/* Corner tabs render as UPPERCASE eyebrow labels (matches the .badge / live-dot
   label system) — never rely on source casing. --tab-surf is an OPAQUE gap colour
   (the app background between cards) so the notch reads as a clean cutout and never
   shows the card art bleeding through; keep it opaque per theme. */
.tab-corner,.tab-tl{position:absolute;z-index:4;font:600 10.5px Inter;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);background:var(--tab-surf);padding:7px 13px 8px;white-space:nowrap}
.tab-corner{bottom:0;right:0;border-radius:14px 0 0 0}
.tab-tl{top:0;left:0;border-radius:0 0 14px 0}
.tab-corner::before,.tab-corner::after,.tab-tl::before,.tab-tl::after{content:"";position:absolute;width:14px;height:14px}
.tab-corner::after{left:-14px;bottom:0;background:radial-gradient(circle at 0 0,transparent 14px,var(--tab-surf) 14.5px)}
.tab-corner::before{right:0;top:-14px;background:radial-gradient(circle at 0 0,transparent 14px,var(--tab-surf) 14.5px)}
.tab-tl::after{right:-14px;top:0;background:radial-gradient(circle at 100% 100%,transparent 14px,var(--tab-surf) 14.5px)}
.tab-tl::before{left:0;bottom:-14px;background:radial-gradient(circle at 100% 100%,transparent 14px,var(--tab-surf) 14.5px)}

/* ============================== Stage hero ============================== */
.stage{position:relative;border-radius:var(--radius);overflow:hidden;min-height:452px;
  background:linear-gradient(175deg,var(--stage-1) 0%,var(--stage-2) 100%);
  color:var(--on-stage);padding:32px 28px 28px;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.10)}
@media(max-width:900px){ .stage{min-height:auto;padding:30px 22px 26px} }
/* cinematic tire hero: photo + a scrim that keeps the left/bottom dark for text */
.stage .photo{position:absolute;inset:0;z-index:0;background:url('../assets/hero.webp') center right/cover;transform:scale(1.03)}
.stage .scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(102deg, var(--stage-1) 20%, rgba(7,8,10,.80) 34%, rgba(7,8,10,.34) 60%, rgba(7,8,10,.05) 81%, rgba(7,8,10,.42) 100%),
  linear-gradient(0deg, var(--stage-1) 3%, rgba(7,8,10,.88) 14%, transparent 46%),
  radial-gradient(120% 80% at 88% -8%, rgba(255,174,26,.22), transparent 50%)}
.stage>:not(.photo):not(.scrim):not(.tab-corner){position:relative;z-index:2}
.k{font-family:Inter;font-weight:600;font-size:clamp(9.5px,2.6vw,11px);line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--on-stage-2)}
.hero-num{font-family:Sora;font-weight:500;font-size:clamp(58px,6.8vw,92px);line-height:.96;letter-spacing:-.035em;margin:10px 0 4px}
.hero-num em{font-style:normal;font:500 14px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--on-stage-2);margin-left:8px;vertical-align:baseline}
.cap{font-size:13.5px;color:var(--on-stage-2)}
.stage .k,.stage .hero-num,.stage .cap,.stage .spill span{text-shadow:0 1px 4px rgba(2,3,5,.82)}
.meter{margin-top:15px;height:8px;border-radius:4px;background:rgba(244,245,247,.14);overflow:hidden;max-width:460px}
.meter i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--lava-2),var(--lava));transition:width 1100ms var(--smooth)}
.space{flex:1;min-height:18px}
.spills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.spill{text-align:left;background:rgba(244,245,247,.08);border:0;border-radius:14px;padding:12px 10px;border-top:1px solid rgba(255,255,255,.09);color:var(--on-stage);transition:transform 150ms var(--snap),background 150ms var(--snap);cursor:pointer}
@media(any-hover:hover){ .spill:hover{transform:translateY(-2px);background:rgba(244,245,247,.14)} }
.spill:active{transform:scale(.97);transition-duration:80ms}
.spill b{display:block;font-family:Sora;font-weight:500;font-size:21px;line-height:1}
.spill span{font-size:10px;color:var(--on-stage-2);display:block;margin-top:4px}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border-radius:25px;background:rgba(244,245,247,.94);color:#0a0c11;text-decoration:none;font:600 14px Inter;transition:transform 150ms var(--snap),box-shadow 200ms var(--snap);position:relative}
@media(any-hover:hover){ .cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,0,0,.5)} }
.cta:active{transform:scale(.98);transition-duration:80ms}
.cta .dot{width:9px;height:9px;border-radius:50%;background:var(--lava);box-shadow:0 0 8px 2px var(--lava-ring);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.3);opacity:.8}}
/* "Pitaj ASC Agenta" — compact translucent glass pill that shimmers in lava,
   with a green "online" light. Hugs its content (no full-width stretch). */
.cta.agent{display:inline-flex;align-self:flex-start;width:auto;min-height:42px;padding:0 17px;gap:9px;border-radius:21px;
  background:rgba(244,245,247,.10);color:var(--on-stage);font:600 13px Inter;
  border:1px solid rgba(255,255,255,.20);overflow:hidden;
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 6px 20px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}
/* Flowing wave lines inside the pill: blue -> magenta -> purple, each line drifts
   at its own rate. Clipped by the pill's overflow:hidden. No orange. */
.cta-waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.agwave{fill:none;stroke:url(#agw);stroke-linecap:round}
.agwave.a1{stroke-width:1.7;opacity:.75;animation:agFlow 5.3s linear infinite}
.agwave.a2{stroke-width:1.3;opacity:.5;animation:agFlow 7.9s linear infinite}
.agwave.a3{stroke-width:1.5;opacity:.62;animation:agFlow 6.4s linear infinite reverse}
@keyframes agFlow{to{transform:translateX(-120px)}}
@media(any-hover:hover){ .cta.agent:hover{transform:translateY(-1px);background:rgba(244,245,247,.16);border-color:rgba(170,90,255,.55)} }
.cta.agent .dot{background:var(--green);box-shadow:0 0 8px 2px rgba(47,191,91,.55)}

/* ============================== Action cards (dedicated imagery) ========= */
.act{position:relative;border-radius:var(--radius);overflow:hidden;min-height:180px;display:flex;align-items:flex-end;text-decoration:none;color:#fff;isolation:isolate;box-shadow:var(--shadow-card);transition:transform 160ms var(--snap),box-shadow 220ms var(--snap)}
.act .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.01);transition:transform 500ms var(--smooth);z-index:-2}
.act::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,3,5,.12) 0%,rgba(2,3,5,.34) 42%,rgba(2,3,5,.88) 100%)}
@media(any-hover:hover){ .act:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(2,3,5,.6)} .act:hover .bg{transform:scale(1.06)} }
.act:active{transform:scale(.985);transition-duration:90ms}
.act .body{position:relative;padding:16px 18px;width:100%}
.act .eyebrow{font:600 10.5px Inter;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.74);display:flex;align-items:center;gap:7px}
.act .eyebrow .led{width:7px;height:7px;border-radius:50%}
.act.green .eyebrow .led{background:var(--green);box-shadow:0 0 8px 1px rgba(47,191,91,.7)}
.act.red .eyebrow .led{background:var(--lava);box-shadow:0 0 8px 1px var(--lava-ring)}
.act h2{font:600 21px Sora;letter-spacing:-.01em;margin:5px 0 2px}
.act .desc{font:500 12.5px Inter;color:rgba(255,255,255,.76)}
.act .go{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);color:#fff;transition:background 160ms var(--snap),transform 160ms var(--snap)}
@media(any-hover:hover){ .act:hover .go{transform:translateX(2px)} .act.red:hover .go{background:var(--lava)} .act.green:hover .go{background:var(--green)} }

/* ============================== Card surface ============================ */
.card{position:relative;background:var(--panel);border-radius:var(--radius);padding:32px var(--pad) 18px;display:flex;flex-direction:column;transition:background 380ms var(--smooth),transform 160ms var(--snap),box-shadow 200ms var(--snap)}
/* .tab-tl (incl. its notch) is defined in the corner-tab block above */
.card h3{font-family:Sora;font-weight:600;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.count-badge{margin-left:auto;font:800 12px Inter;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:linear-gradient(158deg,var(--lava-2),var(--lava) 52%,var(--lava-ink));color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 7px -2px rgba(255,174,26,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.card.dark{background:radial-gradient(120% 100% at 90% -20%,rgba(255,174,26,.20),transparent 55%),linear-gradient(175deg,var(--stage-1),var(--stage-2));color:var(--on-stage)}
html.dark .card.dark{background:radial-gradient(120% 100% at 90% -20%,rgba(255,174,26,.16),transparent 55%),linear-gradient(175deg,#24252a,#1a1b1f)}

/* profile card */
.row1{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.pavatar{width:44px;height:44px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,var(--lava-2),var(--lava) 62%,#d98600);color:#fff;display:grid;place-items:center;font:650 14px Inter;box-shadow:0 6px 16px rgba(255,174,26,.35)}
.profile h1{font-family:Sora;font-weight:600;font-size:18px;letter-spacing:-.01em}
.profile .sub{font-size:12px;color:var(--muted)}
.profile p{font-size:13px;line-height:1.55;color:var(--ink-2);flex:1}
.health{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--hairline)}
.hstat{background:var(--panel-2);border-radius:12px;padding:9px 10px;font-size:10.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px;min-width:0}
html.dark .hstat{background:rgba(244,245,247,.05)}
.hstat b{font:700 12px Inter;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hstat .g{color:var(--green-ink)}

/* season bars */
.obar{margin-bottom:12px}
.obar:last-child{margin-bottom:0}
.obar .t{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);margin-bottom:6px}
.obar .t b{color:var(--ink);font:500 14px Sora}
.obar .bar{height:6px;border-radius:3px;background:rgba(2,3,5,.08);overflow:hidden}
html.dark .obar .bar{background:rgba(244,245,247,.10)}
.obar .bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--lava-2),var(--lava));transition:width 1100ms var(--smooth)}

/* reminders list */
.mini{display:flex;align-items:center;gap:10px;padding:10px 6px;border-radius:10px;border-bottom:1px solid rgba(244,245,247,.09);font-size:13px;color:var(--on-stage);text-decoration:none;transition:background 150ms var(--snap),transform 150ms var(--snap)}
.mini:last-child{border-bottom:0}
@media(any-hover:hover){ .mini:hover{background:rgba(244,245,247,.08);transform:translateX(3px)} }
.mini:active{transform:scale(.99);transition-duration:80ms}
.mini time{font:600 11px Inter;color:var(--on-stage-2);min-width:46px;flex:none}
.mini b{min-width:0;flex:1 1 auto;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .pl{margin-left:auto;font:600 11px Inter;color:var(--on-stage-2);flex:none}
.mini.overdue time{color:var(--lava-2);font-weight:700}

/* ============================== Slider cards ============================ */
.slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 4px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:164px;scroll-snap-align:start;border-radius:18px;overflow:hidden;background:var(--panel);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:transform 160ms var(--snap),box-shadow 220ms var(--snap)}
@media(any-hover:hover){ .slide:hover{transform:translateY(-3px);box-shadow:0 18px 36px -16px rgba(2,3,5,.5)} }
.slide:active{transform:scale(.98);transition-duration:90ms}
.slide .thumb{display:block;height:100px;background-size:cover;background-position:center}
.slide .meta{padding:11px 12px 13px}
.slide .code{font:700 12.5px Inter}
.slide .who{font:500 12px Inter;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;margin-top:8px;padding:3px 9px;border-radius:999px;font:600 10.5px Inter;background:var(--lava-tint);color:var(--lava-ink)}
.chip.win{background:rgba(46,47,49,.12);color:var(--gun)} html.dark .chip.win{background:rgba(244,245,247,.10);color:#c9ccd2}
.chip.all{background:rgba(99,103,111,.16);color:var(--muted)}

/* ============================== Dock — iOS tab bar ====================== */
/* header controls retired: theme + account live in the sidebar/account menu.
   Elements stay in the DOM (#mode is driven programmatically by 'Tema'). */
.top #mode,.top .menu-btn{display:none}

/* ==================== v7 "Okvir" — frame lip + floating sidebar ==============
   The MENU architecture: a thick rounded frame lip wraps the app; a floating
   opaque sidebar (one step darker than the canvas) sits inset at the left with
   a sculpted 18px gutter to the shell. One expandable parent (Skladište).
   Active items are physical controls: panel surface + inset highlight + a 3px
   module-accent bar + accent ink. Collapses to a 72px icon rail (persisted).
   On phones the same component slides in as an overlay from a hamburger. */
:root{--sbw:248px;
  --acc:#5C7C9D;--acc-ink:#46617f;          /* slate = system-interactive default */
  --side:#e9ebee;--lip:#f7f8fa}
html.dark{--side:#0c0d10;--lip:#14161a;--acc-ink:#9db8d2}
html[data-side="rail"]{--sbw:72px}
@media(min-width:1021px){
  html.has-side body{padding-left:calc(30px + var(--sbw) + 22px);padding-right:30px}
  html.has-side .shell{margin:0 auto;transition:margin 260ms var(--smooth)}
  html.has-side .pill{display:none}
}
.side{position:fixed;left:30px;top:30px;bottom:30px;width:var(--sbw);z-index:40;
  display:flex;flex-direction:column;padding:14px 10px;border-radius:22px;
  background:var(--side);
  box-shadow:0 1px 2px -1px rgba(20,18,15,.08),0 12px 28px -18px rgba(20,18,15,.28),
    inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(28,22,16,.05);
  transition:width 260ms var(--smooth),transform 320ms var(--smooth)}
html.dark .side{box-shadow:0 12px 32px -18px rgba(0,0,0,.6),
  inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(244,245,247,.05)}
.sb-head{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:4px 12px 12px;min-height:40px}
html[data-side="rail"] .sb-head{justify-content:center;padding:4px 0 12px}
.sb-eyebrow{font:600 10.5px Inter;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden}
.sb-collapse{flex:none;width:28px;height:28px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--muted);display:grid;place-items:center;
  transition:background 160ms var(--snap),transform 260ms var(--smooth)}
.sb-collapse:hover{background:rgba(2,3,5,.05)}
html.dark .sb-collapse:hover{background:rgba(244,245,247,.07)}
html[data-side="rail"] .sb-collapse{transform:rotate(180deg)}
.sb-nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.sb-nav::-webkit-scrollbar{display:none}
.sb-item{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;
  padding:0 12px;border-radius:12px;text-decoration:none;cursor:pointer;border:0;background:transparent;
  font:500 13.5px Inter;color:var(--ink-2);text-align:left;width:100%;
  transition:background 180ms var(--snap),color 180ms var(--snap),
    transform 180ms var(--snap),box-shadow 220ms var(--snap)}
/* one optical axis: every icon lives in a fixed 22px column, labels align exactly */
.sb-item svg{flex:none;width:20px;height:20px;margin:0 1px;color:var(--muted);
  transition:color 180ms var(--snap),transform 180ms var(--snap)}
.sb-item .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(any-hover:hover){
  .sb-item:hover{background:rgba(2,3,5,.045);transform:translateY(-1px);
    box-shadow:0 2px 6px -3px rgba(20,18,15,.18)}
  html.dark .sb-item:hover{background:rgba(244,245,247,.06);box-shadow:0 2px 8px -3px rgba(0,0,0,.5)}
  .sb-item:hover svg{color:var(--ink-2)}
}
.sb-item:active{transform:scale(.985);transition-duration:80ms}
.sb-item.on{background:var(--panel-2);color:var(--acc-ink);
  box-shadow:0 1px 3px rgba(2,3,5,.1),inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 14px -8px var(--acc)}
html.dark .sb-item.on{background:rgba(244,245,247,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 14px -8px var(--acc)}
.sb-item.on svg{color:var(--acc-ink)}
.sb-item.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:3px;background:var(--acc);transform-origin:center;
  animation:sbBar 260ms var(--snap) both}
@keyframes sbBar{from{transform:scaleY(.4);opacity:0}}
/* per-item module accents (raw chroma for the bar; ink for text/icon) */
.sb-item[data-m="dashboard"]{--acc:#ffae1a;--acc-ink:#9a5700;--acc-d:#ffd566}
.sb-item[data-m="checkin"]{--acc:#2fbf5b;--acc-ink:#177a41;--acc-d:#57d484}
.sb-item[data-m="scan"]{--acc:#547898;--acc-ink:#43617c;--acc-d:#8fb0cc}
.sb-item[data-m="warehouse"]{--acc:#f0c052;--acc-ink:#8a6a14;--acc-d:#f0c052}
.sb-item[data-m="customers"]{--acc:#5A63E8;--acc-ink:#4a52c9;--acc-d:#97a0f5}
.sb-item[data-m="reminders"]{--acc:#5C7C9D;--acc-ink:#46617f;--acc-d:#9db8d2}
.sb-item[data-m="workshop"]{--acc:#B86A3F;--acc-ink:#9a5730;--acc-d:#d99a6c}
.sb-item[data-m="assistant"]{--acc:#7A5CFF;--acc-ink:#6247d6;--acc-d:#a794ff}
.sb-item[data-m="users"]{--acc:#8a8f98;--acc-ink:#2e2f31;--acc-d:#c9ccd2}
html.dark .sb-item[data-m="dashboard"]{--acc-ink:#ffd566}
html.dark .sb-item[data-m="checkin"]{--acc-ink:#57d484}
html.dark .sb-item[data-m="scan"]{--acc-ink:#8fb0cc}
html.dark .sb-item[data-m="warehouse"]{--acc-ink:#f0c052}
html.dark .sb-item[data-m="customers"]{--acc-ink:#97a0f5}
html.dark .sb-item[data-m="reminders"]{--acc-ink:#9db8d2}
html.dark .sb-item[data-m="workshop"]{--acc-ink:#d99a6c}
html.dark .sb-item[data-m="assistant"]{--acc-ink:#a794ff}
html.dark .sb-item[data-m="users"]{--acc-ink:#c9ccd2}
/* group (expandable parent) */
.sb-group-kids{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms var(--snap)}
.sb-group.open .sb-group-kids{grid-template-rows:1fr}
.sb-group-kids>div{overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:0}
.sb-kid{padding-left:44px;font-size:13px;min-height:36px;opacity:0;transform:translateY(-4px);
  transition:opacity 200ms var(--snap) 60ms,transform 200ms var(--snap) 60ms,background 160ms var(--snap),color 160ms var(--snap)}
.sb-group.open .sb-kid{opacity:1;transform:none}
.sb-chev{flex:none;transition:transform 240ms var(--snap);color:var(--muted)}
.sb-group.open .sb-chev{transform:rotate(180deg)}
.sb-div{flex:none;height:1px;background:var(--line);margin:12px 10px}
.sb-eyebrow2{flex:none;font:600 10px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:2px 12px 6px}
/* rail: icons only */
html[data-side="rail"] .sb-item{justify-content:center;padding:0}
html[data-side="rail"] .sb-item .t,html[data-side="rail"] .sb-chev,
html[data-side="rail"] .sb-eyebrow,html[data-side="rail"] .sb-eyebrow2,
html[data-side="rail"] .sb-group-kids{display:none}
html[data-side="rail"] .sb-group .sb-item.kid-on{background:var(--panel-2);color:var(--acc-ink)}
html[data-side="rail"] .sb-group .sb-item.kid-on svg{color:var(--acc-ink)}
html[data-side="rail"] .sb-item.on::before{top:auto;bottom:4px;left:50%;transform:translateX(-50%);
  width:14px;height:3px}
/* user card */
.sb-foot{flex:none;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.sb-user{position:relative;display:flex;align-items:center;gap:10px;width:100%;border:0;cursor:pointer;
  background:transparent;padding:8px;border-radius:14px;text-align:left;
  transition:background 160ms var(--snap)}
@media(any-hover:hover){
  .sb-user:hover{background:rgba(2,3,5,.045);transform:translateY(-1px);box-shadow:0 2px 8px -4px rgba(20,18,15,.22)}
  html.dark .sb-user:hover{background:rgba(244,245,247,.06);box-shadow:0 2px 10px -4px rgba(0,0,0,.55)}
}
.sb-user{transition:background 180ms var(--snap),transform 180ms var(--snap),box-shadow 220ms var(--snap)}
.sb-ava .dot{animation:sbDot 3.2s ease-in-out infinite}
@keyframes sbDot{0%,100%{box-shadow:0 0 0 0 rgba(47,191,91,.35)}50%{box-shadow:0 0 0 3px rgba(47,191,91,0)}}
@media(prefers-reduced-motion:reduce){ .sb-ava .dot{animation:none} }
.sb-ava{position:relative;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font:800 13px Inter;color:#fff;
  background:linear-gradient(150deg,var(--lava),var(--lava-ink))}
.sb-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sb-ava .dot{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;
  background:var(--green);border:2px solid var(--side)}
.sb-uid{flex:1;min-width:0}
.sb-uid b{display:block;font:600 13.5px Inter;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-uid span{display:block;font:500 11px Inter;color:var(--muted);margin-top:1px}
.sb-logout{flex:none;width:30px;height:30px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:var(--muted);display:grid;place-items:center;opacity:1;
  transition:background 160ms var(--snap),color 160ms var(--snap)}
.sb-logout:hover{background:var(--lava-tint);color:var(--lava-ink)}
html[data-side="rail"] .sb-uid,html[data-side="rail"] .sb-logout{display:none}
html[data-side="rail"] .sb-user{justify-content:center;padding:8px 0}
/* floating account menu */
.acct-pop{position:fixed;z-index:118;min-width:210px;padding:6px;border-radius:16px;
  background:var(--shell-solid);border:1px solid var(--rim);border-top-color:var(--rim-top);
  box-shadow:0 18px 44px -16px rgba(2,3,5,.5);
  transform-origin:bottom left;animation:acctIn 180ms var(--snap) both}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .acct-pop{background:var(--shell);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
}
@keyframes acctIn{from{opacity:0;transform:scale(.96) translateY(4px)}}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:11px;
  background:transparent;color:var(--ink);font:600 13.5px Inter;text-align:left;cursor:pointer;
  transition:background 140ms var(--snap)}
@media(any-hover:hover){ .acct-item:hover{background:var(--panel)} }
.acct-item svg{flex:none;width:17px;height:17px;color:var(--muted)}
.acct-item.danger{color:var(--lava-ink)}
.acct-div{height:1px;background:var(--line);margin:5px 8px}
/* mobile: hamburger + overlay */
.sb-burger{display:none}
.side-scrim{position:fixed;inset:0;z-index:114;background:rgba(6,7,10,.45);opacity:0;visibility:hidden;
  transition:opacity .28s var(--smooth),visibility .28s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media(max-width:1020px){
  .side{left:0;top:0;bottom:0;width:min(300px,84vw);border-radius:0 22px 22px 0;z-index:116;
    transform:translateX(-103%);padding-top:calc(14px + env(safe-area-inset-top,0px));
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  html.side-open .side{transform:none}
  .side{padding-left:max(10px,env(safe-area-inset-left,0px))}
  html.side-open .side-scrim{opacity:1;visibility:visible}
  .sb-collapse{display:none}
  .sb-burger{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;cursor:pointer;
    background:var(--panel);color:var(--ink);flex:none;transition:transform 140ms var(--snap)}
  .sb-burger:active{transform:scale(.92)}
}
@media(prefers-reduced-motion:reduce){
  .side,.sb-group-kids,.sb-kid,.sb-chev,.acct-pop{transition:none;animation:none}
}

@media(max-width:1020px){ .pill-links{display:none} .pill{background:transparent;border:0;padding:0;margin-left:auto} }

/* ============================== Global ASC Agent — right-edge voice dock ===
   Injected by app.js on EVERY screen. Tucked as a slim tab on the right edge;
   tap opens a violet-glass panel that slides out (still hugging the edge). The
   big orb is press-and-HOLD to talk (Web Speech, hr-HR) — release acts like
   Enter and the agent routes the intent (navigate / search). Off-palette violet
   = the AI affordance (matches the dashboard agent card). Always dark, both
   themes. Animations are transform/opacity only — GPU, 60fps, Apple-grade. */
/* Closed: the dock sits BELOW the shell (z-index:2) so the tire tucks behind the
   card's edge with no background gap. Open: it lifts above everything. */
.ai-dock{position:fixed;inset:0;z-index:1;pointer-events:none;
  font-family:"Inter",system-ui,sans-serif}
.ai-dock[data-open="true"]{z-index:80}
.ai-dock *{box-sizing:border-box}

/* the tucked tab */
.ai-tab{position:fixed;right:env(safe-area-inset-right,0px);top:41%;z-index:66;pointer-events:auto;
  width:34px;height:92px;padding:0;border:0;cursor:pointer;color:#fff;display:grid;place-items:center;
  border-radius:17px 0 0 17px;
  background:linear-gradient(152deg,#a78bfa,#8b5cf6 46%,#6d28d9);
  box-shadow:-7px 12px 28px -10px rgba(96,42,196,.72),inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.12);
  transition:transform .55s cubic-bezier(.16,1,.3,1),width .4s var(--smooth),box-shadow .4s var(--smooth),opacity .4s var(--smooth)}
.ai-tab svg{width:19px;height:19px;position:relative;z-index:1}
.ai-tab::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;border-radius:2px;z-index:1;
  background:linear-gradient(#fff,rgba(255,255,255,.2));opacity:.5}
/* breathe = a composited ::after opacity pulse (never animate box-shadow → no per-frame repaint) */
.ai-tab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:-7px 12px 34px -8px rgba(150,96,255,.9);opacity:.35;
  animation:aiTabBreathe 3.6s ease-in-out infinite}
@keyframes aiTabBreathe{50%{opacity:.85}}
@media(any-hover:hover){ .ai-tab:hover{width:42px;box-shadow:-9px 14px 32px -8px rgba(224,64,208,.72)} }
.ai-tab:active{transform:scale(.95)}
.ai-dock[data-open="true"] .ai-tab{transform:translateX(130%);opacity:0;pointer-events:none;animation:none}

/* scrim DISABLED — Gemini is non-modal, so the page beneath stays fully visible
   and interactive (no dim, no blocking). Kept as an inert element for structure. */
.ai-scrim{position:fixed;inset:0;z-index:65;pointer-events:none;opacity:0;display:none}
.ai-dock[data-open="true"] .ai-scrim{opacity:0;pointer-events:none}

/* the panel */
.ai-panel{position:fixed;right:calc(10px + env(safe-area-inset-right,0px));top:50%;z-index:66;pointer-events:auto;
  width:min(360px,90vw);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translate(calc(100% + 26px),-50%);
  transition:transform .58s cubic-bezier(.16,1,.3,1);will-change:transform;
  border-radius:26px;padding:16px 16px 14px;color:#f4f0ff;
  background:linear-gradient(168deg,#150f2b,#0e0b1c 58%,#0a0912);
  border:1px solid rgba(150,110,255,.30);
  box-shadow:0 34px 80px -26px rgba(70,26,170,.8),0 8px 24px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:13px}
.ai-panel::-webkit-scrollbar{display:none}
.ai-dock[data-open="true"] .ai-panel{transform:translate(0,-50%)}
.ai-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;opacity:.6;
  background:radial-gradient(60% 44% at 22% 8%,rgba(139,92,246,.32),transparent 62%),radial-gradient(56% 42% at 88% 4%,rgba(224,64,208,.24),transparent 60%)}
.ai-panel>*{position:relative;z-index:1}

.ai-head{display:flex;align-items:center;justify-content:space-between}
.ai-title{display:flex;align-items:center;gap:9px;font:600 14px Sora;letter-spacing:-.01em}
.ai-title .dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 9px 1px rgba(61,220,132,.6);animation:breathe 2.6s ease-in-out infinite}
.ai-close{width:32px;height:32px;flex:none;border:0;border-radius:50%;cursor:pointer;color:#cdbff5;
  background:rgba(150,110,255,.16);display:grid;place-items:center;transition:transform .2s var(--snap),background .2s var(--snap)}
.ai-close svg{width:16px;height:16px}
@media(any-hover:hover){ .ai-close:hover{background:rgba(150,110,255,.28)} }
.ai-close:active{transform:scale(.9)}

.ai-stage{display:flex;flex-direction:column;align-items:center;gap:11px;padding:6px 0 2px}

/* press-and-hold mic — the star */
.ai-mic{position:relative;width:108px;height:108px;flex:none;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:transparent;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent}
.ai-mic-orb{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 34% 26%,#c4b5fd,#8b5cf6 50%,#6d28d9);
  box-shadow:0 16px 38px -10px rgba(139,92,246,.75),inset 0 2px 0 rgba(255,255,255,.28),inset 0 -6px 14px -6px rgba(60,20,150,.6);
  transition:transform .32s cubic-bezier(.16,1,.3,1),background .3s var(--smooth),box-shadow .3s var(--smooth)}
.ai-mic-orb svg{width:40px;height:40px}
.ai-mic::before,.ai-mic::after{content:"";position:absolute;inset:2px;border-radius:50%;border:2px solid rgba(224,64,208,.75);opacity:0;pointer-events:none}
.ai-mic:active .ai-mic-orb{transform:scale(.965)}
.ai-mic.is-live .ai-mic-orb{transform:scale(1.05);
  background:radial-gradient(circle at 34% 26%,#f5d0fe,#e040d0 52%,#a21caf);
  box-shadow:0 18px 46px -8px rgba(224,64,208,.85),inset 0 2px 0 rgba(255,255,255,.3)}
.ai-mic.is-live::before{animation:aiPing 1.5s ease-out infinite}
.ai-mic.is-live::after{animation:aiPing 1.5s ease-out .55s infinite}
@keyframes aiPing{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.62)}}
.ai-mic.is-off .ai-mic-orb{background:radial-gradient(circle at 34% 26%,#6b6478,#4a4458 60%,#332e40);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}

.ai-hint{font:600 12.5px Inter;letter-spacing:.02em;color:#b9a9ee;text-align:center;transition:color .25s}
.ai-mic.is-live~.ai-hint{color:#f5b8f0}
.ai-heard{min-height:22px;font:500 15.5px Inter;color:#f7f3ff;text-align:center;line-height:1.4;
  overflow-wrap:anywhere}
.ai-result{font:500 13px Inter;color:#c9bdf0;text-align:center;line-height:1.45;min-height:16px;transition:opacity .3s}
.ai-result b{color:#fff;font-weight:700}
.ai-result.pop{animation:aiResultPop .5s var(--smooth)}
@keyframes aiResultPop{from{opacity:0;transform:translateY(6px)}}

/* typed fallback (also works when speech is unsupported) */
.ai-type{display:flex;align-items:center;gap:8px;background:rgba(10,8,20,.6);
  border:1px solid rgba(150,110,255,.30);border-radius:15px;padding:4px 4px 4px 15px;
  transition:border-color .25s var(--smooth)}
.ai-type:focus-within{border-color:rgba(224,64,208,.55)}
.ai-type input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#f3efff;font:500 14.5px Inter}
.ai-type input::placeholder{color:rgba(200,189,240,.5)}
.ai-send{flex:none;width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:linear-gradient(135deg,#8b5cf6,#e040d0);box-shadow:0 6px 16px -6px rgba(139,92,246,.7);
  transition:transform .15s var(--snap),box-shadow .2s var(--smooth)}
.ai-send svg{width:19px;height:19px}
@media(any-hover:hover){ .ai-send:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(224,64,208,.7)} }
.ai-send:active{transform:scale(.92)}

.ai-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.ai-chip{border:0;cursor:pointer;padding:7px 12px;border-radius:999px;font:600 11.5px Inter;color:#e9e2ff;
  background:rgba(150,110,255,.14);border:1px solid rgba(150,110,255,.28);transition:transform .15s var(--snap),background .2s var(--smooth)}
@media(any-hover:hover){ .ai-chip:hover{background:rgba(150,110,255,.24)} }
.ai-chip:active{transform:scale(.94)}

@media(max-width:400px){ .ai-panel{width:calc(100vw - 20px);right:10px} .ai-mic{width:96px;height:96px} .ai-mic-orb svg{width:36px;height:36px} }
@media(prefers-reduced-motion:reduce){ .ai-tab::after{animation:none} .ai-mic.is-live::before,.ai-mic.is-live::after{animation:none} }

/* ============================== Disclosure — fluid drop-down =============
   Apple-style progressive disclosure: show a calm summary, TAP to reveal the
   detail — instead of dumping every row at once. Height animates via CSS grid
   (0fr→1fr, no JS measuring); the content settles with a soft fade+lift and the
   chevron springs. Wire-up: app.js delegates .disc-head clicks (works for
   dynamically built lists too). Structure:
     <div class="disc" data-open="false">
       <button class="disc-head">…<span class="disc-sub">3</span><span class="disc-chev">▾</span></button>
       <div class="disc-panel"><div class="disc-inner"><div class="disc-body">…</div></div></div>
     </div>  */
.disc{position:relative;border-radius:18px;background:var(--panel);overflow:clip;
  box-shadow:var(--shadow-card);transition:background 380ms var(--smooth),box-shadow 220ms var(--snap)}
.disc + .disc{margin-top:10px}
.disc-head{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;cursor:pointer;border:0;
  background:transparent;color:var(--ink);text-align:left;padding:12px 15px;
  font-family:Sora;font-weight:600;font-size:15px;letter-spacing:-.01em;
  transition:background 160ms var(--snap)}
@media(any-hover:hover){ .disc-head:hover{background:var(--panel-2)} }
.disc-head:active{background:var(--panel-2)}
.disc-head>.disc-ico{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 32% 28%,var(--lava-2),var(--lava) 64%,#d98600);box-shadow:0 6px 16px rgba(255,174,26,.28)}
.disc-head>.disc-ico svg{width:18px;height:18px}
.disc-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.disc-titles small{font:500 11.5px Inter;color:var(--muted);letter-spacing:0}
.disc-sub{margin-left:auto;flex:none;font:600 12.5px Inter;color:var(--muted);white-space:nowrap}
.disc-sub b{color:var(--lava-ink);font-weight:800} html.dark .disc-sub b{color:var(--lava-2)}
.disc-chev{flex:none;width:22px;height:22px;margin-left:6px;display:grid;place-items:center;color:var(--muted);
  transition:transform .5s cubic-bezier(.34,1.26,.5,1)}
.disc-chev svg{width:15px;height:15px}
.disc[data-open="true"]>.disc-head .disc-chev{transform:rotate(180deg)}
.disc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--snap)}
.disc[data-open="true"]>.disc-panel{grid-template-rows:1fr}
.disc-inner{overflow:hidden;min-height:0;
  opacity:0;transform:translateY(-7px);transition:opacity .32s var(--smooth),transform .44s var(--snap)}
.disc[data-open="true"]>.disc-panel>.disc-inner{opacity:1;transform:none;transition-delay:.06s,.06s}
.disc-body{padding:0 15px 15px}
.disc-body>*:first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){ .disc-panel,.disc-inner,.disc-chev{transition-duration:.001ms} }

/* ===== Tire skin — the agent IS a real studio-tire cutout that rolls in ======
   --tire (a random background-removed tire PNG, tire-1..6.png) + --glow (random
   brake-caliper colour) are set per-load in app.js. The PNG is already cut out
   (transparent) so there is no disc — just the tire. It sits ~1/6 out the right
   edge, breathing, with the brake UNDER-glow pooled BEHIND (z-index:-1) and BELOW
   it — never over it. Mobile shows only the tire; while listening the live
   transcript types out above it. PC keeps the panel (input + chips). */
.ai-tab{width:157px;height:157px;border-radius:50%;padding:0;overflow:visible;
  background:var(--tire,radial-gradient(circle at 34% 30%,#a78bfa,#6d28d9)) center 44%/cover no-repeat;
  box-shadow:0 22px 30px -6px var(--glow,#ff8a1a),0 16px 30px -14px rgba(0,0,0,.6);
  transform:translateX(82%);animation:aiTireBreathe 3.8s ease-in-out infinite}
.ai-tab svg,.ai-tab::before{display:none!important}
/* under-glow: a colour pool sitting BEHIND (z-index:-1) and BELOW the tire */
.ai-tab::after{content:"";position:absolute;left:8%;right:8%;top:80%;height:60%;z-index:-1;pointer-events:none;border-radius:50%;box-shadow:none;
  background:radial-gradient(ellipse at 50% 22%,var(--glow,#ff8a1a),transparent 70%);opacity:.72;filter:blur(11px);animation:aiTireGlow 2.6s ease-in-out infinite}
@keyframes aiTireGlow{50%{opacity:1;transform:scaleX(1.1)}}
@keyframes aiTireBreathe{50%{transform:translateX(80%) scale(1.02)}}
@media(any-hover:hover){ .ai-tab:hover{transform:translateX(74%)} }
.ai-tab:active{transform:translateX(80%) scale(.97)}
.ai-dock[data-open="true"] .ai-tab{transform:translateX(168%) rotate(160deg);opacity:0;animation:none}
/* Desktop: dock the tire into the SHELL's right edge (not the far screen gutter),
   straddling it — inner half tucked behind the card (dock z1 < shell z2), outer half
   proud in the gutter, no background gap. No screen-edge concealment; ::after glows. */
html[data-device="desktop"] .ai-tab{right:max(4px, calc(max(26px, (100vw - 1180px)/2) - 74px));transform:none;animation:none}
@media(any-hover:hover){ html[data-device="desktop"] .ai-tab:hover{transform:scale(1.06)} }
html[data-device="desktop"] .ai-tab:active{transform:scale(.96)}

/* the open press-and-hold orb is the same tire, rolling in, glowing from beneath */
.ai-mic-orb{background:var(--tire) center 44%/cover no-repeat;
  box-shadow:0 18px 26px -6px var(--glow,#ff8a1a),0 16px 30px -12px rgba(0,0,0,.5),inset 0 3px 8px rgba(255,255,255,.14),inset 0 -12px 24px -8px rgba(0,0,0,.55)}
.ai-mic svg,.ai-mic-orb svg{display:none}
.ai-mic::before,.ai-mic::after{border-color:var(--glow,#ff8a1a)!important}
.ai-mic.is-live .ai-mic-orb{transform:scale(1.06)}

/* ===== Apple-grade rolling entrance/exit — NO-SLIP: rotate = 0.72987°/px * travel
   (r=78.5px), rolling-left = negative (CCW). translate + rotate share ONE transform
   and one easing per segment, so the tread never slips. Entrance: anticipation nudge
   OUT → rapid roll → pronounced decel + micro settle. Exit: quicker, accelerate away.
   Per the motion-research spec. Distances differ mobile (240px) vs desktop (120px). */
:root{--roll-settle:cubic-bezier(.16,1,.3,1)}
@supports (animation-timing-function:linear(0,1)){
  :root{--roll-settle:linear(0,.009,.035,.078,.135,.206,.285,.371,.46,.548,.633,.712,.783,.845,.897,.938,.969,.991,1.005,1.013,1.016,1.015,1.012,1.008,1.004,1.001,.999,.998,.999,1)}
}
.ai-mic{transform-origin:50% 50%;backface-visibility:hidden}
.ai-dock[data-open="true"]:not(.ai-closing) .ai-mic{animation:aiRollIn 600ms both;will-change:transform}
.ai-dock.ai-closing[data-open="true"] .ai-mic{animation:aiRollOut 460ms both;will-change:transform}
html[data-device="desktop"] .ai-dock[data-open="true"]:not(.ai-closing) .ai-mic{animation:aiRollInDesk 580ms cubic-bezier(.16,1,.3,1) both}
html[data-device="desktop"] .ai-dock.ai-closing[data-open="true"] .ai-mic{animation:aiRollOutDesk 460ms cubic-bezier(.5,0,.75,0) both}
/* on close, slide the desktop panel back out to the shell edge (it carries the orb) */
html[data-device="desktop"] .ai-dock.ai-closing[data-open="true"] .ai-panel{transform:translate(calc(100% + 26px),-50%);transition:transform .46s cubic-bezier(.5,0,.75,0)}
@keyframes aiRollIn{
  0%{transform:translateX(240px) rotate(175.17deg);opacity:0;animation-timing-function:cubic-bezier(.33,1,.68,1)}
  14%{transform:translateX(252px) rotate(183.93deg);opacity:1;animation-timing-function:var(--roll-settle)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes aiRollOut{
  0%{transform:translateX(0) rotate(0);opacity:1;animation-timing-function:cubic-bezier(.33,1,.68,1)}
  12%{transform:translateX(-10px) rotate(-7.3deg);opacity:1;animation-timing-function:cubic-bezier(.5,0,.75,0)}
  100%{transform:translateX(240px) rotate(175.17deg);opacity:0}
}
/* Desktop: the PANEL carries the orb in via its slide (≈386px), so the orb only
   ROTATES — coupled to that 386px travel (386*0.72987 = 281.7deg) = it rolls as the
   panel brings it in, with zero horizontal overflow to be clipped by overflow-y:auto. */
@keyframes aiRollInDesk{0%{transform:rotate(281.7deg);opacity:0}14%{opacity:1}100%{transform:rotate(0)}}
@keyframes aiRollOutDesk{0%{transform:rotate(0);opacity:1}100%{transform:rotate(281.7deg);opacity:0}}

/* while listening, a live "recording" dot pulses before the streaming transcript */
.ai-mic.is-live ~ .ai-heard:not(:empty)::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--glow,#ff8a1a);box-shadow:0 0 8px 1px var(--glow,#ff8a1a);animation:aiCaret 1.1s ease-in-out infinite}
@keyframes aiCaret{50%{opacity:.3}}

/* Mobile / tablet: nothing but the tire — hide the chrome + card, roll in centred,
   float the live transcript ABOVE the tire while listening. */
html[data-device="mobile"] .ai-panel,html[data-device="tablet"] .ai-panel{background:none;border:0;box-shadow:none;padding:0;overflow:visible;
  left:50%;right:auto;width:auto;transform:translate(-50%,-50%);opacity:0}
html[data-device="mobile"] .ai-panel::before,html[data-device="tablet"] .ai-panel::before{display:none}
html[data-device="mobile"] .ai-dock[data-open="true"] .ai-panel,html[data-device="tablet"] .ai-dock[data-open="true"] .ai-panel{transform:translate(-50%,-50%);opacity:1}
html[data-device="mobile"] .ai-head,html[data-device="mobile"] .ai-hint,
html[data-device="mobile"] .ai-result,html[data-device="mobile"] .ai-chips,html[data-device="mobile"] .ai-type,
html[data-device="tablet"] .ai-head,html[data-device="tablet"] .ai-hint,
html[data-device="tablet"] .ai-result,html[data-device="tablet"] .ai-chips,html[data-device="tablet"] .ai-type{display:none}
html[data-device="mobile"] .ai-stage,html[data-device="tablet"] .ai-stage{padding:0;gap:16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
html[data-device="mobile"] .ai-heard,html[data-device="tablet"] .ai-heard{display:block;order:-1;max-width:82vw;text-align:center}
html[data-device="mobile"] .ai-heard:empty,html[data-device="tablet"] .ai-heard:empty{display:none}
/* the live transcript is a real speech BUBBLE (floats above the tire on mobile) */
.ai-heard:not(:empty){align-self:center;max-width:min(320px,82vw);margin:2px auto 0;
  background:rgba(22,16,42,.95);border:1px solid rgba(150,110,255,.34);border-radius:18px;padding:10px 15px;
  color:#f4f0ff;font:600 15.5px/1.34 Sora;letter-spacing:-.01em;position:relative;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);animation:aiBubbleIn .28s var(--smooth) both}
@keyframes aiBubbleIn{from{opacity:0;transform:translateY(6px) scale(.94)}}
html[data-device="mobile"] .ai-heard:not(:empty)::after,html[data-device="tablet"] .ai-heard:not(:empty)::after{content:"";position:absolute;left:50%;bottom:-6px;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);background:rgba(22,16,42,.95);border-right:1px solid rgba(150,110,255,.34);border-bottom:1px solid rgba(150,110,255,.34)}
@media(prefers-reduced-motion:reduce){ .ai-tab,.ai-tab::after{animation:none} .ai-dock[data-open="true"] .ai-mic{animation:none} .ai-mic.is-live ~ .ai-heard:not(:empty)::before,.ai-heard:not(:empty){animation:none} }

/* ===== Inline agent — Gemini integrated into check-in (no floating side dock).
   The dock is appended into #asc-agent and shown statically: press-and-hold the
   violet mic orb to talk, release to act. Tab / scrim / chips / type are hidden. */
.ci-agent{margin:14px 0 4px}
.ai-dock.ai-inline{position:static;inset:auto;z-index:auto;pointer-events:auto;display:block}
.ai-inline .ai-tab,.ai-inline .ai-scrim,.ai-inline .ai-close,.ai-inline .ai-chips{display:none}
.ai-inline .ai-type{margin-top:12px;width:100%}   /* keep a typed fallback if speech is unavailable / mic denied */
.ai-inline .ai-panel{position:static;transform:none!important;opacity:1!important;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;padding:18px 18px 20px}
.ai-inline .ai-panel::before{display:none}
.ai-inline .ai-head{margin-bottom:4px;justify-content:center}
.ai-inline .ai-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 0}
.ai-inline .ai-mic-orb{background:linear-gradient(150deg,#a78bfa,#8b5cf6 46%,#6d28d9)!important;box-shadow:0 14px 30px -12px rgba(124,58,237,.7),inset 0 2px 0 rgba(255,255,255,.22)!important;animation:none!important}
.ai-inline .ai-mic-orb::after{display:none!important}
.ai-inline .ai-mic svg{display:none}
.ai-inline .ai-mic-orb svg{display:block;width:32px;height:32px;color:#fff}

/* ===== Sticker sheet — in-app label view (replaces the iOS-trapping popup) ====
   Full-screen dimmed sheet with a top-left Back button; the label itself is a
   physical black-on-white sticker (stays light in either theme). Print button
   uses the scoped @media print block far below (only the label prints). */
html.sticker-lock, html.sticker-lock body{ overflow:hidden }
.sticker-modal{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:rgba(6,7,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:smIn .26s var(--smooth) both}
@keyframes smIn{from{opacity:0}}
.sm-chrome{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 14px) 12px calc(env(safe-area-inset-left,0px) + 14px)}
.sm-back,.sm-print{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font:700 14px Inter;padding:11px 16px;border-radius:14px;color:#f4f5f7;transition:transform 140ms var(--snap)}
.sm-back{background:rgba(244,245,247,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sm-print{background:var(--lava);color:#fff;box-shadow:0 6px 18px -6px rgba(255,174,26,.7)}
.sm-back:active,.sm-print:active{transform:scale(.95)}
.sm-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.sm-label{width:264px;background:#fff;color:#000;border:3px solid #000;border-radius:18px;
  padding:16px 16px 13px;text-align:center;box-shadow:0 30px 70px -22px rgba(0,0,0,.75);animation:rise .4s var(--smooth) both}
.sm-shape-rounded{border-radius:18px}
.sm-shape-soft{border-radius:30px}
.sm-shape-sharp{border-radius:2px}
.sm-shape-notch{border-radius:6px;clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
.sm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.sm-brand{font-weight:900;letter-spacing:1px;font-size:16px}
.sm-season{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;border:1.5px solid #000;border-radius:999px;padding:3px 10px}
.sm-qr{width:200px;height:200px;margin:2px auto 9px}.sm-qr svg{width:100%;height:100%;display:block}
.sm-code{font-size:24px;font-weight:900;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.sm-who{font-size:14px;font-weight:700;margin-top:9px}
.sm-sub{font-size:11.5px;color:#333;margin-top:2px;line-height:1.35}
.sm-loc{margin-top:9px;font-size:13px;font-weight:800;letter-spacing:.3px;border-top:2px dashed #000;padding-top:8px}
.sm-loc .sm-lk{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#333;display:block;margin-bottom:1px}
.sm-foot{margin-top:9px;font-size:8.5px;color:#555}

/* ===== Customer report — A4-locked ledger "Potvrda o pohrani guma" ===========
   An official receipt in the invoice/bank-statement register: structure comes
   ONLY from alignment + hairlines, never from boxed containers. One governing
   right rail — every field value and the tire table's numeric edge land on the
   same 178mm content edge. Three-weight rule system: 1px #111 structural
   (section heads, table head/close, signature lines) · 1px #ededed row hairline
   · 1.5px #111 payment total; plus ONE 2px orange brand rule under the header.
   True WYSIWYG print: qr.js injects @page{size:A4;margin:0} while the sheet is
   open, so the doc's own 15/16/13mm padding IS the print margin. Hard-coded
   black-on-white regardless of app theme. On phones the doc is scale-to-fit
   (transform on .report-doc, sized via .rp-fit — reset in print). */
.sm-scroll.sm-scroll-doc{align-items:flex-start;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 40px)}
.rp-fit{flex:none}
.report-doc{width:210mm;min-height:297mm;box-sizing:border-box;display:flex;flex-direction:column;
  background:#fff;color:#111;padding:15mm 16mm 13mm;transform-origin:top left;
  font:500 9.5px/1.35 Inter,sans-serif;box-shadow:0 30px 70px -22px rgba(0,0,0,.7);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;animation:rise .4s var(--smooth) both}
/* header band — the only orange rule on the page */
.rp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid #ffae1a}
.rp-logo{font:800 26px/1 Sora;letter-spacing:-.02em;color:#111}
.rp-org{font:500 9px Inter;letter-spacing:.01em;color:#555;margin-top:3px}
.rp-title{font:700 16px Sora;letter-spacing:-.01em;color:#111;margin:10px 0 0}
.rp-meta{display:flex;gap:14px;align-items:flex-start}
.rp-meta-grid{display:flex;flex-direction:column;gap:6px;text-align:right}
.rp-ml{font:600 8px Inter;text-transform:uppercase;letter-spacing:.08em;color:#777}
.rp-mv{font:600 10px Inter;color:#111;margin-top:1px}
.rp-qr{width:66px;height:66px;flex:none}.rp-qr svg{width:100%;height:100%;display:block}
/* section = labeled rule + full-width rows (never a box) */
.rp-sec{margin-bottom:13px}
.rp-sh{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid #111}
.rp-st{font:700 10px Sora;text-transform:uppercase;letter-spacing:.1em;color:#111}
.rp-shm{font:500 9px Inter;color:#888}
/* core field mechanic: 1fr key pushes the auto value onto the shared right rail */
.rp-f{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;
  padding:3.5px 0;border-bottom:1px solid #ededed}
.rp-f:last-child{border-bottom:0}
.rp-k{font:500 9.5px Inter;color:#555}
.rp-v{font:600 9.5px Inter;color:#111;text-align:right}
/* tire line-items table — ruled at head + baselines only, numeric edge on the rail */
.rp-table{width:100%;border-collapse:collapse}
.rp-table th{font:600 8px Inter;text-transform:uppercase;letter-spacing:.06em;color:#777;
  text-align:left;padding:2px 8px 4px 0;border-bottom:1px solid #111}
.rp-table td{font:500 9.5px Inter;color:#111;padding:5px 8px 5px 0;
  border-bottom:1px solid #ededed;vertical-align:baseline}
.rp-table tbody tr:last-child td{border-bottom:1px solid #111}
.rp-table th.num,.rp-table td.num{text-align:right}
.rp-table th:last-child,.rp-table td:last-child{padding-right:0}
/* payment total — emphasis by weight + rule, never color */
.rp-f.rp-total{border-top:1.5px solid #111;border-bottom:0;padding-top:5px}
.rp-f:has(+ .rp-total){border-bottom:0}
.rp-total .rp-v{font:700 12px Sora}
/* form-style option squares: every option printed, the chosen one blacked in */
.rp-opts{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.rp-opt{display:inline-flex;align-items:center;gap:5px;font:500 9.5px Inter;color:#555}
.rp-opt i{width:9px;height:9px;border:1.2px solid #111;flex:none;background:#fff}
.rp-opt.sel{color:#111;font-weight:600}
.rp-opt.sel i{background:#111}
/* notes — the one left-aligned prose exception */
.rp-prose{font:400 9.5px/1.4 Inter;color:#333;padding:4px 0}
/* signatures + footer pinned to the page bottom via the flex spacer */
.rp-spacer{flex:1}
.rp-sign{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin-top:40px}
.rp-sig{border-top:1px solid #111;padding-top:5px}
.rp-sig-cap{font:500 9px Inter;color:#555}
.rp-sig-date{font:500 8px Inter;color:#888;margin-top:3px}
.rp-foot{display:flex;justify-content:space-between;gap:16px;margin-top:26px;
  padding-top:8px;border-top:1px solid #ededed;font:400 8px Inter;color:#777}
/* tabular slashed-zero figures for every code/date/measure (kept LAST so the
   feature settings survive the font: shorthand resets above) */
.report-doc .tab{font-variant-numeric:tabular-nums slashed-zero;font-feature-settings:"tnum" 1,"zero" 1}

/* ===== Menu drawer — avatar launcher + profile / options sheet ================ */
.menu-btn{border:0;cursor:pointer;width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;font:800 13px Inter;letter-spacing:.02em;color:#fff;
  background:linear-gradient(150deg,var(--lava),var(--lava-ink));box-shadow:0 3px 10px -3px rgba(255,174,26,.55);
  transition:transform 380ms var(--smooth)}
.menu-btn:active{transform:scale(.92)}
@media(any-hover:hover){ .menu-btn:hover{transform:translateY(-1px)} }
.menu-scrim{position:fixed;inset:0;z-index:115;background:rgba(6,7,10,.5);opacity:0;visibility:hidden;
  transition:opacity .3s var(--smooth),visibility .3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.menu-drawer{position:fixed;top:0;right:0;z-index:116;height:100vh;height:100dvh;width:min(400px,92vw);
  display:flex;flex-direction:column;background:var(--shell-solid);border-left:1px solid var(--rim);
  box-shadow:-24px 0 60px -20px rgba(2,3,5,.5);transform:translateX(102%);transition:transform .42s var(--smooth);
  padding-bottom:env(safe-area-inset-bottom,0px)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .menu-drawer{background:var(--shell);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%)}
}
body.menu-open{overflow:hidden}
body.menu-open .menu-scrim{opacity:1;visibility:visible}
body.menu-open .menu-drawer{transform:none}
.md-head{flex:none;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-right,0px) + 18px) 16px 18px;border-bottom:1px solid var(--line)}
.md-avatar{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 17px Inter;color:#fff;
  background:linear-gradient(150deg,var(--lava),var(--lava-ink));box-shadow:0 4px 14px -4px rgba(255,174,26,.6)}
.md-id{flex:1;min-width:0}
.md-id b{display:block;font:700 15.5px Sora;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-id span{display:block;font:500 12px Inter;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-close{flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:var(--panel);color:var(--ink);display:grid;place-items:center;transition:transform 140ms var(--snap)}
.md-close:active{transform:scale(.92)}
.md-tabs{flex:none;display:flex;gap:4px;padding:12px calc(env(safe-area-inset-right,0px) + 14px) 0 14px;border-bottom:1px solid var(--line)}
.md-tab{flex:1;border:0;cursor:pointer;font:700 13px Inter;padding:10px;border-radius:12px 12px 0 0;background:transparent;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.md-tab.on{color:var(--ink);border-bottom-color:var(--lava)}
.md-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px calc(env(safe-area-inset-right,0px) + 18px) 24px 18px}
.md-panel{display:flex;flex-direction:column;gap:13px;animation:rise .4s var(--smooth) both}
.md-panel[hidden]{display:none}
.md-field{display:flex;flex-direction:column;gap:6px}
.md-field label{font:600 11.5px Inter;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.md-field input,.md-field select{font:500 14px Inter;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.md-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2363676f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
html.dark .md-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9ccd2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.md-field input:focus,.md-field select:focus{border-color:var(--lava-ring)}
.md-section-t{font:700 12px Inter;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
.md-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.md-rt{min-width:0}
.md-row .t{font:600 14px Inter;color:var(--ink)}
.md-row .d{font:500 12px Inter;color:var(--muted);margin-top:2px}
.md-sw{flex:none;width:46px;height:28px;border-radius:999px;border:0;cursor:pointer;background:var(--line);position:relative;transition:background .25s var(--smooth)}
.md-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .25s var(--smooth)}
.md-sw[aria-checked="true"]{background:var(--green)}
.md-sw[aria-checked="true"]::after{transform:translateX(18px)}
.md-hint{font:500 12px Inter;color:var(--muted);line-height:1.4}
.md-links{display:flex;flex-direction:column;gap:7px}
.md-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 14.5px Inter;transition:background .2s,transform .12s}
.md-link:active{transform:scale(.985)}
@media(any-hover:hover){ .md-link:hover{background:var(--panel-2);border-color:var(--lava-ring)} }
.md-link svg{color:var(--muted);flex:none}
.md-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.md-shape{cursor:pointer;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);padding:12px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s,background .2s,transform .15s}
.md-shape:active{transform:scale(.96)}
.md-shape[aria-pressed="true"]{border-color:var(--lava);background:var(--lava-tint)}
.md-shape .sw{width:34px;height:34px;background:var(--ink);opacity:.85}
.md-shape .sw.rounded{border-radius:9px}
.md-shape .sw.soft{border-radius:14px}
.md-shape .sw.sharp{border-radius:1px}
.md-shape .sw.notch{border-radius:4px;clip-path:polygon(11px 0,100% 0,100% 100%,0 100%,0 11px)}
.md-shape .lb{font:600 10.5px Inter;color:var(--ink)}
.md-logout{margin-top:4px;border:1px solid var(--line);background:transparent;color:var(--lava-ink);font:700 13.5px Inter;padding:12px;border-radius:12px;cursor:pointer;transition:transform 140ms var(--snap)}
.md-logout:active{transform:scale(.98)}
.md-saved{font:600 12px Inter;color:var(--green-ink);opacity:0;transition:opacity .2s;min-height:15px}
.md-saved.on{opacity:1}

/* Print: only the sticker label — but ONLY while a sticker sheet is actually open
   (html.sticker-lock). With no sticker up, `html` lacks the class, so every page
   prints normally instead of coming out blank. Body-level layers are direct
   children of <body>, so this hides them all cleanly. */
@media print{
  html.sticker-lock,html.sticker-lock body{background:#fff!important}
  html.sticker-lock body > *:not(.sticker-modal){display:none!important}
  html.sticker-lock .sticker-modal{position:static!important;display:block!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:none!important}
  html.sticker-lock .sm-chrome{display:none!important}
  html.sticker-lock .sm-scroll{display:block!important;overflow:visible!important;padding:0!important}
  html.sticker-lock .sm-label{box-shadow:none!important;margin:0 auto!important;animation:none!important}
  /* A4 report: undo the screen scale-to-fit and let the doc's own mm padding be
     the print margin (qr.js injects @page{size:A4;margin:0} while it's open).
     296mm (not 297) so px rounding can't spill a blank second sheet. */
  html.sticker-lock .rp-fit{width:auto!important;height:auto!important}
  html.sticker-lock .report-doc{transform:none!important;box-shadow:none!important;margin:0!important;
    width:210mm!important;min-height:296mm!important;animation:none!important}
}

/* ============================== A11y · motion ========================== */
:focus-visible{outline:2px solid var(--lava-ink);outline-offset:2px;border-radius:10px}
.stage :focus-visible,.act :focus-visible,.dock :focus-visible,.card.dark :focus-visible{outline-color:var(--lava-2);box-shadow:0 0 0 4px rgba(2,3,5,.55)}
.ai-panel :focus-visible{outline-color:#c4b5fd;outline-offset:2px}
@media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-property:background-color,color,opacity!important} .act .bg{transform:none!important} }



/* ==================== Dynamic Island halo + avatar row =======================
   The halo: while the agent listens (asc:agent-listen), a 2px violet conic ring
   with exactly 6px clearance crowns the island pill, plus a soft bloom capped
   at .3 alpha so the clock/battery stay legible. Pure compositor: the conic is
   painted once and ROTATED (never repainted). Web apps cannot draw inside the
   island — this is the honest, and honestly better-looking, alternative. */
#islHalo{position:fixed;left:50%;top:calc(var(--isl-y,11px) - 6px);width:138px;height:49px;
  border-radius:24.5px;padding:2px;transform:translateX(-50%) scale(.94);opacity:0;
  pointer-events:none;z-index:9998;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;transition:opacity 220ms var(--smooth),transform 220ms var(--smooth)}
#islHalo::before{content:"";position:absolute;left:50%;top:50%;width:160px;height:160px;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0 68%,#a78bfa 78%,#8b5cf6 88%,#6d28d9 96%,transparent 100%)}
#islHalo.on{opacity:1;transform:translateX(-50%) scale(1)}
#islHalo.on::before{animation:islSpin 1.6s linear infinite}
@keyframes islSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.isl-bloom{position:fixed;left:50%;top:calc(var(--isl-y,11px) - 30px);width:190px;height:96px;
  transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity 300ms var(--smooth);
  background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent 70%)}
#islHalo.on .isl-bloom{opacity:1}
@media(prefers-reduced-motion:reduce){ #islHalo.on::before{animation:none} }
/* drawer avatar row */
.md-ava-row{display:flex;align-items:center;gap:12px}
.md-avatar.sm{width:44px;height:44px;font:800 15px Inter;flex:none}
.md-ava-btn{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:11px;
  padding:9px 14px;font:600 13px Inter;color:var(--ink);transition:border-color .2s,transform 130ms var(--snap)}
.md-ava-btn:hover{border-color:var(--sel,#5C7C9D)}
.md-ava-btn:active{transform:scale(.96)}

/* ==================== Layout editing mode ("Uredi raspored") =================
   Calm, Figma-grade editing: a dot field over the workspace, dimmed chrome,
   cards as tactile objects (lift on grab, accent ring on drop target), a hide
   affordance per card and a restore tray. No jiggle — desktop Apple. */
html.layout-edit .shell{position:relative}
html.layout-edit .shell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle 1px,rgba(2,3,5,.16) 1px,transparent 1.5px);
  background-size:24px 24px;opacity:.5}
html.dark.layout-edit .shell::after{background-image:radial-gradient(circle 1px,rgba(244,245,247,.14) 1px,transparent 1.5px)}
html.layout-edit .top,html.layout-edit .side{opacity:.45;pointer-events:none;filter:saturate(.6)}
.editable{cursor:grab;position:relative}
html.layout-edit .editable{outline:1.5px dashed rgba(92,124,157,.4);outline-offset:4px;border-radius:var(--radius)}
.editable.lifting{opacity:.35;cursor:grabbing}
.editable.drag-over{outline:2px solid var(--sel,#5C7C9D);outline-offset:4px}
.edit-x{position:absolute;top:10px;right:10px;z-index:9;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,22,26,.78);color:#f4f5f7;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(2,3,5,.35);transition:transform 140ms var(--snap),background 140ms}
.edit-x:hover{transform:scale(1.12);background:rgba(192,54,13,.9)}
.edit-bar{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:130;
  display:flex;align-items:center;gap:16px;padding:10px 14px;border-radius:18px;
  background:var(--shell-solid);border:1px solid var(--rim);box-shadow:0 18px 44px -16px rgba(2,3,5,.5);
  animation:acctIn 200ms var(--snap) both}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .edit-bar{background:var(--shell);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}
}
.edit-bar .eb-t{font:700 13px Sora;color:var(--ink)}
.edit-bar .eb-w{display:flex;align-items:center;gap:9px;font:600 11.5px Inter;color:var(--muted)}
.edit-bar .eb-w b{font:600 12px Inter;color:var(--ink);font-variant-numeric:tabular-nums;min-width:52px}
.edit-bar input[type="range"]{width:150px;accent-color:var(--sel,#5C7C9D)}
.edit-rz{position:absolute;bottom:10px;right:10px;z-index:9;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,22,26,.78);color:#f4f5f7;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(2,3,5,.35);transition:transform 140ms var(--snap),background 140ms}
.edit-rz:hover{transform:scale(1.12);background:rgba(70,97,127,.95)}
.edit-bar .eb-io{border:0;background:none;cursor:pointer;color:var(--muted);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;transition:background 140ms,color 140ms}
.edit-bar .eb-io:hover{background:var(--panel);color:var(--ink)}
.edit-bar .eb-reset{border:0;background:none;cursor:pointer;font:600 12.5px Inter;color:var(--muted);padding:6px}
.edit-bar .eb-reset:hover{color:var(--lava-ink)}
.edit-bar .eb-done{border:0;cursor:pointer;min-height:36px;padding:0 18px;border-radius:12px;color:#fff;
  font:700 13px Inter;background:linear-gradient(160deg,var(--lava-2),var(--lava));
  box-shadow:0 8px 18px -8px rgba(255,174,26,.6);transition:transform 140ms var(--snap)}
.edit-bar .eb-done:active{transform:scale(.96)}
.edit-tray{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);z-index:130;
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:16px;flex-wrap:wrap;justify-content:center;
  background:var(--shell-solid);border:1px solid var(--rim);box-shadow:0 18px 44px -16px rgba(2,3,5,.5);
  animation:acctIn 200ms var(--snap) both;max-width:min(720px,92vw)}
.edit-tray .et-t{font:600 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.edit-tray button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:999px;
  padding:7px 13px;font:600 12.5px Inter;color:var(--ink);transition:transform 130ms var(--snap),border-color .2s}
.edit-tray button:hover{transform:translateY(-1px);border-color:var(--sel,#5C7C9D)}
@media(prefers-reduced-motion:reduce){ .edit-bar,.edit-tray{animation:none} }

/* ==================== COLOR brief — orange means ACTION only =================
   Selection/filter/focus states across the whole app demote from lava to the
   page's module accent (slate by default — Brief B's "navigation/selected →
   slate blue"). The lever: the legacy selection tokens --lava-tint/--lava-ring
   are re-pointed to module-aware --sel-* — every page-local rule that says
   var(--lava-tint) inherits the new meaning at resolve time. True actions
   (gradients + anything using --lava/--lava-2/--lava-ink directly as a fill)
   stay unmistakably orange. */
:root{--sel:#5C7C9D;--sel-ink:#46617f;
  --sel-tint:rgba(92,124,157,.14);--sel-ring:rgba(92,124,157,.4);
  --lava-tint:var(--sel-tint);--lava-ring:var(--sel-ring)}
html.dark{--sel-ink:#9db8d2;--sel-tint:rgba(112,148,182,.18);--sel-ring:rgba(125,160,192,.45)}
html[data-module="dashboard"]{--sel:#ffae1a;--sel-ink:#9a5700;--sel-tint:rgba(255,174,26,.12);--sel-ring:rgba(255,174,26,.38)}
html[data-module="checkin"]{--sel:#2fbf5b;--sel-ink:#177a41;--sel-tint:rgba(47,191,91,.13);--sel-ring:rgba(47,191,91,.4)}
html[data-module="scan"]{--sel:#547898;--sel-ink:#43617c;--sel-tint:rgba(84,120,152,.14);--sel-ring:rgba(84,120,152,.42)}
html[data-module="warehouse"]{--sel:#f0c052;--sel-ink:#8a6a14;--sel-tint:rgba(240,192,82,.16);--sel-ring:rgba(240,192,82,.48)}
html[data-module="customers"]{--sel:#5A63E8;--sel-ink:#4a52c9;--sel-tint:rgba(90,99,232,.12);--sel-ring:rgba(90,99,232,.4)}
html[data-module="reminders"]{--sel:#5C7C9D;--sel-ink:#46617f;--sel-tint:rgba(92,124,157,.14);--sel-ring:rgba(92,124,157,.42)}
html[data-module="workshop"]{--sel:#B86A3F;--sel-ink:#9a5730;--sel-tint:rgba(184,106,63,.13);--sel-ring:rgba(184,106,63,.42)}
html[data-module="assistant"]{--sel:#7A5CFF;--sel-ink:#6247d6;--sel-tint:rgba(122,92,255,.13);--sel-ring:rgba(122,92,255,.42)}
html[data-module="users"]{--sel:#5C7C9D;--sel-ink:#46617f;--sel-tint:rgba(92,124,157,.14);--sel-ring:rgba(92,124,157,.42)}
html.dark[data-module="dashboard"]{--sel-ink:#ffd566}
html.dark[data-module="checkin"]{--sel-ink:#57d484}
html.dark[data-module="scan"]{--sel-ink:#8fb0cc}
html.dark[data-module="warehouse"]{--sel-ink:#f0c052}
html.dark[data-module="customers"]{--sel-ink:#97a0f5}
html.dark[data-module="reminders"]{--sel-ink:#9db8d2}
html.dark[data-module="workshop"]{--sel-ink:#d99a6c}
html.dark[data-module="assistant"]{--sel-ink:#a794ff}
html.dark[data-module="users"]{--sel-ink:#c9ccd2}
/* selected-state INK follows the module too (page rules said --lava-ink) */
html[data-module] .segmented button[aria-pressed="true"]{color:var(--sel-ink)}
html.dark[data-module] .segmented button[aria-pressed="true"]{color:var(--sel-ink)}
html[data-module] .wh-zonepill .n{color:var(--sel-ink)}
html[data-module] .switch input:checked{background:var(--sel)}
html[data-module] .count-badge{background:var(--sel-tint);color:var(--sel-ink)}
html[data-module] .card.dark .count-badge{background:linear-gradient(158deg,var(--lava-2),var(--lava) 52%,var(--lava-ink));color:#fff}
/* destructive/warm hovers keep their warmth — they are actions, not selections */
.sb-logout:hover{background:rgba(255,174,26,.12);color:var(--lava-ink)}
.md-logout{color:var(--lava-ink)}

/* ==================== COLOR brief — the AI surface ===========================
   "Something intelligent just joined": the agent card deepens into an
   indigo-violet optical glass with a faint star field that drifts (compositor-
   only, reduced-motion safe) and a soft violet bloom. Applied to the dashboard
   agent card and the global agent orb; violet stays exclusive to AI. */
html[data-module] .agent-card{
  background:linear-gradient(138deg,#171040 0%,#241659 42%,#33207a 100%);
  box-shadow:0 18px 44px -18px rgba(76,42,168,.55),inset 0 1px 0 rgba(255,255,255,.14)}
/* the existing ::before aurora stays; the star field lives on ::after above it */
html[data-module] .agent-card::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 28%,rgba(255,255,255,.8),transparent 100%),
    radial-gradient(1px 1px at 34% 62%,rgba(255,255,255,.55),transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 18%,rgba(200,180,255,.7),transparent 100%),
    radial-gradient(1px 1px at 71% 74%,rgba(255,255,255,.45),transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 38%,rgba(210,190,255,.65),transparent 100%),
    radial-gradient(1px 1px at 23% 84%,rgba(255,255,255,.5),transparent 100%),
    radial-gradient(1px 1px at 45% 41%,rgba(255,255,255,.35),transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 82%,rgba(190,170,255,.6),transparent 100%);
  opacity:.45;animation:aiDrift 26s linear infinite alternate}
@keyframes aiDrift{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){ html[data-module] .agent-card::after{animation:none} }

/* sidebar search — a quiet control above the navigation (Linear posture);
   in rail mode it collapses to the icon (click = expand + focus) */
.sb-search{flex:none;display:flex;align-items:center;gap:9px;min-height:40px;
  margin:0 0 8px;padding:0 12px;border-radius:12px;
  background:rgba(2,3,5,.04);border:1px solid var(--hairline);
  transition:border-color 200ms var(--snap),box-shadow 220ms var(--snap)}
html.dark .sb-search{background:rgba(244,245,247,.05)}
.sb-search:focus-within{border-color:var(--sel,#5C7C9D);box-shadow:0 0 0 3px var(--sel-tint)}
.sb-search svg{flex:none;color:var(--muted);margin:0 1px}
.sb-search input{flex:1;min-width:0;border:0;background:none;outline:none;
  font:500 13.5px Inter;color:var(--ink);padding:9px 0}
.sb-search input::placeholder{color:var(--muted);opacity:.8}
html[data-side="rail"] .sb-search{justify-content:center;padding:0;cursor:pointer}
html[data-side="rail"] .sb-search input{display:none}

/* ===== ASC page layer from dashboard.html (verbatim) ===== */

/* ---- Dashboard-page-specific layout only (shared rules live in app.css) ---- */

/* Welcome hero — the greeting is the dashboard's anchor (EDITING-MODE brief).
   Keynote-scale Sora, first name emphasized in lava; date + live clock beneath;
   the photo and the text counter-drift a few px on cursor move (desktop). */
.greet{position:relative;z-index:2;margin:10px 0 4px;animation:greetIn 700ms var(--smooth) both}
@keyframes greetIn{from{opacity:0;transform:translateY(14px)}}
.greet-line{font:600 clamp(28px,3.4vw,42px)/1.08 Sora;letter-spacing:-.02em;color:var(--on-stage);margin:0}
.greet-line b{font-weight:700;background:linear-gradient(120deg,var(--lava-2),var(--lava));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.greet-sub{font:500 13px Inter;color:var(--on-stage-2);margin-top:7px;display:flex;gap:8px;align-items:baseline}
.greet-sub .greet-dot{opacity:.5}
#greetClock{font-variant-numeric:tabular-nums}
html.warm-nav .greet{animation:none}
html.splashing .greet{animation-play-state:paused}


/* HERO grid: stage spans 2 rows beside two action cards; the AI card sits in a
   3rd row UNDER the stage, inheriting the stage's (column-1) width. */
.hero{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr auto;gap:var(--gap)}
.hero .stage{grid-column:1;grid-row:1 / 3}
.hero .act.green{grid-column:2;grid-row:1}
.hero .act.red{grid-column:2;grid-row:2}
@media(max-width:900px){ .hero{grid-template-columns:1fr;grid-template-rows:auto} .hero .stage{grid-column:auto;grid-row:auto} .hero .act.green,.hero .act.red{grid-column:auto;grid-row:auto} }

/* TRIO row (equal height): profile | season | reminders */
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
@media(max-width:900px){ .trio{grid-template-columns:1fr} }

/* Recent-sets section header (the .slider/.slide/.chip cards live in app.css) */
.recent{margin-top:var(--gap)}
.recent .head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 10px}
.recent .head h3{font:600 15px Sora}
.recent .head .live{display:inline-flex;align-items:center;gap:6px;font:600 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.recent .head .live .ld{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px 1px rgba(47,191,91,.6);animation:breathe 2.2s ease-in-out infinite}
/* Live stream marquee — seamless (dup track + translateX(-50%) with per-card
   margins), constant linear speed, GPU transform, edge-fade masks. */
.stream{position:relative;overflow:hidden;padding:2px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.stream-track{display:flex;width:max-content;will-change:transform;animation:streamMove 34s linear infinite}
.stream-track .slide{flex:0 0 auto;position:relative;margin-right:12px}
@keyframes streamMove{to{transform:translateX(-50%)}}
@media(any-hover:hover){ .stream:hover .stream-track{animation-play-state:paused} }
@media(prefers-reduced-motion:reduce){ .stream-track{animation:none} .stream{overflow-x:auto;-webkit-mask-image:none;mask-image:none} }
/* Each streamed set shows its acquisition photo with the printed QR label stuck
   on it; the set number rides in a notched corner tab (top-left). */
.stream .slide .thumb{position:relative}
.stream .qr-sticker{position:absolute;right:8px;bottom:8px;z-index:2;background:#fbfbfb;padding:4px;border-radius:6px;transform:rotate(-5deg);box-shadow:0 4px 12px -3px rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.06);cursor:pointer;transition:transform 160ms var(--snap),box-shadow 200ms var(--snap)}
@media(any-hover:hover){ .stream .qr-sticker:hover{transform:rotate(-5deg) scale(1.12);box-shadow:0 8px 18px -4px rgba(0,0,0,.6)} }
.stream .qr-sticker:active{transform:rotate(-5deg) scale(.96)}
.stream .qr-sticker img{display:block;width:38px;height:38px;image-rendering:pixelated;border-radius:2px}
.stream .slide .tab-tl{font-size:10px;padding:5px 9px 6px}

/* ===== ASC Agent card — an "intelligent" agent surface ======================
   No click-to-expand any more. The rotating hook (loved — refreshed daily by the
   engine at the bottom of the page) sits on the left; a tall type box BLURS into
   existence on the right on hover / focus. The old "bulb" spark is now a smoothly
   spinning tire. Notched corner tab kept (the ASC signature). Deliberately
   off-palette — this is the AI affordance. */
.agent-shell{position:relative}
.hero .agent-shell{grid-column:1;grid-row:3}
@media(max-width:900px){ .hero .agent-shell{grid-column:auto;grid-row:auto} }
/* Real notch: the label's exact box is SUBTRACTED from the card via mask, so the
   true background shows through — guaranteed clean. --tw/--th from JS (measures
   the label). The label is an overlay (.notch-tab), OUTSIDE the mask. */
.agent-card{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:322px;
  background:linear-gradient(165deg,#0e0b1c,#131024 58%,#0a0912);
  border:1px solid rgba(150,100,255,.22);box-shadow:var(--shadow-card);
  transition:border-color .5s var(--smooth),box-shadow .5s var(--smooth);
  --r:14px;
  /* 6 mask layers, XOR-composited (all regions disjoint):
     1 base · 2 top band · 3 left band · 4 deep-corner round (convex) ·
     5 top-edge fillet · 6 left-edge fillet (the two concave transitions that
     make the gap sweep smoothly around the tab — the Apple-grade detail). */
  -webkit-mask:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000) 0 0/var(--tw,0px) calc(var(--th,0px) - var(--r)) no-repeat,
    linear-gradient(#000,#000) 0 calc(var(--th,0px) - var(--r))/calc(var(--tw,0px) - var(--r)) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,#000 calc(var(--r) - .6px),#0000 var(--r)) calc(var(--tw,0px) - var(--r)) calc(var(--th,0px) - var(--r))/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) var(--tw,0px) 0/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) 0 var(--th,0px)/var(--r) var(--r) no-repeat;
  -webkit-mask-composite:xor,xor,xor,xor,xor;
  mask:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000) 0 0/var(--tw,0px) calc(var(--th,0px) - var(--r)) no-repeat,
    linear-gradient(#000,#000) 0 calc(var(--th,0px) - var(--r))/calc(var(--tw,0px) - var(--r)) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,#000 calc(var(--r) - .6px),#0000 var(--r)) calc(var(--tw,0px) - var(--r)) calc(var(--th,0px) - var(--r))/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) var(--tw,0px) 0/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) 0 var(--th,0px)/var(--r) var(--r) no-repeat;
  mask-composite:exclude,exclude,exclude,exclude,exclude}
/* the label floats in the cut, sitting directly on the real background behind */
.notch-tab{position:absolute;top:0;left:0;z-index:6;font:600 10.5px Inter;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);padding:7px 13px 8px;white-space:nowrap;pointer-events:none}
@media(any-hover:hover){ .agent-card:hover{border-color:rgba(170,120,255,.42);box-shadow:0 22px 50px -22px rgba(90,50,200,.6),var(--shadow-card)} }
.agent-card::before{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(38% 46% at 22% 32%,rgba(130,70,255,.55),transparent 60%),
    radial-gradient(40% 48% at 78% 38%,rgba(232,64,208,.42),transparent 60%),
    radial-gradient(46% 54% at 58% 82%,rgba(50,100,255,.42),transparent 62%);
  filter:blur(34px);animation:agAurora 15s ease-in-out infinite alternate}
@keyframes agAurora{to{transform:translate(7%,-6%) rotate(10deg) scale(1.12)}}

/* body fills the card; THREE cycling hook lines are spread with equal gaps —
   l1 left, l2 right, l3 left. On hover the 2nd + 3rd fade-blur out and the chat
   window (bubble + chips) takes their place. */
.agent-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:40px 26px 30px;color:#f4f5f7}
.agent-hook{font-family:"Sora",Inter;font-weight:500;font-size:clamp(15px,1.65vw,19px);
  line-height:1.32;letter-spacing:-.012em;max-width:30ch;
  background:linear-gradient(96deg,#ffffff 0%,#e7dcff 46%,#b7a3ff 78%,#8ee6ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 13px rgba(139,92,246,.28));
  transition:opacity .48s var(--smooth),transform .48s var(--smooth),filter .48s var(--smooth);
  will-change:opacity,transform}
.agent-hook.l1{align-self:flex-start;text-align:left}
.agent-hook.l2{align-self:flex-end;text-align:right;opacity:.9}
.agent-hook.l3{align-self:flex-start;text-align:left;opacity:.9}
/* sequential swap for a single line: outro = fade out + lift; intro = rise + fade in */
.agent-hook.out{opacity:0;transform:translateY(-7px)}
.agent-hook.in{opacity:0;transform:translateY(13px);transition:none}
/* hover: the 2nd + 3rd lines quickly fade-blur out (then the window appears) */
@media(any-hover:hover){
  .agent-card:hover .agent-hook.l2,.agent-card:focus-within .agent-hook.l2,
  .agent-card:hover .agent-hook.l3,.agent-card:focus-within .agent-hook.l3{
    opacity:0;transform:translateY(-4px);filter:blur(7px) drop-shadow(0 2px 13px rgba(139,92,246,0));
    transition:opacity .3s var(--smooth),transform .3s var(--smooth),filter .3s var(--smooth)}
}

/* the hover-revealed chat window: the bubble BLUR-FADES in, then the three
   suggestion chips fade-RISE one after another. Space is reserved (opacity /
   transform only, never layout) so nothing reflows — buttery, Apple-grade. */
.tb-reply .tb-me{display:block;align-self:flex-end;text-align:right;margin:0 0 8px auto;max-width:86%;
  padding:7px 12px;border-radius:14px 14px 4px 14px;background:rgba(244,245,247,.14);
  font:500 12.5px/1.45 Inter;color:var(--on-stage)}
.tb-reply .tb-ans{display:block}
.agent-reveal{position:absolute;left:26px;right:26px;bottom:26px;display:flex;flex-direction:column;gap:12px;pointer-events:none}
@media(any-hover:hover){ .agent-card:hover .agent-reveal,.agent-card:focus-within .agent-reveal{pointer-events:auto} }
/* touch has no hover → keep the chat window tappable there; and while a reply is
   live, keep it open + interactive regardless of hover so the answer doesn't vanish. */
html[data-device="tablet"] .agent-reveal,html[data-device="mobile"] .agent-reveal,
.agent-card.agent-live .agent-reveal{pointer-events:auto}
.agent-card.agent-live .text-bubble,.agent-card.agent-live .qchip{opacity:1;filter:blur(0);transform:none}
.agent-card.agent-live .agent-hook.l2,.agent-card.agent-live .agent-hook.l3{opacity:0}
.tb-reply{display:none;margin:0 0 2px;font:500 13.5px/1.42 Inter;color:#ece6ff;background:rgba(12,10,24,.6);
  border:1px solid rgba(150,110,255,.26);border-radius:13px;padding:10px 13px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  max-height:112px;overflow:auto;box-shadow:0 14px 34px -20px rgba(0,0,0,.7)}
.tb-reply.on{display:block;animation:rise .4s var(--smooth) both}
.text-bubble{position:relative;display:flex;align-items:center;gap:8px;min-height:50px;padding:0 6px 0 17px;border-radius:15px;
  background:rgba(12,10,24,.55);border:1px solid rgba(150,110,255,.3);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 42px -22px rgba(0,0,0,.72);
  opacity:0;filter:blur(16px);transform:translateY(12px) scale(.98);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .3s var(--smooth);
  will-change:opacity,filter,transform}
.tb-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#f3efff;font:500 14.5px Inter}
.tb-input::placeholder{color:rgba(233,224,255,.46)}
.tb-send{flex:none;width:38px;height:38px;border-radius:11px;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#e040d0);box-shadow:0 6px 16px -6px rgba(139,92,246,.7);
  transition:transform 150ms var(--snap),box-shadow .2s var(--smooth)}
@media(any-hover:hover){ .tb-send:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(224,64,208,.7)} }
.tb-send:active{transform:scale(.92)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.qchip{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;border-radius:999px;cursor:pointer;
  background:rgba(150,110,255,.12);border:1px solid rgba(150,110,255,.3);color:#e9e2ff;font:600 12.5px Inter;letter-spacing:.005em;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),border-color .2s var(--smooth),background .2s var(--smooth)}
@media(any-hover:hover){ .qchip:hover{border-color:rgba(224,64,208,.55);background:rgba(150,110,255,.22)} }
/* reveal: bubble first, then the chips cascade up one-by-one just after */
@media(any-hover:hover){
  .agent-card:hover .text-bubble,.agent-card:focus-within .text-bubble{opacity:1;filter:blur(0);transform:none;transition-delay:.24s}
  .agent-card:hover .qchip,.agent-card:focus-within .qchip{opacity:1;transform:none;transition-delay:calc(.34s + var(--ci,0)*.055s)}
}
/* ===== RESPONSIVE — adapt the agent window to each device tier ==============
   Capability-based detection (NOT user-agent sniffing): app.js reads matchMedia
   hover/pointer + width and sets html[data-device] = desktop | tablet | mobile
   (re-evaluated on resize/rotate).
   · desktop (a mouse → real hover): the hover-to-reveal window above.
   · tablet / mobile (touch → no hover): nothing to hover, so the window is laid
     out STATICALLY in normal flow (headline → input → chips) — it can't overlap
     the lines the way the hover-only reveal did (that was the mobile bug).
   @media(hover:none) is the pre-JS / JS-off CSS safety net; [data-device] is the
   precise per-tier control. */
@media (hover: none){
  .agent-card{min-height:auto}
  .agent-body{justify-content:flex-start;gap:16px;padding:32px 22px 22px}
  .agent-hook.l2,.agent-hook.l3{display:none}
  .agent-reveal{position:static;inset:auto;pointer-events:auto;gap:11px}
  .text-bubble,.qchip{opacity:1;filter:none;transform:none;transition:none}
}
/* real narrow-touch phones get the compact treatment immediately (no pre-JS reflow) */
@media (hover: none) and (max-width: 640px){
  .agent-body{padding:26px 18px 18px;gap:13px}
  .agent-hook.l1{font-size:16px;max-width:none}
  .text-bubble{min-height:46px}
  .qchip{min-height:34px;padding:0 13px;font-size:12px}
  .chips .qchip:nth-child(n+7){display:none}
}
html[data-device="tablet"] .agent-card,html[data-device="mobile"] .agent-card{min-height:auto}
html[data-device="tablet"] .agent-body,html[data-device="mobile"] .agent-body{justify-content:flex-start;gap:16px;padding:32px 22px 22px}
html[data-device="tablet"] .agent-hook.l2,html[data-device="tablet"] .agent-hook.l3,
html[data-device="mobile"] .agent-hook.l2,html[data-device="mobile"] .agent-hook.l3{display:none}
html[data-device="tablet"] .agent-reveal,html[data-device="mobile"] .agent-reveal{position:static;inset:auto;pointer-events:auto;gap:11px}
html[data-device="tablet"] .text-bubble,html[data-device="tablet"] .qchip,
html[data-device="mobile"] .text-bubble,html[data-device="mobile"] .qchip{opacity:1;filter:none;transform:none;transition:none}
/* mobile — tighter than tablet, and cap the chips so the card stays compact */
html[data-device="mobile"] .agent-body{padding:26px 18px 18px;gap:13px}
html[data-device="mobile"] .agent-hook.l1{font-size:16px;max-width:none}
html[data-device="mobile"] .text-bubble{min-height:46px}
html[data-device="mobile"] .qchip{min-height:34px;padding:0 13px;font-size:12px}
html[data-device="mobile"] .chips .qchip:nth-child(n+7){display:none}
@media(prefers-reduced-motion:reduce){
  .agent-card::before{animation:none}
  .agent-hook{transition:opacity .3s linear}
  .agent-card:hover .agent-hook.l2,.agent-card:hover .agent-hook.l3,.agent-card:focus-within .agent-hook.l2,.agent-card:focus-within .agent-hook.l3{filter:none!important;transform:none!important}
  .text-bubble,.qchip{transition:opacity .25s linear!important;filter:none!important;transform:none!important}
  .agent-card:hover .qchip,.agent-card:focus-within .qchip{transition-delay:0s!important}
}

/* ===== General corner CUT — the same real mask subtraction as the agent card,
   applied by JS to the other cards so every notch reveals the TRUE background
   instead of a painted --tab-surf patch (kills the corner "leakage"). The JS
   measures each tab, moves it to an overlay, and masks its card. Top-left tabs
   only for now; the animated stream slides keep the painted notch. ===== */
.notch-cut{--r:14px;
  -webkit-mask:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000) 0 0/var(--tw,0px) calc(var(--th,0px) - var(--r)) no-repeat,
    linear-gradient(#000,#000) 0 calc(var(--th,0px) - var(--r))/calc(var(--tw,0px) - var(--r)) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,#000 calc(var(--r) - .6px),#0000 var(--r)) calc(var(--tw,0px) - var(--r)) calc(var(--th,0px) - var(--r))/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) var(--tw,0px) 0/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) 0 var(--th,0px)/var(--r) var(--r) no-repeat;
  -webkit-mask-composite:xor,xor,xor,xor,xor;
  mask:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000) 0 0/var(--tw,0px) calc(var(--th,0px) - var(--r)) no-repeat,
    linear-gradient(#000,#000) 0 calc(var(--th,0px) - var(--r))/calc(var(--tw,0px) - var(--r)) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 0 0,#000 calc(var(--r) - .6px),#0000 var(--r)) calc(var(--tw,0px) - var(--r)) calc(var(--th,0px) - var(--r))/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) var(--tw,0px) 0/var(--r) var(--r) no-repeat,
    radial-gradient(circle var(--r) at 100% 100%,#0000 calc(var(--r) - .6px),#000 var(--r)) 0 var(--th,0px)/var(--r) var(--r) no-repeat;
  mask-composite:exclude,exclude,exclude,exclude,exclude}
.notch-cut-tab{background:transparent!important;z-index:20}
.notch-cut-tab::before,.notch-cut-tab::after{display:none!important}

/* ===== Notes / suggestions card — next to the AI card (hero col 2 / row 3).
   The team writes suggestions WITH THEIR NAME for the owner to review & dismiss.
   Persists in localStorage ($0 preview demo; wire to Supabase on the live port
   for real multi-user collection). On-palette utility card (Lava accent). ===== */
.notes-shell{position:relative}
.hero .notes-shell{grid-column:2;grid-row:3}
@media(max-width:900px){ .hero .notes-shell{grid-column:auto;grid-row:auto} }
.notes-card{position:relative;height:100%;min-height:212px;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--panel);box-shadow:var(--shadow-card);padding:30px 20px 18px;transition:background .38s var(--smooth)}
.notes-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.notes-head h3{font:600 15px Sora;color:var(--ink)}
.notes-count{margin-left:auto;font:800 12px Inter;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--lava);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.notes-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:0 -2px;padding:0 2px 2px;min-height:60px;scrollbar-width:thin}
.note{position:relative;background:var(--panel-2);border-radius:12px;padding:10px 30px 11px 12px;
  animation:noteIn .32s var(--smooth) both}
html.dark .note{background:rgba(244,245,247,.05)}
@keyframes noteIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.note-top{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.note-author{font:650 12px Inter;color:var(--ink)}
.note-time{font:500 10.5px Inter;color:var(--muted);white-space:nowrap}
.note-text{font:400 12.5px/1.45 Inter;color:var(--ink-2);word-break:break-word}
.note-x{position:absolute;top:7px;right:7px;width:19px;height:19px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--muted);display:grid;place-items:center;font:400 14px/1 Inter;transition:background .18s,color .18s,transform 120ms var(--snap)}
@media(any-hover:hover){ .note-x:hover{background:var(--lava-tint);color:var(--lava-ink)} }
.note-x:active{transform:scale(.85)}
.notes-empty{font:500 12.5px Inter;color:var(--muted);padding:12px 4px}
.notes-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
.notes-name,.notes-text{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:9px 11px;font:500 12.5px Inter;color:var(--ink);outline:none;transition:border-color .2s var(--smooth)}
html.dark .notes-name,html.dark .notes-text{background:rgba(244,245,247,.05)}
.notes-name:focus,.notes-text:focus{border-color:var(--lava-ring)}
.notes-name::placeholder,.notes-text::placeholder{color:var(--muted)}
.notes-row{display:flex;gap:8px}
.notes-text{flex:1;min-width:0}
.notes-add{flex:none;width:38px;border:0;border-radius:10px;cursor:pointer;background:var(--lava);color:#fff;font:400 20px/1 Inter;
  transition:transform 150ms var(--snap),background .2s var(--smooth)}
@media(any-hover:hover){ .notes-add:hover{background:var(--lava-2)} }
.notes-add:active{transform:scale(.92)}

/* ===== ASC page layer from login.html (verbatim) ===== */

/* Login — iPhone-calm: ambient canvas, a floating glass card, Google-first. */
body.is-auth{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:22px}
.auth-card{position:relative;z-index:1;width:min(412px,100%);border-radius:30px;padding:30px 26px 24px;
  background:var(--shell-solid);border:1px solid var(--rim);border-top-color:var(--rim-top);
  box-shadow:var(--shadow-card);animation:sheetIn 560ms var(--smooth) both}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .auth-card{background:var(--shell);-webkit-backdrop-filter:blur(34px) saturate(150%) brightness(108%);backdrop-filter:blur(34px) saturate(150%) brightness(108%)}
}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.auth-home{font:600 15px Inter;color:inherit;text-decoration:none}
.auth-logo{height:26px;width:auto;filter:drop-shadow(0 3px 8px rgba(255,174,26,.28))}
/* iOS sliding theme switch — 60% scale, spring thumb, lava micro-glow on move */
.auth-theme{position:relative;width:38px;height:22px;border-radius:999px;border:0;cursor:pointer;flex:none;
  background:var(--line);transition:background 320ms var(--smooth);
  box-shadow:inset 0 1px 2px rgba(2,3,5,.14)}
html.dark .auth-theme{background:#2e2f31;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.auth-theme i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(2,3,5,.3),0 0 0 0 rgba(255,174,26,0);
  transition:transform 300ms cubic-bezier(.34,1.56,.64,1),box-shadow 300ms var(--smooth)}
html.dark .auth-theme i{transform:translateX(16px)}
.auth-theme:active i{width:21px}
html.dark .auth-theme:active i{transform:translateX(13px)}
.auth-theme.kick i{box-shadow:0 1px 3px rgba(2,3,5,.3),0 0 10px 2px rgba(255,174,26,.35)}
/* optical glass: edge highlight, refraction sheen tracking the pointer, micro-noise */
.auth-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(240px 180px at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.16),transparent 70%);
  transition:opacity .3s}
html.dark .auth-card::before{background:radial-gradient(240px 180px at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.07),transparent 70%)}
.auth-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.035;
  mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.auth-card{box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(2,3,5,.05)}
html.dark .auth-card{box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.3)}
.auth-card>*{position:relative;z-index:1}
.auth-title{font:600 24px Sora;letter-spacing:-.02em;color:var(--ink)}
.auth-sub{font:500 13.5px Inter;color:var(--muted);margin:3px 0 20px}

.btn-google{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--ink);font:650 14.5px Inter;
  box-shadow:0 2px 8px -4px rgba(20,18,15,.2);transition:transform 140ms var(--snap),background .2s var(--smooth),border-color .2s}
.btn-google:active{transform:scale(.985)}
@media(any-hover:hover){ .btn-google:hover{border-color:var(--lava-ring);background:var(--panel)} }
.btn-google svg{flex:none}

.auth-div{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font:600 11px Inter;letter-spacing:.08em;text-transform:uppercase}
.auth-div::before,.auth-div::after{content:"";height:1px;flex:1;background:var(--line)}

.fieldx{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 12px;margin-bottom:11px;transition:border-color .2s var(--smooth)}
.fieldx:focus-within{border-color:var(--lava-ring)}
.fieldx .fx-ic{flex:none;color:var(--muted);display:grid;place-items:center}
.fieldx input{flex:1;min-width:0;border:0;background:none;outline:none;font:500 15px Inter;color:var(--ink);padding:14px 0}
.fieldx input::placeholder{color:var(--muted);opacity:.85}
.fx-eye{flex:none;border:0;background:none;cursor:pointer;color:var(--muted);padding:13px;margin-right:-12px;display:grid;place-items:center}
.auth-names{display:none;gap:11px}
body.signup .auth-names{display:flex}
body.signup .auth-names .fieldx{flex:1;margin-bottom:11px}

.auth-forgot-row{display:flex;justify-content:flex-end;margin:-2px 0 12px}
.auth-forgot{background:none;border:0;cursor:pointer;font:600 12.5px Inter;color:var(--muted);padding:2px}
@media(any-hover:hover){ .auth-forgot:hover{color:var(--lava-ink)} }
body.signup .auth-forgot-row,body.recover .auth-forgot-row{display:none}

.btn-amber{width:100%;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:14px;color:#fff;font:700 15px Inter;
  background:linear-gradient(160deg,var(--lava-2),var(--lava) 52%,var(--lava-ink));
  box-shadow:0 12px 26px -10px rgba(255,174,26,.6),inset 0 1px 0 rgba(255,255,255,.28);transition:transform 140ms var(--snap),filter .2s}
.btn-amber:active{transform:scale(.98)}
.btn-amber[disabled]{opacity:.6;cursor:progress}
@media(any-hover:hover){ .btn-amber:hover{filter:brightness(1.04)} }

.auth-switch{text-align:center;margin:16px 0 0;font:500 13px Inter;color:var(--muted)}
.auth-switch button{background:none;border:0;cursor:pointer;font:700 13px Inter;color:var(--lava-ink);padding:0}
.auth-msg{min-height:18px;margin:12px 0 0;font:600 12.5px/1.4 Inter;text-align:center}
.auth-msg.err{color:var(--lava-ink)}
.auth-msg.ok{color:var(--green-ink)}
/* signup + recover only ever show what they need */
body.reset .fieldx.f-pass,body.reset .btn-google,body.reset .auth-div,body.reset .auth-switch{display:none}
body.recover .fieldx.f-email,body.recover .btn-google,body.recover .auth-div,body.recover .auth-switch{display:none}