/* La Única admin suite — shared shell. Solid brand colors only, no gradients.
   Palette: Fiesta Fuchsia #D81E5B · Magenta Purple #5E0F80 · Marigold #F39200
            Turquoise #009FA8 · Lime Verde #7CB518 (brand-kit/colors.json)

   ⚠️ ACCENT HISTORY. `--pink` KEEPS ITS NAME because ~200 rules across the
   suite reference it; it is "the accent variable", historically pink.
   · 2026-08-19 (owner): fuchsia → deep turquoise #00808A — pink read too loud
     for a tool staff stare at all shift.
   · 2026-09-02 (owner: "I don't like the accent color"): turquoise → indigo
     #635BFF, then the same day ("I don't like the purple, use a blue") → BLUE
     #2563EB. It is the product's own colour rather than a venue-brand one,
     so the admin stops looking like a tinted copy of the customer surfaces,
     and it reads as a modern SaaS tool. White labels on #2563EB pass AA (5.2:1);
     `--pink-hi` is the hover/pressed step, `--pink-glow` the focus ring.
   Tints are `color-mix()`ed from the token so changing ONE hex re-tints the suite. */
:root{
  --pink:#2563EB; --pink-hi:#1D4ED8; --pink-glow:rgba(37,99,235,.3);
  --purple:#5E0F80; --orange:#F39200; --teal:#009FA8; --lime:#7CB518;
  /* GitHub-style neutral dark: near-black ground, graphite cards, cool gray text */
  --bg:#0d1117; --panel:#10161d; --card:#161b22; --line:#30363d;
  --ink:#e6edf3; --ink2:#9198a1; --ink3:#656c76;
}
/* ⚠️ LOAD-BEARING. The server appends a tenant-brand :root override to EVERY
   stylesheet it serves (server.js static handler), which resets --pink to the
   venue's brand pink. Customer surfaces SHOULD follow the brand — the admin
   accent should not, which is the whole point of the accent change above.
   :root:root outranks the appended :root by specificity regardless of order,
   and only pages that link THIS file (the admin suite) are affected. Remove
   this line and the admin silently reverts to brand pink on the next deploy. */
:root:root{--pink:#2563EB}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}
main{padding:20px 16px 70px;max-width:960px;margin:0 auto}

/* ── shell nav: top bar on mobile, left sidebar on desktop ── */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.topbar img{height:54px;cursor:pointer}   /* the logo is the way home — big enough to be the obvious tap */
/* OlloVue's own mark is the site-header wordmark: plain text, cyan period */
.ov-wm{font-weight:700;letter-spacing:.2em;font-size:22px;color:var(--ink);text-decoration:none;display:block;
  line-height:1;padding:12px 0}
.ov-wm span{color:var(--pink)}
.ov-wm:hover{color:var(--ink);opacity:.8}
#auth-card .ov-wm{text-align:center;font-size:22px;margin:0 0 18px}
/* hide the nav + lock until logged in — only the login card shows (body gets .chrome after auth) */
body:not(.chrome) .nav, body:not(.chrome) #lock{display:none}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}   /* fade = "more to scroll" */
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink2);text-decoration:none;font-size:13.5px;font-weight:700;padding:9px 13px;border-radius:10px;white-space:nowrap;
  display:flex;align-items:center;gap:8px}
.nav a i{font-style:normal;display:flex;align-items:center;justify-content:center}
.nav a em{font-style:normal}
/* line icons (admin-shell.js ICONS) — stroke follows the text colour */
.nav a i svg,#adm-tabbar i svg,#adm-drawer .dnav a svg,.lockbtn svg,button.primary svg,.mini svg{
  width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav a i svg{width:18px;height:18px}
.nav a:hover{background:var(--card);color:var(--ink)}
.nav a.on{background:var(--pink);color:#fff}
.ngroup{display:none}   /* horizontal top bar: no room for section labels */
.lockbtn{flex:none;background:none;border:1px solid var(--line);color:var(--ink2);border-radius:10px;
  padding:8px 13px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.lockbtn svg{width:15px;height:15px}
.lockbtn:hover{border-color:var(--pink);color:var(--ink)}

@media (min-width: 920px){
  .topbar{position:fixed;inset:0 auto 0 0;width:225px;flex-direction:column;align-items:stretch;
    padding:24px 14px 18px;border-bottom:none;border-right:1px solid var(--line)}
  /* the logo file carries ~15% transparent padding on its left, so a -13px margin puts
     the visible mark on the nav icons' left edge (14px sidebar padding + 9px link padding) */
  .topbar img{height:auto;width:155px;margin:0 auto 18px -13px}
  /* the wordmark sits higher and tighter than a picture logo would */
  .topbar.wm{padding-top:10px}
  .topbar .ov-wm{margin:0 auto 12px;padding:6px 4px;font-size:17px}
  /* the nav outgrew one screen — it scrolls now (slim brand scrollbar), nothing gets cut off */
  .nav{flex-direction:column;gap:3px;overflow-y:auto;overflow-x:hidden;min-height:0;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-mask-image:none;mask-image:none;
    padding-right:2px;margin-right:-6px}
  .nav::-webkit-scrollbar{display:block;width:5px}
  .nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .nav::-webkit-scrollbar-thumb:hover{background:#43293a}
  /* app-style rows: rounded-square icon tile + label; active = colored tile */
  .nav a{padding:6px 9px;font-size:13.5px;gap:11px;border-radius:13px}
  /* each section carries its own hue (--ic from admin-shell.js NAV_COLOR): tinted tile,
     icon in the hue, solid tile + white glyph when active */
  .nav a{--ic:var(--ink2)}
  .nav a i{width:34px;height:34px;flex:0 0 34px;font-size:17px;border-radius:10px;color:var(--ic);
    background:color-mix(in srgb,var(--ic) 13%,var(--card));border:1px solid color-mix(in srgb,var(--ic) 22%,var(--line));
    transition:background .15s,border-color .15s,color .15s}
  .nav a:hover{background:var(--card)}
  .nav a:hover i{border-color:color-mix(in srgb,var(--ic) 55%,transparent);background:color-mix(in srgb,var(--ic) 22%,var(--card))}
  .nav a.on{background:color-mix(in srgb,var(--ic) 10%,transparent);color:var(--ink)}
  .nav a.on i{background:var(--ic);border-color:var(--ic);color:#fff;
    box-shadow:0 4px 12px -4px color-mix(in srgb,var(--ic) 70%,transparent)}
  /* playlist sub-rows: indented under Screens, smaller tile, count on the right */
  /* ── 📂 the side menu folds ────────────────────────────────────────────────
     Once every page carried the whole nav, the rail became a wall: thirty-six rows,
     seventeen of them under Screens alone, and the one you wanted was always below
     the fold. The section label is a button now. The section you are standing in
     opens itself; the rest stay shut until asked, and what you open is remembered
     on this device. Everything is still one tap away — it is just not all shouting
     at once. */
  .ngroup{display:flex;align-items:center;gap:6px;width:100%;margin:14px 0 4px;padding:5px 8px;
    background:none;border:0;border-radius:9px;font-family:inherit;font-size:9.5px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);cursor:pointer;text-align:left}
  .ngroup:hover{background:var(--card);color:var(--ink2)}
  .ngroup:first-child{margin-top:0}
  .ngroup .caret{margin-left:auto;font-size:9px;transition:transform .18s ease;opacity:.75}
  .ngroup[aria-expanded="false"] .caret{transform:rotate(-90deg)}
  .ngroup .cnt{font-size:9px;font-weight:700;opacity:.6;letter-spacing:.04em}
  .ngroup[aria-expanded="true"] .cnt{display:none}
  .ngrp{display:flex;flex-direction:column;gap:3px}
  .ngrp[hidden]{display:none}
  .lockbtn{margin-top:12px;flex:none}
  main{margin-left:225px;max-width:1400px;padding:32px 40px 70px}
}

/* ── 📱 bottom tab bar (built by admin-shell.js) — phones only, thumb-reach nav ── */
#adm-tabbar{display:none}
@media (max-width:919px){
  body.chrome #adm-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
    grid-auto-flow:column;grid-auto-columns:1fr;
    background:rgba(13,17,23,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line);padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
  #adm-tabbar a,#adm-tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;color:var(--ink3);text-decoration:none;font:inherit;font-size:10px;
    font-weight:800;padding:3px 0;cursor:pointer}
  #adm-tabbar i{font-style:normal;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
    width:44px;height:26px;border-radius:9px;transition:background .15s}
  #adm-tabbar i{--ic:var(--ink3)}
  #adm-tabbar i svg{width:22px;height:22px;stroke-width:1.9;color:var(--ic)}
  /* a page that names six tabs of its own: narrower keys, smaller labels, same targets */
  #adm-tabbar.tight a,#adm-tabbar.tight button{font-size:9px;gap:2px}
  #adm-tabbar.tight i{width:34px;height:24px}
  #adm-tabbar.tight i svg{width:20px;height:20px}
  #adm-tabbar .on{color:var(--ink)}
  #adm-tabbar .on i{background:color-mix(in srgb,var(--ic) 15%,transparent)}
  body.chrome main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  :root[data-theme="light"] #adm-tabbar{background:rgba(246,241,236,.94);border-top-color:rgba(0,0,0,.12)}
}
/* ── 📱 the bar: a slim glass capsule floating off the bottom edge. Every key is an icon;
   the page you are on opens into a capsule of its own colour and says its name. One lit
   shape in a quiet row reads at a glance, and the row is short enough to leave the page
   its height. The assistant keeps her face at the end. ── */
@media (max-width:919px){
  body.chrome #adm-tabbar{display:flex;align-items:center;justify-content:space-between;gap:2px;
    left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
    border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px;
    background:linear-gradient(180deg,rgba(28,34,46,.76),rgba(12,16,24,.88));
    backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
    box-shadow:0 20px 44px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
  #adm-tabbar a,#adm-tabbar button{flex:0 0 auto;flex-direction:row;align-items:center;justify-content:center;gap:0;
    height:46px;min-width:46px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.01em;color:var(--ink3);
    transition:flex-grow .32s cubic-bezier(.2,.8,.2,1),background .28s,color .28s,box-shadow .28s}
  #adm-tabbar i{width:24px;height:24px;border-radius:0;background:none;box-shadow:none;transition:transform .2s}
  #adm-tabbar i svg{width:22px;height:22px;stroke-width:1.9;color:var(--ink3);transition:color .28s,filter .28s}
  #adm-tabbar span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-left:0;transition:max-width .32s cubic-bezier(.2,.8,.2,1),opacity .22s,margin-left .32s}
  #adm-tabbar .on{flex:1 1 auto;color:var(--ink);
    background:linear-gradient(180deg,color-mix(in srgb,var(--ic) 32%,transparent),color-mix(in srgb,var(--ic) 14%,transparent));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px -12px var(--ic)}
  #adm-tabbar .on i svg{color:var(--ic);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ic) 65%,transparent))}
  #adm-tabbar .on span{max-width:140px;opacity:1;margin-left:8px}
  #adm-tabbar a:active i,#adm-tabbar button:active i{transform:scale(.88)}
  /* six keys of a page's own: tighter, the name still fits */
  #adm-tabbar.tight a,#adm-tabbar.tight button{min-width:40px;padding:0 8px;font-size:11.5px;gap:0}
  #adm-tabbar.tight i{width:22px;height:22px}
  #adm-tabbar.tight i svg{width:20px;height:20px}
  #adm-tabbar.tight .on span{max-width:96px}
  #adm-tab-agent{padding:0 3px}
  body.chrome main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  :root[data-theme="light"] #adm-tabbar{background:linear-gradient(180deg,rgba(255,252,248,.88),rgba(246,241,236,.94));border-color:rgba(0,0,0,.1)}
  :root[data-theme="light"] #adm-tabbar a,:root[data-theme="light"] #adm-tabbar button{color:#5b6372}
  /* 🙈 hidden for now (owner's call, 2026-09-19): the drawer is the phone nav. The bar
     is still built, so unhiding is deleting these two lines. */
  body.chrome #adm-tabbar{display:none}
  body.chrome main{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
}

/* ── mobile hamburger + slide-out drawer (built by admin-shell.js) ── */
#adm-burger{display:none;margin-left:auto;flex:none;width:46px;height:46px;border:1px solid var(--line);
  background:var(--card);border-radius:13px;cursor:pointer;padding:0;position:relative;z-index:71}
#adm-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);margin:4px auto;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s}
body.adm-open #adm-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.adm-open #adm-burger span:nth-child(2){opacity:0}
body.adm-open #adm-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#adm-drawer{position:fixed;inset:0;z-index:70;visibility:hidden;transition:visibility 0s .42s}
#adm-drawer .scrim{position:absolute;inset:0;background:rgba(8,2,7,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
/* full-screen sheet rising from the bottom */
#adm-drawer .sheet{position:absolute;inset:0;background:var(--panel);
  display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(103%);transition:transform .42s cubic-bezier(.32,.72,.25,1);overflow-y:auto;
  border-radius:26px 26px 0 0}
body.adm-open #adm-drawer .sheet{border-radius:0}
#adm-drawer .sheet{transition:transform .42s cubic-bezier(.32,.72,.25,1), border-radius .42s ease}
#adm-drawer .sheet img{width:124px;margin:2px auto 16px;display:block}
#adm-drawer .sheet .ov-wm{text-align:center;margin:0 auto 14px;font-size:18px}
#adm-drawer .dclose{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;width:46px;height:46px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:13px;font-size:19px;
  font-weight:800;cursor:pointer;font-family:inherit}
#adm-drawer .dnav{display:flex;flex-direction:column;gap:7px;max-width:440px;width:100%;margin:0 auto;flex:1}
#adm-drawer .dnav a{color:var(--ink);text-decoration:none;font-size:16.5px;font-weight:700;padding:11px 14px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(26px) scale(.98);
  transition:opacity .34s ease, transform .46s cubic-bezier(.22,1.2,.32,1), background .18s, border-color .18s;
  transition-delay:calc(.06s + var(--i,0) * .045s)}
/* the icon rides in a tinted chip the colour of its own glyph — the row reads at a glance */
#adm-drawer .dnav a svg{width:22px;height:22px;color:var(--ic,var(--ink2));flex:none}
#adm-drawer .dnav a > svg{width:34px;height:34px;padding:7px;border-radius:10px;box-sizing:border-box;
  background:color-mix(in srgb, var(--ic, var(--ink3)) 15%, transparent)}
#adm-drawer .dnav a::after{content:"›";margin-left:auto;color:var(--ink3);font-weight:700;font-size:20px;
  opacity:.5;transition:transform .2s, opacity .2s}
@media (hover:hover){
  #adm-drawer .dnav a:hover{border-color:color-mix(in srgb, var(--ic, var(--ink3)) 50%, var(--line))}
  #adm-drawer .dnav a:hover::after{opacity:1;transform:translateX(3px)}
}
#adm-drawer .dnav a:active{transform:scale(.975)}
/* the page you are on: its own colour, filled, with a soft glow of that colour */
#adm-drawer .dnav a.on{color:#fff;border-color:transparent;
  background:linear-gradient(135deg, var(--ic,var(--pink)), color-mix(in srgb, var(--ic,var(--pink)) 68%, #000));
  box-shadow:0 10px 26px -12px var(--ic,var(--pink))}
#adm-drawer .dnav a.on svg,#adm-drawer .dnav a.on > svg{color:#fff;background:rgba(255,255,255,.18)}
#adm-drawer .dnav a.on::after{color:#fff;opacity:.9}
/* 🗂 the "More" fold in the mobile drawer */
#adm-drawer .dnav .dmore-btn{width:100%;display:flex;align-items:center;gap:14px;cursor:pointer;font:inherit;
  font-size:16.5px;font-weight:700;color:var(--ink);padding:11px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  opacity:0;transform:translateY(26px) scale(.98);
  transition:opacity .34s ease, transform .46s cubic-bezier(.22,1.2,.32,1);
  transition-delay:calc(.06s + var(--i,0) * .045s)}
body.adm-open #adm-drawer .dnav .dmore-btn{opacity:1;transform:none}
#adm-drawer .dnav .dmore-btn > svg{width:34px;height:34px;padding:7px;border-radius:10px;box-sizing:border-box;
  color:var(--ink2);background:color-mix(in srgb,var(--ink3) 15%,transparent);flex:none;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#adm-drawer .dnav .dmore-btn .mchev{margin-left:auto;color:var(--ink3);font-weight:700;font-size:20px;transition:transform .2s}
#adm-drawer .dnav .dmore-btn[aria-expanded="true"] .mchev{transform:rotate(90deg)}
#adm-drawer .dnav .dmore{display:flex;flex-direction:column;gap:7px;margin-top:7px}
#adm-drawer .dnav .dmore[hidden]{display:none}
#adm-drawer .dnav .dmore a{opacity:1;transform:none;transition:none}
#adm-drawer .dnav .dfoot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:6px}
#adm-drawer .dnav .dfoot::before{content:"";display:block;height:1px;background:var(--line);margin:0 6px 10px}
/* the one thing here that makes something new, so it is a filled button, not another row */
#adm-drawer .dnav a.dadd{justify-content:center;gap:10px;color:#fff;font-size:16px;font-weight:800;
  letter-spacing:.2px;border-color:transparent;padding:13px 14px;
  background:linear-gradient(135deg,#3b82f6,#2563EB);box-shadow:0 10px 24px -12px rgba(37,99,235,.95)}
#adm-drawer .dnav a.dadd > svg{width:20px;height:20px;padding:0;background:none;color:#fff}
#adm-drawer .dnav a.dadd::after{content:none}
#adm-drawer .dnav a.dadd:active{transform:scale(.98)}
/* 📲 install: dashed, quiet, and only there when the browser can actually do it */
#adm-drawer .dnav a.dinstall{display:none;justify-content:center;gap:9px;font-size:15px;font-weight:700;
  color:var(--ink2);background:none;border:1px dashed var(--line2,var(--line));padding:11px 14px}
body.can-install #adm-drawer .dnav a.dinstall,body.ios-install #adm-drawer .dnav a.dinstall{display:flex}
#adm-drawer .dnav a.dinstall > svg{width:18px;height:18px;padding:0;background:none;color:var(--ink2)}
#adm-drawer .dnav a.dinstall::after{content:none}
#adm-drawer .dnav .dhint{margin:0 6px 2px;font-size:13px;line-height:1.45;color:var(--ink3);text-align:center}
#adm-drawer .dnav .dhint[hidden]{display:none}
#adm-drawer .dnav a[data-signout]{background:none;border-color:transparent;color:var(--ink3);
  justify-content:center;font-size:15px;padding:9px 14px}
#adm-drawer .dnav a[data-signout]::after,#adm-drawer .dnav a[data-themetoggle]::after{content:none}
#adm-drawer .dnav a[data-signout] > svg{background:none;padding:0;width:22px;height:22px}
@media (prefers-reduced-motion:reduce){ #adm-drawer .dnav a{transition:opacity .2s;transform:none} }
body.adm-open #adm-drawer{visibility:visible;transition-delay:0s}
body.adm-open #adm-drawer .scrim{opacity:1}
body.adm-open #adm-drawer .sheet{transform:none}
body.adm-open #adm-drawer .dnav a{opacity:1;transform:none}
body.adm-open{overflow:hidden}
@media (max-width: 919px){
  body.chrome .topbar .nav{display:none}     /* the drawer replaces the cramped scroll-nav */
  body.chrome #adm-burger{display:block}
  /* 🎯 centre the logo on a phone. The burger comes out of the flow to the right so the
     mark sits in the true middle of the bar rather than the middle of what is left of it. */
  body.chrome .topbar{position:relative;justify-content:center}
  body.chrome .topbar img,body.chrome .topbar .ov-wm{margin:0 auto}
  body.chrome #adm-burger{position:absolute;right:14px;top:50%;transform:translateY(-50%);margin:0}
}
@media (min-width: 920px){
  #adm-burger,#adm-drawer{display:none}      /* desktop keeps the sidebar */
}

/* ── auth + cards ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px}
#auth-card{max-width:400px;margin:70px auto}
#auth-card .hint{font-size:12px;color:var(--ink3);margin-top:10px;text-align:center}

/* ── logged-out: full-screen login. No sidebar/topbar (no double logo — the card
   carries the only mark), a modern glass card centered on a quiet dot-grid ground. ── */
body:not(.chrome) .topbar{display:none}
body:not(.chrome){background:#0b0e13;color:#e6edf3;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.4px);background-size:26px 26px}
body:not(.chrome) main{margin:0!important;max-width:none;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;padding:24px}
body:not(.chrome) #auth-card{width:min(400px,100%);margin:0;padding:36px 30px 26px;border-radius:22px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 90px -35px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08)}
input[type=password],input[type=search],input[type=tel],input[type=email],input[type=text],input[type=url],input:not([type]){width:100%}
input[type=password],input[type=search],input[type=tel],input[type=email],input[type=text],input[type=url],input[type=number],input[type=datetime-local],input[type=date],input:not([type]){
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:var(--ink3);opacity:.75}
input:hover:not(:focus){border-color:#43293a}
input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-glow)}
select{border:1px solid var(--line);background-color:var(--bg);color:var(--ink);border-radius:12px;padding:11px 32px 11px 13px;
  font-size:14px;font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c8494' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;transition:border-color .15s,box-shadow .15s}
select:hover:not(:focus){border-color:#43293a}
select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-glow)}
textarea{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:12px 14px;
  font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s;max-width:100%}
textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-glow)}
select{max-width:100%}
/* 📱 phones: 16px inputs — anything smaller makes iOS Safari zoom-jump into every
   field, the single most annoying mobile-form bug. 16px = no zoom, ever. */
@media (max-width: 740px), (pointer: coarse) {
  input[type=password],input[type=search],input[type=tel],input[type=email],input[type=text],input[type=url],input[type=number],input[type=time],input[type=date],input[type=datetime-local],input:not([type]),select,textarea{font-size:16px}
}
/* the accent button: flat, gently lifted, icon + label (admin-shell.js swaps a
   leading 💾/＋/▶ for a line icon). Pages that want it inline set width:auto. */
button.primary{width:100%;padding:11px 18px;border:0;border-radius:11px;background:var(--pink);color:#fff;
  font-weight:600;font-size:14px;letter-spacing:.005em;cursor:pointer;font-family:inherit;margin-top:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.25),0 10px 22px -12px var(--pink);
  transition:background .15s,transform .12s,box-shadow .15s}
button.primary svg{width:16px;height:16px;stroke-width:2.1}
button.primary:hover{background:var(--pink-hi);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.25),0 14px 26px -12px var(--pink)}
button.primary:active{transform:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
button.primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pink-glow)}
button.primary:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
h1.page{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px}
h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3);margin:14px 0 8px}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 14px}
.stat b{display:block;font-size:26px;font-weight:800;color:var(--ink)}
.stat span{font-size:12px;color:var(--ink3)}
.stat:first-child b{color:var(--pink)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
th{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink3);padding:7px 8px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
td{text-align:right;padding:8px;border-bottom:1px solid #241520;color:var(--ink2)}
td:first-child{color:var(--ink)}
tr:last-child td{border-bottom:none}
td.sales{font-weight:800;color:var(--ink)}
.unpaid{color:var(--orange)}

/* ── mobile safety (applies to every admin page) ── */
@media (max-width: 640px){
  table{min-width:0}                         /* let narrow tables fit instead of forcing 520px + scroll */
  main{padding:16px 12px 70px}
  h1.page{font-size:21px}
}
@media (max-width: 480px){
  .stat b{font-size:22px}                     /* keep big money figures from overflowing 2-up cards */
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  th,td{padding:7px 6px;font-size:12.5px}
}

/* ── pills ── */
.pills{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.pill{background:color-mix(in srgb,var(--pink) 14%,var(--card));border:1px solid color-mix(in srgb,var(--pink) 55%,var(--line));color:var(--ink);border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:700}

/* ── charts ── */
.legend{display:flex;gap:10px 16px;font-size:12px;color:var(--ink2);margin-bottom:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto}
.chart .gridline{stroke:#2A1A25;stroke-width:1}
.chart .ylab,.chart .xlab{fill:var(--ink3);font-size:10px;font-family:Inter,system-ui,sans-serif}
.chart .hit{fill:transparent;cursor:pointer}
#tip{position:fixed;z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;font-size:12.5px;pointer-events:none;display:none;box-shadow:0 10px 28px rgba(0,0,0,.55);line-height:1.5;color:var(--ink2)}
#tip b{color:var(--ink)}

/* ── customers ── */
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toolbar input{flex:1}
.toolbar select{padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:13.5px}
.cust{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:8px;overflow:hidden}
.cust-head{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer}
.cust-head:hover{background:#211220}
.avatar{flex:none;width:40px;height:40px;border-radius:12px;background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:18px}
.who{flex:1;min-width:0}
.who b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{font-size:12px;color:var(--ink3)}
.nums{text-align:right;flex:none}
.nums b{display:block;font-size:15px;color:var(--ink)}
.nums span{font-size:11.5px;color:var(--ink3)}
.detail{border-top:1px solid var(--line);padding:16px 14px;display:none}
.cust.open .detail{display:block}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.meta div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--ink3)}
.meta div b{display:block;font-size:14px;color:var(--ink)}
.order{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #241520;font-size:13.5px}
.order:last-child{border-bottom:none}
.order .it{color:var(--ink2);flex:1}
.order .it small{color:var(--ink3);display:block}
.order .amt{flex:none;text-align:right;font-weight:700;color:var(--ink)}
.order .amt small{display:block;font-weight:400;color:var(--ink3)}
.empty{text-align:center;color:var(--ink3);padding:30px 0}

/* ── redeem ── */
.row{display:flex;justify-content:space-between;font-size:14.5px;padding:8px 0;border-bottom:1px solid #241520}
.row:last-child{border-bottom:none}
.row span{color:var(--ink2)}
.row b{font-weight:800}
.ready{margin-top:12px;background:color-mix(in srgb,var(--pink) 12%,var(--card));border:1px solid var(--pink);border-radius:14px;padding:16px;text-align:center}
.ready .prize{font-weight:800;font-size:16px}
.ready .lucode{font-size:24px;font-weight:800;letter-spacing:3px;margin:6px 0;color:var(--pink)}
.msg{margin-top:10px;font-size:14px;text-align:center;min-height:20px;color:var(--ink2)}
.ok{color:var(--lime)}.err{color:var(--orange)}

/* ── ☀️ light mode — admin-shell.js stamps data-theme on <html>, choice saved per device.
   Same brand accents; only the neutrals flip. Dark stays the default. ── */
:root[data-theme="light"]{
  --bg:#F6F1EC; --panel:#FFFFFF; --card:#FDFAF7; --line:#E6DAD1;
  --ink:#2B1524; --ink2:#6F5766; --ink3:#A18E9A;
}
:root[data-theme="light"] .nav a:hover{background:#F3EAE3}
:root[data-theme="light"] .nav::-webkit-scrollbar-thumb:hover{background:#D9CCC2}
:root[data-theme="light"] input:hover:not(:focus),
:root[data-theme="light"] select:hover:not(:focus){border-color:#D6C7BC}
:root[data-theme="light"] td{border-bottom-color:#EDE3DB}
:root[data-theme="light"] .chart .gridline{stroke:#EDE3DB}
:root[data-theme="light"] .cust-head:hover{background:#F3EAE3}
:root[data-theme="light"] .order,:root[data-theme="light"] .row{border-bottom-color:#EDE3DB}
:root[data-theme="light"] #adm-drawer .scrim{background:rgba(43,21,36,.35)}
:root[data-theme="light"] .tooltip{box-shadow:0 10px 28px rgba(43,21,36,.18)}
:root[data-theme="light"] .ready{background:color-mix(in srgb,var(--pink) 8%,#fff)}

/* ── inline icons the no-emoji pass drops in (admin-shell.js deEmoji) ── */
.adm-ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.16em;margin-right:.4em;flex:none;display:inline-block}
.adm-ic.solo{margin:0;vertical-align:-.16em}
h1 .adm-ic,h2 .adm-ic,h3 .adm-ic{color:var(--pink);width:.9em;height:.9em}

/* 📱 wordmark tagline on the phone header ("Screens. Scenes. Together."); desktop stays clean */
.ov-wmwrap{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.ov-tag{display:none;font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-top:3px;white-space:nowrap}
/* the tagline is hidden — the wordmark stands on its own */
@media (max-width:700px){.ov-tag{display:none}}
/* quieter tagline: smaller, less tracked, faded — a whisper under the wordmark, not a banner */
.ov-tag{font-size:7.5px;letter-spacing:.26em;opacity:.65}

/* 🧊 the mobile menu as glass: a frosted full-screen pane, glass rows, lit active row */
#adm-drawer .scrim{background:rgba(6,8,14,.5)}
#adm-drawer .sheet{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03) 42%),rgba(12,15,22,.72);
  backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
#adm-drawer .dnav a{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
#adm-drawer .dnav a.on{background:linear-gradient(180deg,#4f8cff,#2563EB);border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 28px -12px rgba(37,99,235,.9)}
#adm-drawer .dclose{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* 🎨 tenant brand — auto-appended; change it in ⚙️ Settings → Brand */
:root{--purple:#1F6FEB;--purple-deep:#154ba0;--pink:#2CD9FF;--orange:#FFB454;--turq:#2CD9FF;--teal:#2CD9FF;--lime:#7CE0B0;--brand-primary:#1F6FEB;--brand-secondary:#2CD9FF;--brand-accent:#FFB454;--brand-turquoise:#2CD9FF;--brand-lime:#7CE0B0}