/* ==========================================================================
   在庫ボード — Design v2 "Ledger" (2026-10-02)
   Layered on top of app.css (v1). design.js turns this sheet off for v1.
   Concept: a well-kept ledger — warm paper, ink type, vermilion seal (朱),
   evergreen actions (常盤), indigo for incoming (藍), amber for checks (琥珀).
   Fonts: Geist / Geist Mono (Latin & figures, SIL OFL 1.1 — fonts/OFL.txt);
   Japanese uses the device's Hiragino Sans / Noto Sans JP.
   ========================================================================== */

@font-face{font-family:"Geist";src:url("fonts/geist-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --paper:#f4f2ec;
  --paper-2:#ebe8df;
  --paper-3:#e2ded2;
  --card:#fffefa;
  --card-2:#faf8f3;
  --ink:#14201b;
  --ink-2:#36433d;
  --ink-3:#5d6963;
  --ink-4:#8c958f;
  --ink-zero:#6c7670;
  --line:#e3dfd4;
  --line-2:#d3cec0;
  --tokiwa:#0e6a55;
  --tokiwa-ink:#0a4f40;
  --tokiwa-tint:#e2efe9;
  --tokiwa-glow:#1f9a7c;
  --shu:#d9432a;
  --shu-ink:#b0331c;
  --shu-tint:#fbe6df;
  --ai:#2b4b98;
  --ai-tint:#e5ebf7;
  --kin:#b27616;
  --kin-ink:#81560a;
  --kin-tint:#fbefd9;
  --sans:"Geist","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.75,.15,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --r-sm:9px;--r:13px;--r-lg:18px;--r-xl:24px;
  --shadow-1:0 1px 0 rgba(20,32,27,.04),0 1px 2px rgba(20,32,27,.04);
  --shadow-2:0 1px 0 rgba(20,32,27,.04),0 18px 40px -24px rgba(20,32,27,.38),0 3px 8px -4px rgba(20,32,27,.08);
  --shadow-3:0 40px 120px -32px rgba(20,32,27,.5),0 0 0 1px rgba(20,32,27,.06);
  --focus:0 0 0 3px rgba(14,106,85,.25);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html{background:var(--paper);scrollbar-color:var(--line-2) transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper) var(--noise);color:var(--ink);overflow-x:clip;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%;position:relative}
@media(min-width:1101px){[data-v2-view="dashboard"] body::after{content:"";position:fixed;top:0;bottom:0;left:calc(max(4%,20px) - 22px);width:1px;background:rgba(217,67,42,.3);z-index:9;pointer-events:none}}
::selection{background:#f6cfc4;color:var(--ink)}
a{color:var(--tokiwa)}
h1,h2,h3,h4{font-feature-settings:"palt";letter-spacing:.01em;color:var(--ink)}
h1,h2,h3,.group-name,.dialog-head h2{word-break:auto-phrase}
/* Costly line balancing only on prose, never on the ~280 cards or table cells. */
.access p,#enroll-form p,.review-card p,.stocktake-head p,.stocktake-basis,dialog p,#dashboard>.heading p:not(.v2-eyebrow),#management>p{line-break:strict;text-wrap:pretty}
/* Strict kinsoku (cheap) everywhere text breaks in cells and cards; the costly wrapping stays on prose only. */
td,small,.card-spec,.card-line{line-break:strict}
label,.metric p:not(.profit-metric-note),#dashboard>.heading p.muted{word-break:auto-phrase}
.v2-phrased{word-break:keep-all;overflow-wrap:normal;line-break:strict}
.v2-nowrap{white-space:nowrap}
h1,h2,h3{text-wrap:balance}
code,kbd{font-family:var(--mono);font-size:.92em}
:where(button,input,select,summary,a,[tabindex]):focus-visible{outline:2px solid var(--tokiwa);outline-offset:2px;box-shadow:none}
.muted{color:var(--ink-3)}

/* ---------- Controls ---------- */
/* No letter-spacing and only paint-only transitions on the global button rule: the tables render a button per row. */
button{font-family:inherit;border-radius:var(--r);font-weight:650;transition:background-color .2s var(--ease-soft),border-color .2s var(--ease-soft),color .2s var(--ease-soft)}
button:active:not(:disabled){transform:translateY(1px)}
.primary{background:var(--ink);color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px -10px rgba(20,32,27,.7)}
.primary:hover:not(:disabled){background:var(--tokiwa-ink)}
.secondary{background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);box-shadow:var(--shadow-1)}
.secondary:hover:not(:disabled){border-color:var(--ink-4);color:var(--ink)}
.quiet{background:transparent;color:var(--ink-2);border:1px solid transparent}
.quiet:hover:not(:disabled){background:var(--paper-2);color:var(--ink)}
.small-button{background:var(--tokiwa-tint);color:var(--tokiwa-ink);border-radius:999px;padding:7px 12px;font-size:12px}
.small-button:hover:not(:disabled){background:#d2e6dd}
input,select{font-family:inherit;background-color:var(--card);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),background-color .2s}
input::placeholder{color:var(--ink-zero);opacity:1;font-weight:400}
input:hover,select:hover{border-color:#bfb9a8}
input:focus,select:focus{outline:none;border-color:var(--tokiwa);box-shadow:var(--focus)}
input:focus-visible,select:focus-visible{outline:none}
select{appearance:none;-webkit-appearance:none;padding-right:36px!important;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 1.5l5 5 5-5' fill='none' stroke='%235d6963' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;cursor:pointer}
input[type=date]{font-family:var(--sans)}
label{color:var(--ink-2);font-weight:650;letter-spacing:.02em}
details summary{cursor:pointer}
details>summary{list-style:none;display:flex;align-items:center;gap:9px;font-weight:650;color:var(--ink-2);padding:6px 0}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";flex:none;width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(-45deg);transition:transform .3s var(--ease)}
details[open]>summary::before{transform:translateY(-2px) rotate(45deg)}
details>summary:hover{color:var(--ink)}

/* ---------- Header ---------- */
header{height:68px;padding:0 max(4%,20px);background:transparent;border-bottom:1px solid var(--line);position:relative;z-index:8}
.brand{gap:12px;font-size:17px;font-weight:750;letter-spacing:.04em}
.logo{width:38px;height:38px;padding:0;border-radius:11px;font-size:0;color:transparent;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10.5 13.5h19M10.5 20h19M10.5 26.5h10' stroke='%23f4f2ec' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='28.2' cy='26.6' r='4.6' fill='%23e04a2f'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 6px 14px -8px rgba(20,32,27,.6);transition:transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){.brand:hover .logo{transform:rotate(-6deg)}}
.brand-text{font-feature-settings:"palt";color:var(--ink)}
.brand small{font-family:var(--sans);font-size:10.5px;font-weight:550;letter-spacing:.12em;color:var(--ink-3);margin-top:3px}
.header-actions{gap:6px}
.header-actions>span#connection{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,254,250,.6);font-variant-numeric:tabular-nums;margin-right:4px}
.header-actions>span#connection::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tokiwa-glow);box-shadow:0 0 0 3px rgba(31,154,124,.16)}
[data-v2-view="access"] .header-actions>span#connection::before{background:var(--ink-4);box-shadow:none}
.header-actions .quiet{padding:8px 14px;font-size:13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card)}
.header-actions .quiet:hover:not(:disabled){border-color:var(--ink-4);background:var(--card)}
.header-actions .logout{color:var(--ink-3);padding:7px 12px;font-size:12px}
@keyframes v2-pulse{0%{box-shadow:0 0 0 0 rgba(31,154,124,.5)}70%{box-shadow:0 0 0 7px rgba(31,154,124,0)}100%{box-shadow:0 0 0 0 rgba(31,154,124,0)}}

/* ---------- Page frame ---------- */
main{max-width:1560px;padding:28px max(4%,20px) 48px}
.heading{align-items:flex-end;gap:24px;margin-bottom:18px}
.v2-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);line-height:1}
.v2-eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--shu);transform:rotate(45deg)}
.v2-eyebrow b{font-weight:500;color:var(--ink-2)}
#dashboard>.heading h1{font-size:clamp(28px,2.7vw,40px);line-height:1.15;font-weight:800;letter-spacing:-.01em}
#dashboard>.heading p.muted{font-size:13px;margin-top:10px;color:var(--ink-3);max-width:46em}
#refresh{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 14px;border-radius:999px;font-size:13px}
#refresh::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .6s var(--ease)}
#refresh:hover::before{transform:rotate(180deg)}
#refresh:disabled::before{animation:v2-spin 1s linear infinite}
@keyframes v2-spin{to{transform:rotate(360deg)}}
.footnote{color:var(--ink-3);font-size:12px;margin-top:22px;padding-top:14px;border-top:1px dashed var(--line-2)}
.notice{background:var(--kin-tint);border:0;border-left:3px solid var(--kin);border-radius:0 var(--r) var(--r) 0;color:#4a3410;padding:14px 18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-1)}

/* ---------- Ask the ledger (admin question) ---------- */
.question-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 8px 8px 18px;margin:0 0 14px;box-shadow:var(--shadow-1);transition:border-color .25s,box-shadow .25s}
.question-panel:focus-within{border-color:var(--tokiwa);box-shadow:var(--focus)}
.question-title{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;display:inline-flex;flex-direction:row;align-items:center;gap:8px}
.question-title::before{content:"";width:16px;height:16px;background:var(--tokiwa);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16l.7 2.3L22 19l-2.3.7L19 22l-.7-2.3L16 19l2.3-.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16l.7 2.3L22 19l-2.3.7L19 22l-.7-2.3L16 19l2.3-.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.question-input input{border:0;background:transparent;box-shadow:none;padding:11px 6px;font-size:15px}
.question-input input:focus{box-shadow:none}
.question-input button{border-radius:var(--r);padding:11px 22px}
.stock-answer{border-top:1px dashed var(--line-2);padding:16px 10px 6px 0}
.answer-quantities>div{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r)}
.answer-quantities dt{color:var(--ink-3)}
.answer-quantities dd{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.01em}

/* ---------- Sync status ---------- */
.feed-status{gap:6px;padding:0;margin:0 0 16px;color:var(--ink-3);font-size:12px;flex-wrap:wrap;align-items:center}
.feed-status>span.pending{order:-1;color:var(--kin-ink);border-color:#e9cf9c;background:var(--kin-tint)}
.feed-status .feed-details{margin-left:auto}
.feed-status>span{display:inline-flex;align-items:baseline;gap:7px;padding:4px 10px 4px 9px;border-radius:999px;background:rgba(255,254,250,.55);border:1px solid var(--line);line-height:1.45;font-size:11.5px;border-radius:14px}
.feed-status>span:before{content:"";flex:none;width:6px;height:6px;margin:0;border-radius:50%;background:var(--tokiwa-glow);transform:translateY(-1px)}
.feed-status>span.pending:before{background:var(--kin)}
@keyframes v2-blink{50%{opacity:.25}}
.feed-status.expanded>span,.feed-status:has(.feed-details[open])>span{display:block;border-radius:var(--r);padding:8px 12px}
.feed-status.expanded>span:before,.feed-status:has(.feed-details[open])>span:before{display:inline-block;margin-right:8px}
.feed-details{align-self:center}
.feed-details summary{color:var(--ink-2);font-weight:650;padding:5px 4px;border-radius:999px}
.feed-details summary:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(-45deg);transition:transform .25s var(--ease)}
.feed-details[open] summary:before{content:"";transform:translateY(-3px) rotate(45deg)}
.feed-details summary:hover{color:var(--tokiwa)}

/* ---------- Metrics: one ruled ledger strip ---------- */
.metrics{gap:0;margin:0 0 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-1);align-items:stretch}
.metric{position:relative;background:transparent;border:0;border-radius:0;padding:18px 22px 16px;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;min-height:124px}
.metric+.metric{box-shadow:inset 1px 0 0 var(--line)}
.metrics{counter-reset:v2-line}
.metric{counter-increment:v2-line}
.metric strong{flex:none;font-size:12px;font-weight:650;color:var(--ink-3);letter-spacing:.06em;font-feature-settings:"palt"}
.metric strong::before{content:counter(v2-line,decimal-leading-zero);display:inline-block;margin-right:10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-4)}
.metric.profit-metric strong::before{color:rgba(244,242,236,.45)}
.metric .value{margin:12px 0 8px;font-size:clamp(28px,2.4vw,38px);font-weight:560;line-height:1;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
html:not(.v2-loaded) .metric .value{animation:v2-rise .9s var(--ease) backwards}
.metric .value small{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;margin-left:6px;color:var(--ink-3)}
.metric p{flex:none;margin-top:auto;font-size:12px;line-height:1.55;color:var(--ink-3)}
.metric:nth-child(2) .value{animation-delay:.06s}.metric:nth-child(3) .value{animation-delay:.12s}.metric:nth-child(4) .value{animation-delay:.18s}.metric:nth-child(5) .value{animation-delay:.24s}
/* The profit tile: inverted ink, the board's headline number. */
.metric.profit-metric{background:var(--ink) radial-gradient(120% 140% at 100% 0%,rgba(31,154,124,.38) 0%,rgba(31,154,124,0) 55%) no-repeat;color:var(--paper);box-shadow:none;cursor:pointer;outline-offset:-4px}
.metric.profit-metric::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,rgba(244,242,236,.05) 27px,rgba(244,242,236,.05) 28px);mask:linear-gradient(to left,#000,transparent 70%);-webkit-mask:linear-gradient(to left,#000,transparent 70%)}
.metric.profit-metric strong{color:rgba(244,242,236,.7)}
.metric.profit-metric:focus-visible{outline:2px solid var(--paper);outline-offset:-5px}
.metric.profit-metric .value{color:#fff;font-size:clamp(32px,2.9vw,46px)}
.metric.profit-metric .value.negative{color:#ff9b84}
.metric.profit-metric .value small{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#bfe7d8;font-size:12px;letter-spacing:.04em;transform:translateY(-4px)}
.metric.profit-metric p{color:rgba(244,242,236,.72);margin-top:0}
.metric.profit-metric p+p{margin-top:6px}
.metric.profit-metric p.profit-metric-note{color:#f0c27e;font-size:11.5px;line-height:1.6;max-height:4.8em;overflow:hidden;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent);transition:color .2s}
.metric.profit-metric.v2-open p.profit-metric-note{max-height:none;-webkit-mask:none;mask:none}
.metric.profit-metric:hover p.profit-metric-note{color:#ffd59a}
.metric.profit-metric[data-v2-ready]::before{content:"内訳 ＋";position:absolute;right:16px;top:16px;font-size:11px;font-weight:650;letter-spacing:.06em;color:rgba(244,242,236,.6);padding:3px 9px;border:1px solid rgba(244,242,236,.2);border-radius:999px;transition:color .2s,border-color .2s}
.metric.profit-metric.v2-open::before{content:"閉じる －"}
.metric.profit-metric:hover::before{color:#fff;border-color:rgba(244,242,236,.45)}
@keyframes v2-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.metric .value.v2-changed{background:linear-gradient(to top,rgba(31,154,124,.32) 0,rgba(31,154,124,.32) 4px,transparent 4px) no-repeat 0 100%/100% 100%;animation:v2-ink 2.4s var(--ease-soft) both}
.metric.profit-metric .value.v2-changed{background-image:linear-gradient(to top,rgba(240,194,126,.5) 0,rgba(240,194,126,.5) 4px,transparent 4px)}
@keyframes v2-ink{0%{background-size:0 100%;background-position:0 100%}30%{background-size:100% 100%;background-position:0 100%}75%{background-size:100% 100%;background-position:100% 100%}100%{background-size:0 100%;background-position:100% 100%}}
/* Wide screens: the profit tile is the ledger's totals row — a dark band under the four counts. */
@media(min-width:1101px){
  .metrics:has(.profit-metric){grid-template-columns:repeat(4,minmax(0,1fr))}
  .metric.profit-metric{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;column-gap:40px;row-gap:0;padding:22px 26px 22px;min-height:0;align-items:start}
  .metric.profit-metric strong{grid-column:1;grid-row:1}
  .metric.profit-metric .value{grid-column:1;grid-row:2;margin:12px 0 0;white-space:nowrap}
  .metric.profit-metric p{grid-column:2;grid-row:1/3;margin:2px 0 0;padding-left:26px;border-left:1px solid rgba(244,242,236,.14);align-self:stretch}
  .metric.profit-metric p.profit-metric-note{grid-column:3;grid-row:1/3;margin:2px 0 0;padding:0 70px 0 26px;max-height:6.4em}
  .metric.profit-metric.v2-open p.profit-metric-note{max-height:none}
  .metric.profit-metric::after{-webkit-mask:linear-gradient(to left,#000,transparent 60%);mask:linear-gradient(to left,#000,transparent 60%)}
  .metric.profit-metric .value small{transform:translateY(-6px)}
  .metric{min-height:124px}
}


/* ---------- Tabs: segmented control with a sliding sheet ---------- */
.tabs{position:relative;display:flex;width:max-content;max-width:100%;gap:2px;padding:4px;border:0;border-radius:15px;background:var(--paper-2);box-shadow:inset 0 1px 2px rgba(20,32,27,.06);margin:0 0 6px}
/* The sheet slides with transform only (compositor; no layout per frame, which re-checked every lazy image). */
.tabs::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--tab-w,0);transform:translateX(var(--tab-x,4px));border-radius:11px;background:var(--card);box-shadow:0 1px 2px rgba(20,32,27,.08),0 6px 16px -8px rgba(20,32,27,.25);transition:transform .3s var(--ease);opacity:0}
.tabs.v2-indicator::before{opacity:1}
.tabs button{position:relative;z-index:1;transition:none;border:0;border-radius:11px;padding:10px 18px;font-size:14px;font-weight:650;color:var(--ink-3);background:transparent;letter-spacing:.04em;font-feature-settings:"palt"}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--ink);border:0}
.tabs:not(.v2-indicator) button.active{background:var(--card);box-shadow:0 1px 2px rgba(20,32,27,.08)}

/* ---------- Toolbar: sticky frosted glass ---------- */
.toolbar{background:transparent;border-bottom:1px solid transparent;padding:12px 0 12px;margin-bottom:14px;gap:10px;width:auto;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);transition:background-color .3s var(--ease-soft),border-color .3s,box-shadow .3s}
.toolbar.v2-stuck{background:var(--paper);border-bottom-color:var(--line)}
[data-v2-list="cards"] .toolbar.v2-stuck{border-bottom-color:transparent}
@media(min-width:761px){.toolbar.v2-compact .chip-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:40px;-webkit-mask:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask:linear-gradient(to right,#000 calc(100% - 56px),transparent)}.toolbar.v2-compact .chip-strip::-webkit-scrollbar{display:none}}
.toolbar-row{gap:10px}
.toolbar-row input#search{flex:1 1 260px;max-width:420px;height:44px;padding:0 14px 0 42px;font-size:14px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c958f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 15px center/17px no-repeat;border-radius:var(--r);box-shadow:var(--shadow-1)}
.toolbar select{height:44px;padding:0 14px;font-size:14px;box-shadow:var(--shadow-1)}
.toolbar-row input#search:focus,.toolbar select:focus,.question-input input:focus-visible{box-shadow:var(--focus);border-color:var(--tokiwa)}
.view-toggle{border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);padding:3px;gap:2px;box-shadow:var(--shadow-1)}
.view-toggle button{border-radius:10px;background:transparent;color:var(--ink-3);padding:0 15px;height:36px;font-size:13px}
.view-toggle button+button{border-left:0}
.view-toggle button:hover{color:var(--ink)}
.view-toggle button[aria-pressed="true"],.view-toggle button.active{background:var(--ink);color:var(--paper)}
.filter-toggle{background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);border-radius:var(--r);height:44px;padding:0 14px}
.filter-toggle[aria-expanded="true"],.export-button[aria-expanded="true"],.filter-toggle[aria-expanded="true"]:hover:not(:disabled),.export-button[aria-expanded="true"]:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.export-button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r);font-size:13px}
.export-button::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat}
.export-menu{top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:6px;min-width:280px;animation:v2-pop .28s var(--ease) backwards;transform-origin:top right}
.export-menu button{border-radius:var(--r-sm);background:transparent;padding:11px 13px;color:var(--ink)}
.export-menu button:hover,.export-menu button:focus-visible{background:var(--paper)}
.export-menu small{color:var(--ink-3)}
@keyframes v2-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Chips ---------- */
.chip-row{gap:10px}
.chip-strip{gap:6px}
.chip{height:32px;padding:0 13px;gap:7px;background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);font-size:13px;font-weight:600}
.chip:hover{border-color:var(--ink-4);color:var(--ink)}
.chip[aria-pressed="true"],.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:0 6px 14px -8px rgba(20,32,27,.7)}
.chip-count{font-size:11px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .chip-count,.chip.active .chip-count{color:rgba(244,242,236,.72)}
.quick-filters{gap:6px;padding-left:12px;border-left:1px solid var(--line-2)}
.quick-filters .chip:not(.chip-link)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:none}
#filter-attention::before{background:var(--kin)!important}
#filter-incoming::before{background:var(--ai)!important}
#filter-loss::before{background:var(--shu)!important}
#filter-high::before{background:var(--tokiwa)!important}
#filter-attention[aria-pressed="true"]{background:var(--kin-tint);border-color:var(--kin);color:var(--kin-ink);box-shadow:none}
#filter-incoming[aria-pressed="true"]{background:var(--ai-tint);border-color:var(--ai);color:var(--ai);box-shadow:none}
#filter-loss[aria-pressed="true"]{background:var(--shu-tint);border-color:var(--shu);color:var(--shu-ink);box-shadow:none}
#filter-high[aria-pressed="true"]{background:var(--tokiwa-tint);border-color:var(--tokiwa);color:var(--tokiwa-ink);box-shadow:none}
.chip.chip-link{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-3);padding:0 8px;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.chip.chip-link:hover{color:var(--ink);text-decoration-color:currentColor}
#row-count{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.v2-chips-toggle{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font-size:12.5px;font-weight:650;white-space:nowrap;box-shadow:var(--shadow-1)}
.v2-chips-toggle::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.v2-chips-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.v2-chips-toggle:hover{border-color:var(--ink-4);color:var(--ink)}
@media(min-width:761px){
  .toolbar:not(.v2-chips-wrap) .chip-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding-right:36px;-webkit-mask:linear-gradient(to right,#000 calc(100% - 52px),transparent);mask:linear-gradient(to right,#000 calc(100% - 52px),transparent)}
  .toolbar:not(.v2-chips-wrap) .chip-strip::-webkit-scrollbar{display:none}
  .toolbar .chip-strip{padding-top:4px;padding-bottom:4px;scroll-padding-inline:16px 56px}
  .toolbar .chip-strip:focus-within{-webkit-mask:none;mask:none}
  .toolbar.v2-compact .v2-chips-toggle{display:none}
  .toolbar .chip-row:has(#quick-filters:not([hidden]))>.chip-strip{flex:1 1 0}
  .toolbar.v2-chips-wrap .chip-row:has(#quick-filters:not([hidden]))>.chip-strip{flex:1 1 calc(100% - 200px)}
}
@media(max-width:760px){.v2-chips-toggle{display:none}}
@media(max-width:1279px){
  .metric{min-height:0;padding:13px 16px 12px}
  .metric .value{margin:8px 0 5px}
  .metric.profit-metric p.profit-metric-note{max-height:3.2em}
  .metric.profit-metric.v2-open p.profit-metric-note{max-height:none}
  .metrics{margin-bottom:18px}
}
@media(min-width:761px) and (max-width:1279px){
  .main-row{flex-wrap:wrap}
  .toolbar-row input#search{flex:1 1 100%;max-width:none}
  .filter-fields{flex:1 1 0;flex-wrap:nowrap}
  .filter-fields select{flex:1 1 0;min-width:0}
  .toolbar .chip-row,.toolbar .chip-row:has(#quick-filters:not([hidden])){flex-wrap:wrap;row-gap:8px}
  .toolbar .chip-row>.quick-filters,.toolbar .chip-row:has(#quick-filters:not([hidden]))>.quick-filters{order:-2;flex:1 1 auto;border-left:0;padding-left:0;flex-wrap:wrap}
  .toolbar .chip-row>#row-count,.toolbar .chip-row:has(#quick-filters:not([hidden]))>#row-count{order:-1}
  .toolbar .chip-row>.chip-strip,.toolbar .chip-row:has(#quick-filters:not([hidden]))>.chip-strip{order:0;flex:1 1 60%;min-width:0}
  .toolbar .chip-row>.v2-chips-toggle{order:1}
}

/* ---------- Groups ---------- */
.card-groups{gap:34px;counter-reset:v2-group}
.card-group{counter-increment:v2-group}
.group-name::before{content:"§" counter(v2-group,decimal-leading-zero);margin-right:12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ink-4);vertical-align:2px}
/* Opaque paper (no blur), like the stuck toolbar above it: one paper band with a single hairline. */
.group-head{background:var(--paper);padding:12px calc(50vw - 50%);margin:0 calc(50% - 50vw);box-shadow:0 1px 0 var(--line)}
.group-head{top:calc(var(--toolbar-h) - 2px);box-shadow:0 -6px 0 var(--paper),0 1px 0 var(--line)}
[data-v2-tab="incoming"] .table-area td:nth-child(5){min-width:9.5em}
[data-v2-tab="incoming"] .table-area td:nth-child(5) p{white-space:nowrap}
[data-v2-tab="incoming"] .table-area th:nth-child(5){min-width:9em}
@media(min-width:1101px){[data-v2-tab="listings"] .table-area th:first-child{width:40%}[data-v2-tab="listings"] .table-area th:nth-child(2){width:13%}[data-v2-tab="listings"] .table-area th:last-child{width:10%}}
.group-toggle{gap:12px;background:transparent;border:0;border-radius:0;padding:4px 0;font-size:19px;font-weight:750;color:var(--ink);letter-spacing:.02em;font-feature-settings:"palt";box-shadow:none}
.group-toggle:hover{border-color:transparent;color:var(--tokiwa-ink)}
.group-toggle::after{content:"";order:1;flex:1;height:1px;background:linear-gradient(to right,var(--line-2),var(--line) 70%,transparent);min-width:24px}
.group-arrow{order:-1;flex:none;width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:inline-grid;place-items:center;font-size:0;color:transparent;transition:transform .35s var(--ease),background .2s}
.group-arrow::before{content:"";width:7px;height:7px;border-right:1.8px solid var(--ink-2);border-bottom:1.8px solid var(--ink-2);transform:translateY(-2px) rotate(45deg)}
.card-group.collapsed .group-arrow{transform:rotate(-90deg)}
.group-toggle:hover .group-arrow{background:var(--paper-2)}
.group-name{min-width:0}
.group-count{order:2;margin-left:0;font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink-3);background:transparent;border:1px solid var(--line-2);padding:3px 10px}
.card-group.collapsed .group-toggle{background:transparent;color:var(--ink-3)}

/* ---------- Product cards ---------- */
.card-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.product-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 14px;gap:12px;box-shadow:var(--shadow-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s var(--ease-soft)}
@media(hover:hover) and (pointer:fine){.product-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow-2)}}
.product-card:active{transform:translateY(-1px) scale(.997)}
.product-card:focus-visible{outline:2px solid var(--tokiwa);outline-offset:3px}
/* Marginal check tick drawn as a background layer (no positioned pseudo-element per card). */
.product-card[data-v2-mark]{background:linear-gradient(var(--kin),var(--kin)) 0 22px/3px 34px no-repeat,var(--card)}
.product-card[data-v2-mark="neg"]{background:linear-gradient(var(--shu),var(--shu)) 0 22px/3px 34px no-repeat,var(--card)}
.thumb{width:84px;height:84px;border:1px solid #eee9de;border-radius:14px;background:var(--card)}
.thumb img{background:transparent;transition:transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){.product-card:hover .thumb img{transform:scale(1.07)}}
.thumb.no-image{background:var(--paper-2);border:0;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 6px,rgba(20,32,27,.035) 6px,rgba(20,32,27,.035) 7px)}
.thumb-placeholder{font-family:var(--sans);font-weight:700;color:var(--ink-4);font-feature-settings:"palt"}
.thumb.small{border-radius:10px}
.thumb.large{width:176px;height:176px;border-radius:18px}
.card-top{gap:14px}
.card-name{font-size:14.5px;line-height:1.5;font-weight:700;color:var(--ink)}
.card-meta{gap:6px 8px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:4px 10px 4px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink-3);line-height:1.3}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.amber{background:var(--kin-tint);color:var(--kin-ink)}
.pill.green{background:var(--tokiwa-tint);color:var(--tokiwa-ink)}
.pill.red{background:var(--shu-tint);color:var(--shu-ink)}
.pill.category{background:transparent;border:1px solid var(--line-2);color:var(--ink-3);padding:3px 9px;font-weight:600}
.pill.category::before{display:none}
.card-release{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--tokiwa);font-variant-numeric:tabular-nums}
.card-spec{color:var(--ink-3);font-size:12px}
.card-quantity{border-top:1px dashed var(--line-2);padding-top:12px;gap:4px;margin-top:auto}
.card-label{font-size:11px;font-weight:600;color:var(--ink-3)}
.number{font-family:var(--sans);font-weight:560;color:var(--ink);font-variant-numeric:tabular-nums}
/* Figures only: in product names proportional widths made the full-width ／ collide (「Fate／Grand」). */
.value,.number,.profit-amount,.card-totals strong,.detail-keys strong,.sales-tile strong,.cost-summary strong,.profit-total strong,.stocktake-tiles strong{font-variant-east-asian:proportional-width}
.number small{font-family:var(--sans);color:var(--ink-3);font-weight:550}
.unknown{color:var(--ink-4);font-weight:400}
.number.v2-zero,.v2-zero{color:var(--ink-zero);font-weight:450}
.number.v2-zero small{color:var(--ink-zero)}
.profit-amount.v2-zero{color:var(--ink-zero);font-weight:450}
.card-quantity .number{font-size:32px;line-height:1.05}
.card-quantity .number.pack-number{font-size:20px;line-height:1.35;letter-spacing:-.01em}
.card-quantity .unknown{font-size:30px;line-height:1}
.card-quantity.v2-unknown{flex-direction:row;align-items:baseline;justify-content:space-between}
.card-quantity.v2-unknown .unknown{font-size:20px}
.card-quantity .pending-balance{color:var(--kin-ink)}
.negative,.number.negative{color:var(--shu-ink)}
.fba-stock-note{color:var(--ai);font-size:11.5px;font-weight:600}
.card-totals{gap:10px;padding:10px 0 0;margin:0;border-top:1px solid var(--line)}
.card-totals strong{font-size:14px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.card-sales{margin:0;padding:10px 12px 10px 14px;border-radius:var(--r);background:linear-gradient(var(--tokiwa),var(--tokiwa)) 0 10px/3px calc(100% - 20px) no-repeat,var(--tokiwa-tint);color:var(--tokiwa-ink);font-size:12.5px;font-weight:600;line-height:1.55;flex-shrink:0}
.card-sales span{color:#2c6b5a;font-weight:500}
.card-sales span.muted{color:#5d8a7c;font-size:10.5px;margin-top:2px}
.card-profit{margin:0;padding:9px 12px;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);font-size:12.5px;box-shadow:none}
.card-profit:hover{border-color:var(--ink-4);background:var(--card)}
.profit-amount{font-variant-numeric:tabular-nums;color:var(--ink)}
.profit-amount.negative{color:var(--shu-ink)}
.card-lines{gap:4px}
.card-line{font-size:12px;color:var(--ink-2)}
.card-line.negative{color:var(--shu-ink)}
.card-line.unknown-line{color:var(--kin-ink)}
.card-foot{padding-top:2px;margin-top:0}
.card-foot>.muted{font-family:var(--mono);font-size:11px}

/* ---------- Tables ---------- */
.table-area{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-1)}
.table-area.card-area,.table-area.stocktake-area{background:transparent;border:0;box-shadow:none;border-radius:0}
table{font-size:14px}
th{font-feature-settings:"palt";background:var(--card-2);color:var(--ink-2);font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:13px 16px 11px;border-bottom:3px double var(--line-2);vertical-align:top}
/* No min-width on every cell (it made automatic table layout far costlier); the one column that collapsed has its own. */
td{border-top:1px solid var(--line);padding:12px 16px;vertical-align:top}
th{word-break:auto-phrase}
td .number,td .unknown{white-space:nowrap}
.v2-repeat{display:none}
th .v2-colnote{display:block;margin-top:3px;font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);line-height:1.45;white-space:normal}
#profit-body>table th:nth-child(2),#profit-body details table th:nth-child(n+2),#acquisition-body table th:nth-child(n+2),#sales-body details table th:nth-child(n+2){text-align:right}
#profit-body>table th:last-child{text-align:left}
td .number.pack-number{white-space:normal;word-break:keep-all}
td+td,th+th{border-left:1px solid #ece8de}
.table-area tbody tr:hover>td{background:#fbfaf6}
.product-cell strong{font-size:14px;font-weight:700}
.product-cell small{color:var(--ink-3)}
[data-v2-tab="listings"] .product-cell strong{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em}
td .number{font-size:18px;font-weight:600;line-height:1.3}
td .number small{font-size:11px}
td .unknown{font-size:18px}
td small,td .muted{font-size:11.5px;line-height:1.55}
td p{margin:4px 0}
td .pill{white-space:nowrap;font-size:11px;padding:3px 9px 3px 8px}
td .small-button{white-space:nowrap;padding:6px 10px;margin:2px 4px 2px 0}
.product-cell{min-width:240px}
.product-cell-inner{align-items:flex-start}
.product-cell .thumb.small{width:52px;height:52px}
.table-area.scroll-box thead th{box-shadow:none}
.table-area.scroll-box thead th:first-child{border-top-left-radius:var(--r-xl)}
.table-area.scroll-box thead th:last-child{border-top-right-radius:var(--r-xl)}
.table-section th{background:var(--paper-2);color:var(--ink);border-top:1px solid var(--line-2);font-size:13px}
.empty{padding:72px 24px;color:var(--ink-3)}
.empty::before{content:"";display:block;width:56px;height:56px;margin:0 auto 18px;border-radius:16px;background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 14h18M11 20h18M11 26h10' stroke='%238c958f' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='28.5' cy='26.5' r='4' fill='%23d9432a'/%3E%3C/svg%3E") center/34px no-repeat}
.empty h2{color:var(--ink);font-size:20px}
.review-card{padding:20px 26px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:14px;line-height:1.85}
.review-card strong{color:var(--ink);font-size:16px;font-feature-settings:"palt"}
.review-card>:not(strong){max-width:46em}
@media(min-width:1101px){
  [data-v2-tab="reviews"] .table-area>:not(.review-card){grid-column:1/-1}
  [data-v2-tab="reviews"] .table-area{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-area>.review-card{border-bottom:1px solid var(--line)}
  .table-area>.review-card:nth-child(2n){box-shadow:inset 1px 0 0 var(--line)}
}

/* ---------- Dialogs ---------- */
dialog{border:0;border-radius:var(--r-xl);padding:32px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-3)}
dialog[open]{animation:v2-dialog .5s var(--ease) backwards}
dialog::backdrop{background:rgba(20,32,27,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]::backdrop{animation:v2-fade .35s var(--ease-soft) backwards}
@keyframes v2-dialog{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v2-fade{from{opacity:0}to{opacity:1}}
@keyframes v2-banner{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
dialog h2{font-size:22px;font-weight:750;margin-bottom:6px}
dialog input,dialog select{height:48px;padding:0 14px}
.dialog-actions{gap:10px;margin-top:28px}
.dialog-actions button{height:46px;padding:0 22px}
#product-dialog{max-width:1140px;padding:0 30px 30px}
#product-dialog .dialog-head{top:0;margin:0 -30px 20px;padding:20px 30px 18px;background:rgba(255,254,250,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:21px;line-height:1.45;font-weight:800;letter-spacing:.01em;margin:0}
.dialog-head .quiet,#product-dialog-close{border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;background:var(--card)}
.detail-head{gap:24px;margin:4px 0 0;align-items:center}
@media(min-width:900px){
  .product-dialog-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;margin-bottom:6px}
  .product-dialog-summary .detail-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-dialog-summary .detail-keys div{padding:16px 20px}
  .product-dialog-summary .detail-keys div:nth-child(2n+1){box-shadow:none}
  .product-dialog-summary .detail-keys div:nth-child(2n){box-shadow:inset 1px 0 0 var(--line)}
  .product-dialog-summary .detail-keys div:nth-child(n+3){border-top:1px solid var(--line)}
  .product-dialog-summary .detail-keys strong{font-size:24px}
}
.detail-info{gap:9px}
.detail-skus code{font-family:var(--mono);font-size:11.5px;background:var(--paper-2);color:var(--ink-2);border-radius:6px;padding:3px 8px}
.detail-keys{gap:0;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.detail-keys div{background:transparent;border-radius:0;padding:14px 18px 15px;gap:6px}
.detail-keys div+div{box-shadow:inset 1px 0 0 var(--line)}
.detail-keys strong{font-size:21px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.detail-keys div.negative strong{color:var(--shu-ink)}
.detail-grid{gap:12px}
.detail-grid>div{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.detail-grid dt{color:var(--ink-3);letter-spacing:.04em}
#acquisition-panel,.sales-panel,.marketplace-panel{margin:30px 0 0;padding:20px 0 0;background:none;border:0;border-top:1.5px solid var(--ink);border-radius:0;color:var(--ink)}
#acquisition-panel{border-bottom:0}
#acquisition-panel h3,.sales-panel h3,.marketplace-panel h3,.stock-answer h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:750;margin:0 0 16px}
.product-dialog-body>h3,#product-dialog-records h3{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:750;margin:30px 0 16px;padding-top:20px;border-top:1.5px solid var(--ink)}
.product-dialog-body>h3::before,#product-dialog-records h3::before,#acquisition-panel h3::before,.sales-panel h3::before,.marketplace-panel h3::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--shu);transform:rotate(45deg);flex:none}
.cost-summary{gap:10px}
.cost-summary>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cost-summary span{color:var(--ink-3);font-size:12px;letter-spacing:.03em}
.cost-summary strong{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.cost-metrics>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.cost-metrics strong{font-weight:600;font-variant-numeric:tabular-nums}
.cost-calculation{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.cost-foreign-price{color:var(--tokiwa-ink)}
.cost-formula{border-top:1px dashed var(--line-2)}
.sales-tabs{gap:4px;padding:4px;background:var(--paper-2);border-radius:14px;width:max-content;max-width:100%;flex-wrap:wrap}
.sales-tabs button{background:transparent;border:0;border-radius:10px;padding:8px 14px;font-size:13px;color:var(--ink-3);font-feature-settings:"palt";box-shadow:none}
.sales-tabs button:hover{color:var(--ink)}
.sales-tabs .active,.sales-tabs button.active{background:var(--card);color:var(--ink);border-color:transparent;box-shadow:0 1px 2px rgba(20,32,27,.08),0 4px 12px -6px rgba(20,32,27,.25)}
.sales-tiles{gap:10px}
.sales-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.sales-tile strong{font-size:24px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.sales-tile span{color:var(--ink-3)}
.sales-chart{height:170px;gap:3px;border-bottom:1px solid var(--line-2);background:repeating-linear-gradient(to top,transparent 0,transparent 41px,var(--line) 41px,var(--line) 42px)}
.sales-bar{background:linear-gradient(to top,var(--tokiwa),var(--tokiwa-glow));border-radius:4px 4px 1px 1px;transform-origin:bottom;animation:v2-grow .8s var(--ease) backwards}
.sales-bar.partial{background:#9fcdbf}
.sales-bar.missing{border-color:var(--ink-4)}
@keyframes v2-grow{from{transform:scaleY(0)}to{transform:none}}
.sales-axis{color:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.sales-panel .muted{color:var(--ink-3)}
.profit-total{background:var(--tokiwa-tint);border:0;border-radius:var(--r-lg);padding:18px 22px}
.profit-total strong{font-size:2.2rem;font-weight:600;letter-spacing:-.02em;color:var(--tokiwa-ink);font-variant-numeric:tabular-nums}
.profit-total.negative{background:var(--shu-tint)}
.profit-total.negative strong{color:var(--shu-ink)}
.profit-note{border-left:3px solid var(--kin);background:var(--kin-tint);border-radius:0 var(--r) var(--r) 0;color:#4a3410}
.profit-status.actual{background:var(--tokiwa-tint);color:var(--tokiwa-ink)}
.profit-status.estimate{background:var(--kin-tint);color:var(--kin-ink)}
.profit-status.muted{background:var(--paper-2);color:var(--ink-3)}
.range-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.range-quick button{border-radius:999px;background:var(--card);border:1px solid var(--line-2);color:var(--ink-2)}
.range-disclosure{border-left-color:var(--ai);background:var(--ai-tint);border-radius:0 var(--r) var(--r) 0}
.range-disclosure p{color:#22325c}
.range-error{color:var(--shu-ink)}
.marketplace-item{border-top-color:var(--line)}
#product-dialog-records>table,#acquisition-body table,#sales-body table,#profit-body table{background:var(--card);border-radius:var(--r);font-size:13px}
#profit-body>table td:nth-child(2),#profit-body details table td:nth-child(n+2),#acquisition-body table td:nth-child(n+2),#sales-body details table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
#profit-body>table td:nth-child(2){white-space:nowrap;font-weight:600}
#profit-body>table td:last-child{text-align:left}
.v2-fig{font-variant-east-asian:proportional-width}

/* ---------- Access (signed out) ---------- */
[data-v2-view="access"] main{display:flex;align-items:center;max-width:none;padding-top:0;padding-bottom:0;position:relative;overflow:hidden}
[data-v2-view="access"] main::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 85% 30%,rgba(31,154,124,.14),transparent 70%),radial-gradient(40% 50% at 12% 85%,rgba(217,67,42,.08),transparent 70%)}
[data-v2-view="access"] main::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 39px,rgba(20,32,27,.055) 39px,rgba(20,32,27,.055) 40px);-webkit-mask:linear-gradient(105deg,transparent 30%,#000 75%);mask:linear-gradient(105deg,transparent 30%,#000 75%)}
.access{position:relative;z-index:1;width:100%;max-width:1200px;grid-template-columns:1.15fr .85fr;gap:clamp(40px,7vw,112px);margin:0 auto;padding:clamp(48px,9vh,110px) 0;min-height:calc(100dvh - 68px - 64px)}
.access>div:first-child{animation:v2-rise 1s var(--ease) backwards}
.access .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.12em;color:var(--tokiwa-ink);margin:0 0 26px}
.access .eyebrow::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--shu);transform:rotate(45deg)}
.access h1{font-size:clamp(38px,4.3vw,64px);line-height:1.16;font-weight:850;letter-spacing:-.02em;margin:0 0 28px;font-feature-settings:"palt";color:var(--ink);word-break:keep-all;word-break:auto-phrase;line-break:strict}
.access p{font-size:17px;line-height:1.85;color:var(--ink-2);max-width:30em}
.access p.muted{font-size:13px;color:var(--ink-3);line-height:1.8}
#access-admin-open{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px 0 26px;margin-top:26px;border-radius:999px;font-size:15px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media(hover:hover){#access-admin-open:hover:not(:disabled){background:var(--ink);color:var(--paper)}}
#access-admin-open::after{content:"→";font-family:var(--mono);font-size:17px;transition:transform .4s var(--ease)}
#access-admin-open:hover::after{transform:translateX(5px)}
#enroll-form{position:relative;padding:38px 36px 30px;border-radius:28px;background:rgba(255,254,250,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-3);animation:v2-rise 1s .12s var(--ease) backwards}
#enroll-form::before{content:"";position:absolute;width:112px;height:112px;top:-40px;right:-30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='i' x='-10%' y='-10%' width='120%' height='120%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='8' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.4' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3' result='s'/%3E%3CfeColorMatrix in='s' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.9' result='m'/%3E%3CfeComposite in='d' in2='m' operator='in'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23i)' fill='none' stroke='%23d9432a'%3E%3Crect x='8' y='8' width='104' height='104' rx='9' stroke-width='7'/%3E%3Crect x='21' y='21' width='78' height='78' rx='3' stroke-width='2'/%3E%3Cpath d='M34 44h52M34 60h52M34 76h30' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='79' cy='77' r='7.5' fill='%23d9432a' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mix-blend-mode:multiply;transform:rotate(-9deg);animation:v2-stamp .75s .55s cubic-bezier(.2,.9,.25,1.15) backwards;pointer-events:none}
@keyframes v2-stamp{0%{opacity:0;transform:scale(1.7) rotate(-18deg)}55%{opacity:1;transform:scale(.93) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-9deg)}}
#enroll-form h2{font-size:22px;font-weight:800;margin-bottom:10px}
#enroll-form label{margin:18px 0}
#enroll-form input{height:52px;padding:0 16px;font-size:15px;background:var(--card)}
#enroll-form button.primary{height:54px;border-radius:var(--r);font-size:15px;margin-top:6px}

/* ---------- Management ---------- */
#management{margin-top:32px;padding:30px}
#management .heading h2{font-size:22px;margin:0}
.device-registration{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.code{font-family:var(--mono);font-size:32px;letter-spacing:.24em;background:var(--tokiwa-tint);color:var(--tokiwa-ink);border-radius:var(--r-lg);text-align:center}
.panel #management-close,#management-close{border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink-2);padding:8px 16px}
#management .panel button.primary,#management>#create-code{width:auto}
#create-code{display:inline-flex;align-items:center;gap:8px;background:var(--card);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-1);height:46px;padding:0 20px;margin-top:6px}
#create-code::before{content:"＋";font-weight:500;color:var(--tokiwa)}
#devices{margin-top:18px;border-bottom:1px solid var(--line)}
#devices>div{display:grid;grid-template-columns:1fr auto;align-items:center;border-top:1px solid var(--line);padding:14px 2px}
#devices>div p:first-child{font-weight:650;color:var(--ink)}
#devices>div p.muted{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
#devices button{color:var(--shu-ink);border:1px solid transparent;border-radius:999px;padding:7px 14px}
#devices button:hover:not(:disabled){background:var(--shu-tint)}
#devices button:disabled{color:var(--ink-4);opacity:1}

/* ---------- Stocktake ---------- */
.stocktake-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px;gap:14px;box-shadow:var(--shadow-1)}
.stocktake-head h2{font-size:22px;font-weight:800}
.stocktake-head p,.stocktake-panel>p,.stocktake-basis{color:var(--ink-3);font-size:13px;max-width:52em}
.stocktake-controls{gap:10px;align-items:center}
.stocktake-date{flex-direction:row;align-items:center;gap:10px;margin:0}
.stocktake-controls button,.stocktake-actions button{height:44px;padding:0 18px;flex:0 0 auto}
.stocktake-options{justify-content:flex-start;gap:8px}
.stocktake-actions{gap:8px}
.stocktake-actions .secondary+.quiet{margin-left:auto;color:var(--shu-ink)}
/* One column at a readable measure: two columns split these short notes mid-sentence. */
.stocktake-head p,.stocktake-panel>p.stocktake-basis,.stocktake-panel>p.muted{max-width:58em}
.stocktake-date input{height:44px}
.stocktake-tiles{gap:0;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stocktake-tiles div{background:transparent;border-radius:0;padding:14px 18px}
.stocktake-tiles div+div{box-shadow:inset 1px 0 0 var(--line)}
.stocktake-tiles strong{font-size:24px;font-weight:600;letter-spacing:-.015em}
.stocktake-warning{background:var(--kin-tint);border:0;border-left:3px solid var(--kin);border-radius:0 var(--r) var(--r) 0;color:#4a3410}
.stocktake-status.stocktake-status-warning{color:var(--shu-ink)}
.stocktake-scroll{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-1)}
.stocktake-input{border-radius:8px;border-color:var(--line-2);font-variant-numeric:tabular-nums}
.stocktake-input.invalid{border-color:var(--shu);background:var(--shu-tint)}
table.stocktake-table th,table.stocktake-table td:first-child{white-space:nowrap}
table.stocktake-table td:last-child{min-width:6.5em}
table.stocktake-table th:first-child{min-width:7.5em}
table.stocktake-table tr.edited td{background:#eef4fb}
table.stocktake-table tr.stocktake-group td{background:var(--paper-2);color:var(--ink);font-size:13px;letter-spacing:.04em}
table.stocktake-table tr.stocktake-held td{background:var(--shu-tint)}
table.stocktake-table tr.stocktake-held td:first-child{box-shadow:inset 3px 0 0 var(--shu)}
table.stocktake-table tr.review td:first-child{box-shadow:inset 3px 0 0 var(--kin)}
.stocktake-copy{background:var(--kin-tint);border:1px solid #e9cf9c;border-left:4px solid var(--kin);border-radius:var(--r)}
.stocktake-copy-dates{background:var(--ai-tint);border-color:#c5d1ee;border-left-color:var(--ai)}

/* ---------- Footer & design switch ---------- */
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;max-width:1560px;margin:0 auto;padding:18px max(4%,20px) 26px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.site-footer .v2-mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase}
.site-footer .v2-mark::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--shu);transform:rotate(45deg)}
#design-switch{background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;color:var(--ink-2)}
#design-switch:hover{border-color:var(--ink-4);color:var(--ink)}

/* ---------- Update banner ---------- */
.update-banner{bottom:22px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(20,32,27,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px -20px rgba(20,32,27,.7);animation:v2-banner .6s var(--ease) backwards}
.update-banner button{border-radius:999px;background:var(--paper);color:var(--ink)}

/* ---------- Loading placeholders inside the product dialog ---------- */
:is(#acquisition-body,#sales-body,#profit-body,#marketplace-body)>p.muted:only-child{position:relative;padding-bottom:76px;color:var(--ink-4)}
:is(#acquisition-body,#sales-body,#profit-body,#marketplace-body)>p.muted:only-child::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:58px;border-radius:var(--r);background:linear-gradient(100deg,var(--paper-2) 30%,#f6f4ef 50%,var(--paper-2) 70%) 0 0/300% 100%;animation:v2-shimmer 1.4s linear infinite}
@keyframes v2-shimmer{to{background-position:-150% 0}}
/* ---------- Load choreography ---------- */
#dashboard:not([hidden])>.heading,#dashboard:not([hidden])>.question-panel,#dashboard:not([hidden])>.feed-status,#dashboard:not([hidden])>.tabs,#dashboard:not([hidden])>.toolbar,#dashboard:not([hidden])>.table-area{animation:v2-rise .8s var(--ease) backwards}
#dashboard:not([hidden])>.question-panel{animation-delay:.05s}
#dashboard:not([hidden])>.feed-status{animation-delay:.08s}
#dashboard:not([hidden])>.tabs{animation-delay:.16s}
#dashboard:not([hidden])>.toolbar{animation-delay:.2s;animation-name:v2-fade}
#dashboard:not([hidden])>.table-area{animation-delay:.24s}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .metrics:has(.profit-metric){grid-template-columns:repeat(4,minmax(0,1fr))}
  .metric.profit-metric{grid-column:1/-1;min-height:0}
  .metric+.metric.profit-metric{box-shadow:inset 0 1px 0 var(--line)}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
}
@media(max-width:760px){
  header{height:60px;padding:0 16px}
  .header-actions>span#connection{display:none}
  .v2-eyebrow{white-space:nowrap}
  .brand{font-size:16px}
  .logo{width:34px;height:34px;border-radius:10px}
  .header-actions .quiet{padding:7px 12px}
  main{padding:22px 16px 32px}
  .heading{align-items:flex-start;margin-bottom:16px}
  .v2-eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:8px}
  #dashboard>.heading h1{font-size:30px}
  #dashboard>.heading p.muted{font-size:12px;margin-top:8px}
  #refresh{height:40px;padding:0 14px 0 12px}
  .question-panel{padding:10px 10px 10px 14px}
  .question-input input{padding:10px 4px}
  .feed-status{gap:6px;margin:0 0 14px}
  .feed-status>span{font-size:11px}
  .feed-details{flex:none;margin:0}
  .feed-status.expanded>span,.feed-status:has(.feed-details[open])>span{flex:1 1 100%;white-space:normal}
  .metrics,.metrics:has(.profit-metric){grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r-lg);margin-bottom:22px}
  .metric{padding:14px 14px 13px;min-height:0}
  .metric+.metric{box-shadow:none}
  .metric:nth-child(2n){box-shadow:inset 1px 0 0 var(--line)}
  .metric:nth-child(n+3){border-top:1px solid var(--line)}
  .metric strong{font-size:11px}
  .metric .value{font-size:28px;margin:10px 0 6px}
  .metric .value small{font-size:12px}
  .metric p{font-size:11px}
  .metric.profit-metric{grid-column:1/-1;padding:18px 16px 16px;border-top:0}
  .metric.profit-metric .value{font-size:34px}
  .metric.profit-metric:not(.v2-open) p.profit-metric-note{max-height:3.2em;overflow:hidden;-webkit-mask:linear-gradient(#000 50%,transparent);mask:linear-gradient(#000 50%,transparent)}
  #dashboard>.heading p.muted{font-size:11.5px}
  .metric.profit-metric .value small{display:flex;width:max-content;margin:10px 0 0;transform:none}
  .tabs{width:100%;border-radius:14px;display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between}
  .tabs button{padding:9px 7px;font-size:12.5px;letter-spacing:0}
  .toolbar{padding-top:10px;padding-bottom:10px;gap:8px;margin-bottom:10px}
  .toolbar-row input#search{height:42px;flex:1 1 100%;min-width:0}
  .main-row{flex-wrap:wrap}
  .filter-toggle{padding:0 12px}
  .toolbar select,.filter-toggle,.export-button{height:42px}
  .view-toggle button{height:34px;padding:0 11px}
  #row-count{background:transparent;box-shadow:none}
  .toolbar.v2-compact:not(.filters-open) .chip-row,.toolbar.v2-compact:not(.filters-open) .view-toggle{display:none}
  .toolbar.v2-compact .toolbar-row input#search{flex:1 1 0}
  .group-head{padding-top:8px;padding-bottom:8px}
  .question-input{flex-wrap:nowrap}
  .question-input input{flex:1 1 0;min-width:0}
  .question-input button{flex:none;padding:0 16px;height:44px}
  .question-panel form{flex-wrap:wrap}
  .sales-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:auto;padding-right:24px;-webkit-mask:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .sales-tabs::-webkit-scrollbar{display:none}
  .sales-tabs button{flex:none}
  .chip{height:32px;padding:0 11px;font-size:12.5px}
  .card-groups{gap:24px}
  .group-toggle{font-size:15px;gap:10px}
  .group-toggle::after{display:none}
  .group-count{white-space:nowrap;flex:none;margin-left:auto}
  .group-name::before{font-size:10px;margin-right:8px}
  .group-arrow{width:24px;height:24px}
  .card-grid{grid-template-columns:1fr;gap:12px}
  .product-card{padding:14px;gap:10px 12px}
  .thumb{width:72px;height:72px;border-radius:12px}
  .card-name{font-size:14.5px}
  .card-top{padding-bottom:12px;border-bottom:1px dashed var(--line-2)}
  .card-quantity{flex:1 1 55%;border-top:0;padding-top:0}
  .card-quantity .number{font-size:28px}
  .card-foot{flex:1 1 40%;align-self:flex-end;border-top:0}
  .card-quantity.v2-unknown{flex:1 1 100%}
  .card-quantity.v2-unknown~.card-foot{flex:1 1 100%;display:flex;justify-content:space-between;align-items:center}
  .card-totals,.card-sales,.card-profit,.card-lines{flex:1 1 100%}
  td{padding:14px 13px}th{padding:12px 13px}
  /* Product detail becomes a bottom sheet. */
  #product-dialog{width:100%;max-width:100%;margin:auto 0 0;max-height:calc(100dvh - 18px);border-radius:24px 24px 0 0;padding:0 16px 22px}
  #product-dialog[open]{animation:v2-sheet .55s var(--ease) backwards}
  #product-dialog .dialog-head{margin:0 -16px 16px;padding:22px 16px 14px;top:0}
  #product-dialog .dialog-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line-2)}
  .dialog-head h2{font-size:17px}
  .detail-head{gap:14px;flex-direction:row;align-items:flex-start}
  .detail-head .thumb.large{width:112px;height:112px;border-radius:14px;flex:none}
  .detail-info{gap:7px}
  .detail-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-keys div:nth-child(2n+1){box-shadow:none}
  .detail-keys div:nth-child(n+3){border-top:1px solid var(--line)}
  .detail-keys strong{font-size:18px}
  #acquisition-panel,.sales-panel,.marketplace-panel{padding:16px 0 0;margin-top:24px}
  .sales-tabs{width:100%}
  dialog{padding:24px 20px}
  .access{grid-template-columns:1fr;gap:34px;padding:34px 0 40px;min-height:0}
  .access .eyebrow{margin-bottom:18px}
  .access h1{font-size:clamp(26px,7.6vw,34px);letter-spacing:-.01em;margin-bottom:18px}
  .access p{font-size:15px}
  #access-admin-open{width:100%;justify-content:center;height:54px}
  #enroll-form{padding:30px 22px 24px;border-radius:24px}
  #enroll-form::before{width:86px;height:86px;top:-30px;right:-6px}
  [data-v2-view="access"] main::after{-webkit-mask:linear-gradient(170deg,transparent 40%,#000 90%);mask:linear-gradient(170deg,transparent 40%,#000 90%)}
  .stocktake-panel{padding:16px}
  .stocktake-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stocktake-tiles div:nth-child(2n+1){box-shadow:none}
  .stocktake-tiles div:nth-child(n+3){border-top:1px solid var(--line)}
  .site-footer{padding:16px 16px 24px}
}
@keyframes v2-sheet{from{opacity:.4;transform:translateY(60px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff}
  .site-footer,.tabs::before{display:none}
  .metric.profit-metric{background:#fff;color:var(--ink)}
}