/* Talk Shops visual theme (2026-11). Loaded after each page's base styles, so it only restyles:
   tokens, type, surfaces, motion. Layout and behavior stay in index.html / demo.html / app.js. */
:root{
  --bg:#f4f5f8; --surface:#ffffff; --surface-2:#f7f8fa; --fg:#0e1525; --muted:#5d6779; --line:#e3e6ec; --line-strong:#d2d7e0;
  --accent:#3d5afe; --accent-2:#7c4dff; --accent-fg:#ffffff; --accent-soft:#eef1ff; --accent-ink:#2a44d8;
  --warn:#b45309; --warn-bg:#fff6e8; --ok:#0f8a5f; --ok-bg:#e8f7f0; --bad:#c62f3b; --bad-bg:#fdeeef;
  --bubble-out:#3d5afe; --bubble-out-fg:#ffffff; --bubble-in:#eef0f4;
  --grad:linear-gradient(135deg,#3d5afe 0%,#6a4dff 55%,#9a4dff 100%);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-md:0 2px 4px rgba(16,24,40,.04),0 8px 20px -4px rgba(16,24,40,.10);
  --shadow-lg:0 12px 32px -8px rgba(16,24,40,.22),0 4px 10px rgba(16,24,40,.06);
  --ring:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-display:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0e14; --surface:#131824; --surface-2:#181e2c; --fg:#e8ecf4; --muted:#949db0; --line:#252c3b; --line-strong:#323a4c;
  --accent:#7b8cff; --accent-2:#a98bff; --accent-fg:#0b0e1a; --accent-soft:#1c2340; --accent-ink:#a4b0ff;
  --warn:#f5b45c; --warn-bg:#2d2214; --ok:#4fd39a; --ok-bg:#112a20; --bad:#ff8b93; --bad-bg:#33181c;
  --bubble-out:#4a63ff; --bubble-out-fg:#ffffff; --bubble-in:#222a3a;
  --grad:linear-gradient(135deg,#4a63ff 0%,#7155ff 55%,#9a5cff 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 4px rgba(0,0,0,.3),0 8px 24px -4px rgba(0,0,0,.45);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0e14; --surface:#131824; --surface-2:#181e2c; --fg:#e8ecf4; --muted:#949db0; --line:#252c3b; --line-strong:#323a4c;
  --accent:#7b8cff; --accent-2:#a98bff; --accent-fg:#0b0e1a; --accent-soft:#1c2340; --accent-ink:#a4b0ff;
  --warn:#f5b45c; --warn-bg:#2d2214; --ok:#4fd39a; --ok-bg:#112a20; --bad:#ff8b93; --bad-bg:#33181c;
  --bubble-out:#4a63ff; --bubble-out-fg:#ffffff; --bubble-in:#222a3a;
  --grad:linear-gradient(135deg,#4a63ff 0%,#7155ff 55%,#9a5cff 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 4px rgba(0,0,0,.3),0 8px 24px -4px rgba(0,0,0,.45);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6); color-scheme:dark}

/* ---------- type ---------- */
html{accent-color:var(--accent)}
body{font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";
  background:radial-gradient(1200px 500px at 85% -10%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
h1,h2,h3{font-weight:650;letter-spacing:-.02em}
.mono{font-size:.8em;letter-spacing:0}
::selection{background:color-mix(in srgb,var(--accent) 25%,transparent)}
:focus-visible{outline:none;box-shadow:var(--ring),0 0 0 1px var(--accent)}

/* ---------- top bar ---------- */
body::before{background:color-mix(in srgb,var(--surface) 80%,transparent)}
.topbar{background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.topbar-in{padding-block:12px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--grad);box-shadow:0 4px 12px -2px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.brand-mark svg{width:19px;height:19px;stroke:#fff}
.brand h1{font-size:18px;letter-spacing:-.025em;font-weight:700}
.brand small{font-size:12.5px;margin-top:2px}
.tabs{background:color-mix(in srgb,var(--fg) 5%,transparent);border:0;border-radius:11px;padding:4px;gap:2px}
.tab{border-radius:8px;padding:7px 14px;font-weight:550;font-size:14px;transition:color .15s,background .15s}
.tab:hover{color:var(--fg)}
.tab[aria-current="page"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(16,24,40,.08),0 1px 1px rgba(16,24,40,.04)}
.signout{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 14px;font-weight:550;font-size:14px;transition:border-color .15s,background .15s}
.signout:hover{border-color:var(--line-strong);background:var(--surface-2)}
.demo-note,.cust-demo{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;padding-block:8px}
.linkbtn{color:var(--accent-ink);text-decoration:none;font-weight:600}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}

main{padding-block:24px 56px;max-width:1600px;margin-inline:auto}

/* ---------- stats ---------- */
.stats{gap:12px;margin-bottom:20px}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px 14px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.stat::before{content:"";position:absolute;right:18px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.stat.warn::before{background:var(--warn);box-shadow:0 0 0 4px var(--warn-bg)}
.stat.ok::before{background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg)}
.stat b{font-family:var(--f-display);font-size:32px;font-weight:650;letter-spacing:-.035em;line-height:1;margin-top:2px}
.stat span{display:block;margin-top:6px;font-size:13px;font-weight:500}
button.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---------- board ---------- */
.board{gap:12px;grid-auto-columns:minmax(240px,1fr)}
.col{background:color-mix(in srgb,var(--fg) 3%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-lg);padding:10px;gap:10px}
.col-h{padding:4px 4px 2px;align-items:center}
.col-h h3{font-family:var(--f-body);font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
.col-h h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.col-h span{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line);display:inline-grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted)}
.col.is-approval{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.col.is-approval .col-h h3::before{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.col.is-ready{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.col.is-ready .col-h h3::before{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.card{border-radius:var(--r);padding:12px 13px;gap:4px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card:active{transform:translateY(0) scale(.99)}
.card .veh{font-weight:600;letter-spacing:-.01em;font-size:14.5px}
.card .row{font-size:13px}
.empty-col{font-size:13px;padding:14px 6px;text-align:center;border:1.5px dashed color-mix(in srgb,var(--line-strong) 70%,transparent);border-radius:var(--r);color:color-mix(in srgb,var(--muted) 80%,transparent)}
.pill{font-size:11.5px;font-weight:600;padding:3px 9px;letter-spacing:.005em;background:var(--accent-soft);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 15%,transparent)}
.pill.warn{border-color:color-mix(in srgb,var(--warn) 20%,transparent)} .pill.ok{border-color:color-mix(in srgb,var(--ok) 20%,transparent)} .pill.bad{border-color:color-mix(in srgb,var(--bad) 20%,transparent)}
.empty-board{border-radius:var(--r-xl);padding:48px 24px;border:1.5px dashed var(--line-strong);background:var(--surface)}
.empty-board h2{font-size:24px}

/* ---------- buttons & fields ---------- */
.btn{border:1px solid var(--line);background:var(--surface);padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;letter-spacing:-.005em;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .12s var(--ease),box-shadow .15s,background .15s,border-color .15s,filter .15s}
.btn:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-2)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.1),0 4px 12px -3px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover:not(:disabled){background:var(--grad);filter:brightness(1.07);box-shadow:0 2px 4px rgba(16,24,40,.1),0 8px 18px -4px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
a.btn.primary{color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.google{font-weight:600}
.x{border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:background .15s,color .15s}
.x:hover{background:var(--surface-2);color:var(--fg)}
.field{font-size:13px;font-weight:550;gap:6px}
.field input,.field select,.field textarea,.add-line input,.cust-pick select{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;padding:10px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:border-color .15s,box-shadow .15s}
.field input:hover,.field select:hover,.field textarea:hover,.add-line input:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line-strong))}
.field input:focus,.field select:focus,.field textarea:focus,.add-line input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.or{font-size:12.5px}

/* ---------- side sheet ---------- */
.scrim{background:rgba(10,14,24,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet{box-shadow:-24px 0 60px -12px rgba(10,14,24,.3);border-left:1px solid var(--line)}
.sheet-h{padding:20px 22px 18px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface))}
.sheet-h h2{font-size:24px;letter-spacing:-.03em}
.sheet-body{padding:20px 22px 36px;gap:26px}
.sec h3,.c-card h3{font-family:var(--f-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stepper{gap:6px}
.step{border-radius:10px;padding:8px 6px;font-weight:550;font-size:12.5px;background:var(--surface);transition:all .15s var(--ease)}
.step.done{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.step.current{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 12px -3px color-mix(in srgb,var(--accent) 55%,transparent)}
.step:not(.current):hover{border-color:var(--accent);color:var(--fg);transform:translateY(-1px)}
table.est td,table.est th{padding:9px 4px}
table.est th{font-size:11.5px;letter-spacing:.07em}
.photo,.photo-add{border-radius:var(--r)}
.photo-add{border-color:var(--line-strong);transition:border-color .15s,color .15s,background .15s}
.photo-add:hover{background:var(--accent-soft)}
.bubble{border-radius:18px;padding:9px 14px;line-height:1.45;box-shadow:var(--shadow)}
.bubble.out{background:var(--grad);border-bottom-right-radius:6px}
.bubble.in{border-bottom-left-radius:6px}
.log li{padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.log li:last-child{border-bottom:0}

/* ---------- modal, panels, toast ---------- */
.modal{background:rgba(10,14,24,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-card{border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.modal-card h2{font-size:22px;letter-spacing:-.03em}
.panel{border-radius:var(--r-xl);padding:26px;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.panel h2{font-size:26px;letter-spacing:-.035em}
.est-add{border-radius:var(--r);background:var(--surface-2)}
.notice{border-radius:var(--r);border:1px solid color-mix(in srgb,var(--warn) 25%,transparent)}
.toast{border-radius:12px;padding:11px 18px;font-weight:550;box-shadow:var(--shadow-lg);background:color-mix(in srgb,var(--fg) 92%,transparent);backdrop-filter:blur(8px)}
.demo-box{border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),color-mix(in srgb,var(--accent-2) 6%,var(--surface)));border-radius:var(--r-lg);padding:16px}
.demo-box b{font-family:var(--f-display);font-size:16px;letter-spacing:-.02em;font-weight:650}
.demo-creds{border-radius:10px}

/* archive + suggestions */
.archive-h h2{font-size:28px;letter-spacing:-.035em}
.archive-row{border-radius:var(--r);padding:13px 15px;transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
.archive-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px);box-shadow:var(--shadow-md)}
.suggest{border-radius:12px;box-shadow:var(--shadow-lg)}

/* ---------- sign in ---------- */
.login-wrap{min-height:100vh;min-height:100dvh}
.login{border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-lg);border:1px solid var(--line);gap:16px;width:min(420px,100%)}
.login h2{font-size:28px;letter-spacing:-.035em;margin-top:8px}
.login .btn.primary{padding-block:11px}
main:has(>.auth){padding:0;max-width:none}
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth .login-wrap{min-height:0;padding-block:40px}
.auth .login{box-shadow:none;border:0;background:transparent;padding:8px}
.hero{position:relative;overflow:hidden;color:#fff;padding:48px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  background:radial-gradient(700px 420px at 15% 0%,rgba(124,77,255,.55),transparent 60%),radial-gradient(640px 480px at 100% 100%,rgba(61,90,254,.6),transparent 60%),#0a0d1c}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 30% 30%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 10%,transparent 70%);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .brand h1{color:#fff}
.hero-copy h2{font-size:clamp(34px,4vw,52px);line-height:1.04;letter-spacing:-.045em;font-weight:700;max-width:14ch}
.hero-copy h2 em{font-style:normal;background:linear-gradient(90deg,#a9b6ff,#d3b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{color:rgba(255,255,255,.72);font-size:16.5px;max-width:42ch;margin:16px 0 0}
.hero-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.hero-list li{display:flex;gap:12px;align-items:center;color:rgba(255,255,255,.88);font-size:15px}
.hero-list svg{flex:none;width:30px;height:30px;padding:7px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);stroke:#c9d1ff}
.hero-chat{display:flex;flex-direction:column;gap:8px;max-width:360px}
.hero-chat div{padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-chat .o{align-self:flex-end;background:linear-gradient(135deg,#4a63ff,#8a55ff);border-bottom-right-radius:6px;box-shadow:0 10px 30px -8px rgba(74,99,255,.7)}
.hero-chat .i{align-self:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:6px}
.hero-chat small{display:block;opacity:.6;font-size:11.5px;margin-top:3px}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .hero{padding:32px 20px 28px;gap:24px}
  .hero-copy h2{font-size:32px}
  .hero-list,.hero-chat{display:none}
  .auth .login-wrap{padding-block:24px 40px}
}

/* ---------- customer page ---------- */
.cust-page{padding-bottom:24px}
.c-head{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:22px 20px 24px}
.c-head::after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none}
.cust-page .c-head{border-radius:0 0 var(--r-xl) var(--r-xl)}
.c-head small{opacity:.8}
.c-head h2{font-size:28px;letter-spacing:-.035em;margin-top:6px}
.c-body{padding:16px;gap:14px}
.c-card{border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.tl li{padding:7px 0}
.tl li:not(:last-child)::after{top:25px;bottom:-11px}
.tl li::before{position:relative;z-index:1}
.tl li.current::before{animation:tsPulse 2s ease-in-out infinite}
.decide button{border-radius:10px;padding:8px;transition:all .15s var(--ease)}
.decide button:hover{border-color:var(--line-strong)}
.total{font-size:17px;letter-spacing:-.01em}
.call b{font-size:14px}
.phone{border-radius:40px;padding:12px;box-shadow:var(--shadow-lg)}
.phone-in{border-radius:30px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .ts-intro #app>*{animation:tsRise .35s var(--ease) both}
  .ts-intro .board .col{animation:tsRise .4s var(--ease) both}
  .ts-intro .board .col:nth-child(2){animation-delay:.03s}.board .col:nth-child(3){animation-delay:.06s}.board .col:nth-child(4){animation-delay:.09s}
  .board .col:nth-child(5){animation-delay:.12s}.board .col:nth-child(6){animation-delay:.15s}.board .col:nth-child(7){animation-delay:.18s}.board .col:nth-child(8){animation-delay:.21s}
  .ts-intro .stat{animation:tsRise .4s var(--ease) both}
  .stat:nth-child(2){animation-delay:.04s}.stat:nth-child(3){animation-delay:.08s}.stat:nth-child(4){animation-delay:.12s}
  .sheet:not(.no-anim){animation:tsSheet .32s var(--ease)}
  .modal{animation:tsFade .2s ease}
  .modal-card{animation:tsPop .28s var(--ease)}
  .toast{animation:tsToast .3s var(--ease)}
  .hero-chat div{animation:tsRise .5s var(--ease) both}
  .hero-chat div:nth-child(2){animation-delay:.5s}.hero-chat div:nth-child(3){animation-delay:1s}
}
@keyframes tsRise{from{opacity:0;transform:translateY(8px)}}
@keyframes tsFade{from{opacity:0}}
@keyframes tsSheet{from{transform:translateX(40px);opacity:.4}}
@keyframes tsPop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes tsToast{from{opacity:0;transform:translate(-50%,12px)}}
@keyframes tsPulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 12%,transparent)}}
.hero .brand small{color:rgba(255,255,255,.6)}

/* ---------- tab icons; bottom tab bar on phones (signed-in app only) ---------- */
.tab{display:inline-flex;align-items:center;gap:7px}
.tab-i{width:16px;height:16px;flex:none;opacity:.8}
.tab[aria-current="page"] .tab-i{opacity:1;color:var(--accent)}
.tab-short{display:none}
@media (max-width:760px){
  .tabs.has-icons{position:fixed;left:0;right:0;bottom:0;z-index:15;order:0;width:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-radius:0;
    padding:6px max(6px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right,0px));
    background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
    border-top:1px solid var(--line);box-shadow:0 -6px 20px -10px rgba(16,24,40,.18)}
  .tabs.has-icons .tab{flex-direction:column;gap:3px;padding:6px 2px;font-size:11.5px;font-weight:600;border-radius:10px;min-width:0}
  .tabs.has-icons .tab-l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs.has-icons .tab-i{width:22px;height:22px}
  .tabs.has-icons .tab[aria-current="page"]{background:var(--accent-soft);box-shadow:none;color:var(--accent-ink)}
  .tabs.has-icons .tab-full{display:none}
  .tabs.has-icons .tab-short{display:inline}
  body:has(.tabs.has-icons) main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  body:has(.tabs.has-icons) .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:has(#shopChrome[hidden]) main{padding-bottom:40px}
}

/* ---------- board header: bay name, age key, search ---------- */
.board-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:4px 0 14px}
.board-top h2{font-size:22px;letter-spacing:-.03em;margin-right:auto}
.board-search{position:relative;display:flex;align-items:center;width:min(340px,100%)}
.board-search svg{position:absolute;left:12px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.board-search input{width:100%;border:1px solid var(--line-strong);background:var(--surface);border-radius:12px;padding:10px 12px 10px 38px;font-size:15px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.board-search input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.age-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.age-key span{display:inline-flex;align-items:center;gap:6px}
.age-key span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--age)}
.board-none{margin:0 0 14px;font-size:14px}
.col.search-hide{display:none}
@media (max-width:640px){.board-top h2{width:100%}.board-search{width:100%;order:2}.age-key{order:3}}

/* time in shop: green < 1 day, amber 1–3 days, red > 3 days */
.age-ok{--age:#16a36a}.age-mid{--age:#e59a14}.age-old{--age:#e5484d}
.card.age-ok,.card.age-mid,.card.age-old{position:relative;padding-left:17px;overflow:hidden}
.card.age-ok::before,.card.age-mid::before,.card.age-old::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--age)}
.card-foot{align-items:center;flex-wrap:wrap;margin-top:4px}
.card-foot .pill{margin:0}
.age-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--fg)}
.age-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--age);box-shadow:0 0 0 3px color-mix(in srgb,var(--age) 20%,transparent)}
.card.age-old .age-chip{color:var(--bad)}
@media (max-width:760px){
  /* a backdrop-filter on the top bar would trap the fixed tab bar inside it */
  body:has(.tabs.has-icons) .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
  .stats{gap:10px}
  .stat{padding:12px 14px}
  .stat b{font-size:26px}
  .stat::before{top:16px;right:14px}
}

/* Plan tab polish */
.plan-page h2{font-size:28px;letter-spacing:-.035em}
.plan-card{position:relative;border-radius:var(--r-xl);padding:24px}
.plan-card.featured{border:1.5px solid var(--accent)}
.plan-card.featured::before{content:"Most popular";position:absolute;top:-11px;left:22px;background:var(--grad);color:#fff;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;letter-spacing:.01em}
.plan-price b{font-weight:700;letter-spacing:-.04em}
.plan-card ul{list-style:none;padding-left:0;gap:8px}
.plan-card li{display:flex;gap:8px;align-items:flex-start}
.plan-card li::before{content:"✓";color:var(--ok);font-weight:700}
.plan-banner{border-radius:var(--r-lg)}