/* Dice & Dumplings staff theme. One file, the same copy in every app and in the
   staff front door (dd-staff). Everything staff see is built on these tokens:
   the door's own pages, the bookings/bar admin, the rewards till and admin, the
   ordering admin and the kitchen and bar screens.

   Sections: 1 tokens  2 base  3 decor (gradients, pips, shapes)  4 shell
   (top bar, dropdowns, drawer, sidebar, sub-nav, page layout)  5 components
   (dd-* classes)  6 legacy token bridge (the older --bg-0/--accent-1 names the
   apps' own stylesheets still use)  7 print.                                 */

/* ---------- 1. tokens ---------- */
:root{
  --dd-bg:#0f0b14;--dd-bg-2:#171120;--dd-bg-3:#1f1829;
  --dd-surface:rgba(255,255,255,.045);--dd-surface-2:rgba(255,255,255,.08);--dd-surface-3:rgba(255,255,255,.12);--dd-solid:#1b1524;--dd-solid-2:#231b2e;
  --dd-line:rgba(255,255,255,.09);--dd-line-2:rgba(255,255,255,.16);--dd-field:rgba(6,4,10,.42);--dd-scrim:rgba(6,4,10,.74);
  --dd-text:#f6f3f8;--dd-muted:#a79fb3;--dd-faint:#6e6779;--dd-on-accent:#fff;
  --dd-coral:#ff6a3d;--dd-amber:#ffb347;--dd-red:#e8452f;--dd-teal:#34d3a6;--dd-blue:#5b8cff;--dd-violet:#9b7bff;--dd-rose:#ff5c7a;--dd-gold:#ffd166;
  --dd-accent:var(--dd-coral);--dd-accent-soft:rgba(255,106,61,.14);--dd-accent-line:rgba(255,106,61,.42);--dd-accent-text:#ffa385;
  --dd-pos:var(--dd-teal);--dd-pos-bg:rgba(52,211,166,.14);--dd-neg:var(--dd-rose);--dd-neg-bg:rgba(255,92,122,.14);--dd-warn:var(--dd-amber);--dd-warn-bg:rgba(255,179,71,.15);--dd-info:var(--dd-blue);--dd-info-bg:rgba(91,140,255,.16);
  --dd-grad:linear-gradient(135deg,#ffb347 0%,#ff6a3d 55%,#e8452f 100%);
  --dd-grad-cool:linear-gradient(135deg,#5b8cff 0%,#9b7bff 100%);
  --dd-grad-teal:linear-gradient(135deg,#34d3a6 0%,#5b8cff 100%);
  --dd-grad-text:linear-gradient(90deg,#ffd166,#ff6a3d 60%,#ff5c7a);
  --dd-radius:18px;--dd-radius-sm:12px;--dd-radius-xs:8px;
  --dd-shadow:0 18px 50px rgba(0,0,0,.5);--dd-shadow-sm:0 6px 18px rgba(0,0,0,.35);--dd-glow:0 10px 30px rgba(255,106,61,.28);
  --dd-focus:0 0 0 3px rgba(255,106,61,.28);
  --dd-font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --dd-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --dd-top-h:58px;--dd-side-w:238px;--dd-max:1360px;
  --dd-page-bg:
    radial-gradient(1100px 680px at 6% -12%,rgba(255,106,61,.17),transparent 62%),
    radial-gradient(900px 620px at 104% 108%,rgba(91,140,255,.14),transparent 60%),
    radial-gradient(760px 520px at 88% -4%,rgba(255,179,71,.10),transparent 55%),
    radial-gradient(600px 460px at -6% 92%,rgba(155,123,255,.10),transparent 55%),
    linear-gradient(165deg,#0f0b14 0%,#171120 48%,#110d17 100%);
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--dd-bg);background-image:var(--dd-page-bg);background-attachment:fixed;color:var(--dd-text);font-family:var(--dd-font);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--dd-accent-text);text-decoration:none}a:hover{color:#ffc1ad}
h1,h2,h3,h4{margin:0 0 8px;letter-spacing:-.3px;line-height:1.2}
h1{font-size:28px;font-weight:800;letter-spacing:-.6px}h2{font-size:18px;font-weight:700}h3{font-size:14.5px;font-weight:700}h4{font-size:13px;font-weight:700;color:var(--dd-muted)}
p{margin:0 0 10px}
::selection{background:rgba(255,106,61,.35)}
:focus-visible{outline:none;box-shadow:var(--dd-focus)}
img{max-width:100%}
.dd-muted{color:var(--dd-muted)}.dd-faint{color:var(--dd-faint)}.dd-small{font-size:12.5px}.dd-mono{font-family:var(--dd-mono);font-variant-numeric:tabular-nums}
.dd-hidden{display:none!important}
.dd-grad-text{background:var(--dd-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.dd-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-muted);display:flex;align-items:center;gap:8px;margin:0 0 8px}
.dd-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dd-grad);box-shadow:0 0 10px rgba(255,106,61,.7)}

/* ---------- 3. decor: gradients, pips and shapes (pure CSS, no images) ---------- */
.dd-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dd-decor::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.7px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 55%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 55%)}
.dd-decor .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen}
.dd-decor .b1{width:520px;height:520px;left:-160px;top:-200px;background:radial-gradient(circle at 30% 30%,rgba(255,106,61,.55),rgba(255,106,61,0) 70%)}
.dd-decor .b2{width:620px;height:620px;right:-220px;bottom:-260px;background:radial-gradient(circle at 60% 60%,rgba(91,140,255,.45),rgba(91,140,255,0) 70%)}
.dd-decor .b3{width:380px;height:380px;right:14%;top:-160px;background:radial-gradient(circle,rgba(255,209,102,.35),rgba(255,209,102,0) 70%)}
.dd-decor .flag{position:absolute;right:-40px;top:var(--dd-top-h);width:360px;height:180px;opacity:.16;background:var(--dd-grad-cool);clip-path:polygon(0 0,100% 18%,0 62%);filter:blur(1px)}
.dd-decor .die{position:absolute;left:-60px;bottom:-40px;width:260px;height:260px;border:2px solid rgba(255,255,255,.12);border-radius:54px;transform:rotate(-14deg);opacity:.5}
.dd-decor .die::before,.dd-decor .die::after{content:'';position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:150px 0 0 rgba(255,255,255,.12),0 150px 0 rgba(255,255,255,.12),150px 150px 0 rgba(255,255,255,.12)}
.dd-decor .die::before{left:40px;top:40px}
.dd-decor .die::after{left:115px;top:115px;box-shadow:none}
.dd-decor .ring{position:absolute;width:520px;height:520px;right:-180px;top:30%;border-radius:50%;border:1px solid rgba(255,255,255,.07);opacity:.9}
.dd-decor .ring::after{content:'';position:absolute;inset:60px;border-radius:50%;border:1px dashed rgba(255,255,255,.06)}
body > :where(:not(.dd-decor):not(.dd-top):not(.dd-drawer):not(.dd-subnav):not(.dd-toast):not(.dd-modal-bg):not(.toast):not(.modal-bg)){position:relative;z-index:1}

/* ---------- 4. shell ---------- */
.dd-top{position:sticky;top:0;z-index:60;height:var(--dd-top-h);background:rgba(15,11,20,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--dd-line)}
.dd-top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,106,61,.55) 30%,rgba(91,140,255,.45) 70%,transparent)}
.dd-top-in{height:100%;display:flex;align-items:center;gap:6px;padding:0 14px;max-width:none}
.dd-brand{display:flex;align-items:center;gap:10px;color:var(--dd-text);font-weight:800;letter-spacing:-.2px;padding:6px 8px 6px 2px;border-radius:12px;white-space:nowrap}
.dd-brand:hover{color:#fff;background:var(--dd-surface)}
.dd-brand img{height:30px;width:auto;display:block}
.dd-brand span{font-size:14px}.dd-brand span em{font-style:normal;color:var(--dd-muted);font-weight:600;margin-left:6px}
.dd-burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-text);cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.dd-burger i,.dd-burger i::before,.dd-burger i::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative}
.dd-burger i::before,.dd-burger i::after{content:'';position:absolute;left:0}.dd-burger i::before{top:-6px}.dd-burger i::after{top:6px}
.dd-groups{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
.dd-g{position:relative}
.dd-g-btn{appearance:none;font:inherit;font-weight:700;font-size:13.5px;color:var(--dd-muted);background:transparent;border:0;padding:9px 12px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s;text-decoration:none}
.dd-g-btn:hover,.dd-g.open>.dd-g-btn{color:var(--dd-text);background:var(--dd-surface)}
.dd-g.on>.dd-g-btn{color:var(--dd-text)}
.dd-g.on>.dd-g-btn::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--dd-grad)}
.dd-g-btn .chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:.15s}
.dd-g.open>.dd-g-btn .chev{transform:rotate(225deg) translateY(-3px)}
.dd-g-btn .cnt{margin-left:2px}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:rgba(27,21,36,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--dd-line-2);border-radius:16px;box-shadow:var(--dd-shadow);padding:8px;display:none;z-index:70}
.dd-menu.wide{min-width:600px;display:none;grid-template-columns:1fr 1fr}
.dd-g.open>.dd-menu{display:block}.dd-g.open>.dd-menu.wide{display:grid}
.dd-menu.right{left:auto;right:0}
.dd-menu::before{content:'';position:absolute;top:-6px;left:22px;width:10px;height:10px;background:inherit;border-left:1px solid var(--dd-line-2);border-top:1px solid var(--dd-line-2);transform:rotate(45deg)}
.dd-menu.right::before{left:auto;right:22px}
.dd-mi{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:0 10px;padding:8px 10px;border-radius:11px;color:var(--dd-text);text-decoration:none;transition:.12s}
.dd-mi:hover,.dd-mi:focus-visible{background:var(--dd-surface-2);color:#fff}
.dd-mi.on{background:var(--dd-accent-soft)}
.dd-mi .ico{width:34px;height:34px;border-radius:10px;background:var(--dd-surface-2);display:flex;align-items:center;justify-content:center;color:var(--dd-accent-text);grid-row:span 2}
.dd-mi.on .ico{background:var(--dd-grad);color:#fff}
.dd-mi b{font-size:13.5px;font-weight:700;line-height:1.2}
.dd-mi small{grid-column:2;color:var(--dd-muted);font-size:11.5px;line-height:1.3}
.dd-mi .cnt{grid-column:3;grid-row:span 2}
.dd-mi .ext{font-size:11px;color:var(--dd-faint);grid-column:3;grid-row:span 2}
.dd-menu .dd-sep{height:1px;background:var(--dd-line);margin:6px 8px}
.dd-menu .dd-mh{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dd-faint);padding:8px 10px 4px}
.dd-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.dd-clock{font-family:var(--dd-mono);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--dd-muted);padding:6px 10px;border:1px solid var(--dd-line);border-radius:10px;background:var(--dd-surface)}
.dd-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--dd-muted);padding:6px 10px;border-radius:999px;border:1px solid var(--dd-line);background:var(--dd-surface)}
.dd-status i{width:8px;height:8px;border-radius:50%;background:var(--dd-pos);box-shadow:0 0 10px rgba(52,211,166,.8)}
.dd-status.warn i{background:var(--dd-warn);box-shadow:0 0 10px rgba(255,179,71,.8)}.dd-status.bad i{background:var(--dd-neg);box-shadow:0 0 10px rgba(255,92,122,.8)}
.dd-user .dd-g-btn{padding:5px 10px 5px 5px;color:var(--dd-text);border:1px solid var(--dd-line);background:var(--dd-surface)}
.dd-avatar{width:28px;height:28px;border-radius:9px;background:var(--dd-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;box-shadow:0 4px 12px rgba(255,106,61,.35)}
.dd-user .who{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.dd-user .who small{font-size:10.5px;color:var(--dd-muted);font-weight:600}
.cnt,.dd-cnt{display:inline-flex;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--dd-red);color:#fff;font-size:11px;font-weight:800;align-items:center;justify-content:center;line-height:1}
.cnt.soft{background:var(--dd-surface-3);color:var(--dd-text)}

/* drawer (phones and tablets) */
.dd-drawer{position:fixed;inset:0;z-index:80;display:none}
.dd-drawer.open{display:block}
.dd-drawer .scrim{position:absolute;inset:0;background:var(--dd-scrim);backdrop-filter:blur(4px)}
.dd-drawer .dd-sheet{position:absolute;left:0;top:0;bottom:0;width:min(340px,88vw);background:var(--dd-solid);border-right:1px solid var(--dd-line-2);box-shadow:var(--dd-shadow);overflow:auto;padding:14px 12px 30px;animation:dd-slide .18s ease-out}
@keyframes dd-slide{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.dd-drawer .dd-sheet .dd-brand{margin-bottom:8px}
.dd-drawer .grp{margin:6px 0}
.dd-drawer .grp>button{width:100%;appearance:none;font:inherit;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dd-muted);background:transparent;border:0;padding:10px 8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:10px}
.dd-drawer .grp>button:hover{background:var(--dd-surface)}
.dd-drawer .grp>a{display:block;font-weight:800;padding:10px 8px;color:var(--dd-text);border-radius:10px}
.dd-drawer .grp .items{display:none;padding:0 0 6px}
.dd-drawer .grp.open .items{display:block}
.dd-drawer .grp .items .dd-mi{padding:7px 8px}
.dd-drawer .close{position:absolute;right:10px;top:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-text);font-size:18px;cursor:pointer}

/* sidebar + page layout */
.dd-page{max-width:var(--dd-max);margin:0 auto;padding:22px 18px 70px}
.dd-layout{display:grid;grid-template-columns:var(--dd-side-w) minmax(0,1fr);gap:22px;max-width:var(--dd-max);margin:0 auto;padding:18px 18px 70px}
.dd-side{position:sticky;top:calc(var(--dd-top-h) + 14px);align-self:start;max-height:calc(100vh - var(--dd-top-h) - 28px);overflow:auto;display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--dd-surface);border:1px solid var(--dd-line);border-radius:var(--dd-radius);backdrop-filter:blur(10px)}
.dd-side-h{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-faint);padding:8px 10px 6px;display:flex;align-items:center;gap:8px}
.dd-side-h::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--dd-grad)}
.dd-si{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;color:var(--dd-muted);font-weight:600;font-size:13.5px;text-decoration:none;transition:.12s;position:relative}
.dd-si:hover{background:var(--dd-surface-2);color:var(--dd-text)}
.dd-si.on{background:var(--dd-accent-soft);color:var(--dd-text);font-weight:700}
.dd-si.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--dd-grad)}
.dd-si .ico{width:18px;height:18px;flex:0 0 auto;color:var(--dd-accent-text);opacity:.85}
.dd-si.on .ico{opacity:1}
.dd-si .cnt{margin-left:auto}
.dd-si .ext{margin-left:auto;font-size:11px;color:var(--dd-faint)}
.dd-side .dd-sep{height:1px;background:var(--dd-line);margin:6px 4px}
.dd-side .foot{padding:8px 10px 2px;font-size:12px;color:var(--dd-faint);line-height:1.5}
.dd-side .foot a{color:var(--dd-muted)}
.dd-subnav{display:none;position:sticky;top:var(--dd-top-h);z-index:50;gap:6px;overflow-x:auto;padding:8px 12px;background:rgba(15,11,20,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--dd-line);scrollbar-width:none}
.dd-subnav::-webkit-scrollbar{display:none}
.dd-subnav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-muted);font-size:12.5px;font-weight:700;white-space:nowrap}
.dd-subnav a.on{background:var(--dd-accent-soft);border-color:var(--dd-accent-line);color:var(--dd-text)}
.dd-main{min-width:0}
.dd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dd-head h1{margin:0}.dd-head .sub{color:var(--dd-muted);margin-top:4px}
.dd-head .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* compact shell for full-screen tablet screens (kitchen, bar) */
body.dd-compact{--dd-top-h:46px}
.dd-compact .dd-top{height:46px}
.dd-compact .dd-brand img{height:24px}

@media (max-width:1180px){.dd-menu.wide{min-width:440px}.dd-g-btn{padding:9px 8px;font-size:13px}.dd-groups{margin-left:2px}.dd-brand span{display:none}}
@media (max-width:920px){
  .dd-groups{display:none}.dd-burger{display:inline-flex}
  .dd-layout{grid-template-columns:1fr;padding:12px 14px 60px;gap:12px}
  .dd-side{display:none}.dd-subnav{display:flex}
  .dd-clock{display:none}.dd-user .who{display:none}
  .dd-page{padding:16px 14px 60px}
  h1{font-size:24px}
}
@media (max-width:480px){.dd-brand span{display:none}.dd-top-in{padding:0 10px}}

/* ---------- 5. components ---------- */
.dd-btn,.dd-btn:visited{appearance:none;font:inherit;font-weight:700;font-size:13.5px;color:var(--dd-text);background:var(--dd-surface-2);border:1px solid var(--dd-line-2);padding:9px 15px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2;transition:.15s;white-space:nowrap}
.dd-btn:hover{background:var(--dd-surface-3);color:#fff;transform:translateY(-1px)}
.dd-btn:active{transform:none}
.dd-btn.primary{background:var(--dd-grad);border-color:transparent;color:#fff;box-shadow:var(--dd-glow)}
.dd-btn.primary:hover{filter:brightness(1.07);color:#fff}
.dd-btn.cool{background:var(--dd-grad-cool);border-color:transparent;color:#fff;box-shadow:0 10px 26px rgba(91,140,255,.28)}
.dd-btn.ghost{background:transparent;border-color:var(--dd-line)}
.dd-btn.danger{background:var(--dd-neg-bg);border-color:rgba(255,92,122,.45);color:#ffb3c2}
.dd-btn.pos{background:var(--dd-pos-bg);border-color:rgba(52,211,166,.45);color:#9ef0d3}
.dd-btn.sm{padding:6px 11px;font-size:12.5px;border-radius:10px}.dd-btn.lg{padding:13px 22px;font-size:15px;border-radius:14px}
.dd-btn.block{width:100%}
.dd-btn[disabled],.dd-btn.busy{opacity:.55;cursor:not-allowed;transform:none}
.dd-card{background:var(--dd-surface);border:1px solid var(--dd-line);border-radius:var(--dd-radius);padding:18px;backdrop-filter:blur(8px);position:relative}
.dd-card.solid{background:var(--dd-solid)}
.dd-card.glow{box-shadow:var(--dd-shadow)}
.dd-card.accent{border-color:var(--dd-accent-line);background:linear-gradient(160deg,rgba(255,106,61,.14),rgba(255,106,61,.03) 60%)}
.dd-card.tight{padding:12px 14px}
.dd-card h2{margin-bottom:10px}
.dd-card .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dd-stat{background:var(--dd-surface);border:1px solid var(--dd-line);border-radius:var(--dd-radius);padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;position:relative}
.dd-stat::after{content:'';position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--dd-grad);opacity:.12;filter:blur(18px)}
.dd-stat.cool::after{background:var(--dd-grad-cool)}.dd-stat.teal::after{background:var(--dd-grad-teal)}
.dd-stat b{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.dd-stat span{color:var(--dd-muted);font-size:12.5px;font-weight:600}
.dd-stat small{color:var(--dd-faint);font-size:11.5px}
.dd-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--dd-surface-2);color:var(--dd-muted);border:1px solid transparent}
.dd-badge.pos{background:var(--dd-pos-bg);color:#8ff0cf}.dd-badge.neg{background:var(--dd-neg-bg);color:#ffb3c2}.dd-badge.warn,.dd-badge.adj{background:var(--dd-warn-bg);color:#ffd79b}.dd-badge.info{background:var(--dd-info-bg);color:#b9caff}.dd-badge.accent{background:var(--dd-accent-soft);color:var(--dd-accent-text)}
.dd-badge i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dd-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--dd-line);background:var(--dd-surface);font-size:12.5px;font-weight:700;color:var(--dd-muted);cursor:pointer;transition:.12s}
.dd-chip:hover{color:var(--dd-text);background:var(--dd-surface-2)}.dd-chip.on{background:var(--dd-accent-soft);border-color:var(--dd-accent-line);color:var(--dd-text)}
.dd-tabs{display:flex;gap:4px;padding:4px;background:var(--dd-surface);border:1px solid var(--dd-line);border-radius:14px;width:max-content;max-width:100%;overflow-x:auto}
.dd-tabs button,.dd-tabs a{appearance:none;font:inherit;font-weight:700;font-size:13px;border:0;background:transparent;color:var(--dd-muted);padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:.12s}
.dd-tabs .on{background:var(--dd-grad);color:#fff;box-shadow:0 6px 16px rgba(255,106,61,.3)}
.dd-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
.dd-field label,.dd-label{font-size:12px;font-weight:700;color:var(--dd-muted);letter-spacing:.02em}
.dd-input,.dd-field input,.dd-field select,.dd-field textarea{font:inherit;font-size:14px;color:var(--dd-text);background:var(--dd-field);border:1px solid var(--dd-line-2);border-radius:12px;padding:10px 12px;width:100%;transition:.15s;min-width:0}
.dd-input:focus,.dd-field input:focus,.dd-field select:focus,.dd-field textarea:focus{outline:none;border-color:var(--dd-accent);box-shadow:var(--dd-focus)}
.dd-field .hint{font-size:11.5px;color:var(--dd-faint)}
.dd-search{position:relative;display:block}
.dd-search input{display:block;width:100%;padding-left:40px;font-size:16px;padding-top:13px;padding-bottom:13px;border-radius:16px}
.dd-search::before{content:'';position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-9px;border:2px solid var(--dd-muted);border-radius:50%}
.dd-search::after{content:'';position:absolute;left:25px;top:50%;width:7px;height:2px;margin-top:3px;background:var(--dd-muted);transform:rotate(45deg)}
.dd-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dd-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dd-faint);padding:8px 10px;border-bottom:1px solid var(--dd-line)}
.dd-table td{padding:10px;border-bottom:1px solid var(--dd-line);vertical-align:middle}
.dd-table tr:last-child td{border-bottom:0}
.dd-table tr.click{cursor:pointer}.dd-table tr.click:hover td{background:var(--dd-surface)}
.dd-table td.num,.dd-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.dd-scroll{overflow-x:auto}
.dd-list{display:flex;flex-direction:column;gap:8px}
.dd-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dd-grid{display:grid;gap:14px}
.dd-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.dd-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.dd-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dd-grid.auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (max-width:900px){.dd-grid.c3,.dd-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dd-grid.c2,.dd-grid.c3,.dd-grid.c4{grid-template-columns:1fr}}
.dd-empty{padding:26px 18px;text-align:center;color:var(--dd-muted);border:1px dashed var(--dd-line-2);border-radius:var(--dd-radius);background:var(--dd-surface)}
.dd-empty b{display:block;color:var(--dd-text);font-size:15px;margin-bottom:4px}
.dd-alert{padding:11px 14px;border-radius:12px;border:1px solid var(--dd-line-2);background:var(--dd-surface);font-size:13.5px;margin-bottom:12px}
.dd-alert.neg{background:var(--dd-neg-bg);border-color:rgba(255,92,122,.4);color:#ffc5d0}.dd-alert.pos{background:var(--dd-pos-bg);border-color:rgba(52,211,166,.4);color:#b6f5e2}.dd-alert.warn{background:var(--dd-warn-bg);border-color:rgba(255,179,71,.4);color:#ffe2b8}.dd-alert.info{background:var(--dd-info-bg);border-color:rgba(91,140,255,.4);color:#cfdbff}
.dd-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;z-index:100;background:var(--dd-solid-2);border:1px solid var(--dd-line-2);color:var(--dd-text);padding:11px 16px;border-radius:14px;box-shadow:var(--dd-shadow);font-weight:600;font-size:13.5px;max-width:min(92vw,520px);animation:dd-pop .18s ease-out}
.dd-toast.neg{border-color:rgba(255,92,122,.5)}.dd-toast.pos{border-color:rgba(52,211,166,.5)}
@keyframes dd-pop{from{transform:translate(-50%,10px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.dd-modal-bg{position:fixed;inset:0;background:var(--dd-scrim);backdrop-filter:blur(6px);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.dd-modal{background:var(--dd-solid);border:1px solid var(--dd-line-2);border-radius:var(--dd-radius);box-shadow:var(--dd-shadow);padding:22px;width:100%;max-width:560px;max-height:92vh;overflow:auto;animation:dd-pop .18s ease-out;transform:none}
.dd-progress{height:8px;border-radius:999px;background:var(--dd-surface-2);overflow:hidden}
.dd-progress i{display:block;height:100%;border-radius:999px;background:var(--dd-grad)}
.dd-progress.cool i{background:var(--dd-grad-cool)}.dd-progress.teal i{background:var(--dd-grad-teal)}
.dd-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dd-pos);box-shadow:0 0 10px rgba(52,211,166,.7)}
.dd-dot.bad{background:var(--dd-neg);box-shadow:0 0 10px rgba(255,92,122,.7)}.dd-dot.warn{background:var(--dd-warn);box-shadow:0 0 10px rgba(255,179,71,.7)}.dd-dot.off{background:var(--dd-faint);box-shadow:none}
.dd-tile{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--dd-radius);border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-text);text-decoration:none;transition:.15s;position:relative;overflow:hidden;min-height:120px}
.dd-tile:hover{border-color:var(--dd-line-2);background:var(--dd-surface-2);transform:translateY(-2px);color:#fff}
.dd-tile .ico{width:40px;height:40px;border-radius:12px;background:var(--dd-grad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--dd-glow)}
.dd-tile.cool .ico{background:var(--dd-grad-cool);box-shadow:0 8px 22px rgba(91,140,255,.3)}.dd-tile.teal .ico{background:var(--dd-grad-teal);box-shadow:0 8px 22px rgba(52,211,166,.3)}
.dd-tile b{font-size:15px}.dd-tile span{color:var(--dd-muted);font-size:12.5px}
.dd-tile .ico svg{width:20px;height:20px}
.dd-hero{position:relative;overflow:hidden;border-radius:calc(var(--dd-radius) + 4px);border:1px solid var(--dd-line-2);padding:22px 24px;background:linear-gradient(135deg,rgba(255,106,61,.22),rgba(155,123,255,.12) 55%,rgba(91,140,255,.16));box-shadow:var(--dd-shadow)}
.dd-hero::before{content:'';position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:var(--dd-grad);opacity:.22;filter:blur(40px)}
.dd-hero::after{content:'';position:absolute;left:38%;bottom:-120px;width:240px;height:240px;border-radius:50%;background:var(--dd-grad-cool);opacity:.18;filter:blur(40px)}
.dd-hero>*{position:relative}
.dd-hero h1{font-size:30px}
.dd-hero .pips{position:absolute;right:18px;top:16px;width:64px;height:64px;border-radius:16px;border:2px solid rgba(255,255,255,.18);transform:rotate(12deg)}
.dd-hero .pips i{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55)}
.dd-hero .pips i:nth-child(1){left:10px;top:10px}.dd-hero .pips i:nth-child(2){right:10px;top:10px}.dd-hero .pips i:nth-child(3){left:25px;top:25px}.dd-hero .pips i:nth-child(4){left:10px;bottom:10px}.dd-hero .pips i:nth-child(5){right:10px;bottom:10px}
.dd-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dd-pos)}
.dd-live i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(52,211,166,.6);animation:dd-pulse 1.6s infinite}
.dd-live.off{color:var(--dd-muted)}.dd-live.off i{animation:none;box-shadow:none}
@keyframes dd-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,166,.6)}70%{box-shadow:0 0 0 8px rgba(52,211,166,0)}100%{box-shadow:0 0 0 0 rgba(52,211,166,0)}}
.dd-sk{background:linear-gradient(90deg,var(--dd-surface) 25%,var(--dd-surface-2) 37%,var(--dd-surface) 63%);background-size:400% 100%;animation:dd-sk 1.4s ease infinite;border-radius:8px;min-height:14px}
@keyframes dd-sk{0%{background-position:100% 0}100%{background-position:0 0}}
.dd-kbd{font-family:var(--dd-mono);font-size:11px;padding:2px 6px;border-radius:6px;border:1px solid var(--dd-line-2);background:var(--dd-surface);color:var(--dd-muted)}

/* ---------- 6. legacy token bridge: the apps' own stylesheets keep working, in the new palette ---------- */
:root{
  --bg-0:var(--dd-bg);--bg-1:var(--dd-bg-2);--bg-2:var(--dd-bg-3);
  --accent-1:var(--dd-coral);--accent-2:var(--dd-red);--grad-accent:var(--dd-grad);
  --text:var(--dd-text);--muted:var(--dd-muted);--faint:var(--dd-faint);
  --panel:var(--dd-surface);--panel-hover:var(--dd-surface-2);--panel-solid:var(--dd-solid);
  --line:var(--dd-line);--line-2:var(--dd-line-2);--field-bg:var(--dd-field);--scrim:var(--dd-scrim);
  --pos:var(--dd-pos);--neg:var(--dd-neg);--adj:var(--dd-warn);--info:var(--dd-info);
  --pos-bg:var(--dd-pos-bg);--neg-bg:var(--dd-neg-bg);--adj-bg:var(--dd-warn-bg);--info-bg:var(--dd-info-bg);
  --accent-bg:var(--dd-accent-soft);--accent-line:var(--dd-accent-line);--focus-ring:var(--dd-focus);
  --radius:var(--dd-radius);--radius-sm:var(--dd-radius-sm);--radius-xs:var(--dd-radius-xs);
  --font:var(--dd-font);--bg-page:var(--dd-page-bg);--shadow-card:var(--dd-shadow);
  /* ordering app names */
  --bg:var(--dd-bg);--bg-soft:var(--dd-bg-2);--card:var(--dd-solid);--card-2:var(--dd-solid-2);--ink:var(--dd-text);
  --accent:var(--dd-coral);--accent-dark:var(--dd-red);--accent-soft:var(--dd-accent-soft);--ok:var(--dd-pos);--warn:var(--dd-warn);--shadow:var(--dd-shadow-sm);
  /* door names */
  --panel-2:var(--dd-solid-2);--gold:var(--dd-gold);
}

/* ---------- 7. print ---------- */
@media print{.dd-top,.dd-side,.dd-subnav,.dd-decor,.dd-drawer{display:none!important}body{background:#fff;color:#000}}