/* Deck Of Flavors Manager. Built by NerdArc. */
/* Layout: an app shell inside a stage. Narrow container = phone (bottom tabs, sheets). Wide = computer (sidebar + live preview pane). */
:root{
  --font-display:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --font-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wdth:88; --track-label:.14em; --track-tight:-.01em;
  --fs-11:11px; --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px; --fs-36:36px; --fs-hero:84px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-xs:4px; --r-sm:6px; --r-control:8px; --r-card:10px; --r-sheet:16px; --r-pill:999px; --r-frame:40px;
  --dur-press:100ms; --dur-quick:160ms; --dur-swap:240ms; --dur-enter:320ms; --dur-exit:200ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --touch:44px; --tabbar:64px; --side:232px; --pane:380px; --phone-w:390px; --phone-h:820px; --bar-h:56px; --line-w:1px;
  /* Kraft Console (light) */
  --canvas:#D8C3A5; --surface:#FBF7F0; --surface-solid:#FBF7F0; --sunken:#EFE5D6; --line:rgb(43 32 26 / .13); --stage:#C9B391; --chrome:rgb(251 247 240 / .78);
  --ink:#2B201A; --ink-muted:#554940; --faint:#554940; --on-primary:#FBF7F0;
  --primary:#A14F2B; --primary-soft:#F0DCCD; --secondary:#3F5236; --secondary-soft:#DDE4D3;
  --caramel:#8A5A2B; --sage:#5A6A4E; --leaf:#4E6A2E; --promo:#A93C62; --promo-soft:#F3D9E2;
  --scrim:rgb(28 23 20 / .38); --toast-bg:#2B201A; --toast-ink:#FBF7F0;
  --shadow-1:0 1px 0 rgb(43 32 26 / .08),0 0 0 1px rgb(43 32 26 / .05),0 14px 26px -18px rgb(43 32 26 / .45);
  --shadow-2:0 24px 48px -20px rgb(43 32 26 / .55),0 0 0 1px rgb(43 32 26 / .06);
  --tex:radial-gradient(120% 60% at 15% 0%,rgb(251 247 240 / .5),transparent 60%); --tex-blend:multiply;
  --on-canvas-accent:#2B201A; --state-closed:#653E1C; --state-open:#3F5236; --hero-bg:#FBF7F0; --hero-shadow:var(--shadow-1); --hero-pad:var(--sp-4); --hero-fill:linear-gradient(#2B201A,#2B201A); --perf:var(--line);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  /* Night Roast (dark) */
  --canvas:#0B0807; --surface:rgb(241 233 222 / .055); --surface-solid:#1A1513; --sunken:rgb(241 233 222 / .045); --line:rgb(241 233 222 / .09); --stage:#050403; --chrome:rgb(11 8 7 / .74);
  --ink:#F1E9DE; --ink-muted:#C9BDB0; --faint:#8E8277; --on-primary:#1C1714;
  --primary:#E0946B; --primary-soft:rgb(224 148 107 / .14); --secondary:#A9C097; --secondary-soft:rgb(169 192 151 / .12);
  --caramel:#E2B26A; --sage:#B3C2A3; --leaf:#A9C27A; --promo:#F08FB0; --promo-soft:rgb(240 143 176 / .12);
  --scrim:rgb(0 0 0 / .6); --toast-bg:#F1E9DE; --toast-ink:#1C1714;
  --shadow-1:inset 0 1px 0 rgb(241 233 222 / .07),0 0 0 1px rgb(241 233 222 / .09),0 24px 48px -28px rgb(0 0 0 / .9);
  --shadow-2:0 30px 60px -20px rgb(0 0 0 / .9),0 0 0 1px rgb(241 233 222 / .1);
  --tex:radial-gradient(90% 34% at 50% -6%,rgb(224 148 107 / .26),transparent 70%),radial-gradient(60% 30% at 110% 62%,rgb(169 192 151 / .06),transparent 70%); --tex-blend:screen;
  --on-canvas-accent:#E0946B; --state-closed:#E2B26A; --state-open:#A9C097; --hero-bg:transparent; --hero-shadow:none; --hero-pad:0px; --hero-fill:linear-gradient(180deg,#F1E9DE 30%,rgb(241 233 222 / .55)); --perf:transparent;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  /* Night Roast (dark) */
  --canvas:#0B0807; --surface:rgb(241 233 222 / .055); --surface-solid:#1A1513; --sunken:rgb(241 233 222 / .045); --line:rgb(241 233 222 / .09); --stage:#050403; --chrome:rgb(11 8 7 / .74);
  --ink:#F1E9DE; --ink-muted:#C9BDB0; --faint:#8E8277; --on-primary:#1C1714;
  --primary:#E0946B; --primary-soft:rgb(224 148 107 / .14); --secondary:#A9C097; --secondary-soft:rgb(169 192 151 / .12);
  --caramel:#E2B26A; --sage:#B3C2A3; --leaf:#A9C27A; --promo:#F08FB0; --promo-soft:rgb(240 143 176 / .12);
  --scrim:rgb(0 0 0 / .6); --toast-bg:#F1E9DE; --toast-ink:#1C1714;
  --shadow-1:inset 0 1px 0 rgb(241 233 222 / .07),0 0 0 1px rgb(241 233 222 / .09),0 24px 48px -28px rgb(0 0 0 / .9);
  --shadow-2:0 30px 60px -20px rgb(0 0 0 / .9),0 0 0 1px rgb(241 233 222 / .1);
  --tex:radial-gradient(90% 34% at 50% -6%,rgb(224 148 107 / .26),transparent 70%),radial-gradient(60% 30% at 110% 62%,rgb(169 192 151 / .06),transparent 70%); --tex-blend:screen;
  --on-canvas-accent:#E0946B; --state-closed:#E2B26A; --state-open:#A9C097; --hero-bg:transparent; --hero-shadow:none; --hero-pad:0px; --hero-fill:linear-gradient(180deg,#F1E9DE 30%,rgb(241 233 222 / .55)); --perf:transparent;
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font:400 var(--fs-16)/1.5 var(--font-body);display:flex;flex-direction:column;overflow:hidden;
  padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
.ui,button,nav,.tabbar{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--track-tight);margin:0;text-wrap:balance;font-weight:600}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* segmented control */
.seg{flex:none;display:inline-flex;gap:2px;padding:3px;background:var(--sunken);border-radius:var(--r-control)}
.seg button{min-height:32px;padding:0 var(--sp-3);border-radius:var(--r-sm);color:var(--ink-muted);font-size:var(--fs-12);font-weight:600;transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.seg button[aria-pressed="true"]{color:var(--ink)}
.stage{flex:1;min-height:0;display:grid;place-items:center}
.app{position:relative;container-type:inline-size;container-name:app;width:100%;height:100%;background:var(--canvas);overflow:hidden}
.shell{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}

/* shell: sidebar / tabbar */
.side{display:none}
.tabbar{grid-row:2;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabbar) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:var(--line-w) solid var(--line);z-index:5}
.tab{display:grid;place-items:center;align-content:center;gap:2px;font-size:var(--fs-12);font-weight:500;color:var(--ink-muted);min-height:var(--touch);transition:color var(--dur-quick) var(--ease-out)}
.tab svg{width:22px;height:22px;transition:transform var(--dur-press) var(--ease-out)}
.tab:active svg{transform:scale(.88)}
.tab[aria-current="page"]{color:var(--primary);font-weight:600}
.main{grid-row:1;grid-column:1;min-height:0;min-width:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.scroller{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
.view{padding:var(--sp-5) var(--sp-4) var(--sp-7);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);max-width:760px;margin:0 auto}
.view[hidden]{display:none}
.pane{display:none}
@container app (min-width:900px){
  .shell{grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .tabbar{display:none}
  .side{display:flex;flex-direction:column;gap:var(--sp-1);grid-column:1;grid-row:1;padding:var(--sp-5) var(--sp-3);background:var(--surface);border-right:var(--line-w) solid var(--line)}
  .main{grid-column:2}
  .view{padding:var(--sp-6) var(--sp-6) var(--sp-7)}
  .preview-btn{display:none!important}
  .app .publishbar{left:calc(var(--side) + var(--sp-5));right:var(--sp-5);bottom:var(--sp-5)}
  .app .editor{left:var(--side)}
}
@container app (min-width:1180px){
  .main{grid-template-columns:minmax(0,1fr) var(--pane)}
  .app .publishbar{right:calc(var(--pane) + var(--sp-5))}
  .pane{display:flex;flex-direction:column;min-height:0;border-left:var(--line-w) solid var(--line);background:var(--sunken)}
}
.brand{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3) var(--sp-5);font:600 var(--fs-16) var(--font-display);letter-spacing:var(--track-tight);}
.brand i{width:24px;height:24px;border-radius:var(--r-xs);background:var(--primary);display:inline-block}
.sidelink{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding:0 var(--sp-3);border-radius:var(--r-sm);font-weight:500;font-size:var(--fs-14);color:var(--ink-muted);transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.sidelink svg{width:18px;height:18px}
.sidelink:hover{background:var(--sunken)}
.sidelink[aria-current="page"]{color:var(--ink);font-weight:600}

/* common */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.head h1{font-size:var(--fs-22);line-height:1.2}
.eyebrow{font-size:var(--fs-12);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.muted{color:var(--ink-muted)}
.small{font-size:var(--fs-14)}
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--sp-4);display:grid;gap:var(--sp-3);min-width:0}
.card h2{font-size:var(--fs-16)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-width:0}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 var(--sp-2);border-radius:var(--r-xs);font-size:var(--fs-12);font-weight:600;white-space:nowrap}
.pill.ok{background:var(--secondary-soft);color:var(--secondary)}
.pill.off{background:var(--sunken);color:var(--ink-muted)}
.pill.pink{background:var(--promo-soft);color:var(--promo)}
.pill.draft{background:var(--primary-soft);color:var(--primary)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--touch);padding:0 var(--sp-5);border-radius:var(--r-control);font-weight:600;font-size:var(--fs-14);
  transition:transform var(--dur-press) var(--ease-out),background var(--dur-quick) var(--ease-out),opacity var(--dur-quick) var(--ease-out)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.soft{background:var(--sunken);color:var(--ink)}
.btn.text{padding:0 var(--sp-3);color:var(--primary)}
.btn svg{width:20px;height:20px}
.iconbtn{width:var(--touch);height:var(--touch);display:grid;place-items:center;border-radius:var(--r-control);transition:background var(--dur-quick) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.iconbtn:hover{background:var(--sunken)} .iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:22px;height:22px}
.num{font-variant-numeric:tabular-nums}

/* home */
.hello h1{font-size:var(--fs-28);line-height:1.1}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.stat{display:grid;gap:2px;min-width:0}
.stat b{font:600 var(--fs-22)/1.1 var(--font-body);letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs-12);color:var(--ink-muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 var(--sp-3);border-radius:var(--r-sm);background:var(--sunken);font-size:var(--fs-14);font-weight:500}
.chip i{width:6px;height:6px;border-radius:50%;display:inline-block}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.qa{display:grid;justify-items:start;align-content:space-between;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-1);text-align:left;font-weight:600;font-size:var(--fs-14);min-height:96px;transition:transform var(--dur-press) var(--ease-out)}
.qa:active{transform:scale(.97)}
.qa span.ic{display:grid;place-items:center;color:var(--ink)}
.qa svg{width:20px;height:20px}
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--touch);width:100%;text-align:left}
.linkrow svg{width:20px;height:20px;color:var(--ink-muted);flex:none}

/* flavor board */
.machines{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-3)}
.machine{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--sp-3);display:grid;gap:var(--sp-2);min-width:0}
.machine .mh{display:flex;justify-content:space-between;align-items:center;padding:0 var(--sp-1)}
.machine .mh b{font-size:var(--fs-14)}
.slot{display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-3);border-radius:var(--r-sm);background:var(--canvas);box-shadow:inset 0 0 0 var(--line-w) var(--line);text-align:left;width:100%;min-width:0;
  transition:transform var(--dur-press) var(--ease-out),background var(--dur-quick) var(--ease-out)}
.slot:active{transform:scale(.98)}
.slot .sw{width:8px;height:8px;border-radius:50%;flex:none}
.slot .nm{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .ch{font-size:var(--fs-12);font-weight:600;color:var(--primary);white-space:nowrap}
.slot svg{width:18px;height:18px;color:var(--ink-muted);flex:none}
.swirl{font-size:var(--fs-12);color:var(--ink-muted);padding:0 var(--sp-1)}
.publishbar{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:calc(var(--tabbar) + var(--sp-3) + env(safe-area-inset-bottom,0px));z-index:6;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-2),var(--shadow-1);transform:translateY(100%);opacity:0;visibility:hidden;will-change:transform,opacity}
.publishbar .msg{flex:1;min-width:0;font-size:var(--fs-14);font-weight:600}
.publishbar .msg span{display:block;font-weight:400;color:var(--ink-muted);font-size:var(--fs-12)}

/* promos */
.promos{display:grid;gap:var(--sp-3)}
.promo{position:relative;display:grid;gap:var(--sp-2);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--sp-4);text-align:left;width:100%;transition:transform var(--dur-press) var(--ease-out)}
.promo:active{transform:scale(.985)}
.promo h2{font-size:var(--fs-18);padding-right:64px}
.promo .price{font:600 var(--fs-18) var(--font-body);color:var(--promo);font-variant-numeric:tabular-nums}
.switch{position:absolute;top:var(--sp-3);right:var(--sp-3);width:var(--touch);height:var(--touch);display:grid;place-items:center}
.switch i{width:40px;height:24px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background var(--dur-quick) var(--ease-out)}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-1);transition:transform var(--dur-swap) var(--ease-out)}
.switch[aria-checked="true"] i{background:var(--secondary)}
.switch[aria-checked="true"] i::after{transform:translateX(16px)}

/* overlays */
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;z-index:20}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;height:88%;display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-2);transform:translateY(105%);visibility:hidden;will-change:transform}
@container app (min-width:900px){.sheet{left:50%;right:auto;width:520px;margin-left:calc(var(--side) / 2 - 260px);bottom:var(--sp-5);border-radius:var(--r-sheet);height:80%}}
.grabzone{padding:var(--sp-2) 0 0;touch-action:none;cursor:grab;flex:none}
.grab{width:40px;height:5px;border-radius:var(--r-pill);background:var(--line);margin:0 auto}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);flex:none}
.sheethead h2{font-size:var(--fs-18)}
.sheetbody{overflow-y:auto;overscroll-behavior:contain;padding:0 var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));min-height:0}
.search{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--touch);padding:0 var(--sp-3);border-radius:var(--r-control);background:var(--canvas);box-shadow:inset 0 0 0 var(--line-w) var(--line);margin-bottom:var(--sp-3)}
.search svg{width:18px;height:18px;color:var(--ink-muted);flex:none}
.search input{flex:1;min-width:0;border:0;background:transparent;min-height:var(--touch);outline:none}
.filters{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-3);scrollbar-width:none}
.filters button{flex:none;min-height:36px;padding:0 var(--sp-3);border-radius:var(--r-sm);background:var(--sunken);font-size:var(--fs-14);font-weight:600;color:var(--ink-muted);transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.filters button[aria-pressed="true"]{color:var(--canvas);background:transparent}
.flist{display:grid}
.fopt{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:0 var(--sp-2);border-radius:var(--r-control);text-align:left;width:100%;transition:background var(--dur-quick) var(--ease-out)}
.fopt:hover{background:var(--sunken)}
.fopt .sw{width:8px;height:8px;border-radius:50%;flex:none}
.fopt .nm{flex:1;min-width:0;font-weight:600}
.fopt .hint{font-size:var(--fs-12);color:var(--ink-muted);white-space:nowrap}
.fopt svg{width:20px;height:20px;color:var(--primary)}
.empty{padding:var(--sp-6) var(--sp-3);text-align:center;color:var(--ink-muted);display:grid;gap:var(--sp-3);justify-items:center}

/* promo editor (shared-element) */
.editor{position:absolute;inset:0;z-index:15;background:var(--canvas);display:flex;flex-direction:column;visibility:hidden;clip-path:inset(0 round var(--r-card))}
.edhead{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:var(--line-w) solid var(--line);flex:none;background:var(--surface)}
.edhead .t{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved{font-size:var(--fs-12);color:var(--ink-muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.saved .dot{background:var(--secondary)}
.edbody{overflow-y:auto;min-height:0;flex:1}
.edgrid{max-width:760px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7);display:grid;gap:var(--sp-5)}
@container app (min-width:900px){.edgrid{grid-template-columns:1fr 1fr;align-items:start}.edgrid .full{grid-column:1/-1}}
.field{display:grid;gap:var(--sp-2)}
.field label,.field .lbl{font-size:var(--fs-14);font-weight:600}
.input{min-height:var(--touch);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-control);background:var(--surface);border:var(--line-w) solid var(--line);outline:none;width:100%;transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
textarea.input{resize:none;min-height:88px;line-height:1.5}
.money{display:flex;align-items:center;gap:var(--sp-1);border-radius:var(--r-control);background:var(--surface);border:var(--line-w) solid var(--line);padding:0 var(--sp-3);transition:border-color var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out)}
.money:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.money span{font-weight:600;color:var(--ink-muted)}
.money input{border:0;background:transparent;outline:none;min-height:var(--touch);flex:1;min-width:0;font-variant-numeric:tabular-nums}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-1)}
.days button{min-height:var(--touch);border-radius:var(--r-sm);background:var(--surface);border:var(--line-w) solid var(--line);font-weight:600;font-size:var(--fs-14);transition:background var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.days button:active{transform:scale(.94)}
.days button[aria-pressed="true"]{background:var(--promo);border-color:var(--promo);color:var(--on-primary)}
.hint{font-size:var(--fs-12);color:var(--ink-muted)}
.more{border-top:var(--line-w) solid var(--line);padding-top:var(--sp-3)}
.more summary{list-style:none;cursor:pointer;min-height:var(--touch);display:flex;align-items:center;justify-content:space-between;font-weight:600}
.more summary::-webkit-details-marker{display:none}
.more summary svg{width:20px;height:20px;transition:transform var(--dur-swap) var(--ease-out)}
.more[open] summary svg{transform:rotate(180deg)}
.danger{color:var(--promo)}

/* website preview */
.site{background:var(--canvas);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-1);border:var(--line-w) solid var(--line)}
.site .bar{display:flex;align-items:center;gap:6px;padding:var(--sp-2) var(--sp-3);background:var(--surface);border-bottom:var(--line-w) solid var(--line);font-size:var(--fs-12);color:var(--ink-muted)}
.site .bar i{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.site .inner{padding:var(--sp-4);display:grid;gap:var(--sp-3)}
.site h3{font-size:var(--fs-22)}
.site .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.site .grid div{background:var(--surface);border-radius:var(--r-control);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-14);display:grid;min-width:0}
.site .grid small{font-size:var(--fs-12);color:var(--ink-muted)}
.promoblock{border-radius:var(--r-card);padding:var(--sp-4);background:var(--promo-soft);display:grid;gap:var(--sp-1);min-width:0}
.promoblock b{font:600 var(--fs-18)/1.2 var(--font-display);letter-spacing:var(--track-tight);color:var(--promo);overflow-wrap:anywhere}
.promoblock .p{font:600 var(--fs-22) var(--font-body);font-variant-numeric:tabular-nums;color:var(--promo)}
.panehead{padding:var(--sp-4) var(--sp-4) var(--sp-3);display:grid;gap:var(--sp-1);flex:none}
.panehead h2{font-size:var(--fs-18)}
.panebody{overflow-y:auto;padding:0 var(--sp-4) var(--sp-5);min-height:0}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(var(--sp-3) + var(--tabbar));z-index:30;display:flex;align-items:center;gap:var(--sp-3);max-width:calc(100% - 24px);
  padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);border-radius:var(--r-control);background:var(--toast-bg);color:var(--toast-ink);font-size:var(--fs-14);font-weight:500;
  opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity var(--dur-exit) var(--ease-out),transform var(--dur-exit) var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition-duration:var(--dur-enter)}
.toast .m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast button{min-height:36px;padding:0 var(--sp-4);border-radius:var(--r-sm);background:var(--toast-ink);color:var(--toast-bg);font-weight:700;font-size:var(--fs-14);flex:none}
@container app (min-width:900px){.toast{bottom:var(--sp-5);left:calc(50% + var(--side) / 2)}}
.has-bar .toast{bottom:calc(var(--sp-3) + var(--tabbar) + var(--sp-8))}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important}}

/* ===== Night Roast / Kraft Console skin ===== */
.tex{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--tex),var(--grain,none);mix-blend-mode:var(--tex-blend)}
.shell{position:relative;z-index:1}
h1,h2,h3,.cond{font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);text-transform:uppercase;letter-spacing:.005em;font-weight:800}
.head h1{font-size:var(--fs-36);line-height:.95}
.card h2{font-size:var(--fs-18)}
.mono,.eyebrow{font:500 var(--fs-11)/1.25 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--faint)}
.card,.machine,.promo,.qa{border-radius:var(--r-card)}
.side,.tabbar{background:var(--chrome);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--line)}
.sheet,.editor .edhead{background:var(--surface-solid)}
.input,.money,.days button{background:var(--surface-solid)}
.pane{background:var(--chrome)}
.btn.soft{background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink)}
kbd{font:500 var(--fs-11) var(--font-mono);padding:2px 6px;border-radius:var(--r-xs);border:var(--line-w) solid var(--line);color:var(--faint);background:var(--sunken)}
@media (hover:none){kbd{display:none}}
.cmd{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--touch);padding:0 var(--sp-3);border-radius:var(--r-control);background:var(--chrome);box-shadow:var(--shadow-1);color:var(--ink-muted);font-size:var(--fs-14);text-align:left;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cmd svg{width:16px;height:16px;flex:none} .cmd kbd{margin-left:auto}
.topline{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.state{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--state-closed)}
.state i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px 2px currentColor}
.state.open{color:var(--state-open)}
.hero{position:relative;display:grid;gap:var(--sp-1);background:var(--hero-bg);box-shadow:var(--hero-shadow);border-radius:var(--r-card);padding:var(--hero-pad);container-type:inline-size}
.hero::before,.hero::after{content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);height:var(--line-w);background:repeating-linear-gradient(90deg,var(--perf) 0 6px,transparent 6px 10px)}
.hero::before{top:6px}.hero::after{bottom:6px}
.big{font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:900;font-size:min(var(--fs-hero),22cqi);line-height:.86;margin:var(--sp-1) 0 var(--sp-2);display:flex;align-items:flex-start;
  background:var(--hero-fill);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.big small{font-size:.36em;line-height:1;margin-top:.22em}
.subrow{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.subrow b{color:var(--ink);font-weight:500}
.curve{width:100%;height:54px;display:block}
.rule{height:var(--line-w);background:linear-gradient(90deg,var(--line),transparent)}
.lotshead{display:flex;justify-content:space-between;align-items:center}
.lots{display:grid}
.lot{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;min-height:56px;padding:var(--sp-2) 0;border-bottom:var(--line-w) solid var(--line);text-align:left;width:100%}
.lot .no{font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:900;font-size:var(--fs-28);line-height:1;color:var(--primary)}
.lot b{display:block;font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:700;font-size:var(--fs-16);text-transform:uppercase;letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lot .mono{display:block;margin-top:2px}
.lot svg{width:22px;height:22px;color:var(--primary);opacity:.85}
.ticket{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);width:100%;padding:var(--sp-4);border-radius:var(--r-card);text-align:left;background:var(--promo-soft);box-shadow:inset 0 0 0 var(--line-w) var(--promo-soft),var(--shadow-1);transition:transform var(--dur-press) var(--ease-out)}
.ticket:active{transform:scale(.985)}
.ticket .mono{color:var(--promo)}
.ticket b{display:block;margin-top:var(--sp-2);font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:800;font-size:var(--fs-22);line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket .p{font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:900;font-size:var(--fs-36);line-height:.85;color:var(--promo);white-space:nowrap;font-variant-numeric:tabular-nums}
.ticket .p small{font-size:.45em;vertical-align:top}
.minw{min-width:0}
.machine .mh{align-items:flex-end}
.mno{font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:900;font-size:var(--fs-28);line-height:.9;color:var(--primary)}
.slot{background:var(--sunken);box-shadow:none}
.promo h2{font-size:var(--fs-22)}
.promo .price{font-family:var(--font-display);font-stretch:88%;font-variation-settings:"wdth" var(--wdth);font-weight:900;font-size:var(--fs-28);line-height:1;color:var(--promo)}
.jlist{display:grid}
.jitem{display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-2);border-radius:var(--r-sm);width:100%;text-align:left}
.jitem:hover,.jitem.sel{background:var(--sunken)}
.jitem .k{margin-left:auto}
.jitem svg{width:18px;height:18px;flex:none;color:var(--ink-muted)}
#v-home{gap:var(--sp-4)}
.lot .x{display:block;margin-top:2px;font-weight:600;color:var(--ink-muted)}
.jgroup{padding:var(--sp-3) var(--sp-2) var(--sp-1)}

/* ===== Magnetic motion: elastic selection indicator + magnetic buttons ===== */
.seg,.filters,#sideLinks,.tabbar{position:relative}
.seg>button,.filters>button,.sidelink,.tab{position:relative;z-index:1}
.ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;will-change:transform,width}
.seg>.ind{background:var(--surface-solid);box-shadow:var(--shadow-1);border-radius:var(--r-sm)}
.filters>.ind{background:var(--ink);border-radius:var(--r-sm)}
#sideLinks>.ind{background:var(--sunken);box-shadow:var(--shadow-1);border-radius:var(--r-sm)}
.tabbar>.ind{height:3px!important;top:0;background:var(--primary);border-radius:0 0 var(--r-xs) var(--r-xs);box-shadow:0 0 14px 1px var(--primary)}
.seg>button,.filters>button{background:transparent}
.filters>button:not([aria-pressed="true"]){background:var(--sunken)}
.mag{will-change:transform}

/* ===== Sign-in, lock and offline ===== */
.gate{position:absolute;inset:0;z-index:40;display:grid;place-items:start center;overflow-y:auto;overscroll-behavior:contain;background:var(--canvas);padding:var(--sp-5) max(16px,env(safe-area-inset-right,0px)) var(--sp-5) max(16px,env(safe-area-inset-left,0px))}
.gate[hidden]{display:none}
.gatebox{position:relative;z-index:1;width:min(400px,100%);display:grid;gap:var(--sp-3);text-align:left;margin-block:auto}
.gatebox h1{font-size:var(--fs-36);line-height:.95}
.gatebrand{padding:0 0 var(--sp-4)}
.gatebox .btn{width:100%}
.gatebox .field{margin-top:var(--sp-2)}
.pwrow{display:flex;gap:var(--sp-2);align-items:center}
.pwrow .input{flex:1;min-width:0}
.gatebox .pwrow .btn{width:auto;flex:none;min-width:64px}
.gateerr{min-height:1.4em;color:var(--promo);font-size:var(--fs-14);font-weight:500}
.pindots{display:flex;gap:var(--sp-3);justify-content:center;padding:var(--sp-3) 0}
.pindots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink-muted);transition:background var(--dur-quick) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.pindots i.on{background:var(--ink);box-shadow:none;transform:scale(1.1)}
.pindots.shake{animation:shake var(--dur-swap) var(--ease-inout)}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.pad button{min-height:60px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-1);font:600 var(--fs-22) var(--font-body);font-variant-numeric:tabular-nums;transition:transform var(--dur-press) var(--ease-out)}
.pad button:active{transform:scale(.94)}
.pad button.ghost{background:transparent;box-shadow:none;font-size:var(--fs-14);color:var(--ink-muted)}
.offline{position:absolute;left:var(--sp-3);right:var(--sp-3);top:var(--sp-3);z-index:35;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-control);background:var(--toast-bg);color:var(--toast-ink);font-size:var(--fs-14);font-weight:500}
.offline[hidden]{display:none}
.hist{display:grid}
.hist .row{min-height:52px;border-bottom:var(--line-w) solid var(--line)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:52px;width:100%;text-align:left;border-bottom:var(--line-w) solid var(--line);font-weight:500}
.setrow:last-child{border-bottom:0}
.setrow svg{width:18px;height:18px;flex:none;color:var(--ink-muted)}

/* ===== Lists, chips and forms (menu, library, sign-ups) ===== */
.addrow{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:stretch}
.addrow .input{flex:1 1 180px;min-width:0}
.addrow select.input{flex:0 1 160px}
.list{display:grid}
.listrow{display:flex;align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) 0;border-bottom:var(--line-w) solid var(--line)}
.listrow:last-child{border-bottom:0}
.listrow .minw{flex:1;display:grid;gap:2px;text-align:left}
.listrow b{font-weight:600;overflow-wrap:anywhere}
.linkbtn{min-height:var(--touch);background:none;border:0;padding:0;color:inherit}
.chip .mono{font-size:var(--fs-11)}
.chipx{display:inline-grid;place-items:center;width:28px;height:28px;margin:-6px -8px -6px 0;border-radius:var(--r-sm);color:var(--ink-muted);font-size:var(--fs-18);line-height:1}
.chipx:hover{background:var(--line)}
button.chip{cursor:pointer}
.seg.tabs{width:100%;overflow-x:auto;scrollbar-width:none}
.seg.tabs button{flex:1 0 auto;min-height:var(--touch)}
.swatch{width:var(--touch);height:var(--touch);border-radius:50%;box-shadow:inset 0 0 0 2px var(--surface-solid)}
.swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.machine .btn.text{min-height:36px;font-size:var(--fs-14)}
.site .grid i{font-style:normal;color:var(--ink-muted)}