/* Donut Cash admin panel: the cash register.
   A machine body with one big display, a row of physical keys to switch screens, and a receipt
   printer that prints every order as it comes in. Dark = graphite body + black dot-matrix LCD.
   Light = aluminium body + paper e-ink display. */
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geistmono.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik.woff2) format('woff2');font-weight:400 800;font-display:swap}

:root{
  --acc:#2ea6ff;--acc-ink:#03111d;
  --green:#34d399;--amber:#ffb340;--red:#ff5a5f;--violet:#a68bff;--cyan:#38d0e3;--pink:#ff7ab6;
  /* machine body */
  --room:#060708;--body:#17181c;--body-2:#1d1f24;--body-line:#26282e;--body-ink:#d9dce2;--body-ink-2:#7c818b;
  --cap-top:#2a2c32;--cap-bot:#1f2025;--cap-edge:#08090a;--cap-ink:#e4e6ea;--cap-sub:#80858f;
  --bezel:#08090a;--lamp-off:#3a3d44;--lamp-ring:rgba(0,0,0,.35);
  /* display (LCD) */
  --d-bg:#08090b;--d-bg-2:#0d0f12;--d-ink:#eef3f9;--d-ink-2:#b4bdc9;--d-ink-3:#8b95a2;
  --d-line:rgba(255,255,255,.075);--d-line-2:rgba(255,255,255,.13);--d-cell:rgba(255,255,255,.028);--d-hover:rgba(255,255,255,.05);--d-well:rgba(255,255,255,.04);
  --paper:#efede6;--paper-ink:#1d1c1a;--paper-2:#77746c;--paper-line:rgba(0,0,0,.16);
  --r:12px;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --num:Rubik,Inter,system-ui,sans-serif;
  color-scheme:dark;
}
:root.light{
  --room:#c9c6bf;--body:#e7e5e0;--body-2:#dedcd6;--body-line:#cfccc4;--body-ink:#26272a;--body-ink-2:#7d7a72;
  --cap-top:#fdfcfa;--cap-bot:#efede8;--cap-edge:#b0aba1;--cap-ink:#1f2023;--cap-sub:#8a867d;
  --bezel:#2a2b2e;--lamp-off:#c3bfb6;--lamp-ring:rgba(0,0,0,.1);
  --d-bg:#fbfbfa;--d-bg-2:#f3f3f1;--d-ink:#121317;--d-ink-2:#484b53;--d-ink-3:#6b6e77;
  --d-line:rgba(0,0,0,.08);--d-line-2:rgba(0,0,0,.16);--d-cell:#fff;--d-hover:rgba(0,0,0,.05);--d-well:rgba(0,0,0,.045);
  --green:#119a6a;--amber:#c27a00;--red:#d63b40;--violet:#7356e0;--cyan:#0d97ab;--pink:#d43f86;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--d-bg);color:var(--d-ink);font:400 14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:color-mix(in srgb,var(--acc) 40%,transparent)}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}
.hidden{display:none!important}
.mono{font-family:var(--mono);font-feature-settings:'zero','tnum'}
.num{font-family:var(--num);font-weight:500;font-variant-numeric:tabular-nums}
.up{color:var(--green)}.down{color:var(--red)}.warn{color:var(--amber)}
.dim{color:var(--d-ink-2)}.faint{color:var(--d-ink-3)}
.lbl{font:500 12.5px/1.2 var(--sans);color:var(--d-ink-3)}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:8px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
svg .fill{fill:currentColor;stroke:none;opacity:.28}

/* ================= the machine ================= */
#app{height:100%}
.machine{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:72px minmax(0,1fr);gap:18px 24px;padding:0 28px 22px;background:var(--d-bg)}
.engrave{color:var(--body-ink-2);font:600 13px/1 var(--sans);text-shadow:0 1px 0 rgba(255,255,255,.04)}
:root.light .engrave{text-shadow:0 1px 0 #fff}

/* top plate: name, lights, clock, small round keys */
.plate{grid-column:1 / -1;display:flex;align-items:center;gap:18px;padding:0;color:var(--d-ink);border-bottom:1px solid var(--d-line);margin:0 -24px;padding:0 24px}
.plate .name{display:flex;align-items:center;gap:11px}
.plate .name img{width:34px;height:34px;object-fit:contain}
.plate .name b{font:800 17px/1 var(--sans);letter-spacing:.01em}
.lamps{display:flex;gap:16px;margin-left:12px}
.lamp{display:flex;align-items:center;gap:7px}
.lamp i{width:9px;height:9px;border-radius:50%;background:var(--lamp-off);box-shadow:0 0 0 2px var(--lamp-ring)}
.lamp.on i{background:var(--green);box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 10px var(--green)}
.lamp.warn i{background:var(--amber);box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 10px var(--amber)}
.lamp.bad i{background:var(--red);box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 10px var(--red)}
.plate .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lcd-mini{height:34px;display:flex;align-items:center;gap:12px;padding:0 13px;border-radius:9px;background:var(--d-well);color:var(--d-ink);font:500 13px/1 var(--sans)}
.lcd-mini i{font-style:normal;color:var(--d-ink-3)}
.lcd-mini b{font:600 15px/1 var(--num);letter-spacing:.02em}
.round{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--cap-ink);background:linear-gradient(var(--cap-top),var(--cap-bot));
  box-shadow:0 0 0 1px var(--cap-edge),0 3px 0 var(--cap-edge),0 1px 0 rgba(255,255,255,.08) inset;transform:translateY(-1px);transition:transform .07s,box-shadow .07s}
.round:active{transform:translateY(2px);box-shadow:0 0 0 1px var(--cap-edge),0 0 0 var(--cap-edge)}
.round svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plate .user{display:flex;align-items:center;gap:8px;padding-left:6px;font-weight:600;font-size:12.5px}
.plate .user small{display:block;font:500 12px var(--sans);color:var(--body-ink-2)}

/* the display */
.bezel{grid-column:1;grid-row:2;min-height:0}
.display{height:100%;display:flex;flex-direction:column;position:relative;color:var(--d-ink)}
.d-top{flex:none;display:flex;align-items:center;gap:14px;padding:2px 0 14px}
.d-top h1{font:600 24px/1 var(--num);letter-spacing:-.015em}
.d-top .sub{font:500 13px/1 var(--sans);color:var(--d-ink-3)}
.d-top .info{margin-left:auto;display:flex;align-items:center;gap:14px;font:500 11.5px/1 var(--mono);color:var(--d-ink-2);white-space:nowrap}
.d-top .info i{font-style:normal;color:var(--d-ink-3)}
.holiday{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:7px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);font:600 12px/1 var(--sans);cursor:pointer}
.holiday svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.view{flex:1;min-height:0;position:relative;overflow:hidden}
.view>.pg{height:100%;animation:boot .3s cubic-bezier(.2,.8,.2,1)}
@keyframes boot{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* search inside the display */
.search{position:relative}
.search .box{display:flex;align-items:center;width:32px;height:30px;border-radius:8px;box-shadow:0 0 0 1px var(--d-line-2) inset;transition:width .22s cubic-bezier(.2,.8,.2,1);overflow:hidden;cursor:pointer}
.search.open .box{width:270px;cursor:text}
.search .box svg{width:15px;height:15px;flex:none;margin:0 8px;stroke:var(--d-ink-2);fill:none;stroke-width:2;stroke-linecap:round}
.search input{background:none;border:0;outline:0;flex:1;min-width:0;height:100%;padding-right:10px;font:500 12.5px var(--mono);color:var(--d-ink)}
.search .res{position:absolute;right:0;top:38px;width:360px;max-height:420px;overflow:auto;padding:6px;z-index:40;border-radius:12px;background:var(--d-bg);box-shadow:0 0 0 1px var(--d-line-2),0 20px 50px -16px #000}
.res .grp{padding:8px 8px 4px}
.res a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px}
.res a:hover,.res a.sel{background:var(--d-hover)}
.res a small{margin-left:auto;font:500 11px var(--mono);color:var(--d-ink-3)}

/* function keys under the display */
.fkeys{display:flex;gap:8px;align-items:center;margin:0 auto;min-width:0}
.fkey{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 13px;flex:none;border-radius:10px;text-align:left;color:var(--cap-ink);min-width:0;
  background:linear-gradient(var(--cap-top),var(--cap-bot));box-shadow:0 0 0 1px var(--cap-edge),0 3px 0 var(--cap-edge),0 1px 0 rgba(255,255,255,.07) inset;
  transform:translateY(-2px);transition:transform .08s,box-shadow .08s}
:root.light .fkey{box-shadow:0 0 0 1px var(--cap-edge),0 3px 0 var(--cap-edge),0 1px 0 #fff inset}
.fkey:hover{filter:brightness(1.06)}
.fkey:active{transform:translateY(2px);box-shadow:0 0 0 1px var(--cap-edge),0 0 0 var(--cap-edge),0 1px 0 rgba(255,255,255,.05) inset}
.fkey.on{transform:translateY(1px);color:var(--cap-ink);box-shadow:0 0 0 1px var(--cap-edge),0 1px 0 var(--cap-edge),0 2px 6px rgba(0,0,0,.45) inset;background:linear-gradient(var(--cap-bot),var(--cap-bot))}
:root.light .fkey.on{box-shadow:0 0 0 1px var(--cap-edge),0 1px 0 var(--cap-edge),0 2px 6px rgba(0,0,0,.18) inset}
.fkey .ic{width:19px;height:19px;color:var(--c);flex:none}
.fkey .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fkey .ic img{width:19px;height:19px;border-radius:5px}
.fkey b{font:600 13.5px/1 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkey .lit{margin-left:auto;display:none;align-items:center;gap:5px;font:600 12px/1 var(--sans);color:var(--cap-sub);flex:none}
.fkey .lit i{width:7px;height:7px;border-radius:50%;background:var(--lamp-off);box-shadow:0 0 0 1.5px var(--lamp-ring)}
.fkey .lit.hot,.fkey .lit.busy{display:flex}
.fkey.on .lit i{background:var(--acc);box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 8px var(--acc)}
.fkey .lit.hot{color:var(--red)}.fkey .lit.hot i{background:var(--red);box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 8px var(--red)}
.fkey .lit.busy{color:var(--amber)}.fkey .lit.busy i{background:var(--amber);box-shadow:0 0 0 1.5px rgba(0,0,0,.3),0 0 8px var(--amber)}

/* receipt printer */
.printer{grid-column:2;grid-row:2;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.printer .ph2{display:flex;align-items:center;gap:8px;padding:6px 2px 16px}
.printer .ph2 .engrave{font:600 15px/1 var(--num);color:var(--d-ink)}
.printer .ph2 .lamp{margin-left:auto}
.slot{height:12px;border-radius:6px;background:#020203;box-shadow:0 2px 4px rgba(0,0,0,.8) inset,0 1px 0 rgba(255,255,255,.06);flex:none;position:relative;z-index:2}
:root.light .slot{background:#1d1e20}
.roll{flex:1;min-height:0;overflow-y:auto;margin:-6px 6px 0;padding:6px 0 18px;display:flex;flex-direction:column;gap:0;position:relative;z-index:1}
.slip{background:var(--paper);color:var(--paper-ink);padding:11px 12px 10px;font:500 12px/1.45 var(--mono);cursor:pointer;position:relative;flex:none;
  box-shadow:0 1px 0 var(--paper-line),0 6px 12px -8px rgba(0,0,0,.6);transition:transform .15s}
.slip:first-child{padding-top:14px}
.slip+.slip{border-top:1px dashed var(--paper-line)}
.slip:hover{transform:translateX(-3px)}
.slip.sel{box-shadow:inset 3px 0 0 var(--acc),0 1px 0 var(--paper-line)}
:root:not(.light) .slip{filter:none}
.slip .r1{display:flex;align-items:center;gap:8px}
.slip .r1 img,.slip .r1 .head{width:20px;height:20px;border-radius:4px}
.slip .r1 b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:13px}
.slip .r1 em{font-style:normal;font-weight:700;font-size:13px}
.slip .r2{display:flex;justify-content:space-between;align-items:center;color:var(--paper-2);margin-top:5px;font-size:12px}
.slip .stamp{font:700 10.5px/1 var(--mono);letter-spacing:.1em;padding:3px 5px;border:1.5px solid currentColor;border-radius:4px;text-transform:uppercase;transform:rotate(-3deg)}
.stamp.ok{color:#14915f}.stamp.wait{color:#b97705}.stamp.bad{color:#c62a2f}.stamp.mute{color:#8a877f}
.slip.new{animation:feed .7s cubic-bezier(.3,.7,.3,1)}
@keyframes feed{from{transform:translateY(-100%);opacity:.3}to{transform:none;opacity:1}}
.roll .end-paper{height:40px;flex:none;background:var(--paper);opacity:.5;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
:root:not(.light) .roll .end-paper{filter:brightness(.74)}

/* ================= things on the display ================= */
.grid{display:grid;gap:12px;height:100%;min-height:0}
.cell{border:1px solid var(--d-line);border-radius:var(--r);background:var(--d-cell);box-shadow:0 1px 2px rgba(0,0,0,.04);display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}
.ch{display:flex;align-items:center;gap:10px;padding:13px 16px 0;min-height:42px;flex:none}
.ch .t{font:600 15px/1.2 var(--num);color:var(--d-ink)}
.ch .tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.cb{padding:10px 16px 16px;min-height:0;flex:1;display:flex;flex-direction:column}
.scroll{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1;overscroll-behavior:contain}
.empty{display:grid;place-items:center;text-align:center;color:var(--d-ink-3);padding:24px 10px;font:500 13px var(--sans);flex:1}
.empty svg{width:24px;height:24px;margin:0 auto 8px;stroke:currentColor;fill:none;stroke-width:1.6}
.sk{background:linear-gradient(90deg,var(--d-cell),var(--d-hover),var(--d-cell));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.big{font:600 44px/1 var(--num);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--d-ink)}
.big.m{font-size:32px}.big.s{font-size:24px}
.big .u{font-size:.42em;font-weight:500;letter-spacing:0;color:var(--d-ink-2);margin-left:7px}
.readout{padding:12px 14px;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.readout .foot{font:500 12.5px/1.3 var(--sans);color:var(--d-ink-3)}

/* on-screen (touch) buttons: flat, outlined. The raised keycaps live on the machine. */
.key{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border-radius:8px;white-space:nowrap;
  font:600 13px/1 var(--sans);color:var(--d-ink);box-shadow:0 0 0 1px var(--d-line-2) inset;transition:background .12s,box-shadow .12s,transform .07s;user-select:none}
.key:hover{background:var(--d-hover)}
.key:active{transform:scale(.97)}
.key[disabled]{opacity:.4;pointer-events:none}
.key svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.key.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px}
.key.ic{width:32px;padding:0}.key.sm.ic{width:27px}
.key.acc{background:var(--acc);color:var(--acc-ink);box-shadow:none}
.key.acc:hover{filter:brightness(1.1);background:var(--acc)}
.key.red{color:var(--red);box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 55%,transparent) inset}
.key.red:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.key.red.solid{background:var(--red);color:#fff;box-shadow:none}
.key.green{color:var(--green);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 55%,transparent) inset}
.key.green:hover{background:color-mix(in srgb,var(--green) 12%,transparent)}
.key.flat{box-shadow:none;color:var(--d-ink-2)}
.key.flat:hover{color:var(--d-ink)}
.keys{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.led{--c:var(--d-ink-3);width:8px;height:8px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
.led.on{--c:var(--green)}.led.warn{--c:var(--amber)}.led.bad{--c:var(--red)}.led.acc{--c:var(--acc)}.led.vio{--c:var(--violet)}
.led.lit{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent),0 0 8px color-mix(in srgb,var(--c) 70%,transparent)}
:root.light .led.lit{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
.chip{--c:var(--d-ink-2);display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font:600 12px/1 var(--sans);white-space:nowrap;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.chip.on{--c:var(--green)}.chip.warn{--c:var(--amber)}.chip.bad{--c:var(--red)}.chip.acc{--c:var(--acc)}.chip.vio{--c:var(--violet)}.chip.cyan{--c:var(--cyan)}.chip.pink{--c:var(--pink)}.chip.mute{--c:var(--d-ink-3)}

.seg{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:var(--d-well)}
.seg button{height:28px;padding:0 11px;border-radius:7px;font:600 13px/1 var(--sans);color:var(--d-ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button:hover{color:var(--d-ink)}
.seg button.on{background:var(--d-cell-on,#24272d);color:var(--d-ink);box-shadow:0 1px 2px rgba(0,0,0,.3)}
:root.light .seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg button small{font:600 10.5px var(--mono);opacity:.7}

.sw{width:44px;height:24px;border-radius:7px;box-shadow:0 0 0 1px var(--d-line-2) inset;position:relative;flex:none;transition:background .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:5px;background:var(--d-ink-3);transition:transform .2s cubic-bezier(.3,1.4,.5,1),background .2s}
.sw.on{background:color-mix(in srgb,var(--acc) 22%,transparent)}
.sw.on::after{transform:translateX(20px);background:var(--acc)}
.sw.on.green{background:color-mix(in srgb,var(--green) 22%,transparent)}.sw.on.green::after{background:var(--green)}
.toggle{display:flex;align-items:center;gap:12px;padding:10px 0}
.toggle+.toggle{border-top:1px solid var(--d-line)}
.toggle .tx b{display:block;font-weight:600}
.toggle .tx small{color:var(--d-ink-3);font-size:12px}
.toggle .sw{margin-left:auto}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font:500 12.5px/1 var(--sans);color:var(--d-ink-2)}
.input{display:flex;align-items:center;height:36px;border-radius:8px;background:var(--d-well);box-shadow:0 0 0 1px var(--d-line) inset;padding:0 11px;gap:8px;transition:box-shadow .15s}
.input:focus-within{box-shadow:0 0 0 1px var(--acc) inset}
.input input,.input textarea{background:none;border:0;outline:0;flex:1;min-width:0;height:100%;font-size:13.5px;color:var(--d-ink)}
.input textarea{padding:9px 0;resize:none;height:auto;min-height:60px}
.input.ta{height:auto}
.input .pre,.input .suf{font:500 12px var(--mono);color:var(--d-ink-3);flex:none}
.input.mono input{font-family:var(--mono);font-size:13px}
.form{display:grid;gap:12px}
.form.two{grid-template-columns:1fr 1fr}
.hint{font-size:12px;color:var(--d-ink-3)}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;box-shadow:0 0 0 1px var(--d-line) inset;cursor:pointer}
.check .box{width:18px;height:18px;border-radius:5px;flex:none;margin-top:1px;box-shadow:0 0 0 1.5px var(--d-ink-3) inset;display:grid;place-items:center}
.check.on .box{background:var(--acc);box-shadow:none}
.check.on .box::after{content:'';width:9px;height:5px;border:2px solid var(--acc-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check b{display:block;font-weight:600}
.check small{color:var(--d-ink-3);font-size:12px}

.pick{position:relative}
.pick>.key{width:100%;justify-content:space-between}
.menu{position:fixed;z-index:80;min-width:180px;padding:5px;border-radius:10px;background:var(--d-bg);color:var(--d-ink);box-shadow:0 0 0 1px var(--d-line-2),0 20px 50px -18px rgba(0,0,0,.7);animation:pop .14s ease-out}
.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:7px;text-align:left;font-weight:500}
.menu button:hover,.menu button.sel{background:var(--d-hover)}
.menu button small{margin-left:auto;color:var(--d-ink-3);font:500 11px var(--mono)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:11px;padding:8px 8px;border-radius:9px;min-width:0;transition:background .12s}
.li+.li{box-shadow:0 -1px 0 var(--d-line)}
.li:hover{background:var(--d-hover)}
.li.sel{background:var(--d-hover);box-shadow:0 0 0 1px var(--d-line-2) inset}
.li.sel+.li,.li:hover+.li{box-shadow:none}
.li .main-t{font-weight:600;min-width:0}
.li .sub-t{font:500 12.5px/1.3 var(--sans);color:var(--d-ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.li .end{margin-left:auto;text-align:right;flex:none}
.li .end b{display:block;font:600 14px var(--num);font-variant-numeric:tabular-nums}
.li .end small{font:500 12.5px var(--sans);color:var(--d-ink-3)}
.thead{display:grid;padding:0 10px 9px;gap:10px;font:500 12.5px/1 var(--sans);color:var(--d-ink-3);border-bottom:1px solid var(--d-line)}
.trow{display:grid;align-items:center;padding:8px 10px;border-radius:8px;gap:10px;min-width:0;cursor:pointer}
.trow+.trow{box-shadow:0 -1px 0 var(--d-line)}
.trow:hover{background:var(--d-hover)}
.trow.sel{background:var(--d-hover);box-shadow:0 0 0 1px var(--d-line-2) inset}
.trow.sel+.trow,.trow:hover+.trow{box-shadow:none}
.head{border-radius:5px;flex:none;image-rendering:pixelated;background:var(--d-well)}
.who{display:flex;align-items:center;gap:9px;min-width:0}
.who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plink{cursor:pointer;border-bottom:1px dashed transparent}
.plink:hover{border-bottom-color:var(--d-ink-3)}
.st{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--sans);color:var(--d-ink-2)}

.chart{position:relative;flex:1;min-height:60px}
.chart svg{width:100%;height:100%;overflow:visible}
.chart .ln{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .ar{fill:var(--acc);opacity:.12}
.chart .gl{stroke:var(--d-line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .hl{position:absolute;top:0;bottom:0;width:1px;background:var(--d-line-2);pointer-events:none;opacity:0}
.chart .hd{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--d-bg);transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.chart .tag{position:absolute;top:-4px;transform:translate(-50%,-100%);font:600 12px/1.3 var(--sans);padding:5px 7px;border-radius:6px;background:var(--d-ink);color:var(--d-bg);white-space:nowrap;pointer-events:none;opacity:0}
.chart:hover .hl,.chart:hover .hd,.chart:hover .tag{opacity:1}
.chart .end{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:translate(-50%,-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.meter{height:5px;border-radius:3px;background:var(--d-well);overflow:hidden}
.meter i{display:block;height:100%;border-radius:3px;background:var(--c,var(--acc));transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* dialogs look like a window on the display */
.veil{position:fixed;inset:0;z-index:60;background:rgba(3,4,5,.6);backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;animation:fade .16s}
:root.light .veil{background:rgba(50,45,35,.32)}
@keyframes fade{from{opacity:0}}
.dlg{width:min(460px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;border-radius:16px;color:var(--d-ink);
  background:var(--d-bg);box-shadow:0 0 0 8px var(--bezel),0 0 0 9px rgba(255,255,255,.06),0 40px 90px -20px #000;animation:dlg .22s cubic-bezier(.2,.9,.3,1.1)}
.dlg.wide{width:min(720px,100%)}
@keyframes dlg{from{opacity:0;transform:translateY(8px) scale(.98)}}
.dlg .dh{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.dlg .dh h2{font:600 18px/1.2 var(--num);letter-spacing:-.01em}
.dlg .dh .key{margin-left:auto}
.dlg .db{padding:10px 18px 18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.dlg .df{display:flex;gap:8px;justify-content:flex-end;padding-top:4px}
.dlg p{color:var(--d-ink-2)}
.note{display:flex;gap:10px;padding:10px 12px;border-radius:9px;font-size:12.5px;box-shadow:0 0 0 1px color-mix(in srgb,var(--c,var(--amber)) 40%,transparent) inset;background:color-mix(in srgb,var(--c,var(--amber)) 8%,transparent)}
.note .led{margin-top:5px}
.note.red{--c:var(--red)}.note.blue{--c:var(--acc)}.note.green{--c:var(--green)}

.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:11px;background:#050607;color:#eef2f7;font:500 13px var(--sans);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px -16px #000;animation:toast .25s cubic-bezier(.2,.9,.3,1.2);max-width:min(520px,90vw)}
.toast.out{opacity:0;transform:translateY(6px);transition:.25s}
@keyframes toast{from{opacity:0;transform:translateY(10px) scale(.96)}}
.tip{position:fixed;z-index:95;pointer-events:none;padding:6px 9px;border-radius:7px;background:#050607;color:#eef2f7;font:500 11.5px/1.35 var(--sans);box-shadow:0 0 0 1px rgba(255,255,255,.12);max-width:260px;opacity:0;transition:opacity .12s}
.tip.in{opacity:1}
.thumb{position:fixed;z-index:70;width:4px;border-radius:3px;background:var(--d-ink-3);opacity:0;transition:opacity .25s,width .15s}
.thumb.in{opacity:.5}.thumb:hover,.thumb.drag{opacity:.9;width:6px}

/* sign in: just the machine's display and a key */
.auth{height:100%;display:grid;place-items:center;padding:16px}
.auth .machine-s{width:min(420px,100%);padding:18px;border-radius:24px;display:flex;flex-direction:column;gap:16px;background:linear-gradient(180deg,var(--body-2),var(--body) 30%);border:1px solid var(--body-line);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 80px -40px #000}
.auth .bezel{padding:10px}
.auth .display{padding:20px;gap:14px}
.auth .hello{display:flex;align-items:center;gap:12px;padding-bottom:4px}
.auth .hello img{width:42px;height:42px;object-fit:contain}
.auth .hello b{font:700 22px/1 var(--num);letter-spacing:-.01em}
.auth .hello span{display:block;margin-top:6px}
.auth .go{height:52px;border-radius:12px;font:700 14px var(--sans);color:var(--acc-ink);background:linear-gradient(color-mix(in srgb,var(--acc) 88%,#fff),var(--acc));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 50%,#000),0 5px 0 color-mix(in srgb,var(--acc) 50%,#000);transform:translateY(-3px);transition:transform .08s,box-shadow .08s}
.auth .go:active{transform:translateY(2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 50%,#000),0 0 0 #000}

/* ================= smaller screens ================= */
@media (max-width:1400px){.machine{grid-template-columns:minmax(0,1fr) 240px}.fkey{padding:0 11px;gap:8px}.fkey b{font-size:13.5px}}
@media (max-width:1180px){
  .machine{grid-template-columns:minmax(0,1fr)}
  .printer{display:none}
  .view{overflow:auto}
  .view>.pg{height:auto;min-height:100%}
}
@media (max-width:1180px) and (min-width:901px){
  .view .grid{height:auto}
}
@media (max-width:900px){
  #app{padding:0}
  .machine{padding:0 12px calc(10px + env(safe-area-inset-bottom));gap:10px;grid-template-rows:52px 54px minmax(0,1fr)}
  .plate{margin:0 -12px;padding:0 12px}
  .plate{gap:10px}
  .plate .name b,.lamps .engrave,.lcd-mini,.plate .user,.plate [data-act=sound]{display:none}
  .lamps{margin-left:0;gap:8px}
  .round{width:32px;height:32px}
  .d-top{padding:0 0 10px;gap:10px}
  .d-top .sub{display:none}
  .search.open .box{width:min(220px,58vw)}
  .search .res{width:min(340px,92vw);right:-8px}
  .view .grid{height:auto;grid-template-columns:1fr!important;grid-template-rows:none!important}
  .view .grid>*{grid-column:auto!important;grid-row:auto!important}
  .view .scroll{max-height:56vh}
  .fkeys{display:flex;overflow-x:auto;gap:8px;padding:2px 2px 6px;scroll-snap-type:x proximity}
  .fkey{flex:0 0 auto;scroll-snap-align:start}
  .big{font-size:38px}
  .seg{max-width:100%;overflow-x:auto}
  #o-rows .trow,.cell .thead{grid-template-columns:12px minmax(0,1fr) auto auto!important}
  #o-rows .trow>:nth-child(2),#o-rows .trow>:nth-child(6),#o-rows .trow>:nth-child(7),.cell .thead>:nth-child(2),.cell .thead>:nth-child(6),.cell .thead>:nth-child(7){display:none}
  .hero>.row:first-child{flex-wrap:wrap}
  .hero>.row:first-child>div:last-child{margin-left:0!important;text-align:left!important}
  .toasts{bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* folds */
.fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--d-ink-2);padding:4px 0}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:'';width:7px;height:7px;border-right:2px solid var(--d-ink-3);border-bottom:2px solid var(--d-ink-3);transform:rotate(-45deg);margin-left:auto;transition:transform .2s}
.fold[open] summary::after{transform:rotate(45deg)}
.fold>div{padding-top:10px;display:flex;flex-direction:column;gap:12px}
.acard{transition:box-shadow .15s,background .15s}
.acard:hover{background:var(--d-hover)}
.scroll>*{flex-shrink:0}

/* secondary actions stay quiet */
.add-line{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:9px;color:var(--d-ink-3);font:600 13px var(--sans);transition:color .15s,background .15s}
.add-line:hover{color:var(--d-ink);background:var(--d-hover)}
.add-line svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fkey .lit.hot i,.fkey .lit.busy i{display:none}
.fkey .lit.hot .n,.fkey .lit.busy .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--red);font:700 11.5px/1 var(--sans)}
.fkey .lit.busy .n{background:var(--amber);color:#1a1000}

/* ================= one top bar: name, screen keys, status ================= */
.bar{grid-column:1 / -1;display:flex;align-items:center;gap:20px;margin:0 -28px;padding:0 28px;border-bottom:1px solid var(--d-line);min-width:0}
.bar .name{display:flex;align-items:center;gap:10px;flex:none}
.bar .name img{width:34px;height:34px;object-fit:contain}
.bar .name b{font:700 17px/1 var(--num);letter-spacing:-.01em}
.bar .right{display:flex;align-items:center;gap:8px;flex:none}
.round.me{font:600 13px var(--sans)}
.status{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:17px;font:600 13px/1 var(--sans);color:var(--d-ink);background:var(--d-well);transition:background .15s}
.status:hover{background:var(--d-hover)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.status.warn i{background:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)}
.status.bad i{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent)}
.status.bad{color:var(--red)}
.d-top{padding:0 0 16px}
.d-top h1{font:600 26px/1 var(--num)}
/* soft panels instead of outlined boxes */
:root{--d-panel:#121317;--d-panel-2:#17181d}
:root.light{--d-bg:#f2f1ee;--d-panel:#ffffff;--d-panel-2:#f7f6f3;--d-well:rgba(0,0,0,.05)}
.cell{border:0;background:var(--d-panel);border-radius:16px;box-shadow:none}
:root.light .cell{box-shadow:0 1px 2px rgba(30,25,15,.06),0 6px 20px -12px rgba(30,25,15,.18)}
.cell .cell{background:var(--d-panel-2)}
:root.light .cell .cell{box-shadow:none}
.ch{padding:16px 18px 0}
.cb{padding:12px 18px 18px}
.li+.li,.trow+.trow{box-shadow:0 -1px 0 color-mix(in srgb,var(--d-line) 70%,transparent)}
.thead{border-bottom-color:color-mix(in srgb,var(--d-line) 70%,transparent)}
@media (max-width:1450px){.fkey:not(.on) b{display:none}.fkey:not(.on){padding:0 12px}}
@media (max-width:900px){
  .machine{grid-template-rows:auto minmax(0,1fr);padding:0 12px 12px}
  .bar{flex-wrap:wrap;gap:10px;padding:10px 12px;margin:0 -12px}
  .bar .name b{display:none}
  .bar .fkeys{order:3;width:100%;overflow-x:auto;margin:0;padding-bottom:4px}
  .fkey:not(.on) b{display:none}
  .bar .right{margin-left:auto}
}

/* ================= depth + colour =================
   Owner (2026-11-06): one flat colour looks plain. Deep background with soft colour glows, frosted glass
   panels with a lit top edge, gradient chart fill with a glowing line, gradient icon chips, lit active tab. */
:root{--bg-deep:#06070b;--glass:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.018);--rim:rgba(255,255,255,.09);--rim-top:rgba(255,255,255,.14);--drop:0 24px 48px -28px rgba(0,0,0,.9)}
:root.light{--bg-deep:#eceef3;--glass:rgba(255,255,255,.82);--glass-2:rgba(255,255,255,.62);--rim:rgba(20,20,40,.07);--rim-top:rgba(255,255,255,.9);--drop:0 22px 44px -28px rgba(40,40,80,.35)}
body{background:var(--bg-deep)}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 42% at 8% 0%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 72%),
    radial-gradient(34% 40% at 92% 6%,rgba(74,108,255,.24),transparent 72%),
    radial-gradient(42% 44% at 72% 100%,rgba(150,84,255,.2),transparent 72%),
    radial-gradient(36% 40% at 0% 100%,rgba(28,196,170,.13),transparent 72%)}
:root.light body::before{opacity:.75}
.machine,.d-bg-fill{background:transparent!important}
.bar{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);border-bottom:1px solid var(--rim)}
:root.light .bar{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.3))}
.cell{background:linear-gradient(180deg,var(--glass),var(--glass-2));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--rim-top),inset 0 0 0 1px var(--rim),var(--drop)}
:root.light .cell{box-shadow:inset 0 1px 0 var(--rim-top),inset 0 0 0 1px var(--rim),var(--drop)}
.cell .cell{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.05)}
:root.light .cell .cell{background:linear-gradient(180deg,#fff,#f6f6f9);box-shadow:inset 0 0 0 1px var(--rim),0 1px 2px rgba(40,40,80,.06)}
.cell.glow{background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--acc) 17%,transparent),transparent 60%),radial-gradient(70% 90% at 100% 100%,rgba(74,108,255,.12),transparent 60%),linear-gradient(180deg,var(--glass),var(--glass-2))}
.big{background:none}
#h-big{text-shadow:0 2px 30px color-mix(in srgb,var(--acc) 35%,transparent)}
:root.light #h-big{text-shadow:none}
/* chart: gradient fill + glowing line */
.chart .ar{opacity:1}
.chart .ln{stroke-width:2.4;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 80%,transparent))}
.chart .gl{stroke-dasharray:2 4;opacity:.7}
.chart .end{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent),0 0 16px var(--acc)}
/* gradient icon chips */
.gchip{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 92%,#fff),color-mix(in srgb,var(--c) 70%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px color-mix(in srgb,var(--c) 80%,transparent)}
.gchip svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gchip svg .fill{opacity:.3}
.hstat{display:flex;align-items:center;gap:12px}
/* screen keys: glass, the open one lit in the accent */
.fkey{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));color:var(--d-ink);transform:none;border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 8px 18px -10px rgba(0,0,0,.8);transition:background .15s,box-shadow .15s,transform .1s}
.fkey:hover{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));filter:none}
.fkey:active{transform:scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.07)}
.fkey.on{transform:none;color:var(--acc-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 78%,#fff),var(--acc) 55%,color-mix(in srgb,var(--acc) 80%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px color-mix(in srgb,var(--acc) 60%,#000),0 10px 26px -8px color-mix(in srgb,var(--acc) 75%,transparent)}
.fkey.on .ic{color:var(--acc-ink)}
.fkey.on .ic img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
:root.light .fkey{background:linear-gradient(180deg,#fff,#f1f2f6);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px var(--rim),0 6px 14px -10px rgba(40,40,80,.5)}
:root.light .fkey.on{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 78%,#fff),var(--acc) 55%,color-mix(in srgb,var(--acc) 80%,#000))}
/* buttons */
.key{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px var(--d-line-2)}
.key.flat{background:none;box-shadow:none}
.key.acc{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 80%,#fff),var(--acc) 60%,color-mix(in srgb,var(--acc) 85%,#000));color:var(--acc-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px color-mix(in srgb,var(--acc) 60%,#000),0 8px 20px -8px color-mix(in srgb,var(--acc) 75%,transparent)}
.key.red.solid{background:linear-gradient(180deg,#ff7a7e,#e5484d);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px rgba(229,72,77,.7)}
:root.light .key:not(.acc):not(.flat){background:linear-gradient(180deg,#fff,#f3f4f7)}
/* status + round buttons + search */
.status,.round,.search .box,.seg{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.07)}
.round{transform:none;color:var(--d-ink)}
.round:active{transform:scale(.95)}
.status.bad{background:linear-gradient(180deg,rgba(255,90,95,.2),rgba(255,90,95,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,90,95,.3)}
.status.warn{background:linear-gradient(180deg,rgba(255,179,64,.18),rgba(255,179,64,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,179,64,.28)}
.seg button.on{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(0,0,0,.35)}
:root.light .status,:root.light .round,:root.light .search .box,:root.light .seg{background:linear-gradient(180deg,#fff,#f1f2f6);box-shadow:inset 0 0 0 1px var(--rim),0 2px 6px -3px rgba(40,40,80,.25)}
:root.light .seg button.on{background:linear-gradient(180deg,#fff,#f4f5f8);box-shadow:0 1px 4px rgba(40,40,80,.18)}
/* meters, chips, heads */
.meter{background:rgba(255,255,255,.06)}
.meter i{background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--acc)) 70%,#000),var(--c,var(--acc)) 70%,color-mix(in srgb,var(--c,var(--acc)) 70%,#fff));box-shadow:0 0 10px color-mix(in srgb,var(--c,var(--acc)) 55%,transparent)}
.chip{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 10%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.head{box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
/* receipts: paper with depth */
/* slips: dark mode is its own paper colour, not a brightness filter (a filter on a sliding slip left a bright line at its edge) */
.slip{background:linear-gradient(180deg,#f6f4ee,#e9e6dd)}
:root:not(.light) .slip{background:linear-gradient(180deg,#d4d2cc,#c8c5be)}
.roll{filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.slot{background:linear-gradient(180deg,#000,#1b1c20);box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.printer .ph2 .lamp i{box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 10px var(--green)}
/* dialogs + menus get the glass too */
.dlg,.menu,.search .res{background:linear-gradient(180deg,rgba(28,30,38,.92),rgba(16,17,22,.94));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -24px #000}
:root.light .dlg,:root.light .menu,:root.light .search .res{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,247,250,.96));box-shadow:inset 0 0 0 1px var(--rim),0 30px 60px -24px rgba(40,40,80,.4)}
.input{background:rgba(0,0,0,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.07)}
:root.light .input{background:#fff;box-shadow:inset 0 1px 2px rgba(40,40,80,.08),inset 0 0 0 1px var(--rim)}

/* profile picture */
.round.me{overflow:hidden;padding:0}
.round.me img{width:100%;height:100%;object-fit:cover;display:none}
.round.me.has-av img{display:block}
.round.me.has-av span{display:none}

/* ================= motion: smooth, short, never looping ================= */
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes popin{from{opacity:0;transform:translate(-50%,-50%) scale(0)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.view>.pg{animation:none}
.pg>.grid>*,.pg>.cell{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.pg>.grid>*:nth-child(2){animation-delay:.07s}.pg>.grid>*:nth-child(3){animation-delay:.14s}
.pg>.grid>*:nth-child(4){animation-delay:.21s}.pg>.grid>*:nth-child(5){animation-delay:.28s}.pg>.grid>*:nth-child(6){animation-delay:.35s}
.stagger>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.stagger>*:nth-child(1){animation-delay:.25s}.stagger>*:nth-child(2){animation-delay:.31s}.stagger>*:nth-child(3){animation-delay:.37s}.stagger>*:nth-child(4){animation-delay:.43s}
.stagger>*:nth-child(5){animation-delay:.49s}.stagger>*:nth-child(6){animation-delay:.55s}.stagger>*:nth-child(n+7){animation-delay:.6s}
.chart.draw svg{animation:reveal 1.4s cubic-bezier(.45,0,.2,1) .25s both}
.chart.draw .end{animation:popin .45s cubic-bezier(.3,1.6,.5,1) 1.55s both}
/* hover: things you can open lift or slide a little. Every scroll area keeps a few px of room around
   its content (below) so a lifted card, a sliding row or a shadow is never cut off by the edge. */
.cell[data-go]:hover,.cell[data-player]:hover,.acard:hover{transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 var(--rim-top),inset 0 0 0 1px rgba(255,255,255,.16),0 16px 30px -20px rgba(0,0,0,.9)}
:root.light .cell[data-go]:hover,:root.light .cell[data-player]:hover,:root.light .acard:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(20,20,40,.14),0 10px 22px -14px rgba(40,40,80,.35)}
.cell[data-player] img{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.cell[data-player]:hover img{transform:scale(1.1) rotate(-4deg)}
.hstat .gchip{transition:transform .3s cubic-bezier(.3,1.5,.5,1),filter .2s}
.hstat:hover .gchip{transform:translateY(-2px) scale(1.06)}
.li:hover,.trow:hover{transform:translateX(3px)}
.fkey:not(.on):hover{transform:translateY(-2px);filter:brightness(1.12)}
.key:not(.flat):hover{filter:brightness(1.12)}
.key:active,.fkey:active,.round:active{transform:scale(.97)}
.slip:hover{transform:translateX(-4px)}
.dlg{animation:dlg .32s cubic-bezier(.2,1.2,.3,1)}
@keyframes dlg{from{opacity:0;transform:translateY(14px) scale(.95)}}
.veil{animation:fade .2s ease}
.menu{animation:pop .18s cubic-bezier(.2,1.2,.3,1)}

/* room for motion inside scroll areas (same layout: the padding is taken back with a negative margin) */
.scroll:not(.cb){padding:6px 14px 6px 6px;margin:-6px -14px -6px -6px}
.cb.scroll{padding-top:max(var(--pt,16px),6px)}
.roll{margin:-6px -6px 0 0;padding:6px 16px 18px 8px}
@media (max-width:900px){.bar .fkeys{padding:4px 2px 6px}}
/* the scrollbar gets its own lane on the right, never on top of content */
.search .res{padding:6px 14px 6px 6px}
.dlg .db{padding-right:22px}
@media (max-width:1180px){.view{padding-right:12px;margin-right:-12px}}
/* readable text everywhere: labels never go below the secondary grey, and text over the glow gets a soft shadow */
.cell.glow .lbl,.cell.glow .faint{color:var(--d-ink-2)}
:root:not(.light) .cell.glow{text-shadow:0 1px 2px rgba(0,0,0,.35)}