/* Scoped copy of the redesign's stylesheet, generated from
 * _preview/workspace-interior.html. DO NOT hand-edit: re-run
 * scratchpad/build_redesign_css.py instead.
 *
 * Every selector is prefixed with .rd because 142 of the mockup's class
 * names collide with the real app's. Opt a screen in with class="rd".
 * --bar and --glow are deliberately NOT redefined: they mean something
 * different in the app. */
/* The mockup's page font is 14px; the app's body is 16px, and the body
   reset is deliberately not copied, so restate just the type size. */
.rd{font-size:14px}
.rd.rd{     --panel:#161b23; --panel2:#1f242e; --line:#252c37; --line2:#343d4a;     --dim:#868e9a; --mid:#b4bcc7; --fg:#f2f4f7;     --accent:#3b82f6; --accent2:#2f6be0; --accent-dim:#233448; --accent-lt:#8fb8ff;     --good:#35c98d; --warn:#f5a623; --bad:#f2564b; --good-dim:#12352a;     --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.32);     --mshadow:0 1px 2px rgba(0,0,0,.35), 0 22px 60px rgba(0,0,0,.55)}
.rd.rd[data-mode="light"]{
    --panel:#ffffff; --panel2:#eef1f7; --line:#e4e8f0; --line2:#cdd4df;
    --dim:#6b727e; --mid:#414954; --fg:#1a1e25;
    --accent:#2563eb; --accent2:#1d4ed8; --accent-dim:#e4edfd; --accent-lt:#2563eb;
    --good:#149a63; --warn:#bf7d13; --bad:#dc3a2f; --good-dim:#d8f2e6;
    --shadow:0 1px 2px rgba(20,30,50,.05), 0 8px 22px rgba(20,30,50,.08);
    --mshadow:0 1px 2px rgba(20,30,50,.06), 0 24px 60px rgba(20,30,50,.2);
  }
.rd.rd *{box-sizing:border-box}
.rd.rd *{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd ::-webkit-scrollbar{width:10px;height:10px}
.rd.rd ::-webkit-scrollbar-track{background:transparent}
.rd.rd ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.rd.rd ::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.rd.rd ::-webkit-scrollbar-corner{background:transparent}
.rd.rd svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd.rd input[type=text], .rd.rd input[type=tel], .rd.rd input[type=number], .rd.rd input[type=time], .rd.rd input[type=password], .rd.rd input[type=email]{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--fg);font-size:14px;font-family:inherit;outline:none}
.rd.rd input:focus{border-color:var(--accent)}
.rd.rd input::placeholder{color:var(--dim)}
.rd.rd .switch{position:relative;display:inline-block;width:44px;height:25px;flex:none}
.rd.rd .switch input{opacity:0;width:0;height:0;position:absolute;margin:0}
.rd.rd .switch .track{position:absolute;inset:0;background:var(--line2);border-radius:999px;transition:background .18s,box-shadow .18s;cursor:pointer}
.rd.rd .switch .track::before{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.3,.8,.35,1.25)}
.rd.rd .switch input:checked + .track{background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 10px rgba(59,130,246,.55)}
.rd.rd .switch input:checked + .track::before{transform:translateX(19px)}
.rd.rd .featitem{border-bottom:1px solid var(--line)}
.rd.rd .featitem:last-child{border-bottom:0}
.rd.rd .featitem .featrow2{border-bottom:0}
.rd.rd .featdet{padding:0 0 14px}
.rd.rd .featdet[hidden]{display:none}
.rd.rd .fchev{color:var(--dim);transition:transform .15s}
.rd.rd .fchev svg{width:15px;height:15px}
.rd.rd .featrow2.open .fchev{transform:rotate(90deg)}
.rd.rd .qrbox{width:96px;height:96px;background:#fff;border-radius:10px;padding:9px;flex:none}
.rd.rd .qrbox svg{width:100%;height:100%;display:block}
.rd.rd .qrbox svg rect{fill:#0d1017;stroke:none}
.rd.rd .qrbox svg rect.w{fill:#fff}
.rd.rd .qrlink{font-family:"SFMono-Regular",Consolas,monospace;font-size:13px;color:var(--accent-lt);word-break:break-all}
.rd.rd .qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:4px}
.rd.rd .qrcard{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:8px 8px 7px;text-align:center}
.rd.rd .qrcard .qrbox{width:100%;height:auto;aspect-ratio:1;padding:6px;border-radius:8px}
.rd.rd .qrlbl{font-size:11px;font-weight:700;margin-top:6px}
.rd.rd .qrpick{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.rd.rd .qrpill{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:8px;border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel2)}
.rd.rd .qrpill:hover{border-color:var(--accent)}
.rd.rd .qrpill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .qrview{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2)}
.rd.rd .qrview .qrbox{width:150px;height:150px;padding:11px}
.rd.rd .qrvname{font-size:15px;font-weight:800}
.rd.rd .qrvlink{font-family:"SFMono-Regular",Consolas,monospace;font-size:12.5px;color:var(--accent-lt);word-break:break-all;text-align:center}
.rd.rd .qrvbtns{display:flex;gap:9px}
.rd.rd .prninput{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 10px;color:var(--fg);font-size:13.5px;font-family:inherit;outline:none}
.rd.rd .prninput:focus{border-color:var(--accent)}
.rd.rd .grp.sectog{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.rd.rd .secchev{color:var(--dim);transition:transform .15s}
.rd.rd .secchev svg{width:14px;height:14px}
.rd.rd .grp.sectog:not(.open) .secchev{transform:rotate(-90deg)}
.rd.rd .scard[hidden]{display:none}
.rd.rd .optrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;margin-top:8px;cursor:pointer;font-size:13.5px;font-weight:600}
.rd.rd .optrow:hover{border-color:var(--accent)}
.rd.rd .optrow.on{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-lt)}
.rd.rd .optrow::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:none}
.rd.rd .optrow.on::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--accent-dim)}
.rd.rd .prnrow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.rd.rd .prnrow:last-of-type{border-bottom:0}
.rd.rd .prnstation{font-size:11.5px;font-weight:700;color:var(--accent-lt);background:var(--accent-dim);border-radius:6px;padding:3px 9px}
.rd.rd .condot{width:8px;height:8px;border-radius:50%;background:var(--line2);display:inline-block;margin-right:7px;vertical-align:middle;flex:none}
.rd.rd .condot.on{background:var(--good)}
.rd.rd .conrow{display:flex;align-items:center;justify-content:space-between;margin:16px 0 2px}
.rd.rd .constat{font-size:13px;font-weight:600;color:var(--mid)}
.rd.rd #printerList .prow{margin-top:5px}
.rd.rd #printerList .prow:first-child{margin-top:0}
.rd.rd #printerList .permpanel{margin:6px 2px 6px}
.rd.rd .pairbox{background:var(--page);border:1px solid var(--line2);border-radius:11px;padding:13px 14px;margin:14px 0 4px}
.rd.rd .pairlead{font-size:12.5px;color:var(--mid);margin-bottom:10px}
.rd.rd .pairfield{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.rd.rd .pairfield:last-of-type{border-bottom:0}
.rd.rd .pairfield .pk{font-size:11px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.rd.rd .pairfield .pv{font-family:"SFMono-Regular",Consolas,monospace;font-size:16px;font-weight:700;color:var(--accent-lt);letter-spacing:1px}
.rd.rd .pairwait{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);margin:12px 0}
.rd.rd .spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rd.rd .spin{animation:none}}
.rd.rd .paircancel{width:100%;justify-content:center}
.rd.rd .collcard{padding:0;margin-bottom:14px}
.rd.rd .collrow{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;cursor:pointer}
.rd.rd .collname{font-size:14.5px;font-weight:700}
.rd.rd .collchev{color:var(--dim);transition:transform .15s}
.rd.rd .collchev svg{width:15px;height:15px}
.rd.rd .collcard:not(.open) .collchev{transform:rotate(-90deg)}
.rd.rd .collcard:not(.open) .collbody{display:none}
.rd.rd .collbody{padding:2px 16px 16px}
.rd.rd .dngtitle{font-size:14.5px;font-weight:700;color:var(--bad);margin-bottom:10px}
.rd.rd #settingsPanel label:not(.switch){display:block;font-size:12.5px;font-weight:600;color:var(--mid);margin:16px 0 7px}
.rd.rd .topbar{height:56px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:0 14px;background:var(--bar);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.rd.rd .topbar>.tblogo{justify-self:center;text-decoration:none}
.rd.rd .topbar .tbright{justify-self:end}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.rd.rd .shell{animation:pageIn .28s ease both}
@media (prefers-reduced-motion:reduce){.rd.rd .topbar, .rd.rd .shell{animation:none}}
.rd.rd .tbleft, .rd.rd .tbright{display:flex;align-items:center;gap:10px}
.rd.rd .tbdiv{width:1px;height:20px;background:var(--line2);flex:none}
.rd.rd .iconbtn{width:38px;height:38px;border-radius:10px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer;position:relative}
.rd.rd .iconbtn:hover{background:var(--panel);border-color:var(--line2);color:var(--fg)}
.rd.rd .iconbtn svg{width:20px;height:20px}
.rd.rd .tblogo{display:flex;align-items:center;gap:9px;cursor:default;padding:4px 6px;border-radius:9px;font-size:18px;font-weight:800;letter-spacing:-.3px}
.rd.rd .topbar .tbleft{gap:8px;justify-self:start}
.rd.rd .wsdiv{width:1px;height:17px;background:var(--line2);flex:none;margin:0 10px 0 3px}
.rd.rd .wslabel{font-size:14px;font-weight:700;color:var(--mid);letter-spacing:-.2px;white-space:nowrap}
.rd.rd .homeBtn{text-decoration:none}
.rd.rd .tblogo .a{color:var(--accent)}
.rd.rd .tblogo .bk{color:var(--dim);font-size:12px;font-weight:600;margin-left:2px}
.rd.rd .ndot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--bar)}
.rd.rd .tbshift{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--mid)}
.rd.rd .tbshift .d{width:8px;height:8px;border-radius:50%;background:var(--good)}
.rd.rd .tbshift.full .d{background:var(--bad)}
.rd.rd .tbshift .c{font-family:"SFMono-Regular",Consolas,monospace;font-weight:700;color:var(--fg)}
.rd.rd .tbplan{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;background:var(--accent-dim);border:1px solid transparent;color:var(--accent-lt);font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .14s}
.rd.rd .tbplan:hover{border-color:var(--accent)}
.rd.rd .tbplan svg{width:14px;height:14px}
.rd.rd .blogo{height:19px;width:auto;display:block}
.rd.rd .brandtext{display:none}
.rd.rd .acctrow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;cursor:pointer;color:var(--fg);background:var(--panel);border:1px solid var(--line2);margin-top:10px;transition:border-color .14s,box-shadow .14s}
.rd.rd .acctrow:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,.16)}
.rd.rd .acctava{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14.5px;flex:none}
.rd.rd .acctinfo{flex:1;min-width:0}
.rd.rd .acctname{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.rd.rd .acctsub{font-size:11px;color:var(--dim);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.rd.rd .acctgear{color:var(--dim);flex:none;display:flex;transition:color .14s,transform .2s}
.rd.rd .acctrow:hover .acctgear{color:var(--accent-lt);transform:translateX(2px)}
.rd.rd .acctgear svg{width:16px;height:16px}
.rd.rd .acctchev{color:var(--dim);font-size:16px}
.rd.rd .tround{border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden}
.rd.rd .trhead{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;background:var(--panel2)}
.rd.rd .trhead b{font-size:14px;font-weight:700}
.rd.rd .trstatus{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:6px}
.rd.rd .trstatus.ready{color:var(--good);background:rgba(53,201,141,.14)}
.rd.rd .trstatus.prep{color:var(--warn);background:rgba(245,166,35,.14)}
.rd.rd .trchev{margin-left:auto;color:var(--dim);transition:transform .15s}
.rd.rd .trchev svg{width:14px;height:14px}
.rd.rd .tround:not(.open) .trchev{transform:rotate(-90deg)}
.rd.rd .trbody{padding:2px 13px 6px}
.rd.rd .tround:not(.open) .trbody{display:none}
.rd.rd .novl{position:fixed;inset:0;background:var(--backdrop);display:none;align-items:center;justify-content:center;z-index:60}
.rd.rd .novl.open{display:flex;animation:ovIn .18s ease both}
.rd.rd .npanel{width:min(360px,92vw);max-height:78vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--mshadow);padding:10px;z-index:40}
.rd.rd .novl.open .npanel{animation:mIn .24s cubic-bezier(.2,.7,.2,1) both}
.rd.rd .nhead{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px}
.rd.rd .nhead b{font-size:14px;font-weight:800}
.rd.rd .nhead a{font-size:12px;color:var(--accent-lt);cursor:pointer;text-decoration:none}
.rd.rd .nitem{display:flex;gap:10px;padding:10px 8px;border-radius:9px;cursor:pointer}
.rd.rd .nitem:hover{background:var(--panel2)}
.rd.rd .nidot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
.rd.rd .nidot.warn{background:var(--warn)}
.rd.rd .nidot.good{background:var(--good)}
.rd.rd .nitxt{font-size:13px;line-height:1.4}
.rd.rd .nitime{font-size:11px;color:var(--dim);margin-top:3px}
.rd.rd .nidet{font-size:11.5px;color:var(--mid);margin-top:2px;line-height:1.35}
.rd.rd .nfoot{text-align:center;font-size:12.5px;font-weight:700;color:var(--accent-lt);padding:11px;cursor:pointer;border-top:1px solid var(--line);margin-top:4px}
.rd.rd .nfoot:hover{color:var(--accent)}
.rd.rd .shell{flex:1;display:flex;min-height:0}
.rd.rd .side{width:230px;flex:none;background:var(--side);border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:14px 12px;overflow:hidden;transition:width .22s ease,padding .22s ease}
.rd.rd.sideclosed .side{width:0;padding:14px 0;border-right-color:transparent}
.rd.rd .sidehandle{position:absolute;top:72px;left:230px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--panel);border:1px solid var(--line2);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:25;transition:left .22s ease,background .14s,color .14s,border-color .14s}
.rd.rd .sidehandle:hover{color:var(--fg);border-color:var(--accent);background:var(--panel2)}
.rd.rd .sidehandle svg{width:14px;height:14px;transition:transform .22s ease}
.rd.rd.sideclosed .sidehandle{left:0;transform:translateX(0)}
.rd.rd.sideclosed .sidehandle svg{transform:rotate(180deg)}
.rd.rd .sidescroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column}
.rd.rd .sidescroll::-webkit-scrollbar{width:0}
.rd.rd .sidescroll .nav{margin-top:0}
.rd.rd .sidesec{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--accent-lt);padding:0 11px;margin:16px 0 8px;white-space:nowrap}
.rd.rd .sidesec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent)}
.rd.rd .sidesec:first-child{margin-top:14px}
.rd.rd .onshiftlist{display:flex;flex-direction:column;gap:1px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 18px),transparent 100%)}
.rd.rd .onshiftlist::-webkit-scrollbar{display:none}
.rd.rd .osrow{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:10px;cursor:pointer;white-space:nowrap}
.rd.rd .osrow:hover{background:var(--panel)}
.rd.rd .osav{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.rd.rd .osmeta{flex:1;min-width:0}
.rd.rd .osname{font-size:13px;font-weight:700}
.rd.rd .osspace{font-size:11px;color:var(--dim);margin-top:1px}
.rd.rd .osdot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 3px rgba(53,201,141,.15)}
.rd.rd .osrow.off{opacity:.6}
.rd.rd .osrow.off .osdot{background:var(--dim);box-shadow:none}
.rd.rd .osrow.off:hover{opacity:.85}
.rd.rd.offshift #nav .ni:not([data-t="me"]){display:none}
.rd.rd .mehero{display:flex;align-items:center;gap:13px;margin:6px 0 16px}
.rd.rd .meav{width:52px;height:52px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;flex:none}
.rd.rd .memeta{flex:1;min-width:0}
.rd.rd .mename{font-size:19px;font-weight:800;letter-spacing:-.3px}
.rd.rd .merole{font-size:13px;color:var(--dim);font-weight:600;margin-top:1px}
.rd.rd .mestat{font-size:12px;font-weight:700;color:var(--good);background:var(--good-dim);border-radius:8px;padding:6px 11px;white-space:nowrap}
.rd.rd .mestat.off{color:var(--dim);background:var(--panel2)}
.rd.rd .meclock{width:100%;padding:14px;border-radius:13px;border:none;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;background:var(--accent);color:#fff;transition:background .14s;margin-bottom:8px}
.rd.rd .meclock:hover{background:var(--accent2)}
.rd.rd .meclock.out{background:var(--panel2);color:var(--fg);border:1px solid var(--line2)}
.rd.rd .meclock.out:hover{background:var(--panel);border-color:var(--bad);color:var(--bad)}
.rd.rd .meclock:disabled{opacity:.5;cursor:default;background:var(--panel2);color:var(--dim)}
.rd.rd .mefull{font-size:13px;color:var(--warn);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);border-radius:11px;padding:12px 14px;margin-bottom:14px;line-height:1.45}
.rd.rd .medemo{background:none;border:none;color:var(--dim);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:2px 0;margin:-2px 0 16px;text-decoration:underline}
.rd.rd .medemo:hover{color:var(--mid)}
.rd.rd .tbplan.full{background:rgba(242,86,75,.14);color:var(--bad)}
.rd.rd .tbplan .pcount{font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .settrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.rd.rd .settrow:last-of-type{border-bottom:0}
.rd.rd .settrow .sv{color:var(--dim);font-weight:600;font-size:13.5px}
.rd.rd .settrow.tap{cursor:pointer}
.rd.rd .settrow.tap:hover .sk{color:var(--accent-lt)}
.rd.rd .settrow .chev{color:var(--dim);display:flex}
.rd.rd .settrow .chev svg{width:15px;height:15px}
.rd.rd .toggle.sm button{padding:6px 11px;font-size:12px}
.rd.rd .uc-avwrap{position:relative;cursor:pointer;flex:none}
.rd.rd .uc-cam{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);display:flex;align-items:center;justify-content:center;color:#fff}
.rd.rd .uc-cam svg{width:11px;height:11px}
.rd.rd .uc-signout{width:100%;margin-top:18px;padding:11px;border-radius:11px;border:1px solid var(--line2);background:transparent;color:var(--mid);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .uc-signout:hover{border-color:var(--bad);color:var(--bad)}
.rd.rd .featrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd.rd .plancard{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,var(--accent-dim),transparent 85%);border:1px solid var(--accent);border-radius:13px;padding:13px 14px;cursor:pointer;margin-bottom:2px}
.rd.rd .plancard-name{font-size:15.5px;font-weight:800}
.rd.rd .plancard-sub{font-size:12px;color:var(--dim);font-weight:500;margin-top:2px}
.rd.rd .plancard-btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.rd.rd .plan-sub{color:var(--dim);font-size:13px;font-weight:500;margin:4px 0 18px;line-height:1.45}
.rd.rd .tiercard{border:1px solid var(--line2);border-radius:14px;padding:15px 16px;margin-bottom:11px;background:var(--panel2)}
.rd.rd .tiercard.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rd.rd .tiercard.rec{border-color:var(--good)}
.rd.rd .tierhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rd.rd .tiername{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.rd.rd .tierprice{font-family:"SFMono-Regular",Consolas,monospace;font-size:17px;font-weight:800}
.rd.rd .tierprice small{font-size:11.5px;color:var(--dim);font-weight:600}
.rd.rd .tierseats{font-size:12.5px;color:var(--dim);font-weight:600;margin:4px 0 13px}
.rd.rd .tierbtn{width:100%;padding:9px;border-radius:9px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .tierbtn.ghost{background:transparent;border:1px solid var(--line2);color:var(--dim);cursor:default}
.rd.rd .curpill{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);background:var(--accent-dim);border-radius:5px;padding:2px 7px}
.rd.rd .recpill{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#04121f;background:var(--good);border-radius:5px;padding:2px 7px}
.rd.rd .grouprow{border:1px dashed var(--line2);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--mid);font-weight:600}
.rd.rd .plansoon{font-size:11.5px;color:var(--dim);text-align:center;margin-top:6px;font-weight:500}
.rd.rd .billsum{background:var(--panel2);border:1px solid var(--line2);border-radius:13px;padding:15px;margin-bottom:4px}
.rd.rd .billplan{font-size:16px;font-weight:800}
.rd.rd .billnext{font-size:12.5px;color:var(--dim);font-weight:600;margin-top:3px}
.rd.rd .medinput{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;color:var(--fg);font-size:14px;font-family:inherit;margin-bottom:4px}
.rd.rd .medinput:focus{outline:none;border-color:var(--accent)}
.rd.rd .medit{cursor:pointer}
.rd.rd.dyslexia{font-family:Verdana,Tahoma,"Segoe UI",sans-serif;letter-spacing:.015em;word-spacing:.06em}
.rd.rd .side .shiftpill{margin-bottom:9px}
.rd.rd .wsswitch{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;white-space:nowrap;transition:border-color .14s}
.rd.rd .wsswitch:hover{border-color:var(--accent)}
.rd.rd .wsdrop{position:fixed;display:none;background:var(--panel);border:1px solid var(--line2);border-radius:13px;box-shadow:var(--mshadow);padding:7px;z-index:70;min-width:230px}
.rd.rd .wsdrop.open{display:block;animation:mIn .18s ease both}
.rd.rd .wsdrop-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer}
.rd.rd .wsdrop-item:hover{background:var(--panel2)}
.rd.rd .wsdrop-av{width:32px;height:32px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.rd.rd .wsdrop-name{font-size:14px;font-weight:700}
.rd.rd .wsdrop-role{font-size:11.5px;color:var(--dim);font-weight:600}
.rd.rd .wsdrop-check{margin-left:auto;color:var(--accent);display:flex}
.rd.rd .wsdrop-check svg{width:16px;height:16px}
.rd.rd .wsdrop-sep{height:1px;background:var(--line);margin:6px 4px}
.rd.rd .wsdrop-all{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;color:var(--accent-lt);font-size:13.5px;font-weight:700;text-decoration:none}
.rd.rd .wsdrop-all:hover{background:var(--accent-dim)}
.rd.rd .wsdrop-all svg{width:18px;height:18px}
.rd.rd .wsdrop-search{position:relative;display:flex;align-items:center;margin:1px 1px 7px}
.rd.rd .wsdrop-search svg{position:absolute;left:10px;width:15px;height:15px;color:var(--dim);pointer-events:none}
.rd.rd .wsdrop-search input{width:100%;height:36px;border-radius:9px;border:1px solid var(--line2);background:var(--page);color:var(--fg);font-size:13px;font-family:inherit;padding:0 11px 0 31px;outline:none;transition:border-color .14s}
.rd.rd .wsdrop-search input::placeholder{color:var(--dim)}
.rd.rd .wsdrop-search input:focus{border-color:var(--accent)}
.rd.rd .wsdrop-list{max-height:292px;overflow-y:auto;overscroll-behavior:contain}
.rd.rd .wsdrop-list::-webkit-scrollbar{width:8px}
.rd.rd .wsdrop-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
.rd.rd .wsdrop-none{display:none;padding:16px 10px;text-align:center;font-size:12.5px;color:var(--dim)}
.rd.rd .wsdrop-none.on{display:block}
.rd.rd .wsswitch:hover{border-color:var(--accent)}
.rd.rd .wsava{width:38px;height:38px;border-radius:11px;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none}
.rd.rd .wsmeta{min-width:0;flex:1}
.rd.rd .wsname{font-size:14.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd.rd .wsrole{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.rd.rd .wschev{color:var(--dim)}
.rd.rd .wschev svg{width:16px;height:16px}
.rd.rd .nav{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.rd.rd .ni{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--mid);cursor:pointer;font-size:13.5px;font-weight:600;white-space:nowrap}
.rd.rd .ni svg{width:19px;height:19px;flex:none}
.rd.rd .ni:hover{background:var(--panel);color:var(--fg)}
.rd.rd .ni.on{background:var(--accent-dim);color:var(--accent-lt)}
.rd.rd .ni .nibadge{margin-left:auto;background:var(--bad);color:#fff;font-size:10.5px;font-weight:800;border-radius:99px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.rd.rd .sidefoot{margin-top:auto;padding-top:6px}
.rd.rd .sidefoot .shiftpill{margin-top:16px}
.rd.rd .sidefoot .acctrow{margin-top:8px}
.rd.rd .shiftpill{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--mid);white-space:nowrap}
.rd.rd .shiftpill .d{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.rd.rd .shiftpill .c{margin-left:auto;font-family:"SFMono-Regular",Consolas,monospace;font-weight:700;color:var(--fg)}
.rd.rd button.shiftpill{width:100%;cursor:pointer;font-family:inherit;transition:border-color .14s,background .14s,color .14s}
.rd.rd .shiftpill .shifttxt{font-weight:700}
.rd.rd .shiftpill .clockcta{margin-left:auto;font-weight:800;color:var(--bad);display:none}
.rd.rd .shiftpill.on:hover{border-color:var(--bad)}
.rd.rd .shiftpill.on:hover .c{display:none}
.rd.rd .shiftpill.on:hover .clockcta{display:inline}
.rd.rd .shiftpill.off{background:var(--accent);border-color:var(--accent);color:#fff;justify-content:center}
.rd.rd .shiftpill.off:hover{background:var(--accent2);border-color:var(--accent2)}
.rd.rd .shiftpill.off .d, .rd.rd .shiftpill.off .c, .rd.rd .shiftpill.off .clockcta{display:none}
.rd.rd .shiftpill.off .shifttxt{color:#fff;font-weight:800;margin:0 auto}
.rd.rd .main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.rd.rd .mhead{padding:20px 24px 0;flex:none}
.rd.rd .mtitle{font-size:24px;font-weight:800;letter-spacing:-.4px;margin:0}
.rd.rd .summary{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.rd.rd .sChip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mid)}
.rd.rd .sChip b{color:var(--fg);font-weight:800}
.rd.rd .sChip .d{width:8px;height:8px;border-radius:50%}
.rd.rd .d.ready{background:var(--good)}
.rd.rd .d.prep{background:var(--warn)}
.rd.rd .d.pay{background:var(--accent)}
.rd.rd .d.free{background:var(--line2)}
.rd.rd .toolrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 2px}
.rd.rd .toggle{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:3px}
.rd.rd .toggle button{border:none;background:transparent;color:var(--mid);border-radius:8px;padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .toggle button.on{background:var(--accent);color:#fff}
.rd.rd .btn{border:none;border-radius:10px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--fg)}
.rd.rd .btn.ghost{background:var(--panel2);border:1px solid var(--line2);color:var(--mid)}
.rd.rd .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.rd.rd .btn svg{width:15px;height:15px}
.rd.rd .btn.primary{background:var(--accent);color:#fff;box-shadow:0 3px 15px rgba(59,130,246,.35)}
.rd.rd .btn.primary:hover{background:var(--accent2);box-shadow:0 4px 20px rgba(59,130,246,.5)}
.rd.rd .body{padding:24px 24px 40px;overflow-y:auto;flex:1;min-height:0}
.rd.rd .col[hidden]{display:none}
.rd.rd .grp{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin:16px 0 10px}
.rd.rd .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.rd.rd .ttile{position:relative;min-height:120px;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:13px;padding:14px 15px;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rd.rd .ttile.ready{border-left-color:var(--good)}
.rd.rd .ttile.prep{border-left-color:var(--warn)}
.rd.rd .ttile.pay{border-left-color:var(--accent)}
.rd.rd .ttile:hover{border-top-color:var(--line2);border-right-color:var(--line2);border-bottom-color:var(--line2);transform:translateY(-2px);transition:transform .12s}
.rd.rd .tdot{position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 0 rgba(53,201,141,.55)}70%{box-shadow:0 0 0 6px rgba(53,201,141,0)}}
.rd.rd .ttile.ready .tdot{animation:tpulse 2.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rd.rd .ttile.ready .tdot{animation:none}}
.rd.rd .ttname{font-size:16.5px;font-weight:700}
.rd.rd .ttsub{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:8px;font-size:12.5px}
.rd.rd .st.ready{color:var(--good)}
.rd.rd .st.prep{color:var(--warn)}
.rd.rd .st.pay{color:var(--accent-lt)}
.rd.rd .tot{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim);white-space:nowrap}
.rd.rd .ttmeta{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);display:flex;gap:7px;align-items:center}
.rd.rd .ttile.free{background:rgba(16,22,34,.6);border:1px dashed var(--line2);justify-content:center;box-shadow:none}
.rd.rd[data-mode="light"] .ttile.free{background:rgba(255,255,255,.58)}
.rd.rd .ttile.free:hover{border-color:var(--accent);background:rgba(16,22,34,.74)}
.rd.rd[data-mode="light"] .ttile.free:hover{background:rgba(255,255,255,.74)}
.rd.rd .ttile.free .fsub{font-size:12.5px;color:var(--dim);margin-top:6px}
.rd.rd .ttile.add{background:transparent;border:1px dashed var(--accent);color:var(--accent-lt);align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:none;font-size:15px}
.rd.rd .ttile.add svg{width:24px;height:24px;flex:none}
.rd.rd .floorbottom{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.rd.rd .obox{flex:1;min-width:180px;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border-radius:13px;border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent-lt);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .obox:hover{background:var(--accent);color:#fff}
.rd.rd .obox svg{width:22px;height:22px}
.rd.rd .dpay.ghostpay{background:transparent;border:1px solid var(--line2);color:var(--fg)}
.rd.rd .dpay.ghostpay:hover{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .movewrap{margin:0 0 15px}
.rd.rd .movebtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--mid);cursor:pointer;font-family:inherit}
.rd.rd .movebtn:hover{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .movebtn svg{width:15px;height:15px}
.rd.rd .movepick{display:flex;gap:8px;align-items:center}
.rd.rd .movepick[hidden]{display:none}
.rd.rd .movepick .tmrsel{flex:1}
.rd.rd .moveok{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--good);font-weight:700}
.rd.rd .moveok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.rd.rd .paypanel{margin-top:6px}
.rd.rd .paypanel[hidden]{display:none}
.rd.rd .paysec{margin-bottom:0}
.rd.rd .paysec + .paysec{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.rd.rd .paycoll .pcoll-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:3px 0;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.rd.rd .paycoll .pcoll-head .paylbl{margin:0}
.rd.rd .pcoll-sum{margin-left:auto;font-size:13px;font-weight:600;color:var(--mid)}
.rd.rd .paycoll.open .pcoll-sum{color:var(--accent-lt)}
.rd.rd .pcoll-chev{display:flex;color:var(--dim);transition:transform .2s}
.rd.rd .pcoll-chev svg{width:18px;height:18px}
.rd.rd .paycoll.open .pcoll-chev{transform:rotate(180deg)}
.rd.rd .pcoll-body{display:none;margin-top:13px}
.rd.rd .paycoll.open .pcoll-body{display:block}
.rd.rd .paylbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:9px}
.rd.rd .dstage{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;
    background:var(--panel2);border:1px solid var(--line2);border-radius:13px;padding:12px 11px 11px;
    transition:border-color .18s}
.rd.rd .dstep{height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);
    color:var(--mid);font-size:19px;font-weight:700;line-height:1;cursor:pointer;font-family:inherit}
.rd.rd .dstep:hover:not(:disabled){border-color:var(--accent);color:var(--fg)}
.rd.rd .dstep:disabled{opacity:.32;cursor:default}
.rd.rd .dval{display:flex;align-items:baseline;justify-content:center;gap:2px;line-height:1;
    font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tmodal .dval .dvalin{width:72px;background:none;border:0;text-align:center;padding:0;
    font-family:inherit;font-size:31px;font-weight:700;color:var(--fg);letter-spacing:-1px;line-height:1}
.rd.rd .tmodal .dval .dvalin:focus{outline:none}
.rd.rd .dval i{font-style:normal;font-size:15px;font-weight:700;color:var(--dim)}
.rd.rd .doff{grid-column:1/-1;text-align:center;font-size:12px;font-weight:600;color:var(--dim);margin-top:10px}
.rd.rd .dstage[data-lvl="1"] .doff{color:var(--good)}
.rd.rd .dstage[data-lvl="2"] .doff{color:var(--warn)}
.rd.rd .dstage[data-lvl="3"] .doff{color:var(--bad)}
.rd.rd .dstage[data-lvl="3"]{border-color:rgba(255,107,107,.42)}
.rd.rd .dpre{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.rd.rd .dchip{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 0;
    font-size:12px;font-weight:700;color:var(--mid);cursor:pointer;font-family:inherit;text-align:center;
    transition:border-color .12s,background .12s,color .12s}
.rd.rd .dchip:hover{border-color:var(--accent);color:var(--fg)}
.rd.rd .dchip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .dwhy{margin-top:13px}
.rd.rd .dwhy[hidden]{display:none}
.rd.rd .dwhyrow{display:flex;flex-wrap:wrap;gap:6px}
.rd.rd .wchip{background:none;border:1px solid var(--line2);border-radius:999px;padding:7px 12px;
    font-size:12px;font-weight:600;color:var(--dim);cursor:pointer;font-family:inherit;
    transition:border-color .12s,color .12s,background .12s}
.rd.rd .wchip:hover{color:var(--fg)}
.rd.rd .wchip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .splittoggle{display:flex;align-items:center;justify-content:space-between}
.rd.rd .splitrow{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}
.rd.rd #splitN{min-width:24px;text-align:center;font-weight:700;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .splitper{margin-top:10px;font-size:13.5px;color:var(--mid);background:var(--panel2);border-radius:9px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center}
.rd.rd .splitper b{font-family:"SFMono-Regular",Consolas,monospace;color:var(--fg);font-size:15px}
.rd.rd .paysum{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;margin-bottom:15px}
.rd.rd .payrow{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--dim)}
.rd.rd .payrow span[id]{font-family:"SFMono-Regular",Consolas,monospace;color:var(--mid)}
.rd.rd .payrow #payDisc{color:var(--good)}
.rd.rd .payrow.paytot{font-size:15px;font-weight:700;color:var(--fg);padding-top:14px;margin-top:11px;
    border-top:1px solid var(--line);align-items:baseline}
.rd.rd .payrow.paytot b{font-family:"SFMono-Regular",Consolas,monospace;font-size:34px;font-weight:800;letter-spacing:-1.2px}
.rd.rd .payrow #payTipAmt{color:var(--good)}
.rd.rd .tipchips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd.rd .tchip{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:9px 0;
    font-size:12px;font-weight:700;color:var(--mid);cursor:pointer;font-family:inherit;text-align:center;
    transition:border-color .12s,background .12s,color .12s}
.rd.rd .tchip:hover{border-color:var(--good);color:var(--fg)}
.rd.rd .tchip.active{background:var(--good-dim);border-color:var(--good);color:var(--good)}
.rd.rd[data-mode="dark"] .tchip.active{background:rgba(20,154,99,.16);color:#5fd6a0}
.rd.rd .paymethods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rd.rd .paymethods .dpay{height:54px;margin:0;display:flex;align-items:center;justify-content:center;
    gap:9px;font-size:15px;font-weight:700;border-radius:12px;border:1px solid transparent}
.rd.rd .paymethods .dpay svg{width:19px;height:19px}
.rd.rd .paymethods .paycash{background:var(--good);border-color:var(--good);color:#04121f}
.rd.rd .paymethods .paycash:hover{filter:brightness(1.07)}
.rd.rd .paymethods .paycard{background:var(--accent2);border-color:var(--accent2);color:#fff}
.rd.rd .paymethods .paycard:hover{background:var(--accent);border-color:var(--accent)}
.rd.rd .kgrid{column-width:240px;column-gap:13px}
.rd.rd .kcube{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 13px;width:100%;background:var(--panel);border:1px solid var(--line2);border-left:5px solid var(--good);border-radius:12px;padding:12px 13px;box-shadow:var(--shadow)}
.rd.rd .kcube.warn{border-left-color:var(--warn)}
.rd.rd .kcube.late{border-left-color:var(--bad)}
.rd.rd .khead{display:flex;align-items:center;gap:9px;cursor:pointer}
.rd.rd .khead b{font-size:16px;font-weight:700}
.rd.rd .kround{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-lt);background:var(--accent-dim);border-radius:6px;padding:2px 7px}
.rd.rd .ktime{font-size:11.5px;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace;margin-left:auto}
.rd.rd .kchev{color:var(--dim);transition:transform .15s}
.rd.rd .kchev svg{width:14px;height:14px}
.rd.rd .kcube.collapsed .kchev{transform:rotate(-90deg)}
.rd.rd .kbody{margin-top:10px}
.rd.rd .kcube.collapsed .kbody{display:none}
.rd.rd .kcat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:9px 0 4px}
.rd.rd .kcat:first-child{margin-top:0}
.rd.rd .kline{font-size:14px;line-height:1.7}
.rd.rd .kline .q{color:var(--accent-lt);font-weight:800;font-family:"SFMono-Regular",Consolas,monospace;margin-right:4px}
.rd.rd .kactions{display:flex;gap:8px;margin-top:11px}
.rd.rd .kbtn{flex:1;padding:8px;border-radius:9px;font-size:12.5px;font-weight:700;border:none;background:var(--good);color:#04121f;cursor:pointer;font-family:inherit}
.rd.rd .kbtn.done{background:var(--panel2);color:var(--mid);border:1px solid var(--line2)}
.rd.rd .kping{flex:none;width:38px;padding:0;background:transparent;border:1px solid var(--line2);color:var(--warn);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd.rd .kping:hover{border-color:var(--warn);background:rgba(245,166,35,.1)}
.rd.rd .kping svg{width:16px;height:16px}
.rd.rd .placeholder{color:var(--dim);font-size:14px;padding:60px 0;text-align:center}
.rd.rd .msgpanel{display:flex;flex-direction:column;height:100%;max-width:820px;width:100%;margin:0 auto}
.rd.rd .msgpanel[hidden]{display:none}
.rd.rd .msghead{flex:none;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.rd.rd .msgtitle{font-size:18px;font-weight:800;letter-spacing:-.2px}
.rd.rd .msgsub{font-size:12.5px;color:var(--dim);margin-top:2px}
.rd.rd .msglist2{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:10px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(10,15,26,.55);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd[data-mode="light"] .msglist2{background:rgba(255,255,255,.62);border-color:var(--line2)}
.rd.rd .inv-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rd.rd .inv-err{font-size:12px;font-weight:600;color:var(--bad);margin-top:10px}
.rd.rd .inv-err:empty{display:none}
.rd.rd .msgrow{display:flex;gap:11px;padding:6px 8px;border-radius:9px}
.rd.rd .msgrow:hover{background:var(--panel)}
.rd.rd .msgrow.grouped{padding-top:1px;padding-bottom:1px}
.rd.rd .msgav{width:38px;height:38px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.rd.rd .msgbody{flex:1;min-width:0}
.rd.rd .msghdr{display:flex;align-items:baseline;gap:8px}
.rd.rd .msgname{font-size:14px;font-weight:700}
.rd.rd .msgtime{font-size:11px;color:var(--dim)}
.rd.rd .msgtext{font-size:14.5px;color:var(--fg);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.rd.rd .msgtext .mention{background:var(--accent-dim);color:var(--accent-lt);border-radius:5px;padding:0 5px;font-weight:700}
.rd.rd .msgrow.pingme{background:rgba(245,166,35,.11);box-shadow:inset 3px 0 0 var(--warn)}
.rd.rd .msgrow.pingme:hover{background:rgba(245,166,35,.15)}
.rd.rd .msgcompose2{flex:none;position:relative;display:flex;align-items:center;gap:5px;margin-top:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:16px;padding:5px 6px}
.rd.rd .msgat{flex:none;width:38px;height:38px;border:none;background:none;color:var(--mid);font-size:19px;font-weight:800;cursor:pointer;border-radius:12px;font-family:inherit}
.rd.rd .msgat:hover{background:var(--panel);color:var(--accent-lt)}
.rd.rd .msgcompose2 input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--fg);font-size:15px;padding:9px 6px;font-family:inherit}
.rd.rd .msgcompose2 input::placeholder{color:var(--dim)}
.rd.rd .msgsendbtn{flex:none;background:var(--accent);color:#fff;border:none;border-radius:12px;width:42px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd.rd .msgsendbtn:hover{background:var(--accent2)}
.rd.rd .msgsendbtn svg{width:18px;height:18px}
.rd.rd .mentionpick{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--mshadow);padding:6px;min-width:220px;z-index:5}
.rd.rd .mentionpick[hidden]{display:none}
.rd.rd .mentionpick .mgrp{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;padding:6px 8px 3px;font-weight:700}
.rd.rd .mentionpick .mitem{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:600}
.rd.rd .mentionpick .mitem:hover{background:var(--panel2)}
.rd.rd .mentionpick .mav{width:26px;height:26px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.rd.rd .msghere{font-size:11.5px;color:var(--dim);font-weight:600}
.rd.rd .msghere::before{content:"·";margin-right:6px;color:var(--line2)}
.rd.rd .msgimg{max-width:220px;max-height:180px;border-radius:11px;margin-top:4px;border:1px solid var(--line2);display:block}
.rd.rd .clickuser{cursor:pointer}
.rd.rd .msgname.clickuser:hover{text-decoration:underline}
.rd.rd .uc-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;padding-right:26px}
.rd.rd .uc-av{width:52px;height:52px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:none}
.rd.rd .uc-name{font-size:18px;font-weight:800}
.rd.rd .uc-role{font-size:12px;color:var(--accent-lt);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.rd.rd .uc-status{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2)}
.rd.rd .uc-status::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.rd.rd .uc-status.on{color:var(--good)}
.rd.rd .uc-status.on::before{background:var(--good)}
.rd.rd .uc-status.off{color:var(--dim)}
.rd.rd .uc-status.off::before{background:var(--line2)}
.rd.rd .uc-lbl{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--accent-lt);margin:18px 0 9px}
.rd.rd .uc-lbl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent)}
.rd.rd .uc-spaces{display:flex;flex-wrap:wrap;gap:7px}
.rd.rd .ucsp{font-size:12.5px;font-weight:700;color:var(--accent-lt);background:var(--accent-dim);border-radius:8px;padding:5px 11px}
.rd.rd .actstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:2px 0 16px}
.rd.rd .astat{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 15px;box-shadow:var(--shadow)}
.rd.rd .astatic{width:40px;height:40px;border-radius:11px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none}
.rd.rd .astatic svg{width:20px;height:20px}
.rd.rd .astatnum{font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.05}
.rd.rd .astatlbl{font-size:11.5px;color:var(--dim);margin-top:1px;font-weight:600}
.rd.rd .actcard{padding:2px 16px}
.rd.rd .actrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rd.rd .actrow:last-child{border-bottom:0}
.rd.rd .actrow[data-user]{cursor:pointer;border-radius:10px;margin:0 -8px;padding:12px 8px}
.rd.rd .actrow[data-user]:hover{background:var(--panel2)}
.rd.rd .actav{width:38px;height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.rd.rd .actav.ring{box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--good)}
.rd.rd .acttxt{flex:1;min-width:0}
.rd.rd .actname{font-size:14.5px;font-weight:700}
.rd.rd .actsub{font-size:12px;color:var(--dim);margin-top:1px}
.rd.rd .actrow .lspace{flex:none}
.rd.rd .actdur{font-family:"SFMono-Regular",Consolas,monospace;font-size:13px;color:var(--mid);font-weight:600;min-width:40px;text-align:right}
.rd.rd .shiftrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rd.rd .shiftrow:last-child{border-bottom:0}
.rd.rd .shiftav{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.rd.rd .shifttxt{flex:1;min-width:0}
.rd.rd .shiftname2{font-size:14.5px;font-weight:700}
.rd.rd .shifttimes{font-size:12.5px;color:var(--dim);margin-top:2px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .shifttimes .on{color:var(--good);font-weight:700;font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.rd.rd .shiftdur{font-family:"SFMono-Regular",Consolas,monospace;font-size:16px;font-weight:800;color:var(--fg);flex:none}
.rd.rd .shiftdur.on{color:var(--good)}
.rd.rd .shiftdur.over{color:var(--warn)}
.rd.rd .shifttag2{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:6px;margin-left:8px;vertical-align:1px}
.rd.rd .shifttag2.late{color:var(--warn);background:rgba(245,166,35,.15)}
.rd.rd .shifttag2.over{color:var(--bad);background:rgba(242,86,75,.14)}
.rd.rd .shifttag2.split{color:var(--accent-lt);background:var(--accent-dim)}
/* early = green: arriving before your shift is a good thing, unlike late (amber) or
   overtime (red). Added with the early check, 2026-07-29. */
.rd.rd .shifttag2.early{color:var(--good);background:rgba(53,201,141,.15)}
.rd.rd .schedrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rd.rd .schedrow:last-child{border-bottom:0}
.rd.rd .schedmeta{min-width:78px}
.rd.rd .schedname{font-size:14px;font-weight:700}
.rd.rd .schedrole{font-size:11.5px;color:var(--dim);margin-top:1px}
.rd.rd .schedsegs{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.rd.rd .schedseg{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:4px 9px}
.rd.rd .schedseg input[type=time],.rd.rd .schedseg .schedtime{background:none;border:none;color:var(--fg);font-size:13px;font-family:inherit;padding:2px 0;width:auto;outline:none}
.rd.rd .segto{font-size:12px;color:var(--dim)}
.rd.rd .segrm{color:var(--dim);cursor:pointer;font-size:12px;padding:0 1px 0 3px}
.rd.rd .segrm:hover{color:var(--bad)}
.rd.rd .schedadd{font-size:12px;font-weight:700;color:var(--accent-lt);background:var(--accent-dim);border:1px solid transparent;border-radius:8px;padding:6px 11px;cursor:pointer;font-family:inherit;flex:none;white-space:nowrap}
.rd.rd .schedadd:hover{border-color:var(--accent)}
.rd.rd .shopsupplier{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);margin:14px 0 2px}
.rd.rd .shopsupplier:first-child{margin-top:4px}
.rd.rd .shoprow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .shoprow:last-child{border-bottom:0}
.rd.rd .buypill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--bad);background:rgba(242,86,75,.14);border-radius:6px;padding:3px 8px;flex:none}
.rd.rd .shopname{flex:1;font-size:14px;font-weight:600;min-width:0}
.rd.rd .shopqty{font-size:12.5px;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .restockbtn{padding:6px 12px;font-size:12.5px}
.rd.rd .cempty{color:var(--dim);font-size:13.5px;text-align:center}
.rd.rd .stockcard{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.rd.rd .stockcard:last-child{border-bottom:0}
.rd.rd .sc-main{flex:1;min-width:0}
.rd.rd .sc-name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.rd.rd .sc-sub{font-size:12.5px;color:var(--dim);margin-top:3px}
.rd.rd .sc-count{color:var(--fg);cursor:pointer;font-weight:700;border-bottom:1px dashed var(--line2)}
.rd.rd .sc-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:6px}
.rd.rd .sc-badge.low{color:var(--warn);background:rgba(245,166,35,.15)}
.rd.rd .sc-badge.out{color:var(--bad);background:rgba(242,86,75,.14)}
.rd.rd .sc-actions{display:flex;gap:7px;flex:none}
.rd.rd .sc-actions .btn{padding:6px 11px;font-size:12px}
.rd.rd .countinput{width:84px;background:var(--panel2);border:1px solid var(--accent);border-radius:7px;padding:3px 8px;color:var(--fg);font-size:13px;font-family:inherit;outline:none}
.rd.rd .statshead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;
    background:linear-gradient(135deg,var(--accent-dim),transparent 72%);border:1px solid var(--line2);border-radius:16px;padding:19px 22px}
.rd.rd .statsheroLbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.rd.rd .statshero{font-size:52px;font-weight:800;letter-spacing:-2px;font-family:"SFMono-Regular",Consolas,monospace;margin-top:4px;line-height:1;color:var(--fg)}
.rd.rd .statstrend{font-size:12.5px;color:var(--good);font-weight:700;margin-top:9px}
.rd.rd .chart{display:flex;align-items:flex-end;justify-content:space-evenly;height:150px;padding:10px 0 24px}
/* flex, NOT a fixed 26px: 24 hour bars at 26px plus the 4px gaps need 716px, but the chart box
   is 646px, so the last bars were pushed onto and past the right edge. They share the width now
   and cap at 26px, so a 7-bar week still looks right. (Panos, 2026-07-29) */
.rd.rd .chart .bar{flex:1 1 0;min-width:0;max-width:26px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:6px 6px 0 0;min-height:4px;position:relative;opacity:.92}
/* An hour that took nothing must draw nothing. min-height:4px above was giving every empty
   hour a visible stub, so the takings chart showed trade that never happened. The label still
   renders, because it is absolutely positioned against the bar's baseline. (Panos, 2026-07-29) */
.rd.rd .chart .bar.zero{min-height:0;background:none}
.rd.rd .lbrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .lbrow:last-child{border-bottom:0}
.rd.rd .lbrank{width:24px;height:24px;border-radius:7px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--dim);flex:none}
.rd.rd .lbrow.top .lbrank{background:linear-gradient(180deg,#f5c451,#e0a020);color:#3a2600;border-color:transparent}
.rd.rd .lbav{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.rd.rd .lbname{flex:1;font-size:14.5px;font-weight:700;min-width:0}
.rd.rd .lbval{font-family:"SFMono-Regular",Consolas,monospace;font-size:15px;font-weight:800;color:var(--fg)}
.rd.rd .chart .bar:hover{opacity:1}
.rd.rd .chart .bar span{position:absolute;bottom:-19px;left:-3px;right:-3px;text-align:center;font-size:10px;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace;white-space:nowrap}
.rd.rd .sellrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .sellrow:last-child{border-bottom:0}
.rd.rd .sellrank{width:22px;height:22px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--dim);flex:none}
.rd.rd .sellrow.top .sellrank{background:linear-gradient(180deg,#f5c451,#e0a020);color:#3a2600;border-color:transparent}
.rd.rd .sellname{flex:1;font-size:14px;font-weight:700;min-width:0}
.rd.rd .sellqty{font-size:12.5px;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .sellrev{font-family:"SFMono-Regular",Consolas,monospace;font-size:13.5px;font-weight:700;color:var(--fg);min-width:64px;text-align:right}
.rd.rd .statsnote{font-size:12.5px;color:var(--dim);margin:2px 0 2px;font-weight:600}
.rd.rd #stTurn{padding:14px 6px}
.rd.rd .turnstat{flex:1;text-align:center;padding:4px;border-right:1px solid var(--line)}
.rd.rd .turnstat:last-child{border-right:0}
.rd.rd .turnnum{font-size:20px;font-weight:800;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .turnlbl{font-size:11px;color:var(--dim);margin-top:3px;line-height:1.3}
.rd.rd .moneybtn{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin:0 0 9px;color:var(--fg);font-size:14.5px;font-weight:600;cursor:pointer;text-align:left;font-family:inherit}
.rd.rd .moneybtn:hover{border-color:var(--accent)}
.rd.rd .moneybtn:last-child{border-color:var(--accent);background:var(--accent-dim)}
.rd.rd .tiphero{text-align:center;padding:10px 0 2px}
.rd.rd .tiptop{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--dim)}
.rd.rd .tipamtbox{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;margin-top:5px;padding:3px 8px;border-radius:14px;transition:background .15s}
.rd.rd .tipamtbox:focus-within{background:var(--panel2)}
.rd.rd .tipamtbox .tiphc{font-size:27px;font-weight:800;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tmodal .tipamtbox input[type=text]{width:110px;border:none;background:none;outline:none;text-align:center;color:var(--fg);font-size:46px;font-weight:800;line-height:1;letter-spacing:-2px;font-family:"SFMono-Regular",Consolas,monospace;padding:0;box-shadow:none;caret-color:var(--accent)}
.rd.rd .tmodal .tipamtbox input[type=text]:focus{box-shadow:none}
.rd.rd .tipherosub{font-size:12.5px;color:var(--dim);margin-top:6px;min-height:16px}
.rd.rd .tipbar{display:flex;gap:3px;height:12px;margin:18px 0 2px}
.rd.rd .tipbar.empty{background:var(--panel2);border-radius:6px}
.rd.rd .tipbar span{height:100%;border-radius:4px;min-width:6px;transition:width .28s cubic-bezier(.2,.7,.2,1)}
.rd.rd .tipmethodrow{display:flex;align-items:center;gap:11px;margin:17px 0 2px}
.rd.rd .tiphint{font-size:12px;color:var(--dim)}
.rd.rd .tiplist{display:flex;flex-direction:column;gap:2px;margin-top:9px}
.rd.rd .tiprow{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;cursor:pointer;transition:background .12s,opacity .12s}
.rd.rd .tiprow:hover{background:var(--panel2)}
.rd.rd .tiprow.off{opacity:.4}
.rd.rd .tipav{width:37px;height:37px;border-radius:50%;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;box-shadow:0 2px 7px rgba(0,0,0,.22)}
.rd.rd .tipmeta{flex:1;min-width:0}
.rd.rd .tipname{font-size:14.5px;font-weight:700}
.rd.rd .tipsub{font-size:12px;color:var(--dim);margin-top:1px}
.rd.rd .tipright{text-align:right;flex:none;line-height:1.15}
.rd.rd .tipamt{font-family:"SFMono-Regular",Consolas,monospace;font-weight:800;font-size:17px;color:var(--fg);letter-spacing:-.3px}
.rd.rd .tippct{font-size:11px;font-weight:700;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tiprow.off .tipright{color:var(--dim);font-size:12.5px;font-weight:600}
.rd.rd #tipConfirm{margin-top:19px}
.rd.rd .tmodal .mrow-in{display:flex;align-items:baseline;gap:5px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;transition:border-color .14s,background .14s}
.rd.rd .tmodal .mrow-in:focus-within{border-color:var(--accent);background:var(--panel)}
.rd.rd .tmodal .mrow-in .cur{color:var(--dim);font-weight:800;font-size:21px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tmodal .mrow-in input[type=text]{flex:1;width:auto;border:none;background:none;outline:none;color:var(--fg);font-size:27px;font-weight:800;font-family:"SFMono-Regular",Consolas,monospace;padding:0;box-shadow:none;letter-spacing:-.5px;line-height:1.15}
.rd.rd .tmodal .mrow-in input[type=text]:focus{box-shadow:none}
.rd.rd .examt.g{color:var(--good)}
.rd.rd #stExpenses{padding:2px 15px}
.rd.rd .exprow{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.rd.rd .exprow:last-child{border-bottom:0}
.rd.rd .excat{font-weight:700;color:var(--fg);min-width:80px}
.rd.rd .exnote{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .examt{font-family:"SFMono-Regular",Consolas,monospace;font-weight:700;color:var(--warn)}
.rd.rd .exprow.extot{border-top:2px solid var(--line);border-bottom:0;margin-top:2px;padding-top:13px}
.rd.rd .exprow.extot span{color:var(--fg);font-weight:800;flex:1}
.rd.rd .exprow.extot b{font-family:"SFMono-Regular",Consolas,monospace;font-size:16px;color:var(--fg)}
.rd.rd .cashcalc{margin:13px 0 2px;border:1px solid var(--line);border-radius:12px;padding:2px 14px}
.rd.rd .ccrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dim);padding:9px 0;border-bottom:1px solid var(--line)}
.rd.rd .ccrow:last-child{border-bottom:0}
.rd.rd .ccrow b{font-family:"SFMono-Regular",Consolas,monospace;font-weight:700;color:var(--mid)}
.rd.rd .expcats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd.rd .experr{font-size:12.5px;font-weight:600;color:var(--bad);margin-top:10px}
.rd.rd .experr:empty{display:none}
.rd.rd .explist-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:18px 0 8px}
.rd.rd .explist{display:flex;flex-direction:column;gap:0;max-height:160px;overflow-y:auto}
.rd.rd .explitem{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:13px;border-bottom:1px solid var(--line)}
.rd.rd .explitem:last-child{border-bottom:0}
.rd.rd .expcat{font-weight:700;color:var(--fg)}
.rd.rd .expnote{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .expamt{font-family:"SFMono-Regular",Consolas,monospace;font-weight:700;color:var(--warn)}
.rd.rd .exptot{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;color:var(--mid)}
.rd.rd .exptot b{font-size:20px;color:var(--fg);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .cashhero{text-align:center;padding:8px 0 2px}
.rd.rd .cashexp{font-size:40px;font-weight:800;letter-spacing:-1.5px;font-family:"SFMono-Regular",Consolas,monospace;color:var(--fg);line-height:1;margin-top:4px}
.rd.rd .cashdiff{padding:11px 13px;border-radius:11px;text-align:center;font-weight:700;font-size:13px;margin-top:11px}
.rd.rd .cashdiff[hidden]{display:none}
.rd.rd .cashdiff.spot{background:var(--good-dim);color:var(--good)}
.rd.rd .cashdiff.over{background:rgba(245,166,35,.12);color:var(--warn)}
.rd.rd .cashdiff.short{background:rgba(220,58,47,.1);color:var(--bad)}
.rd.rd .cashsum{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.rd.rd .sndgear{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--mid);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.rd.rd .sndgear:hover{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .sndgear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd.rd .sndcfg[hidden]{display:none}
.rd.rd #soundVol{accent-color:var(--accent)}
.rd.rd .no-err{font-size:12.5px;font-weight:600;color:var(--bad);margin-bottom:9px}
.rd.rd .no-err:empty{display:none}
.rd #loadScreen{position:fixed;inset:0;z-index:9999;background:radial-gradient(1000px 720px at 50% 32%,#101a2e 0%,#0a0e17 68%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .55s ease}
.rd #loadScreen.done{opacity:0;pointer-events:none}
.rd #loadScreen .load-wm{height:56px;width:auto;animation:loadBlink 1.25s ease-in-out infinite}
.rd #loadScreen .load-bar{width:230px;height:4px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.rd #loadScreen .load-bar i{position:absolute;top:0;left:-45%;height:100%;width:45%;border-radius:3px;background:linear-gradient(90deg,transparent,#3b82f6,transparent);animation:loadSlide 1.15s ease-in-out infinite}
@keyframes loadBlink{0%,100%{opacity:.32}50%{opacity:1}}
@keyframes loadSlide{0%{left:-45%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.rd #loadScreen .load-wm, .rd #loadScreen .load-bar i{animation:none}}
.rd.rd .mbic{width:34px;height:34px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none}
.rd.rd .mbic svg{width:18px;height:18px}
.rd.rd .tl-axis{flex:1;display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tl-head{padding-top:2px;padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:6px}
.rd.rd .tl-time{flex:none;min-width:88px;text-align:right;font-family:"SFMono-Regular",Consolas,monospace;font-size:11.5px;color:var(--dim)}
.rd.rd .tl-dur{flex:none;min-width:44px;text-align:right;font-family:"SFMono-Regular",Consolas,monospace;font-size:12.5px;color:var(--mid);font-weight:700}
.rd.rd .acthdr{display:flex;align-items:center;justify-content:space-between}
.rd.rd .toggle.sm{padding:2px}
.rd.rd .toggle.sm button{padding:5px 11px;font-size:12px}
.rd.rd .tl-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.rd.rd .tl-name{width:24px;height:24px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:none}
.rd.rd .tl-track{position:relative;flex:1;height:20px;background:var(--panel2);border-radius:7px}
.rd.rd .tl-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;opacity:.92}
.rd.rd .tl-bar.on::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(53,201,141,.28);animation:tpulse 2.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rd.rd .tl-bar.on::after{animation:none}}
.rd.rd .hoursrow2{display:flex;align-items:center;gap:12px;padding:9px 0}
.rd.rd .hoursname{font-size:13.5px;font-weight:700;min-width:64px}
.rd.rd .hoursbar{flex:1;height:8px;background:var(--panel2);border-radius:99px;overflow:hidden}
.rd.rd .hoursbar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.rd.rd .hoursval{font-family:"SFMono-Regular",Consolas,monospace;font-size:13px;color:var(--mid);font-weight:700;min-width:34px;text-align:right}
.rd.rd .msgat svg{width:19px;height:19px}
.rd.rd .btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.rd.rd .btn.danger:hover{background:var(--bad);color:#fff}
.rd.rd .bizhead{position:relative;margin-bottom:38px}
.rd.rd .bizbanner{height:108px;border-radius:12px;background:var(--panel2);border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12.5px;cursor:pointer}
.rd.rd .bizlogo{position:absolute;left:16px;bottom:-24px;width:56px;height:56px;border-radius:16px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;border:3px solid var(--panel)}
.rd.rd .hours{display:flex;flex-direction:column;gap:8px}
.rd.rd .hoursrow{display:flex;align-items:center;gap:10px}
.rd.rd .hday{flex:1;font-size:13.5px;font-weight:600}
.rd.rd .hdash{color:var(--dim);font-size:12px}
.rd.rd .hoursrow input{width:82px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;color:var(--fg);font-size:13px;font-family:inherit;text-align:center}
.rd.rd .hoursrow input:focus{outline:none;border-color:var(--accent)}
.rd.rd .codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:11px 14px}
.rd.rd .codebox span{font-family:"SFMono-Regular",Consolas,monospace;font-size:20px;letter-spacing:4px;color:var(--fg)}
.rd.rd .ssub2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:18px 0 9px}
.rd.rd .memrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.rd.rd .memrow:last-child{border-bottom:0}
.rd.rd .memrow:hover{background:var(--panel2)}
.rd.rd .memrow[data-role="Owner"]{cursor:default}
.rd.rd .memrow[data-role="Owner"]:hover{background:transparent}
.rd.rd .memava{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.rd.rd .memtxt{flex:1;min-width:0}
.rd.rd .memnm{font-size:14px;font-weight:700}
.rd.rd .memrole{font-size:12px;color:var(--dim);margin-top:1px}
/* The account's email, under the name. Several staff are called the same thing ("test
   account"), so the address is the only way to tell which person a row is (2026-07-28).
   Truncates rather than wrapping: a long address must not push the row to two lines. */
.rd.rd .memmail{font-size:11.5px;color:var(--dim);opacity:.75;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Name, email and role were three grey lines that read as one block (Panos, 2026-07-28).
   The role is a CHIP now, so it is obviously a label and not another line of text. */
/* Treat toggle on a cart line: quiet until it is on, then it reads as "this one is on us". */
.rd.rd .ctreatbtn{background:none;border:0;color:var(--dim);cursor:pointer;padding:2px 4px;
  display:inline-flex;align-items:center;border-radius:6px}
.rd.rd .ctreatbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rd.rd .ctreatbtn:hover{color:var(--fg)}
/* Comped line: the heart fills RED with a small pop, so it reads as a deliberate act rather
   than a toggle you might have hit by accident (Panos, 2026-07-29). */
.rd.rd .ctreatbtn.on{color:var(--bad)}
.rd.rd .ctreatbtn.on svg{fill:currentColor;animation:treatpop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes treatpop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rd.rd .ctreatbtn.on svg{animation:none}}
.rd.rd .memrole{margin-top:5px}
.rd.rd .memrolechip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:2px 9px;border-radius:999px;background:var(--accent-dim);color:var(--accent-lt);
  border:1px solid var(--line2)}
.rd.rd .memxfer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rd.rd .memxfer-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:9px}
.rd.rd .memxfer-btn{width:100%;justify-content:center;background:var(--panel2);border:1px solid var(--line2);color:var(--mid)}
.rd.rd .memxfer-btn:hover{border-color:var(--warn);color:var(--warn)}
.rd.rd .memxfer-btn svg{width:15px;height:15px}
.rd.rd .memxfer-confirm{margin-top:10px;background:rgba(245,166,35,.08);border:1px solid var(--warn);border-radius:12px;padding:13px}
.rd.rd .memxfer-confirm[hidden]{display:none}
.rd.rd .memxfer-warn{font-size:13px;line-height:1.5;color:var(--fg);margin:0 0 12px}
.rd.rd .memxfer-warn b{font-weight:800}
.rd.rd .memxfer-actions{display:flex;gap:8px}
.rd.rd .memxfer-actions .btn{flex:1;justify-content:center}
.rd.rd .memxfer-actions .go{background:var(--warn);border-color:var(--warn);color:#04121f}
.rd.rd .memxfer-actions .go:hover{filter:brightness(1.06)}
.rd.rd .memx{font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer}
.rd.rd .memx:hover{color:var(--bad)}
.rd.rd .featrow2{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.rd.rd .featrow2:last-child{border-bottom:0}
.rd.rd .featicon{width:34px;height:34px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--accent-lt);flex:none}
.rd.rd .featicon svg{width:18px;height:18px}
.rd.rd .feattxt{flex:1;min-width:0;display:flex;flex-direction:column}
.rd.rd .featname{font-size:14px;font-weight:600;display:block}
.rd.rd .featsub{font-size:12px;color:var(--dim);margin-top:1px;display:block}
.rd.rd .dayspills{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.rd.rd .daypill{font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel2)}
.rd.rd .daypill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .logrow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.rd.rd .logrow:last-child{border-bottom:0}
.rd.rd .logdot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.rd.rd .logwho{font-weight:700}
.rd.rd .logtime{font-size:11px;color:var(--dim);margin-top:2px}
.rd.rd .console{background:var(--page);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;font-family:"SFMono-Regular",Consolas,monospace;font-size:12.5px;line-height:1.55}
.rd.rd .clog{display:flex;gap:10px;align-items:baseline;padding:3px 0;overflow:hidden}
.rd.rd .clog .ctime{color:var(--dim);flex:none}
.rd.rd .clog .ctime::before{content:"[";color:var(--line2)}
.rd.rd .clog .ctime::after{content:"]";color:var(--line2)}
.rd.rd .clog .cwho{color:var(--accent-lt);font-weight:700;flex:none}
.rd.rd .clog .cmsg{color:var(--mid);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .logfilter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.rd.rd .logfilter .chip{background:var(--panel2);border:1px solid var(--line2);border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--mid);cursor:pointer;font-family:inherit}
.rd.rd .logfilter .chip:hover{border-color:var(--accent)}
.rd.rd .logfilter .chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .clog .lspace{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;border-radius:5px;padding:1px 7px;flex:none}
.rd.rd .lspace.kitchen{color:var(--warn);background:rgba(245,166,35,.14)}
.rd.rd .lspace.bar{color:var(--accent-lt);background:var(--accent-dim)}
.rd.rd .lspace.service{color:var(--good);background:rgba(53,201,141,.14)}
.rd.rd .lspace.delivery{color:var(--mid);background:var(--panel2);border:1px solid var(--line2)}
.rd.rd #logConsole .clog{align-items:flex-start}
.rd.rd #logConsole .cmsg{white-space:normal}
.rd.rd .clog .lid{color:var(--accent-lt);font-weight:700;flex:none}
.rd.rd .togsep{width:1px;align-self:stretch;background:var(--line2);margin:3px 1px;flex:none}
.rd.rd .toggle button.logtab{display:inline-flex;align-items:center;gap:6px;color:var(--accent-lt);padding:7px 14px 7px 10px}
.rd.rd .toggle button.logtab svg{width:14px;height:14px}
.rd.rd .toggle button.logtab.on{color:#fff}
.rd.rd .logsearch{position:relative;margin-bottom:12px}
.rd.rd .logsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim);pointer-events:none}
.rd.rd .logsearch input{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 12px 9px 35px;color:var(--fg);font-size:13.5px;font-family:inherit;outline:none}
.rd.rd .logsearch input:focus{border-color:var(--accent)}
.rd.rd .logsearch input::placeholder{color:var(--dim)}
.rd.rd .nomodal, .rd.rd .ttile, .rd.rd #ftoggle, .rd.rd .kcube, .rd.rd #logConsole{-webkit-user-select:none;user-select:none}
.rd.rd .nomodal input, .rd.rd .nomodal .cnote{-webkit-user-select:text;user-select:text}
.rd.rd #menuItemsGrid{padding-top:3px}
.rd.rd .col[data-fc="log"]{max-width:760px;width:100%;margin:0 auto}
.rd.rd .clog .ltable{color:var(--fg);font-weight:700;flex:none}
.rd.rd .clog .laction{color:var(--mid);min-width:0}
.rd.rd #logConsole .clog{cursor:pointer;padding:5px 8px;border-radius:7px;margin:0 -8px}
.rd.rd #logConsole .clog:hover{background:var(--panel2)}
.rd.rd .oidbadge{font-size:12px;font-weight:800;color:var(--accent-lt);background:var(--accent-dim);border-radius:7px;padding:2px 9px;font-family:"SFMono-Regular",Consolas,monospace;flex:none}
.rd.rd .kid{font-size:11px;font-weight:700;color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd #logConsole .lid{margin-left:auto}
.rd.rd .odesc{padding:1px 13px 10px;font-size:11.5px;color:var(--dim);background:var(--panel2);line-height:1.45}
.rd.rd .kmeta{margin-left:auto;display:flex;align-items:center;gap:9px}
.rd.rd .kmeta .ktime{margin-left:0}
.rd.rd .kppl{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--dim);font-weight:700}
.rd.rd .kppl svg{width:13px;height:13px}
.rd.rd .kfoot{display:flex;justify-content:flex-end;margin-top:9px}
.rd.rd #tmOid{margin-left:auto}
.rd.rd #tableChips .chip{cursor:grab}
.rd.rd #tableChips .chip.dragging{opacity:.4}
.rd.rd #logPopSub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.rd.rd .logpopstat{margin-top:15px;font-size:13.5px;font-weight:700}
.rd.rd .lpitem{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rd.rd .lpitem:last-child{border-bottom:0}
.rd.rd .lpitem .q{color:var(--accent-lt);font-weight:800;font-family:"SFMono-Regular",Consolas,monospace;margin-right:6px}
.rd.rd .setwrap{max-width:680px;margin:0 auto}
.rd.rd .pgcat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:12px 0 2px}
.rd.rd .pgcat:first-child{margin-top:2px}
.rd.rd .permpanel .pgcat{font-size:12px;font-weight:800;color:var(--fg);margin:20px 0 8px;padding-top:11px;border-top:1px solid var(--line2);display:flex;align-items:center;gap:8px}
.rd.rd .permpanel .pgcat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.rd.rd .permpanel .pgcat:first-child{margin-top:2px;padding-top:0;border-top:0}
.rd.rd .pgbox{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:2px 14px;margin:0 0 11px}
.rd.rd .pgboxhead{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);padding:12px 0 5px}
.rd.rd .permspace{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .permspace:last-child{border-bottom:0}
.rd.rd .permspace .psn{flex:1;font-size:13.5px;font-weight:600}
.rd.rd .permspace .pcol{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--dim)}
.rd.rd .scard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.rd.rd .shint{font-size:12.5px;color:var(--dim);margin:-2px 0 12px;line-height:1.5}
.rd.rd .addrow{display:flex;gap:9px}
.rd.rd .addrow input{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--fg);font-size:14px;font-family:inherit}
.rd.rd .addrow input:focus{outline:none;border-color:var(--accent)}
.rd.rd .addrow input::placeholder{color:var(--dim)}
.rd.rd .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rd.rd .chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:7px 10px 7px 12px;font-size:13px;font-weight:600}
.rd.rd .chip i{color:var(--dim);cursor:pointer;font-style:normal;font-size:16px;line-height:1}
.rd.rd .chip i:hover{color:var(--bad)}
.rd.rd .chip.addchip{border-style:dashed;color:var(--accent-lt);cursor:pointer}
.rd.rd .srow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .srow:last-child{border-bottom:0}
.rd.rd .srow .rn{font-size:14px;font-weight:700}
.rd.rd .srow .rd{font-size:12px;color:var(--dim);margin-top:1px}
.rd.rd .srow .redit{margin-left:auto;color:var(--dim);font-size:12.5px;font-weight:600;cursor:pointer}
.rd.rd .srow .redit:hover{color:var(--accent)}
.rd.rd .tmr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .tmr:last-child{border-bottom:0}
.rd.rd .tmr .tn{font-size:14px;font-weight:700;flex:1}
.rd.rd .tmr .fld{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.rd.rd .tmr input{width:52px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;color:var(--fg);font-size:13px;font-family:inherit;text-align:center}
.rd.rd .tmr input:focus{outline:none;border-color:var(--accent)}
.rd.rd select.tmrsel{flex:1;min-width:0;background-color:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 30px 7px 10px;color:var(--fg);font-size:13px;font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868e9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.rd.rd select.tmrsel:focus{outline:none;border-color:var(--accent)}
.rd.rd .menubar{display:flex;gap:8px;margin-bottom:14px}
.rd.rd .menubar .mb{flex:1;padding:9px;border-radius:9px;border:1px dashed var(--line2);background:transparent;color:var(--mid);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .menubar .mb:hover{border-color:var(--accent);color:var(--accent)}
.rd.rd .mcat{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;overflow:hidden}
.rd.rd .mcathead{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;background:var(--panel2)}
.rd.rd .mcathead b{font-size:14px;font-weight:700}
.rd.rd .mcount{font-size:11.5px;color:var(--dim);margin-left:2px}
.rd.rd .mcatchev{margin-left:auto;color:var(--dim);transition:transform .15s}
.rd.rd .mcatchev svg{width:14px;height:14px}
.rd.rd .mcat:not(.open) .mcatchev{transform:rotate(-90deg)}
.rd.rd .mcatbody{padding:2px 13px 8px}
.rd.rd .mcat:not(.open) .mcatbody{display:none}
.rd.rd .mitem{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rd.rd .mitem:last-child{border-bottom:0}
.rd.rd .mitem .mnm{flex:1}
.rd.rd .mitem .mpr{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim)}
.rd.rd .mitem .medit{color:var(--dim);cursor:pointer;display:flex}
.rd.rd .mitem .medit:hover{color:var(--accent)}
.rd.rd .mitem .medit svg{width:15px;height:15px}
.rd.rd .tdotc{width:8px;height:8px;border-radius:50%;flex:none}
.rd.rd .tdotc.warn{background:var(--warn)}
.rd.rd .tdotc.late{background:var(--bad)}
.rd.rd .ssub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:16px 0 9px;padding-top:14px;border-top:1px solid var(--line)}
.rd.rd .permbox{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:2px 13px;margin:6px 0 4px}
.rd.rd .permrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600}
.rd.rd .permrow:last-child{border-bottom:0}
.rd.rd .permcat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.rd.rd .permcat:first-of-type{margin-top:2px;padding-top:0;border-top:0}
.rd.rd .prow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer}
.rd.rd .prow:hover, .rd.rd .prow.open{background:var(--panel2)}
.rd.rd .prow > div:first-child{flex:1;min-width:0}
.rd.rd .prn{font-size:14px;font-weight:700}
.rd.rd .prd{font-size:12px;color:var(--dim);margin-top:1px}
.rd.rd .pchev{color:var(--dim);transition:transform .15s}
.rd.rd .pchev svg{width:15px;height:15px}
.rd.rd .prow.open .pchev{transform:rotate(90deg)}
.rd.rd .permpanel{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:2px 13px;margin:2px 4px 8px}
.rd.rd .permpanel[hidden]{display:none}
.rd.rd .permnote{font-size:13px;color:var(--dim);padding:12px 0}
.rd.rd .permbase{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mid);padding:12px 0 2px}
.rd.rd .seetag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);background:var(--accent-dim);border-radius:6px;padding:2px 8px;flex:none}
.rd.rd .permsub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:12px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.rd.rd .addspacebtn{width:100%;margin-top:10px;padding:11px;border-radius:10px;border:1px dashed var(--line2);background:transparent;color:var(--accent-lt);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .addspacebtn:hover{border-color:var(--accent)}
.rd.rd .tycards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.rd.rd .tycard{border:1px solid var(--line2);border-radius:12px;padding:13px;cursor:pointer;background:var(--panel2);transition:border-color .12s,background .12s}
.rd.rd .tycard.on{border-color:var(--accent);background:var(--accent-dim)}
.rd.rd .tyi{width:32px;height:32px;border-radius:9px;background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--mid);margin-bottom:10px}
.rd.rd .tycard.on .tyi{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .tyi svg{width:18px;height:18px}
.rd.rd .tyn{font-size:14px;font-weight:700}
.rd.rd .tyd{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.4}
.rd.rd .tmodal label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);margin:16px 0 7px}
.rd.rd .tmodal label:first-of-type{margin-top:4px}
.rd.rd .tmodal input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:12px 13px;color:var(--fg);font-size:14px;font-family:inherit;outline:none}
.rd.rd .tmodal input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.rd.rd .tmodal input[type=text]::placeholder{color:var(--dim)}
.rd.rd .delbtn{display:block;width:fit-content;margin:18px auto 4px;padding:9px 18px;border-radius:9px;border:1px solid var(--bad);background:transparent;color:var(--bad);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .delbtn:hover{background:var(--bad);color:#fff}
.rd.rd .spctype{margin:0 0 2px}
.rd.rd .msub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);margin:12px 0 3px;padding-top:9px;border-top:1px solid var(--line)}
.rd.rd .msub:first-child{border-top:0;padding-top:0;margin-top:2px}
.rd.rd .msubcat{border:1px solid var(--line);border-radius:10px;margin:8px 0;overflow:hidden;background:var(--panel)}
.rd.rd .msubhead{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer}
.rd.rd .msubhead b{font-size:13.5px;font-weight:700}
.rd.rd .msubchev{color:var(--dim);display:flex;transition:transform .15s}
.rd.rd .msubchev svg{width:13px;height:13px}
.rd.rd .msubcat:not(.open) .msubchev{transform:rotate(-90deg)}
.rd.rd .msubbody{padding:0 12px 8px}
.rd.rd .msubcat:not(.open) .msubbody{display:none}
.rd.rd select.mspace{-webkit-appearance:none;appearance:none;margin-left:auto;font-size:11px;font-weight:700;color:var(--accent-lt);background-color:var(--accent-dim);border:1px solid transparent;border-radius:7px;padding:3px 22px 3px 9px;cursor:pointer;font-family:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238fb8ff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
.rd.rd .overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:40px 16px;background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:50}
.rd.rd .overlay.open{display:flex;animation:ovIn .18s ease both}
.rd.rd .overlay.open .tmodal{animation:mIn .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rd.rd .overlay.open, .rd.rd .overlay.open .tmodal, .rd.rd .npanel.open{animation:none}}
.rd.rd .tmodal{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:22px;width:100%;max-width:380px;box-shadow:var(--mshadow);position:relative;max-height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .tmx{position:absolute;top:15px;right:16px;color:var(--dim);cursor:pointer;font-size:14px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.rd.rd .tmx:hover{background:var(--panel2);color:var(--fg)}
.rd.rd .tmx svg{width:15px;height:15px}
.rd.rd .st svg{width:12px;height:12px;vertical-align:-1.5px;margin-right:3px}
.rd.rd .segrm svg{width:12px;height:12px;vertical-align:-1px}
.rd.rd .dpay{display:flex;align-items:center;justify-content:center;gap:8px}
.rd.rd .dpay svg{width:16px;height:16px}
.rd.rd .tmtitle{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:0}
.rd.rd .tmsub{font-size:12.5px;color:var(--dim);margin:2px 0 14px}
.rd.rd .di{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rd.rd .di:last-of-type{border-bottom:0}
.rd.rd .di .idot{width:8px;height:8px;border-radius:50%;flex:none}
.rd.rd .di .idot.ready{background:var(--good)}
.rd.rd .di .idot.prep{background:var(--warn)}
.rd.rd .di .q{color:var(--accent-lt);font-weight:800;font-family:"SFMono-Regular",Consolas,monospace;margin-right:5px}
.rd.rd .di .nme{flex:1}
.rd.rd .di .price{color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .dtotal{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 0;font-size:15px;font-weight:700}
.rd.rd .dtotal b{font-size:22px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .dpay{width:100%;margin-top:14px;padding:12px;border-radius:11px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.rd.rd .dpay:hover{background:var(--accent2)}
.rd.rd .ohint{font-size:12.5px;color:var(--dim);margin:2px 0 14px;line-height:1.5}
.rd.rd .ospace{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.rd.rd .ohead{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--panel2)}
.rd.rd .ohead .oname{font-size:15px;font-weight:700}
.rd.rd .ohead .okind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:2px 7px}
.rd.rd .ohead .okind.print{color:var(--accent-lt);border-color:transparent;background:var(--accent-dim)}
.rd.rd .ohead .ostatus{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:7px}
.rd.rd .ostatus.ready{color:var(--good);background:rgba(53,201,141,.14)}
.rd.rd .ostatus.prep{color:var(--warn);background:rgba(245,166,35,.14)}
.rd.rd .ostatus.print{color:var(--accent-lt);background:var(--accent-dim)}
.rd.rd .ostatus.served{color:var(--dim);background:transparent;border:1px solid var(--line2)}
.rd.rd .obody{padding:3px 13px}
.rd.rd .oi{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.rd.rd .oi:last-child{border-bottom:0}
.rd.rd .oi .ock{width:17px;height:17px;border-radius:50%;border:2px solid var(--line2);flex:none;position:relative}
.rd.rd .oi.done .ock{border-color:var(--good);background:var(--good)}
.rd.rd .oi.done .ock::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #04121f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rd.rd .oi .oq{color:var(--accent-lt);font-weight:800;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .oi .onm{flex:1;min-width:0}
.rd.rd .oi.done .onm{color:var(--dim);text-decoration:line-through}
.rd.rd .oi .oprice{color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .oconfirm{width:calc(100% - 26px);margin:5px 13px 13px;padding:11px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.rd.rd .oconfirm:hover{background:var(--accent2)}
.rd.rd .oconfirm svg{width:16px;height:16px;stroke-width:2.4}
.rd.rd .onote{font-size:12px;color:var(--dim);padding:4px 13px 12px;display:flex;align-items:center;gap:7px}
.rd.rd .onote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.rd.rd #noOverlay{padding:24px 16px}
.rd.rd .nomodal{padding:20px 22px;width:100%;max-width:860px;height:calc(100vh - 48px);max-height:920px;display:flex;flex-direction:column;overflow:hidden;background-image:radial-gradient(720px 300px at 50% -70px, var(--glow), transparent);background-repeat:no-repeat}
.rd.rd .notitle{font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0 0 13px;flex:none}
.rd.rd .no-bar{display:flex;align-items:center;gap:14px;padding:0 0 16px;margin-bottom:14px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.rd.rd .no-ctl{display:flex;align-items:center;gap:8px}
.rd.rd .no-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:700}
.rd.rd .no-bar select{flex:none;width:auto;min-width:124px}
.rd.rd .nogrow{flex:1}
.rd.rd .no-round{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:2px}
.rd.rd .no-round button{width:34px;height:32px;border:none;background:none;color:var(--fg);font-size:20px;cursor:pointer;border-radius:7px;line-height:1;font-family:inherit}
.rd.rd .no-round button:hover{background:var(--line)}
.rd.rd .no-round #roundVal{min-width:26px;text-align:center;font-size:16px;font-weight:700;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .no-body{display:flex;gap:16px;flex:1;min-height:0}
.rd.rd .no-menu{flex:1.7;min-width:0;display:flex;flex-direction:column;min-height:0}
.rd.rd .chipstrip{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;flex:none;scrollbar-width:none}
.rd.rd .chipstrip::-webkit-scrollbar{height:0}
.rd.rd .chipstrip .chip{background:var(--panel2);border:1px solid var(--line2);border-radius:20px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--mid);cursor:pointer;white-space:nowrap;flex:none;font-family:inherit}
.rd.rd .chipstrip .chip:hover{border-color:var(--accent)}
.rd.rd #noCats .chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd #noSubs .chip{padding:6px 12px;font-size:12.5px}
.rd.rd #noSubs .chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.rd.rd #menuItemsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;align-content:start;flex:1;overflow-y:auto;min-height:0;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .menubtn{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 13px 12px;min-height:84px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:9px;cursor:pointer;text-align:left;position:relative;box-shadow:var(--shadow);font-family:inherit}
.rd.rd .menubtn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.26)}
.rd.rd .menubtn::after{content:"+";position:absolute;top:6px;right:11px;font-size:17px;font-weight:700;color:var(--accent-lt);opacity:0;transition:opacity .14s}
.rd.rd .menubtn:hover::after{opacity:1}
.rd.rd .menubtn .mname{font-size:14.5px;font-weight:700;color:var(--fg);line-height:1.25}
.rd.rd .menubtn .mfoot{display:flex;align-items:center;gap:8px;width:100%}
.rd.rd .menubtn .mprice{font-size:12.5px;font-weight:800;color:var(--accent-lt);font-family:"SFMono-Regular",Consolas,monospace;background:var(--accent-dim);border-radius:7px;padding:2px 8px}
.rd.rd .menubtn .mtag{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:700;margin-left:auto}
.rd.rd .no-cart{flex:1;min-width:0;max-width:320px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:12px;overflow:hidden;min-height:0}
.rd.rd .no-carthead{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.rd.rd .no-cartcount{margin-left:auto;background:var(--accent-dim);color:var(--accent-lt);border-radius:20px;padding:1px 9px;font-size:12px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd #cart{flex:1;overflow-y:auto;padding:4px 14px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd #cart .cempty{padding:26px 10px;font-size:13px;color:var(--dim);text-align:center;line-height:1.5}
.rd.rd .citem{padding:8px 0;border-bottom:1px solid var(--line)}
.rd.rd .citem:last-child{border-bottom:none}
.rd.rd .crow{display:flex;align-items:center;gap:8px}
.rd.rd .cstep{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;flex:none}
.rd.rd .cstep button{width:26px;height:26px;border:none;background:none;color:var(--fg);font-size:16px;cursor:pointer;line-height:1;font-family:inherit}
.rd.rd .cstep b{min-width:18px;text-align:center;font-size:13px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .cname{flex:1;font-size:13.5px;min-width:0;line-height:1.25;font-weight:600}
.rd.rd .cnotebtn{flex:none;width:26px;height:26px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);border-radius:7px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.rd.rd .cnotebtn svg{width:14px;height:14px}
.rd.rd .cnotebtn.on{color:var(--accent-lt);border-color:var(--accent)}
.rd.rd .cprice{font-family:"SFMono-Regular",Consolas,monospace;color:var(--mid);font-size:13px;white-space:nowrap;min-width:46px;text-align:right}
.rd.rd .cnote{width:100%;margin-top:6px;font-size:12.5px;padding:7px 9px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;color:var(--fg);font-family:inherit;outline:none}
.rd.rd .cnote:focus{border-color:var(--accent)}
.rd.rd .no-cartfoot{border-top:1px solid var(--line);padding:11px 14px;flex:none}
.rd.rd .no-total{display:flex;justify-content:space-between;font-weight:700;font-size:16px;margin-bottom:9px}
.rd.rd .no-total span:last-child{font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .no-cartfoot .dpay{margin:0}
@media (max-width:640px){.rd.rd .nomodal{padding:16px}
.rd.rd .no-body{flex-direction:column}
.rd.rd .no-cart{max-width:none;flex:none;height:42%}
.rd.rd #menuItemsGrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.rd.rd .menubtn{min-height:64px;padding:10px 7px}
.rd.rd .menubtn .mname{font-size:13.5px}}
.rd.rd .nohead{padding:19px 20px 4px;flex:none}
.rd.rd .nosub{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);margin-top:9px}
.rd.rd .nosub select{flex:1}
.rd.rd .nocats{display:flex;gap:7px;overflow-x:auto;padding:12px 20px;flex:none;scrollbar-width:none}
.rd.rd .nocats::-webkit-scrollbar{display:none}
.rd.rd .nocat{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:8px;border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel2);white-space:nowrap;flex:none}
.rd.rd .nocat.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .noitems{flex:1;min-height:0;overflow-y:auto;padding:0 20px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .nocatlbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:14px 0 2px}
.rd.rd .noitem{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .noitem:last-child{border-bottom:0}
.rd.rd .noitem .nnm{flex:1;min-width:0;font-size:14px;font-weight:600}
.rd.rd .noitem .ntag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);border:1px solid var(--line2);border-radius:5px;padding:2px 6px;flex:none}
.rd.rd .noitem .npr{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim);font-size:13px;flex:none;min-width:46px;text-align:right}
.rd.rd .noadd{padding:7px 14px;border-radius:8px;border:1px solid var(--accent);background:transparent;color:var(--accent-lt);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;flex:none}
.rd.rd .noadd:hover{background:var(--accent-dim)}
.rd.rd .nstep{display:flex;align-items:center;gap:9px;flex:none}
.rd.rd .nbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);color:var(--fg);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.rd.rd .nbtn:hover{border-color:var(--accent);color:var(--accent)}
.rd.rd .nqty{min-width:16px;text-align:center;font-weight:800;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .nofoot{flex:none;border-top:1px solid var(--line);padding:13px 20px 16px;background:var(--panel)}
.rd.rd .nofsum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;font-size:14px;font-weight:700}
.rd.rd .nofsum b{font-size:20px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .dpay:disabled{opacity:.45;cursor:default}
.rd.rd .notabs{display:flex;gap:6px;margin-top:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:3px}
.rd.rd .notab{flex:1;border:none;background:transparent;color:var(--mid);border-radius:7px;padding:7px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.rd.rd .notab.on{background:var(--accent);color:#fff}
.rd.rd .notabn{font-size:11px;font-weight:800;background:rgba(255,255,255,.25);border-radius:99px;min-width:16px;padding:0 5px;line-height:16px}
.rd.rd .notab:not(.on) .notabn{background:var(--line2);color:var(--fg)}
.rd.rd #noMenu{flex:1;min-height:0;display:flex;flex-direction:column}
.rd.rd #noMenu[hidden], .rd.rd #noOrder[hidden]{display:none}
.rd.rd #noOrder{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .noorderwrap{padding:2px 20px 8px}
.rd.rd .noround{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:16px 0 4px}
.rd.rd .noround:first-child{margin-top:6px}
.rd.rd .nrnow{color:var(--accent-lt);background:var(--accent-dim);border-radius:6px;padding:2px 7px;letter-spacing:.3px}
.rd.rd .nrempty{font-size:12.5px;color:var(--dim);padding:4px 0 8px}
.rd.rd .olwrap{padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .oline{display:flex;align-items:center;gap:11px}
.rd.rd .oline .olnm{flex:1;min-width:0;font-size:14px;font-weight:600}
.rd.rd .oline .oltag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);border:1px solid var(--line2);border-radius:5px;padding:2px 6px;flex:none}
.rd.rd .oline .olpr{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim);font-size:13px;flex:none;min-width:52px;text-align:right}
.rd.rd .olnote{width:100%;margin-top:9px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;color:var(--fg);font-size:13px;font-family:inherit;outline:none}
.rd.rd .olnote:focus{border-color:var(--accent)}
.rd.rd .olnote::placeholder{color:var(--dim)}
.rd.rd .nonewround{width:100%;justify-content:center;margin:12px 0 6px}
.rd.rd .themep{position:absolute;bottom:14px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--dim);cursor:pointer;z-index:8}
.rd.rd .themep svg{width:17px;height:17px}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes barRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes heroIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes crownShine{0%{transform:translateX(-160%) skewX(-16deg)}22%{transform:translateX(320%) skewX(-16deg)}100%{transform:translateX(320%) skewX(-16deg)}}
.rd.rd .chart .bar{transform-origin:bottom center;animation:barRise .5s cubic-bezier(.2,.85,.25,1) both}
.rd.rd .chart .bar:nth-child(2){animation-delay:.05s}
.rd.rd .chart .bar:nth-child(3){animation-delay:.1s}
.rd.rd .chart .bar:nth-child(4){animation-delay:.15s}
.rd.rd .chart .bar:nth-child(5){animation-delay:.2s}
.rd.rd .chart .bar:nth-child(6){animation-delay:.25s}
.rd.rd .chart .bar:nth-child(7){animation-delay:.3s}
.rd.rd .chart .bar{transition:opacity .12s,filter .12s}
.rd.rd .chart .bar:hover{opacity:1;filter:brightness(1.12)}
.rd.rd .sellrow, .rd.rd .lbrow{animation:rowIn .34s ease both}
.rd.rd .sellrow:nth-child(2), .rd.rd .lbrow:nth-child(2){animation-delay:.04s}
.rd.rd .sellrow:nth-child(3), .rd.rd .lbrow:nth-child(3){animation-delay:.08s}
.rd.rd .sellrow:nth-child(4), .rd.rd .lbrow:nth-child(4){animation-delay:.12s}
.rd.rd .sellrow:nth-child(5), .rd.rd .lbrow:nth-child(5){animation-delay:.16s}
.rd.rd .sellrow:nth-child(6), .rd.rd .lbrow:nth-child(6){animation-delay:.2s}
.rd.rd .sellrow:nth-child(n+7), .rd.rd .lbrow:nth-child(n+7){animation-delay:.24s}
.rd.rd .sellrow{transition:background .12s}
.rd.rd .sellrow:hover{background:var(--panel2)}
.rd.rd .lbrow{transition:background .12s}
.rd.rd .lbrow:hover{background:var(--panel2)}
.rd.rd .statshero{animation:heroIn .4s ease both}
.rd.rd .sellrow.top .sellrank, .rd.rd .lbrow.top .lbrank{position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(224,160,32,.35)}
.rd.rd .sellrow.top .sellrank::after, .rd.rd .lbrow.top .lbrank::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:crownShine 4.2s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rd.rd .chart .bar, .rd.rd .sellrow, .rd.rd .lbrow, .rd.rd .statshero, .rd.rd .sellrow.top .sellrank::after, .rd.rd .lbrow.top .lbrank::after{animation:none}}
.rd.rd .toggle button{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.rd.rd .toggle button:not(.on):hover{color:var(--fg);background:var(--panel2)}
.rd.rd .toggle button.on{box-shadow:0 2px 8px rgba(59,130,246,.32)}
.rd.rd .statstrend{display:inline-flex;align-items:center;gap:5px;background:var(--good-dim);border-radius:999px;padding:3px 10px;line-height:1}
.rd.rd .statstrend::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--good)}
.rd.rd .chart .bar::before{content:"";position:absolute;top:0;left:0;right:0;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);border-radius:6px 6px 0 0;pointer-events:none}
.rd.rd .chart .bar:hover{box-shadow:0 6px 16px rgba(59,130,246,.34)}
.rd.rd .lbav{transition:box-shadow .15s}
.rd.rd .lbrow.top .lbav{box-shadow:0 0 0 2px var(--panel),0 0 0 4px #e0a020}
.rd.rd .btn.ghost{transition:border-color .14s,color .14s,transform .12s,box-shadow .14s}
.rd.rd .btn.ghost:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.rd.rd .btn.ghost:active{transform:translateY(0)}
.rd.rd .actcard{transition:transform .14s ease}
@media (prefers-reduced-motion:reduce){.rd.rd .btn.ghost:hover, .rd.rd .actcard{transform:none}}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes colIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.rd.rd .main .body > div{animation:viewIn .24s cubic-bezier(.2,.7,.2,1) both}
.rd.rd #floor .col{animation:colIn .2s ease both}
.rd.rd .ni{transition:background .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){.rd.rd .main .body > div, .rd.rd #floor .col{animation:none}}
.rd.rd .setwrap .scard, .rd.rd .msgpanel .msgrow, .rd.rd #floor .ttile{animation:viewIn .32s cubic-bezier(.2,.7,.2,1) both}
.rd.rd .setwrap .scard:nth-child(2), .rd.rd .msgpanel .msgrow:nth-child(2), .rd.rd #floor .ttile:nth-child(2){animation-delay:.045s}
.rd.rd .setwrap .scard:nth-child(3), .rd.rd .msgpanel .msgrow:nth-child(3), .rd.rd #floor .ttile:nth-child(3){animation-delay:.09s}
.rd.rd .setwrap .scard:nth-child(4), .rd.rd .msgpanel .msgrow:nth-child(4), .rd.rd #floor .ttile:nth-child(4){animation-delay:.135s}
.rd.rd .setwrap .scard:nth-child(5), .rd.rd .msgpanel .msgrow:nth-child(5), .rd.rd #floor .ttile:nth-child(5){animation-delay:.18s}
.rd.rd .setwrap .scard:nth-child(6), .rd.rd .msgpanel .msgrow:nth-child(6), .rd.rd #floor .ttile:nth-child(6){animation-delay:.225s}
.rd.rd .setwrap .scard:nth-child(7), .rd.rd .msgpanel .msgrow:nth-child(7), .rd.rd #floor .ttile:nth-child(7){animation-delay:.27s}
.rd.rd .setwrap .scard:nth-child(n+8), .rd.rd .msgpanel .msgrow:nth-child(n+8), .rd.rd #floor .ttile:nth-child(n+8){animation-delay:.315s}
@media (prefers-reduced-motion:reduce){.rd.rd .setwrap .scard, .rd.rd .msgpanel .msgrow, .rd.rd #floor .ttile{animation:none}}
.rd.rd .overlay.fs .tmodal{background:var(--page);position:relative}
.rd.rd .overlay.fs .tmodal::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(1400px 1100px at 50% 0%,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%);
    mask-image:radial-gradient(1400px 1100px at 50% 0%,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%)}
.rd.rd .overlay.fs .tmodal::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.18;
    background:
      radial-gradient(820px 700px at 88% 2%,var(--accent),transparent 62%),
      radial-gradient(640px 600px at 6% 92%,var(--accent),transparent 62%),
      radial-gradient(1100px 900px at 50% 50%,var(--accent),transparent 70%)}
.rd.rd .overlay.fs .fsbar, .rd.rd .overlay.fs .fsbody{position:relative;z-index:1}
.rd.rd .overlay.fs.open .tmodal{animation:none}
.rd.rd .overlay.fs .fsbar{animation:none!important}
.rd .ni.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.rd .overlay.fs{padding:0}
.rd .overlay.fs .tmodal{max-width:none;width:100%;height:100%;max-height:100%;border-radius:0;padding:0;
    display:flex;flex-direction:column;overflow:hidden;background:var(--page);position:relative}
.rd .overlay.fs .fsart, .rd .overlay.fs .fsart2{position:absolute;pointer-events:none;z-index:0;
    background:url(arthur-a-lg.png) no-repeat center/contain}
.rd .overlay.fs .fsart{right:-120px;bottom:-140px;width:560px;height:560px;opacity:.055}
.rd .overlay.fs .fsart2{left:-90px;top:-60px;width:320px;height:320px;opacity:.035;transform:rotate(-14deg)}
@media (max-width:640px){.rd .overlay.fs .fsart{width:340px;height:340px;right:-90px;bottom:-90px}
.rd .overlay.fs .fsart2{display:none}}
.rd .overlay.fs.open .fsart{animation:fsDriftA 24s ease-in-out infinite;animation-delay:var(--wm-a,0s)}
.rd .overlay.fs.open .fsart2{animation:fsDriftB 33s ease-in-out infinite;animation-delay:var(--wm-b,0s)}
@media (prefers-reduced-motion:reduce){.rd .overlay.fs .fsart, .rd .overlay.fs .fsart2{animation:none!important}}.rd #plansCard .fsbody, .rd #prefsHub .fsbody{display:flex;flex-direction:column;justify-content:center}.rd #plansCard .fsbody > *, .rd #prefsHub .fsbody > *{flex:none}
.rd .overlay.fs .fsbar, .rd .overlay.fs .fsbody{position:relative;z-index:1}
.rd.rd[data-mode="light"] .overlay.fs .tmodal::before{
    background-image:
      linear-gradient(rgba(20,40,80,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(20,40,80,.05) 1px,transparent 1px)}
.rd .fsbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:0 14px;height:56px;border-bottom:1px solid var(--line);background:var(--bar);flex:none}
.rd .fsbl{justify-self:start;display:flex;align-items:center;gap:5px;min-width:0}
.rd .fsbrand{justify-self:center;display:flex;align-items:center}
.rd .fsbrand img{height:19px;width:auto;display:block}
.rd .fsbr{justify-self:end;display:flex;align-items:center}
.rd .fshome{width:38px;height:38px;border-radius:10px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer;flex:none}
.rd .fshome:hover{background:var(--panel);color:var(--fg)}
.rd .fshome svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd .fsdiv{width:1px;height:17px;background:var(--line2);margin:0 8px 0 3px;flex:none}
.rd .fsbar .fst{font-size:14px;font-weight:700;color:var(--mid);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd .billhero{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:22px 24px;margin-top:24px;display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.rd .billamt{flex:1;min-width:170px}
.rd .bl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin-bottom:8px}
.rd .billamt .bv{font-size:38px;font-weight:800;letter-spacing:-1.5px;color:var(--fg);line-height:1}
.rd .billamt .bs{font-size:13px;color:var(--dim);margin-top:8px;line-height:1.5}
.rd .billmeta{display:flex;gap:28px;flex-wrap:wrap}
.rd .billmeta .bv2{font-size:15px;color:var(--fg);font-weight:600}
.rd .useblk{margin-top:14px}
.rd .usebar{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden;margin:9px 0 7px}
.rd .usebar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.rd .usetxt{font-size:12.5px;color:var(--dim)}
.rd .invtable{border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.rd .invrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px}
.rd .invrow:last-child{border-bottom:none}
.rd .invrow.head{background:var(--panel2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.rd .invrow .c1{flex:1;color:var(--fg)}
.rd .invrow .c2{width:110px;color:var(--mid);flex:none}
.rd .invrow .c3{width:96px;flex:none;color:var(--mid)}
.rd .invempty{padding:28px 18px;text-align:center;color:var(--dim);font-size:14px}
.rd .annbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 14px}
.rd .annbtn{font-size:13px;font-weight:700;background:var(--accent2);color:#fff;border:none;border-radius:10px;padding:10px 15px;cursor:pointer;font-family:inherit}
.rd .annbtn:hover{background:var(--accent)}
.rd .annwho{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.rd .annav{width:29px;height:29px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex:none}
.rd .annname{font-size:13.5px;font-weight:700;color:var(--fg);line-height:1.2}
.rd .annrole{font-size:11.5px;color:var(--dim);display:block;margin-top:2px}
.rd .annpin{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);background:var(--accent-dim);border-radius:5px;padding:3px 7px}
.rd .fsx{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer;flex:none}
.rd .fsx:hover{background:var(--panel);color:var(--fg)}
.rd .fsx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.rd .fsbody{flex:1;overflow-y:auto;padding:38px 22px 48px}
.rd .fsin{max-width:880px;margin:0 auto}
.rd .fshero{text-align:center;margin-bottom:32px}
.rd .fshero h2{font-size:31px;font-weight:800;letter-spacing:-1.1px;margin:0;line-height:1.12}
.rd .fshero p{font-size:16px;color:var(--mid);line-height:1.6;margin:15px auto 0;max-width:540px}
.rd .fstiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rd .fstier{background:var(--panel);border:1px solid var(--line2);border-radius:15px;padding:19px 17px;display:flex;flex-direction:column;position:relative}
/* The marked cards carry a DIM outline in their own colour and one bright arc that travels
   around it. The bright solid border they had before was the whole problem: a moving highlight
   is invisible on an outline that is already lit all the way round. Grey-ish on one side,
   lit on the other, moving - which is what was asked for.
   Colour by state, and two colours when two states land on one card (chosen AND the one most
   businesses pick): a second arc rides opposite the first. */
.rd .fstier.cur,.rd .fstier.rec,.rd .fstier.pend{
  border-color:color-mix(in srgb,var(--ring) 34%, var(--line2));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ring) 18%, transparent)}
.rd .fstier.rec {--ring:var(--accent)}
.rd .fstier.pend{--ring:var(--warn)}
.rd .fstier.cur {--ring:var(--good)}
/* two classes = higher specificity, so these win over the singles above */
.rd .fstier.pend.rec{--ring:var(--warn); --ring2:var(--accent)}
.rd .fstier.cur.rec {--ring:var(--good); --ring2:var(--accent)}
.rd .fstier.cur.pend{--ring:var(--good); --ring2:var(--warn)}

/* A plain custom property cannot be interpolated, so the sweep angle is registered with
   @property. Where that is unsupported the arc simply parks and you get a static outline.
   Rotating the element instead would spin the rounded rectangle, not the light along it. */
@property --ringa{syntax:'<angle>';initial-value:0deg;inherits:false}
.rd .fstier.cur::after,.rd .fstier.rec::after,.rd .fstier.pend::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ringa),
    transparent 0 6%, var(--ring) 20%, transparent 36%,
    transparent 56%, var(--ring2,transparent) 70%, transparent 86%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 5px var(--ring));
  animation:ringSweep 4.6s linear infinite}
@keyframes ringSweep{to{--ringa:360deg}}
@media (prefers-reduced-motion:reduce){
  .rd .fstier.cur::after,.rd .fstier.rec::after,.rd .fstier.pend::after{animation:none}
}
/* Two badges can land on one card (you are ON the plan most businesses pick), so they live in
   a flex wrapper instead of each being absolutely positioned on top of the other.
   GREEN = the plan you are on now. BLUE = the one most businesses choose. Different colours
   because they mean different things and can appear together. */
/* z-index 2 so the travelling ring runs BEHIND the badges. Both are positioned inside the
   card, and the ::after ring paints after every child, so without this the bright arc drew
   a line straight across the middle of the badge. */
.rd .fstier .fpills{position:absolute;top:-11px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;z-index:2}
/* A little more air inside and between them: two badges touching at 6px read as one long
   crammed strip rather than two separate facts. The ring outside them needs room too. */
.rd .fstier .fpill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;
  background:var(--accent2);border-radius:20px;padding:5px 12px;white-space:nowrap;
  box-shadow:0 0 0 3px var(--panel2)}
/* Two badges at full size ran the whole width of the card and touched both edges. Smaller
   type and tighter padding pulls them back inside, without shrinking a lone badge. */
.rd .fstier .fpills.two{gap:6px}
.rd .fstier .fpills.two .fpill{font-size:9px;letter-spacing:.35px;padding:4px 9px;box-shadow:0 0 0 2.5px var(--panel2)}
.rd .fstier .fpill.cur{background:var(--good)}
/* Amber = you picked this during setup but nothing has been billed for it yet. Distinct from
   green (what you are actually on) and blue (what most businesses pick). */
.rd .fstier .fpill.pend{background:var(--warn);color:#1a1200}
.rd .fstier h3{font-size:15px;font-weight:800;margin:0 0 3px;color:var(--fg)}
.rd .fstier .fwho{font-size:12.5px;color:var(--dim);line-height:1.5;margin:0 0 13px;min-height:32px}
.rd .fstier .fprice{font-size:29px;font-weight:800;letter-spacing:-1px;color:var(--fg);line-height:1}
.rd .fstier .fper{font-size:12px;color:var(--dim);margin:4px 0 13px}
.rd .fstier .fseats{font-size:13.5px;color:var(--fg);font-weight:700;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:13px}
.rd .fstier .fseats span{display:block;font-size:11.5px;color:var(--dim);font-weight:500;margin-top:3px}
.rd .fstier .fbtn{margin-top:auto;text-align:center;font-size:13px;font-weight:700;border-radius:9px;padding:10px 12px;cursor:pointer;border:none;font-family:inherit;background:var(--accent2);color:#fff;transition:background .14s}
.rd .fstier .fbtn:hover{background:var(--accent)}
.rd .fstier .fbtn.ghost{background:var(--panel2);border:1px solid var(--line2);color:var(--mid);cursor:default}
.rd .fsgroup{margin-top:12px;background:var(--panel);border:1px solid var(--line2);border-radius:15px;padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.rd .fsgroup .gl{flex:1;min-width:210px}
.rd .fsgroup b{font-size:15px;color:var(--fg);display:block;margin-bottom:3px}
.rd .fsgroup p{font-size:13px;color:var(--dim);line-height:1.6;margin:0}
.rd .fsnote{margin:34px auto 0;text-align:center;max-width:580px;font-size:15px;color:var(--mid);line-height:1.75}
.rd .fsnote b{color:var(--fg)}
.rd .fsrow.tap{cursor:pointer}
.rd .fsrow.tap:hover{border-color:var(--accent)}
.rd .setin{max-width:620px;margin:0 auto}
.rd .settitle{font-size:26px;font-weight:800;letter-spacing:-.8px;margin:0;color:var(--fg)}
.rd .setintro{font-size:14.5px;color:var(--dim);line-height:1.6;margin:9px 0 0}
.rd .setlbl{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin:30px 0 9px;padding-left:2px}
.rd .setgrp{background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.rd .setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}
.rd .setrow:last-child{border-bottom:none}
.rd .setrow .sk{font-size:15px;color:var(--fg);font-weight:600;display:block}
.rd .setrow .ss{font-size:12.5px;color:var(--dim);margin-top:3px;display:block;line-height:1.5}
.rd .setrow .sv{font-size:13.5px;color:var(--mid);white-space:nowrap;flex:none}
.rd .setrow.tap{cursor:pointer}
.rd .setrow.tap:hover{background:var(--panel2)}
.rd .setfoot{margin:26px 0 0;font-size:13.5px;color:var(--dim);line-height:1.7}
.rd .setfoot b{color:var(--mid)}
.rd .annlist{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.rd .ann{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:17px 19px}
.rd .ann.unread{border-color:var(--accent-dim)}
.rd .ann:not(.unread) .anndot{background:var(--line2)}
.rd .anndate{font-size:12px;color:var(--dim);white-space:nowrap;flex:none}
.rd .ann p{font-size:14.5px;color:var(--mid);line-height:1.65;margin:0}
@media (max-width:860px){.rd .fstiers{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rd .fstiers{grid-template-columns:1fr}
.rd .fstier .fwho{min-height:0}
.rd .fsbody{padding:26px 16px 36px}
.rd .fshero h2{font-size:25px}}
.rd .barbtn.unread .bardot{display:block}
.rd .overlay{position:fixed;inset:0;background:var(--backdrop);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.rd .tmodal{position:relative;width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--mshadow);padding:20px}
.rd .overlay.open .tmodal{animation:mIn .24s cubic-bezier(.2,.7,.2,1) both}
.rd .overlay.fs.open .tmodal{animation:none}
.rd .overlay.fs.open .fsbody{animation:mIn .26s cubic-bezier(.2,.7,.2,1) both}
.rd .toggle{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:3px;gap:3px}
.rd .toggle button{border:none;background:transparent;color:var(--mid);border-radius:8px;padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s,color .2s,box-shadow .2s}
.rd .toggle button:not(.on):hover{color:var(--fg);background:var(--panel)}
.rd .toggle button.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.32)}
.rd .tierbtn.ghost:hover{background:transparent}
@media (prefers-reduced-motion:reduce){.rd.rd .wscard, .rd.rd .greet, .rd .hbar, .rd .overlay.open, .rd .overlay.open .tmodal{animation:none}}
@keyframes fsDriftA{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.05}
    25%{transform:translate3d(-104px,-70px,0) rotate(-9deg);opacity:.11}
    50%{transform:translate3d(-44px,-118px,0) rotate(5deg);opacity:.08}
    75%{transform:translate3d(-112px,-22px,0) rotate(-13deg);opacity:.1}}
@keyframes fsDriftB{
    0%,100%{transform:translate3d(0,0,0) rotate(-14deg);opacity:.032}
    25%{transform:translate3d(92px,64px,0) rotate(-6deg);opacity:.078}
    50%{transform:translate3d(40px,112px,0) rotate(-20deg);opacity:.055}
    75%{transform:translate3d(104px,26px,0) rotate(-9deg);opacity:.072}}
.rd.rd .topbar{position:relative;z-index:2}
.rd.rd .main{position:relative;z-index:1}

/* ---- PATCH: app class collisions + hairline cleanup (applied to the app, kept here so
   the lifted screens stay in one stylesheet). Re-running build_redesign_css.py drops this,
   so re-append it. ---- */
/* The APP owns `.top` (that is its top BAR), so `.sellrow.top` / `.lbrow.top` were being
   painted with the top bar's background. The crown badge is the highlight, not the row. */
/* `.top` in the app is the top BAR (height:56px, display:grid) — it was making the number-one
   row 56px tall and grid-laid-out. The modifier is prefixed instead, per the app's naming rule. */
.rd.rd .sellrow.s-top .sellrank, .rd.rd .lbrow.s-top .lbrank{background:linear-gradient(180deg,#f5c451,#e0a020);color:#3a2600;border-color:transparent;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(224,160,32,.35)}
.rd.rd .sellrow.s-top .sellrank::after, .rd.rd .lbrow.s-top .lbrank::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:crownShine 4.2s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rd.rd .sellrow.s-top .sellrank::after, .rd.rd .lbrow.s-top .lbrank::after{animation:none}}
/* Lifted screens use the redesign's leading, not the app's 1.5, or every row sits taller
   than the mockup (top sellers measured 56px against the mockup's 45px). */
.rd.rd{line-height:normal}
/* One hairline between the last item and the total, not two. */
.rd.rd .exprow.lastitem{border-bottom:0}


/* ---- PATCH round 4 ---- */
/* The hover was a square-cornered band running the full width of a rounded card. Inset it,
   round it, and tint it with the accent instead of a flat panel colour. */
.rd.rd .sellrow, .rd.rd .lbrow{border-radius:10px;margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
.rd.rd .sellrow:hover, .rd.rd .lbrow:hover{background:rgba(59,130,246,.08)}
/* A total is a summary, not another person: give it its own surface at the foot of the card
   instead of one more hairline. */
.rd.rd .exprow.extot{border-top:0;background:var(--panel2);margin:6px -16px 0;padding:13px 16px;border-radius:0 0 13px 13px}
.rd.rd .exprow.extot b{font-size:17px}
.rd.rd .lbval.g{color:var(--good)}
.rd.rd .lbrow .exnote{font-size:12.5px;color:var(--dim);white-space:nowrap}

/* The APP's own .stockcard is a rounded PANEL (border, radius, margin, background). Inside a
   lifted card that read as panels nested inside panels. Lifted rows are rows. */
.rd.rd .stockcard{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}
.rd.rd .stockcard:last-child{border-bottom:0}
.rd.rd .stockcard .autotag{font-size:10px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:6px}
.rd.rd .fcpct{text-align:right;white-space:nowrap;flex:none}
.rd.rd .fcnum{font-weight:800;font-size:18px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .fclbl{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}

/* The panel head, renamed off `.msghead` because the app already uses that class inside
   every message row. Values copied from the redesign's .msghead. */
.rd.rd .msgpanelhead{flex:none;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.rd.rd #messages, .rd.rd .msgpanel{min-height:0}
.rd.rd .msgcompose2 input[type=text], .rd.rd .msgcompose2 input:not([type=file]){margin:0;box-shadow:none;border:none;background:none}
.rd.rd .msgat svg, .rd.rd .msgsendbtn svg{width:19px;height:19px}
/* ...and the other half of that collision: the app's INNER .msghead (name + role + time)
   was inheriting the panel head's bottom rule and padding. */
.rd.rd .msgrow .msghead{display:flex;align-items:baseline;gap:8px;padding:0;margin:0;border-bottom:0}

/* The total row is flush with the card's bottom edge, so the card has to clip it or its
   square corners poke past the rounded ones. */
.rd.rd .scard.actcard{overflow:hidden}
.rd.rd .expcats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd.rd .expcats .dchip{padding:9px 4px;font-size:12.5px;border-radius:9px;font-family:inherit}
.rd.rd .experr{color:var(--bad);font-size:12.5px;min-height:16px;margin-top:8px}
.rd.rd .tipamtbox input{background:none;border:0;outline:none;color:var(--fg);font-size:27px;font-weight:800;
  font-family:"SFMono-Regular",Consolas,monospace;padding:0;margin:0;box-shadow:none;text-align:left}
.rd.rd .exdel{background:none;border:0;color:var(--dim);cursor:pointer;font-size:12px;padding:2px 4px;margin-left:6px;opacity:0;transition:opacity .12s}
.rd.rd .exprow:hover .exdel{opacity:1}
.rd.rd .exdel:hover{color:var(--bad)}

/* Setup: the app's own input/button rules have to be beaten inside these lifted cards. */
.rd.rd .addrow input{flex:1;min-width:0;margin:0;box-shadow:none}
.rd.rd .tmr input{margin:0;box-shadow:none}
.rd.rd #tablesList .chip{cursor:grab}
.rd.rd #tablesList .chip.dragging{opacity:.4}
/* the member popover */
#memberCard.rd{padding:16px}
#memberCard .uc-spaces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#memberCard .uc-space{font-size:12px;font-weight:700;color:var(--accent-lt);background:var(--accent-dim);
  border-radius:8px;padding:5px 10px;white-space:nowrap}
#memberCard .uc-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-top:14px}
#memberCard .uc-status{margin-top:12px;font-size:13px;font-weight:700;color:var(--dim);background:var(--panel2);
  border:1px solid var(--line2);border-radius:10px;padding:9px 12px}
#memberCard .uc-status.on{color:var(--good)}
#memberCard .uc-status.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--good);margin-right:8px;vertical-align:1px}
#memberCard .uc-head{display:flex;align-items:center;gap:12px}
#memberCard .uc-av{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;font-size:20px;background-size:cover;background-position:center;overflow:hidden}
#memberCard .uc-name{font-size:17px;font-weight:800}
#memberCard .uc-role{font-size:12.5px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* the three category buttons share the width, so the row cannot look lopsided */
.rd.rd #sellCats{display:flex}
.rd.rd #sellCats button{flex:1;text-align:center;white-space:nowrap}
/* the old 3-zone preview bar is kept in the DOM (other code writes to it) but the redesign's
   timer row does not show it; [hidden] alone loses to the app's display:flex. */
.rd.rd #timersStations .tmbar{display:none!important}

/* ================= PATCH round 6 ================= */
/* The app's `button.primary{width:100%}` (element+class) leaks into lifted cards and made the
   Tables "Add" and Timers "Save" buttons full-width, covering the input. Lifted buttons are
   inline auto-width. */
.rd.rd .btn{width:auto}
.rd.rd .btn.primary{width:auto;margin:0}
.rd.rd .addrow{display:flex;gap:9px;align-items:stretch}
.rd.rd .addrow .btn{flex:none;white-space:nowrap;padding:10px 20px}
.rd.rd .tmractions{display:flex;gap:9px;margin-top:14px}

/* one arrow only: the JS writes the ▲/▼ direction, so drop the CSS triangle, and make the
   pill red when takings fell */
.rd.rd .statstrend::before{content:none}
.rd.rd .statstrend.down{background:var(--bad-dim,rgba(242,86,75,.14));color:var(--bad)}

/* Expenses/Tips: the amount is a fixed right-hand column so every row lines up, and the total
   sits flush with the card's bottom edge (no stray hairline / gap). */
.rd.rd .examt, .rd.rd .exprow.extot b{min-width:84px;text-align:right;flex:none}
.rd.rd .lbval, .rd.rd .lbrow .exnote{}
.rd.rd .exprow.extot{margin:6px -16px -2px;border-radius:0 0 13px 13px}

/* the counted / amount field: one clean box, mono digits, sign on the baseline, and NO inner
   box appearing on focus */
.rd.rd .modal .mrow-in{display:flex;align-items:baseline;gap:6px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:12px;padding:13px 15px;margin:6px 0 2px}
.rd.rd .modal .mrow-in:focus-within{border-color:var(--accent);background:var(--panel)}
.rd.rd .modal .mrow-in .cur{color:var(--dim);font-size:21px;font-weight:800;font-family:var(--mono);flex:none}
.rd.rd .modal .mrow-in input{flex:1;min-width:0;width:auto;margin:0;padding:0;border:0!important;
  outline:none!important;box-shadow:none!important;background:transparent;color:var(--fg);
  font-size:26px;font-weight:800;font-family:var(--mono)}
.rd.rd .modal .mrow-in input:focus{border:0!important;box-shadow:none!important}

/* the mono/tabular figures the mockup uses on numbers, so digits line up and match its look */
.rd.rd .astatnum, .rd.rd .statshero, .rd.rd .cashexp, .rd.rd .turnnum, .rd.rd .lbval,
.rd.rd .sellrev, .rd.rd .tipamt, .rd.rd .hoursval, .rd.rd .actdur, .rd.rd .shiftdur,
.rd.rd .fcnum{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* member card: roomier, less crammed */
#memberCard.rd{padding:18px 18px 16px;min-width:250px;max-width:290px}
#memberCard .uc-head{gap:13px;margin-bottom:2px}
#memberCard .uc-av{width:58px;height:58px;font-size:22px}
#memberCard .uc-spaces{gap:7px;margin-top:9px}
#memberCard .uc-space{padding:6px 11px}

/* Messages: the rows pop in one after another when the panel opens, instead of a fade.
   Scoped to .entering (set by showSection) so it plays on open, not on every poll. */


/* timers save feedback */
@keyframes savedPulse{0%{box-shadow:0 0 0 0 rgba(53,201,141,.0)}30%{box-shadow:0 0 0 2px rgba(53,201,141,.45)}100%{box-shadow:0 0 0 0 rgba(53,201,141,0)}}
.rd.rd #timersCard.saved{animation:savedPulse .7s ease}

/* ===== PATCH round 6b: modal money fields ===== */
/* The lifted modals carry class="modal rd", so `.rd.rd .modal ...` (which needs a .rd ANCESTOR)
   never matched them. Target the modal-with-.rd directly and beat the app's input rules. */
.modal.rd .mrow-in{display:flex;align-items:baseline;gap:7px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:12px;padding:13px 15px;margin:6px 0 2px}
.modal.rd .mrow-in:focus-within{border-color:var(--accent);background:var(--panel)}
.modal.rd .mrow-in > .cur{color:var(--dim);font-size:21px;font-weight:800;font-family:var(--mono);flex:none;background:none;border:0;padding:0}
.modal.rd .mrow-in > input{flex:1;min-width:0;width:auto;margin:0;padding:0;
  background:transparent!important;border:0!important;outline:none!important;box-shadow:none!important;
  color:var(--fg);font-size:26px;font-weight:800;font-family:var(--mono)!important}
.modal.rd .expcats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:2px 0}
.modal.rd .expcats .dchip{padding:9px 4px;font-size:12.5px;border-radius:9px;font-family:inherit}
.modal.rd .experr{color:var(--bad);font-size:12.5px;min-height:16px}
/* the expense modal was tall with a gap: tighten its label rhythm */
.modal.rd label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--dim);margin:14px 0 5px}
.modal.rd label:first-of-type{margin-top:4px}
.modal.rd > input, .modal.rd .mrow-in + label{margin-top:12px}
.modal.rd #expNote{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:11px 13px;
  color:var(--fg);font-size:14px;font-family:inherit;width:100%;margin:0}
.modal.rd #expNote:focus{outline:none;border-color:var(--accent)}

/* Messages pop in staggered when the tab opens (armed by showSection), not on every poll. */
#msgList.msganim .msgrow:nth-child(1){animation-delay:.02s}
#msgList.msganim .msgrow:nth-child(2){animation-delay:.06s}
#msgList.msganim .msgrow:nth-child(3){animation-delay:.10s}
#msgList.msganim .msgrow:nth-child(4){animation-delay:.14s}
#msgList.msganim .msgrow:nth-child(5){animation-delay:.18s}
#msgList.msganim .msgrow:nth-child(6){animation-delay:.22s}
#msgList.msganim .msgrow:nth-child(7){animation-delay:.26s}
#msgList.msganim .msgrow:nth-child(n+8){animation-delay:.30s}
@media (prefers-reduced-motion:reduce){#msgList.msganim .msgrow{animation:none}}

/* ================= PATCH round 7 ================= */
/* SCHEDULE — copied from the mockup's measured layout: schedsegs flex:1 so + Split / × pin to
   the right edge (aligned column), and a LONE segment stretches to fill so there is no empty
   band. This is the gap he kept flagging. */
#activity .schedrow{flex-wrap:nowrap;gap:12px}
#activity .schedmeta{flex:none;min-width:78px}
#activity .schedsegs{flex:1 1 0%;min-width:0;flex-wrap:nowrap;gap:8px;overflow:visible}
#activity .schedseg{flex:1 1 0%;justify-content:space-between;min-width:0}
#activity .schedseg input[type=time],#activity .schedseg .schedtime{flex:none}
/* typed 24h field replaced the native picker (it followed the browser's language, not ours) */
.rd.rd .schedseg .schedtime{width:5.2em;text-align:center;font-family:var(--mono)}
.rd.rd .schedseg .schedtime:focus{outline:none;color:var(--accent-lt)}
#activity .schedadd{flex:none;margin-left:0}
#activity .schedrow .segrm{flex:none}

/* EXPENSES/TIPS — the delete × is absolutely positioned so it never shifts the amount column;
   item amounts now line up exactly with the total. */
.rd.rd .exprow{position:relative}
.rd.rd .exdel{position:absolute;right:-2px;top:50%;transform:translateY(-50%);margin:0;
  background:none;border:0;color:var(--dim);cursor:pointer;font-size:13px;padding:4px 6px;
  opacity:0;transition:opacity .12s;border-radius:6px}
.rd.rd .exprow:hover .exdel{opacity:1}
.rd.rd .exdel:hover{color:var(--bad);background:var(--panel2)}
/* the amount clears the (hover-only) × by reserving nothing — × overlays the card's own padding */
.rd.rd .exprow .examt{margin-right:0}
/* total sits FLUSH at the very bottom (kill the gap in the Tips card too) */
.rd.rd .scard.actcard{padding-bottom:0;overflow:hidden}
.rd.rd .exprow.extot{margin:6px -16px 0;border-radius:0 0 13px 13px}

/* TIMERS — tighter card, and a remove button on custom-space timers */
.rd.rd #timersCard .collbody{padding-bottom:2px}
.rd.rd #timersOk:empty{display:none}
.rd.rd .tmr{position:relative}
.rd.rd .tmrm{flex:none;margin-left:6px;background:none;border:0;color:var(--dim);cursor:pointer;
  padding:4px 6px;border-radius:7px;display:inline-flex;align-items:center}
.rd.rd .tmrm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rd.rd .tmrm:hover{color:var(--bad);background:var(--panel2)}

/* the save pulse he liked, reusable on any saved modal/card */
.rd .savedpulse, .savedpulse{animation:savedPulse .7s ease}

/* LOG EXPENSE — match the mockup's weight: the amount is the only bold-mono hero; the note is
   a normal-weight field, labels are the small caps the mockup uses. */
.modal.rd #expNote{font-weight:400}
.modal.rd .dpay{font-weight:800}

/* menu: the blue station "redirect" select on each subcategory */
.rd.rd select.mspace{-webkit-appearance:none;appearance:none;margin-left:auto;font-size:11px;font-weight:700;
  color:var(--accent-lt);background-color:var(--accent-dim);border:1px solid transparent;border-radius:7px;
  padding:3px 22px 3px 9px;cursor:pointer;font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238fb8ff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center}
.rd.rd select.mspace option{background:var(--panel);color:var(--fg)}
.rd.rd .mcathead .medit, .rd.rd .msubhead .medit{margin-left:6px}
.rd.rd .mcathead .mcatchev{margin-left:6px}
.rd.rd .mitem .medit{margin-left:2px}

/* ===== PATCH round 8 ===== */
/* expense delete × on the LEFT (overlays the card's left padding on hover, never touches the amount) */

/* Log an expense: a touch more air between fields, less dead space at the bottom */
.modal.rd label{margin:16px 0 6px}
.modal.rd .dpay{margin-top:18px}
.modal.rd{padding-bottom:20px}

/* Messages: the mockup's swoop (translateY, quick), armed on open only. The always-on rule that
   made every poll re-fade is overridden to none. */
.rd.rd .msgpanel .msgrow{animation:none}
@keyframes msgSwoop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#msgList.msganim .msgrow{animation:msgSwoop .3s cubic-bezier(.2,.8,.2,1) both}

/* add-timer picker select */
.modal.rd .tmrpick{-webkit-appearance:none;appearance:none;background:var(--panel2);border:1px solid var(--line2);
  border-radius:10px;padding:11px 34px 11px 13px;color:var(--fg);font-size:14px;font-family:inherit;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868e9a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.modal.rd .tmrpick:focus{outline:none;border-color:var(--accent)}
.modal.rd .tmrpick:disabled{color:var(--dim);cursor:default}
.modal.rd #tmrWarn, .modal.rd #tmrLate{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;
  padding:11px 13px;color:var(--fg);font-size:15px;font-family:var(--mono);width:100%;margin:0}
.modal.rd #tmrWarn:focus, .modal.rd #tmrLate:focus{outline:none;border-color:var(--accent)}


/* ===== PATCH round 9 ===== */
/* expense/tips delete × on the RIGHT, revealed on hover; the amount slides left to make room
   so it never overlaps the number or the title. */
.rd.rd .exprow{position:relative}
.rd.rd .exprow .exdel{position:absolute;right:-2px;top:50%;transform:translateY(-50%);margin:0;background:none;
  border:0;color:var(--dim);cursor:pointer;font-size:13px;padding:4px 6px;opacity:0;transition:opacity .12s;border-radius:6px}
.rd.rd .exprow:hover .exdel{opacity:1}
.rd.rd .exdel:hover{color:var(--bad);background:var(--panel2)}
.rd.rd .exprow .examt{transition:transform .12s}
.rd.rd .exprow:hover .examt{transform:translateX(-22px)}

/* the total row FLUSH at the very bottom — the remaining sliver was the card's own bottom border
   under a rounded extot. Pull it down 1px more and let overflow clip. */
.rd.rd .scard.actcard{padding-bottom:0;overflow:hidden}
.rd.rd .exprow.extot{margin:6px -16px -1px;border-radius:0 0 13px 13px;border-bottom:0}

/* TIMERS: the remove × looked stray — make it a proper round hover button aligned with the fields */
.rd.rd .tmr{position:relative;padding-right:4px}
.rd.rd .tmrm{width:28px;height:28px;border-radius:8px;justify-content:center;margin-left:10px;
  background:var(--panel2);border:1px solid var(--line2)}
.rd.rd .tmrm:hover{color:var(--bad);border-color:var(--bad);background:var(--panel)}
.rd.rd .tmrm svg{width:13px;height:13px}

/* MENU nesting: make subcategories read as nested, not all on one level */
.rd.rd .mcatbody{padding:8px 12px 12px;background:rgba(10,15,26,.35)}
.rd.rd[data-mode="light"] .mcatbody{background:rgba(0,0,0,.03)}
.rd.rd .msubcat{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.rd.rd .msubhead{background:var(--panel2)}
.rd.rd .msubbody{padding:2px 12px 8px 16px;border-left:2px solid var(--accent-dim);margin:0 8px 8px}

/* MESSAGES: the exact mockup animation (viewIn, .32s, .045 apart), one-by-one, armed on open */
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rd.rd .msgpanel .msgrow{animation:none}
#msgList.msganim .msgrow{animation:msgIn .32s cubic-bezier(.2,.7,.2,1) both}
#msgList.msganim .msgrow:nth-child(1){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(2){animation-delay:.045s}
#msgList.msganim .msgrow:nth-child(3){animation-delay:.09s}
#msgList.msganim .msgrow:nth-child(4){animation-delay:.135s}
#msgList.msganim .msgrow:nth-child(5){animation-delay:.18s}
#msgList.msganim .msgrow:nth-child(6){animation-delay:.225s}
#msgList.msganim .msgrow:nth-child(7){animation-delay:.27s}
#msgList.msganim .msgrow:nth-child(8){animation-delay:.315s}
#msgList.msganim .msgrow:nth-child(9){animation-delay:.36s}
#msgList.msganim .msgrow:nth-child(10){animation-delay:.405s}
#msgList.msganim .msgrow:nth-child(n+11){animation-delay:.45s}
@media (prefers-reduced-motion:reduce){#msgList.msganim .msgrow{animation:none}}

/* chat panel: cap the width like the mockup (it was full-width, too big) */
.rd.rd #messages .msgpanel{max-width:820px;margin:0 auto}

/* avatar chip used in Activity + Stats leaderboards (photo when we have it) */
.rd.rd .actav, .rd.rd .lbav{background-size:cover;background-position:center}

/* Log an expense modal: kill the dead space under the button */
.modal.rd{padding-bottom:18px}
.modal.rd .dpay{margin-top:16px;margin-bottom:0}

/* ===== PATCH round 10 ===== */
/* remove the blue accent line under subcategories (he disliked it) */
.rd.rd .msubbody{border-left:0;padding:2px 12px 8px}
/* busiest note sits on the chart label row, right-aligned, subtle */
.rd.rd .chartgrp{display:flex;align-items:baseline;justify-content:space-between}
.rd.rd .chartgrp .statsnote{margin:0;font-size:12px;color:var(--dim);font-weight:600;text-transform:none;letter-spacing:0}
/* TIMER remove ×: hidden until you hover the row, like the expense × */
.rd.rd .tmrm{opacity:0;transition:opacity .12s}
.rd.rd .tmr:hover .tmrm{opacity:1}
/* MODAL bottom gap: empty ok/error lines reserve nothing; tighten the modal foot */
.modal.rd .ok:empty, .modal.rd .experr:empty, .modal.rd .autherr:empty{display:none}
.modal.rd{padding-bottom:16px}
.modal.rd .dpay:last-child, .modal.rd .primary:last-child{margin-bottom:0}
/* premium touch on the expense/tip rows: a soft lift + accent edge on hover */
.rd.rd .exprow:not(.extot){border-radius:8px;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;transition:background .12s}
.rd.rd .exprow:not(.extot):hover{background:rgba(59,130,246,.06)}

/* ===== PATCH round 12: permission panel ===== */
.rd.rd .permdelbtn{display:block;margin:16px auto 4px;padding:9px 22px;border-radius:10px;background:transparent;
  border:1px solid var(--bad);color:var(--bad);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.rd.rd .permdelbtn:hover{background:var(--bad);color:#fff}
.rd.rd .permpanel .permrow{padding:11px 0}
.rd.rd .permpanel .permrow span{font-size:14px;font-weight:600}

/* the app starfield (his ask): sits behind everything, above the grid backdrop */
#appsky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.appstar{position:absolute;border-radius:50%;background:#cfe0ff;box-shadow:0 0 4px rgba(160,196,255,.5);animation:appTwinkle 5s ease-in-out infinite}
@keyframes appTwinkle{0%,100%{opacity:.14;transform:scale(.7)}50%{opacity:.85;transform:scale(1.15)}}
body.stage.app > #app, body.stage.app > #hub, body.stage.app > #auth, body.stage.app .top{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.appstar{animation:none}}

/* ===== PATCH round 13: permission group boxes ===== */
.rd.rd .permgroup{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:4px 14px;margin:12px 0}
.rd.rd .permgroup .pgcat{margin:12px 0 2px;padding-top:0;border-top:0;color:var(--accent-lt);font-size:11px;font-weight:800;letter-spacing:.5px}
.rd.rd .permgroup .pgcat::before{display:none}
.rd.rd .permgroup .permrow:last-child{border-bottom:0}
.rd.rd .permdelwrap{display:flex;justify-content:center;padding:14px 0 4px}
.rd.rd .permdelbtn{display:inline-block;margin:0}

/* ===== PATCH round 14 ===== */
/* leaderboard/expense actcards: symmetric padding (the round-7 extot fix zeroed the BOTTOM on
   every actcard, so waiter/sellers/tips sat high with a top gap). Only extot cards go flush. */
.rd.rd .scard.actcard{padding:6px 16px}
.rd.rd .scard.actcard:has(.exprow.extot){padding-bottom:0}
/* smoother message entrance: a gentle rise + fade, ease-out, a touch longer */
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#msgList.msganim .msgrow{animation:msgIn .42s cubic-bezier(.22,.61,.36,1) both}
/* delete role/space button: unmistakably centred with breathing room */
.rd.rd .permdelwrap{display:flex;justify-content:center;padding:18px 0 6px;margin-top:4px}

/* ===== PATCH round 15: workspace settings ===== */
.rd.rd .gcard{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.rd.rd .memava{width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.rd.rd .memrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.rd.rd .memrow:last-child{border-bottom:0}
.rd.rd .memrow:hover{background:var(--panel)}
.rd.rd .memrow[data-owner]{cursor:default}.rd.rd .memrow[data-owner]:hover{background:transparent}
.rd.rd .memx{font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer}
.rd.rd .memx:hover{color:var(--bad)}
.rd.rd #set .bizbannerhint{color:var(--dim);font-size:12.5px}
.rd.rd #set .imgx{position:absolute}
/* the Delete-role button text was inheriting the accent on part of the word — force one colour */
.rd.rd .permdelbtn, .rd.rd .permdelbtn *{color:inherit}

/* ===== PATCH round 16 ===== */
/* THE BANNER/LOGO TILING BUG: the image was set but never told to cover — so it repeated at
   natural size. */
.rd.rd .bizbanner{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}
.rd.rd .bizlogo{background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
/* opening hours: collapsible sub-block, so the profile card isn't a wall */
.rd.rd .hourscoll{border:1px solid var(--line2);border-radius:11px;margin:14px 0 2px;overflow:hidden}
.rd.rd .hourshead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--fg);background:var(--panel2)}
.rd.rd .hourshead .hourschev{color:var(--dim);transition:transform .15s}.rd.rd .hourshead .hourschev svg{width:15px;height:15px}
.rd.rd .hourscoll.open .hourschev{transform:rotate(180deg)}
.rd.rd .hoursbody{padding:12px 14px}
.rd.rd .hoursbody[hidden]{display:none}
/* member rows shorter (he said too thick) + transfer button aligned */
.rd.rd .memrow{padding:7px 14px}
.rd.rd .memava{width:30px;height:30px;font-size:12px}
.rd.rd .memnm{font-size:13.5px}
.rd.rd .memrole{font-size:11.5px;margin-top:0}
.rd.rd .memava{width:32px;height:32px;font-size:13px}
.rd.rd .memxfer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rd.rd .memxfer-btn{width:100%;justify-content:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--mid);padding:11px}
.rd.rd .memxfer-btn svg{width:16px;height:16px;flex:none}
.rd.rd .memxfer-btn:hover{border-color:var(--accent);color:var(--fg)}

/* ===== PATCH round 17 ===== */
/* the green save pulse works on ANY card/modal, not only .rd ones */
@keyframes savedPulseAny{0%{box-shadow:0 0 0 0 rgba(53,201,141,0)}30%{box-shadow:0 0 0 2px rgba(53,201,141,.5)}100%{box-shadow:0 0 0 0 rgba(53,201,141,0)}}
.savedpulse{animation:savedPulseAny .75s ease}
/* opening-hours header stands apart from the plain inputs above it */
.rd.rd .hourshead{background:var(--panel);border-bottom:1px solid transparent}
.rd.rd .hourscoll{background:var(--panel2)}
.rd.rd .hourscoll.open .hourshead{border-bottom-color:var(--line2)}

/* ===== PATCH round 18 ===== */
/* Staff members: no bordered box — flush rows with hairlines, like the mockup */
.rd.rd #memberRows.gcard{background:none;border:0;border-radius:0}
.rd.rd #memberRows .memrow{padding-left:2px;padding-right:2px}
.rd.rd #memberRows .memrow:not(:last-child){border-bottom:1px solid var(--line)}

/* ===== PATCH round 19: space panel role pills ===== */
.rd.rd .spaceroles{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.rd.rd .spaceroles .daypill{font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:9px;border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel);user-select:none;transition:all .12s}
.rd.rd .spaceroles .daypill:hover{border-color:var(--accent)}
.rd.rd .spaceroles .daypill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .spctype button:disabled{opacity:.55;cursor:default}
.rd.rd .spctype button.on:disabled{opacity:1}

/* ===== PATCH round 20 ===== */
/* item modal Delete button — proper danger look (this modal isn't .rd) */
#itemModal #itemDelete{background:transparent;border:1px solid var(--bad);color:var(--bad);border-radius:11px;
  padding:12px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;flex:none;margin:0}
#itemModal #itemDelete:hover{background:var(--bad);color:#fff}

/* ===== PATCH round 21 ===== */
/* consistent card bottom gap everywhere (match the timers card he likes) + no empty-confirm space */
.rd.rd .collbody{padding:2px 16px 14px}
.rd.rd #timersCard .collbody{padding-bottom:14px}
.rd.rd .collbody .ok:empty, .rd.rd .collbody .autherr:empty{display:none;margin:0}
.rd.rd .collbody > .btn:last-child, .rd.rd .collbody > .primary:last-child, .rd.rd .collbody #saveProf{margin-bottom:0}

/* space TYPE buttons + role pills: less squeezed, more padding */
.rd.rd .spctype{padding:4px;gap:4px}
.rd.rd .spctype button{padding:11px 12px;font-size:13.5px}
.rd.rd .spaceroles{gap:8px;margin-top:6px}
.rd.rd .spaceroles .daypill{padding:9px 15px;font-size:13px}

/* item modal Options: cleaner grouped boxes */
#itemModal .optgroup{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:11px 12px;margin-bottom:9px}
#itemModal .optghead{display:flex;gap:9px;align-items:center;margin-bottom:9px}
#itemModal .optgname{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:9px 11px;color:var(--fg);font-size:13.5px;font-family:inherit;margin:0}
#itemModal .optgname:focus{outline:none;border-color:var(--accent)}
#itemModal .optmulti{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mid);margin:0;white-space:nowrap;cursor:pointer}
#itemModal .optchoice{display:flex;gap:7px;margin-bottom:6px}
#itemModal .optchoice input{background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:9px 11px;color:var(--fg);font-size:13.5px;font-family:inherit;margin:0;flex:1;min-width:0}
#itemModal .optchoice .optprice{flex:none;width:74px}
#itemModal .optchoice input:focus{outline:none;border-color:var(--accent)}
#itemModal .optx{flex:none;width:32px;height:32px;border-radius:8px;background:var(--panel);border:1px solid var(--line2);color:var(--dim);cursor:pointer;font-size:13px}
#itemModal .optx:hover{color:var(--bad);border-color:var(--bad)}

/* ===== PATCH round 22: space padding, delete centre, QR, printers ===== */
/* space Type/pills — more breathing room inside the boxes */
.rd.rd #spaceList .permgroup, .rd.rd #roleList .permgroup{padding:12px 15px}
.rd.rd #spaceList .spctype{padding:5px;gap:5px}
.rd.rd #spaceList .spctype button{padding:13px 12px}
.rd.rd #spaceList .spaceroles{gap:9px;margin-top:8px;padding-bottom:2px}
.rd.rd #spaceList .spaceroles .daypill{padding:10px 16px}
/* delete space/role button — unmistakably centred with room */
.rd.rd .permdelwrap{display:flex;justify-content:center;width:100%;padding:20px 0 6px}
.rd.rd .permdelbtn{margin:0 auto;display:inline-block}

/* QR menu — mockup layout */
.rd.rd .qrhint{font-size:12.5px;color:var(--dim);margin:2px 0 12px;line-height:1.4}
.rd.rd .qrpayrow{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.rd.rd .qrtabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rd.rd .qrtab{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--mid);cursor:pointer;font-family:inherit}
.rd.rd .qrtab:hover{border-color:var(--accent)}
.rd.rd .qrtab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .qrshow{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:20px;text-align:center}
.rd.rd .qrshow-title{font-size:15px;font-weight:800;margin-bottom:14px}
.rd.rd .qrshow-img{width:190px;height:190px;background:#fff;border-radius:12px;padding:10px;box-sizing:border-box}
.rd.rd .qrshow-link{font-family:var(--mono);font-size:13px;color:var(--accent-lt);margin:14px 0}
.rd.rd .qrshow-actions{display:flex;gap:9px;justify-content:center}
.rd.rd .qrshow-actions .btn{gap:7px}

/* printers — mockup rows + pairing console */
.rd.rd .prnlist .prnrow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.rd.rd .prnlist .prnrow:last-child{border-bottom:0}
.rd.rd .prnlist .prnrow:hover{background:var(--panel2)}
.rd.rd .prnlist .prnrow > div:first-child{flex:1;min-width:0}
.rd.rd .prnname{font-size:14.5px;font-weight:700}
.rd.rd .prnstat{font-size:12.5px;color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:7px}
.rd.rd .condot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.rd.rd .condot.on{background:var(--good);box-shadow:0 0 0 3px rgba(53,201,141,.15)}
.rd.rd .prnlist .pchev{color:var(--dim)}.rd.rd .prnlist .pchev svg{width:15px;height:15px}
.rd.rd .conrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 2px}
.rd.rd .constat{font-size:13.5px;font-weight:600;color:var(--mid);display:flex;align-items:center;gap:8px}
.rd.rd .pairbox{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:14px;margin-top:12px}
.rd.rd .pairbox .pairlead{font-size:13px;color:var(--dim);margin-bottom:11px}
.rd.rd .pairfield{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.rd.rd .pairfield .pk{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.rd.rd .pairfield .pv{font-family:var(--mono);font-weight:700;color:var(--accent-lt)}
.rd.rd .pairwait{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mid);margin:11px 0}
.rd.rd .pairwait .spin{width:13px;height:13px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;flex:none}
.rd.rd .pairbox .btn{width:100%;justify-content:center}
@keyframes spin{to{transform:rotate(360deg)}}
/* Takeaway / Delivery now live IN the floor grid as tiles rather than two wide
   buttons underneath it, so they read as two more "tables" (named Takeaway and
   Delivery) instead of a separate control strip. Accent-tinted with a left bar so
   they're still obviously actions, not seated tables. */
.rd.rd #floor .ttile.tqtile{
  border:1px solid var(--accent);
  border-left:4px solid var(--accent);
  background:linear-gradient(155deg,var(--accent-dim) 0%,transparent 82%),var(--panel2);
  cursor:pointer;
}
.rd.rd #floor .ttile.tqtile .ttname{color:var(--accent-lt);display:flex;align-items:center;gap:8px}
.rd.rd #floor .ttile.tqtile .ttname svg{width:18px;height:18px;flex:none}
.rd.rd #floor .ttile.tqtile .tqsub{color:var(--dim)}
.rd.rd #floor .ttile.tqtile:hover{background:linear-gradient(155deg,var(--accent-dim) 0%,transparent 60%),var(--panel)}

/* =====================================================================
   ENTRANCE ANIMATIONS — rebuilt 2026-07-26
   One curve, one timing family, one direction of travel, so a screen arrives
   as a single soft movement instead of several unrelated ones.

   Why this is safe now (it wasn't before):
     - screens paint from cache the instant you click (paintCached + prefetch),
       so nothing animates an empty panel and then re-animates when data lands
     - background polls defer while an entrance is playing (afterEntering)
     - the skip-if-identical guards ignore live minute counters, so a poll no
       longer rebuilds identical tiles mid-animation

   Feel: gentle deceleration (no bounce, no overshoot), a short 10-12px rise,
   generous duration. Floaty rather than snappy.
   Untouched on purpose: crownShine, the ready-dot pulse, loaders, modal opens.
   ===================================================================== */
.rd.rd{--rdE:cubic-bezier(.22,.61,.36,1); --rdT:.44s; --rdTr:.40s; --rdStep:38ms}

@keyframes rdRise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes rdRiseSm{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
@keyframes rdGrow{from{opacity:.35;transform:scaleY(.6)}to{opacity:1;transform:none}}

/* 1. the screen itself — one soft lift, always plays once (the app adds .active) */
main section.active:not(#newOrder){animation:rdRise var(--rdT,.44s) cubic-bezier(.22,.61,.36,1) both}

/* 2. cards + rows inside a screen, gently staggered behind it */
.rd.rd .setwrap .scard,
.rd.rd .stockcard,
.rd.rd .actrow,
.rd.rd .sellrow,
.rd.rd .lbrow,
.rd.rd .exprow,
.rd.rd .turnstat,
.rd.rd .astat,
.rd.rd .statshero,
.rd.rd #floor .ttile{animation:rdRiseSm var(--rdTr) var(--rdE) both}

.rd.rd .setwrap .scard:nth-child(2),.rd.rd .stockcard:nth-child(2),.rd.rd .actrow:nth-child(2),
.rd.rd .sellrow:nth-child(2),.rd.rd .lbrow:nth-child(2),.rd.rd #floor .ttile:nth-child(2),
.rd.rd .astat:nth-child(2){animation-delay:38ms}
.rd.rd .setwrap .scard:nth-child(3),.rd.rd .stockcard:nth-child(3),.rd.rd .actrow:nth-child(3),
.rd.rd .sellrow:nth-child(3),.rd.rd .lbrow:nth-child(3),.rd.rd #floor .ttile:nth-child(3),
.rd.rd .astat:nth-child(3){animation-delay:76ms}
.rd.rd .setwrap .scard:nth-child(4),.rd.rd .stockcard:nth-child(4),.rd.rd .actrow:nth-child(4),
.rd.rd .sellrow:nth-child(4),.rd.rd .lbrow:nth-child(4),.rd.rd #floor .ttile:nth-child(4),
.rd.rd .astat:nth-child(4){animation-delay:114ms}
.rd.rd .setwrap .scard:nth-child(5),.rd.rd .stockcard:nth-child(5),.rd.rd .actrow:nth-child(5),
.rd.rd .sellrow:nth-child(5),.rd.rd .lbrow:nth-child(5),.rd.rd #floor .ttile:nth-child(5),
.rd.rd .astat:nth-child(5){animation-delay:152ms}
.rd.rd .setwrap .scard:nth-child(6),.rd.rd .stockcard:nth-child(6),.rd.rd .actrow:nth-child(6),
.rd.rd .sellrow:nth-child(6),.rd.rd .lbrow:nth-child(6),.rd.rd #floor .ttile:nth-child(6){animation-delay:190ms}
.rd.rd .setwrap .scard:nth-child(n+7),.rd.rd .stockcard:nth-child(n+7),.rd.rd .actrow:nth-child(n+7),
.rd.rd .sellrow:nth-child(n+7),.rd.rd .lbrow:nth-child(n+7),.rd.rd #floor .ttile:nth-child(n+7){animation-delay:228ms}

/* 3. chart bars grow from the baseline (right for a bar chart) on the same clock */
.rd.rd .chart .bar{transform-origin:bottom center;animation:rdGrow var(--rdTr) var(--rdE) both}
.rd.rd .chart .bar:nth-child(2){animation-delay:30ms}
.rd.rd .chart .bar:nth-child(3){animation-delay:60ms}
.rd.rd .chart .bar:nth-child(4){animation-delay:90ms}
.rd.rd .chart .bar:nth-child(5){animation-delay:120ms}
.rd.rd .chart .bar:nth-child(6){animation-delay:150ms}
.rd.rd .chart .bar:nth-child(n+7){animation-delay:180ms}

/* 4. messages keep their own cascade (Panos likes it) — matched to the same curve */
#msgList.msganim .msgrow{animation:rdRiseSm .34s cubic-bezier(.22,.61,.36,1) both}

@media (prefers-reduced-motion:reduce){
  main section.active:not(#newOrder),
  .rd.rd .setwrap .scard,.rd.rd .stockcard,.rd.rd .actrow,.rd.rd .sellrow,.rd.rd .lbrow,
  .rd.rd .exprow,.rd.rd .turnstat,.rd.rd .astat,.rd.rd .statshero,
  .rd.rd #floor .ttile,.rd.rd .chart .bar,#msgList.msganim .msgrow{animation:none}
}

/* Inventory row spacing (layout, not animation — kept from the earlier pass).
   Rows were packed at 13px with a 3px gap under each name and read as one block. */
.rd.rd .stockcard{padding:17px 2px}
.rd.rd .stockcard .sc-name{line-height:1.35}
.rd.rd .stockcard .sc-sub{margin-top:6px;line-height:1.45}
.rd.rd .stockcard .sc-actions{gap:7px}/* ---- BILLING screen (ported from the mockup's #billingCard) ---------------- */
#billingCard .billhero, /* ---- BILLING screen (ported from the mockup's #billingCard) ---------------- */
#prefsHub .billhero{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  background:linear-gradient(135deg,var(--accent-dim),transparent 80%);
  border:1px solid var(--line2);border-radius:14px;padding:16px 17px;margin:4px 0 6px}#billingCard .billamt .bl, #billingCard .billmeta .bl, #prefsHub .billamt .bl, #prefsHub .billmeta .bl{font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}#billingCard .billamt .bv, #prefsHub .billamt .bv{font-size:32px;font-weight:800;letter-spacing:-1px;
  font-family:var(--mono);color:var(--fg);margin-top:3px;line-height:1}#billingCard .billamt .bs, #prefsHub .billamt .bs{font-size:12.5px;color:var(--dim);margin-top:6px;max-width:34ch;line-height:1.45}#billingCard .billmeta, #prefsHub .billmeta{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}#billingCard .billmeta .bv2, #prefsHub .billmeta .bv2{font-size:14.5px;font-weight:700;color:var(--fg);margin-top:3px}#billingCard .billgrp, #prefsHub .billgrp{border:1px solid var(--line2);border-radius:13px;overflow:hidden;
  background:var(--panel2);margin-bottom:4px}#billingCard .billrow, #prefsHub .billrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 14px;border-bottom:1px solid var(--line)}#billingCard .billrow:last-child, #prefsHub .billrow:last-child{border-bottom:0}#billingCard .billrow.col, #prefsHub .billrow.col{display:block}#billingCard .billrow-top, #prefsHub .billrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}#billingCard .bk, #prefsHub .bk{display:block;font-size:14px;font-weight:650;color:var(--fg)}#billingCard .bsub, #prefsHub .bsub{display:block;font-size:12px;color:var(--dim);margin-top:3px;line-height:1.45}#billingCard .bvv, #prefsHub .bvv{font-size:13.5px;font-weight:700;color:var(--mid);white-space:nowrap;font-family:var(--mono)}#billingCard .bgo, #prefsHub .bgo{font-size:13px;font-weight:700;color:var(--accent-lt);white-space:nowrap}#billingCard .billrow.tap, #prefsHub .billrow.tap{cursor:pointer;transition:background .14s}#billingCard .billrow.tap:hover, #prefsHub .billrow.tap:hover{background:var(--panel)}#billingCard .billrow .seatbar, #prefsHub .billrow .seatbar{margin:11px 0 8px}#billingCard .bhint, #prefsHub .bhint{font-size:12px;color:var(--dim);line-height:1.5}#billingCard .billempty, #prefsHub .billempty{padding:18px 14px;font-size:13px;color:var(--dim);line-height:1.5;text-align:center}#billingCard .billfoot, #prefsHub .billfoot{font-size:12.5px;color:var(--dim);line-height:1.6;margin:14px 2px 0}#billingCard .billfoot b, #prefsHub .billfoot b{color:var(--mid)}

/* The Group row's button sits outside .fstier, and `.rd .fstier .fbtn` only styles
   buttons inside a tier card — so it fell back to the browser default. (The mockup
   carried these as inline styles on that one button.) */
.rd .fsgroup .fbtn{background:var(--panel2);border:1px solid var(--line2);color:var(--mid);
  padding:11px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:border-color .14s,color .14s}
.rd .fsgroup .fbtn:hover{border-color:var(--accent);color:var(--accent-lt)}

/* ---- FULLSCREEN WINDOWS: bind to the LIVE app's variables ------------------
   redesign.css was authored against the mockup, where `--page` is the page
   background and `--bar` is the top-bar surface. The live app uses neither with
   those meanings — it defines `--bar:#7ab0ff` (a light blue accent), which is why
   the window's top bar came out bright blue and the window itself transparent.
   These rules restate the surfaces using the variables the live app actually has.
   Scoped to the three fullscreen windows so nothing else is affected. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#settingsCard.overlay.fs, #checkoutCard.overlay.fs{
  position:fixed; inset:0; z-index:120; padding:0;
  background:var(--bg);                       /* opaque: this is a window, not a sheet */
}
#billingCard.overlay.fs .tmodal,
#plansCard.overlay.fs .tmodal,
#annCard.overlay.fs .tmodal{
  background:var(--bg); width:100%; height:100%; max-width:none; max-height:none;
  border-radius:0; padding:0; box-shadow:none; display:flex; flex-direction:column; overflow:hidden;
}#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, #prefsHub .fsbar{
  background:var(--panel);                    /* NOT --bar (that is an accent here) */
  border-bottom:1px solid var(--line2); color:var(--mid);
}#billingCard .fsbody, #plansCard .fsbody, #annCard .fsbody, #prefsHub .fsbody{
  flex:1; min-height:0; overflow-y:auto; padding:26px 22px 40px;
}#billingCard .fsin, #plansCard .fsin, #annCard .fsin, #prefsHub .fsin{ margin:0 auto; width:100%; }/* Match the workspace name in the app bar (.wslabel): 14px / 700 / --mid /
   -0.2px. It was --fg here, which reads as highlighted next to the muted app one. */
#billingCard .fst, #plansCard .fst, #annCard .fst, which reads as highlighted next to the muted app one. */
#prefsHub .fst, #prefsHub .fst{
  color:var(--mid); font-weight:700; font-size:14px; letter-spacing:-.2px;
}#billingCard .fshome, #plansCard .fshome, #annCard .fshome, #billingCard .fsx, #plansCard .fsx, #annCard .fsx, #prefsHub .fshome, #prefsHub .fsx{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--dim);cursor:pointer;transition:background .14s,color .14s;
}#billingCard .fshome:hover, #plansCard .fshome:hover, #annCard .fshome:hover, #billingCard .fsx:hover, #plansCard .fsx:hover, #annCard .fsx:hover, #prefsHub .fshome:hover, #prefsHub .fsx:hover{ background:var(--panel2); color:var(--fg); }#billingCard .fshome svg, #plansCard .fshome svg, #annCard .fshome svg, #billingCard .fsx svg, #plansCard .fsx svg, #annCard .fsx svg, #prefsHub .fshome svg, #prefsHub .fsx svg{ width:17px;height:17px; }#billingCard .fsdiv, #plansCard .fsdiv, #annCard .fsdiv, #prefsHub .fsdiv{ width:1px;height:18px;background:var(--line2); }#billingCard .fsbrand img, #plansCard .fsbrand img, #annCard .fsbrand img, #prefsHub .fsbrand img{ height:17px;width:auto;display:block; }#billingCard .fsbl, #plansCard .fsbl, #annCard .fsbl, #prefsHub .fsbl{ display:flex;align-items:center;gap:10px;justify-self:start; }#billingCard .fsbr, #plansCard .fsbr, #annCard .fsbr, #checkoutCard .fsbr, #prefsHub .fsbr{ justify-self:end; }#billingCard .fsbrand, #plansCard .fsbrand, #annCard .fsbrand, #prefsHub .fsbrand{ justify-self:center; }

/* ---- Fullscreen windows: CONTINUE the app's backdrop -----------------------
   Panos wanted the same background carrying on, not a fresh copy restarting.
   #bgart / #bgart2 / #appsky are body-level and position:fixed, so they keep
   running regardless of what is on top. Rather than drawing a second set inside
   the window, the window is transparent and the APP's content is hidden with
   visibility (which preserves layout and scroll position) — so the marks and
   stars you were already watching stay exactly where they were, mid-drift. */
body.fswin-open #app{visibility:hidden}
/* Settings and Checkout belong here too. They were added to the opaque rule above but not to
   this one, so they alone painted a flat --bg over the drifting marks and stars: the window
   looked like its background had been deleted. Every fullscreen window is transparent and
   lets the app backdrop run behind it. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#settingsCard.overlay.fs, #checkoutCard.overlay.fs,
#billingCard.overlay.fs .tmodal, #plansCard.overlay.fs .tmodal, #annCard.overlay.fs .tmodal,
#settingsCard.overlay.fs .tmodal, #checkoutCard.overlay.fs .tmodal{
  background:transparent;
}/* the window's OWN art copies are redundant now — the real ones show through */
#billingCard .fsart, #billingCard .fsart2, #plansCard .fsart, #plansCard .fsart2, #annCard .fsart, #annCard .fsart2, /* the window's OWN art copies are redundant now — the real ones show through */
#prefsHub .fsart, #prefsHub .fsart2, #prefsHub .fsart{ display:none }/* the bar stays solid so the title never sits on moving artwork */
/* No blur: the frosted bar made the crisp line-art icons look smeared. Solid. */
#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, #checkoutCard .fsbar, /* the bar stays solid so the title never sits on moving artwork */
/* No blur: the frosted bar made the crisp line-art icons look smeared. Solid. */
#prefsHub .fsbar, #prefsHub .fsbar{ background:var(--panel); }/* top-bar icons: match the app's own chrome proportions (34px hit area, 17px glyph
   was too small against the sidebar's icons) */
#billingCard .fshome, #plansCard .fshome, #annCard .fshome, #billingCard .fsx, #plansCard .fsx, #annCard .fsx, 17px glyph
   was too small against the sidebar's icons) */
#prefsHub .fshome, #prefsHub .fshome, #prefsHub .fsx{ width:36px;height:36px;border-radius:10px }#billingCard .fshome svg, #plansCard .fshome svg, #annCard .fshome svg, #billingCard .fsx svg, #plansCard .fsx svg, #annCard .fsx svg, #prefsHub .fshome svg, #prefsHub .fsx svg{
  width:19px;height:19px;stroke-width:2;
}
/* the Billing ⇄ Plans link that replaced the close button */
/* Shaped like the app's own "Free plan · 1/3" chip rather than a bordered button,
   which read as a stray form control up in the chrome. */
.fslink{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:700;color:var(--accent-lt);cursor:pointer;
  font-family:inherit;transition:border-color .14s,background .14s;white-space:nowrap}
.fslink:hover{border-color:var(--accent);background:var(--panel)}

/* No blur anywhere on the fullscreen windows. `.rd.rd .overlay` carries
   backdrop-filter:blur(6px) for the small modals; on a fullscreen window that
   smeared the whole backdrop, so the drifting marks and stars behind it looked
   muddy and the crisp bar icons looked soft. These windows are opaque-by-content,
   not frosted sheets. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#settingsCard.overlay.fs, #checkoutCard.overlay.fs{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}/* Top bar layout: back arrow alone on the left; plan chip + house on the right. */
#billingCard .fsbr, #plansCard .fsbr, #annCard .fsbr, #checkoutCard .fsbr, /* Top bar layout: back arrow alone on the left; plan chip + house on the right. */
#prefsHub .fsbr, #prefsHub .fsbr{
  display:flex; align-items:center; gap:10px;
}
/* the plan chip reuses the app's own .planbadge look, just sized for the bar */
.fsplan{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--accent-lt);
  font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:border-color .14s,background .14s}
.fsplan:hover{border-color:var(--accent);background:var(--panel)}
.fsplan svg{width:14px;height:14px;fill:currentColor;stroke:none;flex:none}
.fsplan .psep{opacity:.5;font-weight:600}
.fsplan .pcount{font-family:var(--mono);color:var(--fg)}
.fsplan.full{border-color:var(--bad);color:var(--bad)}
.fsplan.full .pcount{color:var(--bad)}/* Match the app's own top bar exactly. Measured from `.top` in the live app:
   background --side (#12161f), a --line bottom border, 56px tall, 19px wordmark.
   Previously this bar used --panel and --line2 with a 17px logo, which read as a
   slightly different, slightly heavier bar every time a window opened. */
#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, slightly heavier bar every time a window opened. */
#prefsHub .fsbar, #prefsHub .fsbar{
  /* --topbar, NOT --side: the live app has no --side (that is a mockup name), so
     var(--side) resolved to nothing and the bar rendered transparent. Third time
     this class of bug has bitten — always check the variable exists here first. */
  background:var(--topbar); border-bottom:1px solid var(--line); height:56px;
}#billingCard .fsbrand img, #plansCard .fsbrand img, #annCard .fsbrand img, #prefsHub .fsbrand img{ height:19px; }

/* NO ANIMATION ON THE WINDOW CHROME. `.rd.rd .overlay.open` runs `ovIn` (a 0.18s
   fade) on the whole overlay, which fades the top bar in with it — that is the
   flash/darkening when opening Billing or switching to Plans. The bar must be
   there instantly and never move; only the content below it changes. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#billingCard.overlay.fs.open, #plansCard.overlay.fs.open, #annCard.overlay.fs.open{
  animation:none !important;
}#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, #billingCard.overlay.fs.open .tmodal, #plansCard.overlay.fs.open .tmodal, #annCard.overlay.fs.open .tmodal, #prefsHub .fsbar{
  animation:none !important; transition:none !important;
}/* Optical alignment of the wordmark. Measured, every item in the bar shares the
   same centre line (28.5px in a 56px bar) — but the Arthur PNG carries a little
   more empty space below the glyph than above, so it reads as sitting low.
   1px of optical correction; nothing else in the bar moves. */
#billingCard .fsbrand img, #plansCard .fsbrand img, #annCard .fsbrand img, so it reads as sitting low.
   1px of optical correction; nothing else in the bar moves. */
#prefsHub .fsbrand img, #prefsHub .fsbrand img{
  position:relative; top:-1px;
}/* Plans sat 139px down the page with a lot of dead space above the headline.
   Pull the whole thing up so it starts near the top of the window. */
#plansCard .fsbody, /* Plans sat 139px down the page with a lot of dead space above the headline.
   Pull the whole thing up so it starts near the top of the window. */
#prefsHub .fsbody{ padding-top:14px; }#plansCard .fshero, #prefsHub .fshero{ margin-top:0; padding-top:8px; }#plansCard .fshero h2, #prefsHub .fshero h2{ margin-top:0; }

/* Takeaway / Delivery must NOT look like a table that needs paying — both were
   solid accent-blue with a left bar, which is exactly the "needs paying" style.
   These are ACTIONS, not statuses: dashed outline, no status bar, icon-led. */
.rd.rd #floor .ttile.tqtile{
  border:1.5px dashed var(--accent) !important;
  border-left:1.5px dashed var(--accent) !important;
  background:transparent !important;
  box-shadow:none;
}
.rd.rd #floor .ttile.tqtile:hover{
  background:var(--accent-dim) !important;
  border-style:solid !important;
}
.rd.rd #floor .ttile.tqtile .ttname{ color:var(--accent-lt); }
.rd.rd #floor .ttile.tqtile .ttsub{ color:var(--dim); }/* .fsbody is a flex row; .fsin picked up auto margins and was being centred
   VERTICALLY as well as horizontally, which is where the ~130px of dead space
   above the Plans headline came from. Pin it to the top. */
#billingCard .fsin, #plansCard .fsin, #annCard .fsin, which is where the ~130px of dead space
   above the Plans headline came from. Pin it to the top. */
#prefsHub .fsin, #prefsHub .fsin{
  align-self:flex-start; margin-top:0;
}/* .fsbody is a COLUMN flex, so its justify-content:center was centring the content
   VERTICALLY — that was the ~130px of dead space above the Plans headline, not a
   margin. Start the content at the top and let it scroll normally. */
/* Billing/Announcements start at the top (long, scrolling content). Plans is a
   short fixed-height page, so it sits CENTRED — equal gap above and below —
   rather than hugging the top with a big void underneath. */
#billingCard .fsbody, #annCard .fsbody, .rd #billingCard .fsbody, .rd #annCard .fsbody, so it sits CENTRED — equal gap above and below —
   rather than hugging the top with a big void underneath. */
#prefsHub .fsbody, .rd #prefsHub .fsbody{
  justify-content:flex-start !important;
}#plansCard .fsbody, .rd #plansCard .fsbody, #prefsHub .fsbody, .rd #prefsHub .fsbody{
  justify-content:center !important;
}

/* ===================================================================
   NEW ORDER screen — clipping fix + a proper visual pass (2026-07-26)
   =================================================================== */

/* THE CLIPPING BUG. #menuItemsGrid is a scroll container (overflow-y:auto) and the
   first row of cards sat flush against its top edge (measured: 0px). A card lifts
   2px on hover and draws an accent border when selected, and all of that was being
   sliced off at the top — the "highlight gets cut" Panos kept reporting. Inset the
   scroll box and pull it back with a negative margin so the layout doesn't shift.
   !important because the app sets grid properties on this id with !important too. */
#menuItemsGrid{
  padding:8px 8px 12px !important;
  margin:-8px -8px 0 !important;
}

/* --- the item cards ------------------------------------------------------- */
#menuItemsGrid .menubtn{
  background:var(--panel) !important;
  border:1px solid var(--line2) !important;
  border-radius:14px !important;
  padding:15px 14px !important;
  gap:8px;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#menuItemsGrid .menubtn:hover{
  border-color:var(--accent) !important;
  background:var(--panel2) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55);
}
#menuItemsGrid .menubtn:active{ transform:translateY(0); }
/* the name leads, the price is quiet and monospaced so columns line up */
#menuItemsGrid .menubtn .mname{ font-size:14.5px; font-weight:700; line-height:1.3; letter-spacing:-.1px; }
#menuItemsGrid .menubtn .mprice{
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  color:var(--accent-lt); background:transparent; padding:0;
}

/* --- category / subcategory chips ----------------------------------------
   Matched to the control room's space toggle, measured from the live app:
   8px radius, 7px 15px padding, 13px/700, no border; inactive = transparent on
   --mid, active = solid --accent on white. The pill-with-outline version here
   looked like a different, cheaper control. */
.no-menu .chipstrip .chip{
  border-radius:8px !important; padding:7px 15px !important;
  font-size:13px !important; font-weight:700 !important;
  border:0 !important; background:transparent !important; color:var(--mid) !important;
  transition:background .14s ease, color .14s ease;
}
.no-menu .chipstrip .chip:hover{ background:var(--panel2) !important; color:var(--fg) !important; }
.no-menu .chipstrip .chip.active,
.no-menu .chipstrip .chip.on{
  background:var(--accent) !important; color:#fff !important;
}

/* --- the order/cart panel ------------------------------------------------- */
.no-cart{
  background:var(--panel) !important;
  border:1px solid var(--line2) !important;
  border-radius:16px !important;
}
.no-carthead{
  font-size:14px; font-weight:800; letter-spacing:-.2px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.no-cart .cempty{ color:var(--dim); font-size:13px; }
.no-total{
  border-top:1px solid var(--line2); padding-top:14px; margin-top:14px;
  font-size:15px; font-weight:800;
}
.no-total span:last-child{ font-family:var(--mono); font-size:19px; letter-spacing:-.5px; }
.noSend, #sendOrder{
  border-radius:12px !important; font-weight:800 !important; letter-spacing:-.1px;
}

/* ===== TAKE PAYMENT popup ==================================================
   Discount / Split / Tip as expandable rows with an icon, a one-line hint and
   the current value, then a plain money breakdown and two big pay buttons.
   The row BODIES are the app's existing #tableDiscount / #tableSplit / #tipBox
   nodes, so all the money logic is untouched. */
.payrow2{border:1px solid var(--line2);border-radius:13px;background:var(--panel2);margin-bottom:10px;overflow:hidden}
.payrow2.open{border-color:var(--accent)}
.payrow2-head{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;color:inherit}
.payrow2 .pr-ic{width:38px;height:38px;border-radius:10px;background:var(--accent-dim);color:var(--accent-lt);
  display:flex;align-items:center;justify-content:center;flex:none}
.payrow2 .pr-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.payrow2 .pr-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.payrow2 .pr-lbl{font-size:15.5px;font-weight:800;color:var(--fg)}
.payrow2 .pr-sub{font-size:12px;color:var(--dim)}
.payrow2 .pr-val{font-size:14px;font-weight:800;color:var(--mid);white-space:nowrap;font-family:var(--mono)}
.payrow2.open .pr-val{color:var(--accent-lt)}
.payrow2 .pr-chev{display:flex;color:var(--dim);transition:transform .2s;flex:none}
.payrow2 .pr-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.payrow2.open .pr-chev{transform:rotate(180deg)}
.payrow2 .tm-panel,.payrow2 #tipBox{padding:0 14px 14px}

.paysum2{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
/* the values sat hard against the right edge of the panel — pulled in 12px, the same right rail
   the bill card on the table uses, so the two readouts line up with each other (Panos, 2026-07-29) */
.paysum2 .ps-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--dim);padding:4px 12px 4px 0}
.paysum2 .ps-row span:last-child{font-family:var(--mono);color:var(--mid)}
.paysum2 .ps-row span.g{color:var(--good)}
.paysum2 .ps-tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding:12px 12px 0 0;border-top:1px solid var(--line2);font-size:16px;font-weight:800;color:var(--fg)}
.paysum2 .ps-tot b{font-family:var(--mono);font-size:30px;letter-spacing:-1.2px}

.paybtns2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
.paybig{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:13px;
  border:0;font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter .14s}
.paybig:hover{filter:brightness(1.07)}
.paybig.cash{background:var(--good);color:#04121f}
.paybig.card{background:var(--accent);color:#fff}

/* Pay buttons: label + icon only, no amount (the Total above is the one source of
   truth for the figure). Slightly calmer than the first pass. */
#payMethods .paybig{ font-size:15px; letter-spacing:-.1px; }
#payMethods .paybig svg{ width:17px; height:17px; opacity:.9; }
/* the two secondary actions read as secondary, not as two more pay buttons */
#payMethods #paySplitBtn, #payMethods #payBack{
  width:100%; margin-top:9px; padding:13px; border-radius:12px;
  background:transparent; border:1px solid var(--line2); color:var(--mid);
  font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:border-color .14s, color .14s, background .14s;
}
#payMethods #paySplitBtn:hover{ border-color:var(--accent); color:var(--accent-lt); background:var(--panel2); }
#payMethods #payBack:hover{ border-color:var(--line2); color:var(--fg); background:var(--panel2); }

/* Payment method picker: Cash / Card as toggles (either, or both for a part-cash
   part-card bill), then one Proceed button. Replaces the old "Cash+card" mode. */
.paypick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 12px}
.paypick-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
  border-radius:12px;border:1.5px solid var(--line2);background:var(--panel);
  color:var(--mid);font-size:14.5px;font-weight:800;font-family:inherit;cursor:pointer;
  transition:border-color .14s,background .14s,color .14s}
.paypick-btn:hover{border-color:var(--accent);color:var(--fg)}
.paypick-btn svg{width:17px;height:17px;opacity:.9}
#payCash.on{background:var(--good);border-color:var(--good);color:#04121f}
#payCard.on{background:var(--accent);border-color:var(--accent);color:#fff}
#paySplitBox{padding:0 14px 14px}

.paybig.proceed{width:100%;margin-top:16px;background:var(--accent);color:#fff}
.paybig.proceed.dim{background:var(--panel2);color:var(--dim);cursor:default;filter:none}
.paybig.proceed:disabled{cursor:default}
#payMethods .ps-row#psMethodRow span:last-child,
#payMethods .ps-row#psSplitRow span:last-child{color:var(--fg);font-family:inherit;font-weight:700}

/* renderSplitPay() still draws its own "Record payment" button, which is now
   redundant — Proceed at the bottom submits, whatever the method. Hidden rather
   than removed from the JS so the split maths and its live "€x left" note (which
   Proceed validates against) stay exactly as they are. */
#paySplitBox #psConfirm{ display:none !important; }

/* 1. Breathing room under the table name in the payment popup — the first row was
      sitting right against "Table 1 #2072e". */
#payMethods .payrow2:first-of-type{ margin-top:16px; }

/* 2. The grey rule under the New Order top bar (Table / Round / People) cut the
      screen in half. Replaced with a soft accent line that reads as part of the
      design rather than a divider dropped on top of it. */
.no-bar, .rd.rd .no-bar{
  border-bottom:1px solid transparent !important;
  border-image:linear-gradient(90deg, var(--accent) 0%, rgba(59,130,246,.25) 45%, transparent 85%) 1 !important;
}

/* 3. Takeaway / Delivery: filled action buttons, no outline at all. Table tiles are
      either dashed (empty) or carry a coloured left status bar, so anything with a
      border still read as "a table". These are solid, borderless and icon-led. */
#floorTables .ttile.tqtile{
  border:0 !important;
  background:var(--accent-dim) !important;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.18) !important;
}
#floorTables .ttile.tqtile:hover{
  background:var(--accent) !important;
  box-shadow:none !important;
}
#floorTables .ttile.tqtile:hover .ttname,
#floorTables .ttile.tqtile:hover .ttsub{ color:#fff !important; }

/* Kitchen ticket header: label, order id, round + elapsed, chevron — all on one
   line. The id is deliberately quiet (it is a reference, not a status) and sits
   BEFORE the timer so the eye still lands on how long the ticket has been waiting. */
.kcube .khead{ display:flex; align-items:center; gap:8px; }
.kcube .khead b{ flex:none; }
.kcube .koid{
  font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--dim);
  background:var(--panel2); border-radius:6px; padding:2px 7px; flex:none; letter-spacing:.3px;
}
.kcube .kwait{ margin-left:auto; }

/* ---- Kitchen ticket refinements (2026-07-26) ------------------------------ */

/* Round as a small blue chip, elapsed time as plain muted text — the single green
   "R1 · 9′" pill was one heavy blob. Mockup proportions, current colour language. */
.kcube .kround{
  font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.3px;
  color:var(--accent-lt); background:var(--accent-dim);
  border-radius:6px; padding:2px 7px; flex:none;
}
.kcube .kwait{
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--dim);
  background:none !important; border-radius:0; padding:0; margin-left:0; flex:none;
}
.kcube .khead{ gap:7px; }
/* Label left, everything else right. It may SHRINK, though: `flex:none` above meant a
   real table name ("Table Μπαλκόνι 2") held its full width and pushed the timer and the
   collapse arrow off the end of the ticket (Panos, 2026-07-27). Now the name is the only
   part that gives way, and it truncates instead of stealing the chips' space. */
.kcube .khead b{ margin-right:auto; flex:0 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Quantities were hard to read against the item name. Give them the accent and a
   little width so the eye picks out "4×" before the word. */
.kcube .kitems > .kgroup > div:not(.klabel){ font-size:13.5px; line-height:1.65; }
.kcube .kitems .kqty, .kcube .kitems b{ color:var(--accent-lt); font-family:var(--mono); font-weight:800; }

/* Ready / Mark ready was oversized. Thinner, tighter, still the primary action. */
.kcube .kactions button.primary{
  font-size:13px !important; font-weight:700 !important;
  padding:8px 12px !important; border-radius:9px !important; min-height:0 !important;
}

/* Collapsed = header only. The action button stayed visible, so a folded ticket was
   still two rows tall; the mockup shows just the table and its details. */
.kcube.collapsed .kactions{ display:none !important; }
.kcube.collapsed{ padding-bottom:12px; }

/* Header order: table name + order id together on the left (they identify the
   ticket), then a spacer, then round + timer on the right (its live status). */
.kcube .khead b{ margin-right:0 !important; }
.kcube .kspacer{ flex:1 1 auto; }
.kcube .koid{ margin-right:2px; }

/* Quantities: bold + accent so "5×" reads before the item name at a glance across
   a busy pass. This is the number a cook acts on. */
.kcube .kitems > .kgroup > div:not(.klabel){
  font-size:13.5px; line-height:1.7; color:var(--fg);
}
.kcube .kitems > .kgroup > div:not(.klabel)::first-line{ font-weight:400; }
.kcube .kqty{ color:var(--accent-lt) !important; font-weight:800 !important; font-family:var(--mono) !important; }

/* READY tickets: "Picked up" takes the width, the bell is a small square nudge
   beside it in amber (it is a reminder, not the main action). Mockup proportions. */
.kcube .kactions button.primary{ flex:1 1 auto; }
.kcube .kactions button.ping{
  flex:0 0 auto !important; width:42px; padding:8px 0 !important;
  background:transparent !important; border:1px solid var(--line2) !important;
  color:var(--warn) !important; border-radius:9px !important;
  display:flex; align-items:center; justify-content:center;
}
.kcube .kactions button.ping:hover{ border-color:var(--warn) !important; background:rgba(245,166,35,.10) !important; }
.kcube .kactions button.ping svg{ width:17px; height:17px; }
.kcube .kactions button.ping.cooling{ opacity:.45; }

/* Covers on a kitchen ticket: person icon + count, quiet, left of the round chip. */
.kcube .kppl{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--dim);
}
.kcube .kppl svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* READY tickets: "Picked up" is a QUIET outlined button, not a bright blue primary.
   The work is already done at this point — picking up is an acknowledgement, not
   the urgent action "Mark ready" is. Matching the bell's weight makes the pair read
   as one control group instead of two mismatched buttons. Targeted by data-kdone so
   "Mark ready" (data-kready) keeps its blue. */
.kcube .kactions button[data-kdone]{
  background:transparent !important;
  border:1px solid var(--line2) !important;
  color:var(--fg) !important;
  font-size:13px !important; font-weight:700 !important;
  padding:9px 12px !important; border-radius:10px !important;
  min-height:38px !important; box-shadow:none !important;
}
.kcube .kactions button[data-kdone]:hover{
  border-color:var(--good) !important; color:var(--good) !important;
  background:rgba(53,201,141,.08) !important;
}
/* bell: same height and radius as the button beside it, so they line up exactly */
.kcube .kactions button.ping{
  width:38px !important; min-height:38px !important; padding:0 !important;
  border-radius:10px !important; border:1px solid var(--line2) !important;
}
.kcube .kactions{ align-items:stretch; gap:8px; }

/* =====================================================================
   2026-07-29 — these are LAST in the file ON PURPOSE. .memrole, .memnm and
   .memrow are each redefined three or four times higher up, so anything
   placed above would silently lose. Do not move this block.
   ===================================================================== */

/* ---- member row --------------------------------------------------------
   It stacked name, email AND role in one vertical column, which is exactly
   why it read as cramped. Now: name and email stacked on the left, the role
   beside them on the right and vertically centred, Remove at the far edge. */
.rd.rd .memtxt{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nm role" "mail role";align-items:center;column-gap:12px;min-width:0}
.rd.rd .memtxt .memnm{grid-area:nm;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .memtxt .memmail{grid-area:mail;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .memtxt .memrole{grid-area:role;justify-self:end;margin-top:0;white-space:nowrap}

/* ---- PC: screens and modals that were still phone-width -----------------
   Same complaint as the table popup: a narrow column stranded in the middle
   of a wide screen. Stats was capped at 680px inside a 1099px container. */
@media (min-width:1000px) and (min-height:700px){
  /* Inventory and Activity are LISTS capped at 680px inside a 1099px container, exactly as Stats
     was. Lists gain more from width than forms do — more rows readable without scrolling. */
  .rd.rd #statsPanel.setwrap,
  .rd.rd #inventoryPanel.setwrap,
  .rd.rd #activityPanel.setwrap{max-width:1040px}
  /* Two traps here. First, .rd sits on the modal ITSELF, not on an ancestor, so a
     `.rd.rd #cashupModal` selector never matches. Second, the 430px is an INLINE style attribute
     in the markup, which no selector can outrank — hence !important, which is the correct tool
     for exactly this case and not laziness. */
  #cashupModal .modal.rd{max-width:620px!important}
}

/* The checkout screen reuses the signup wizard's field styling, which is sentence case.
   Without this the app-wide .tmodal label rule SHOUTS every label on that one screen and the
   two checkouts stop looking like the same thing. */
.rd.rd #koBody .nwlbl{text-transform:none;letter-spacing:0}


/* ============================================================================
   GRID OFF — Panos, 2026-08-03. Matches the same change in backdrop.css: the
   fullscreen table modal drew its own copy of the grid, so without this it
   would be the one surface in the app still showing lines.
   ★ TO RESTORE: delete this block.
   ============================================================================ */
.rd.rd .overlay.fs .tmodal::before { background-image: none !important; }