/* One family for everything: IBM Plex Sans Hebrew — modern, distinctive and very
   easy to read (bundled, works offline). SIL Open Font License. */
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:300;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-hebrew-300-normal.woff2") format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:300;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:400;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2") format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:400;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:500;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-hebrew-500-normal.woff2") format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:500;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:600;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-hebrew-600-normal.woff2") format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:600;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:700;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-hebrew-700-normal.woff2") format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:"Plex Hebrew";font-style:normal;font-weight:700;font-display:swap;src:url("/shared/fonts/ibm-plex-sans-hebrew-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ═══════════════════════════════════════════════════════════════
   Lobby — shared design system  v4  (after dark: quiet luxury)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* palette v5 — "velvet night": deep violet night, glowing magenta, gold, cyan */
  --bg:       #0E0620;
  --surface:  #1B0E36;
  --surface-2:#25133F;
  --surface-3:#301A52;
  --line:     rgba(230,200,255,.12);
  --line-strong: rgba(230,200,255,.24);
  --text:     #FFF5FB;
  --muted:    #B9A8DC;
  --pink:     #FF3D9A;   /* magenta — people, connection, energy */
  --cyan:     #29E3FF;   /* electric cyan — info, live */
  --gold:     #FFC247;   /* gold — money, VIP */
  --green:    #33F0A6;   /* mint — done */
  --blue:     #7F8CFF;
  --violet:   #A96BFF;
  --orange:   #FF8A3D;

  --display:  "Plex Hebrew", "Heebo", system-ui, sans-serif;
  --body:     "Plex Hebrew", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:     "Plex Hebrew", system-ui, sans-serif;

  --glow-pink:rgba(255,61,154,.34);
  --glow-cyan:rgba(41,227,255,.22);
  --glow-gold:rgba(255,194,71,.28);
  --glow-violet:rgba(169,107,255,.32);

  --grad-hot:  linear-gradient(120deg, #FF3D9A 0%, #FF6A5C 55%, #FFB23D 100%);
  --grad-royal:linear-gradient(120deg, #A96BFF 0%, #FF3D9A 100%);
  --grad-gold: linear-gradient(120deg, #FFE08A 0%, #FFC247 45%, #FF9A3D 100%);
  --grad-ice:  linear-gradient(120deg, #29E3FF 0%, #7F8CFF 100%);

  --radius-lg:20px; --radius:14px; --radius-sm:10px;
  --shadow: 0 18px 44px -22px rgba(0,0,0,.85);
}

/* ── reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--body); font-size:15px; line-height:1.6; font-weight:400;
  color:var(--text); background:var(--bg);
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums;
  /* a fine grain + a low warm light from above — the feel of a hotel bar, not a screen */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(255,194,71,.07), transparent 60%),
    linear-gradient(180deg, #0F0E12 0%, #0B0A0E 100%);
  background-attachment:fixed;
}
h1, h2, h3, .title { font-family:var(--display); font-weight:500; letter-spacing:-.005em; line-height:1.2; }
::selection { background:rgba(255,194,71,.35); color:var(--text); }
a { color:var(--gold); }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ── ambient background ── */
/* The room breathes: alive.js sets --room-tempo from how many guests are in
   the venue (10s when quiet → 4s when packed). */
body::before, body::after {
  content:""; position:fixed; border-radius:50%;
  filter:blur(140px); pointer-events:none; z-index:0;
  opacity:calc(var(--room-energy, .7) * .9);
  animation:drift 12s ease-in-out infinite alternate, breathe var(--room-tempo, 9s) ease-in-out infinite;
}
body::before {
  width:520px; height:520px; background:var(--glow-gold);
  top:-120px; right:-120px; animation-delay:-4s;
}
body::after {
  width:420px; height:420px; background:var(--glow-pink);
  bottom:-80px; left:-80px; animation-delay:-8s;
}
@keyframes drift { from{translate:0 0} to{translate:28px 18px} }
@keyframes breathe { 0%,100%{ scale:1; } 45%{ scale:1.16; } }
html[data-room-closed="1"] body::before, html[data-room-closed="1"] body::after { animation-play-state:paused; opacity:.35; }


/* ── typography ── */
/* Hebrew has no capitals — a small, quiet label reads better than tracked caps */
.eyebrow { font-family:var(--body); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); }
.title   { font-family:var(--display); font-size:26px; font-weight:500; }

/* ── layout ── */
.page { padding:16px 14px 100px; max-width:560px; margin:0 auto; position:relative; z-index:1; }

/* ── cards ── */
.card {
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 40%), var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:12px; box-shadow:var(--shadow);
  transition:border-color .25s;
}
.card:hover { border-color:var(--line-strong); }
.card-glow-pink { border-color:rgba(255,61,154,.35); box-shadow:var(--shadow), 0 0 0 1px rgba(255,61,154,.08) inset; }
.card-glow-cyan { border-color:rgba(41,227,255,.30); box-shadow:var(--shadow), 0 0 0 1px rgba(41,227,255,.06) inset; }

/* ── buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  font-family:var(--body); font-size:14px; font-weight:500; letter-spacing:.01em; line-height:1;
  transition:transform .12s, background-color .2s, border-color .2s, box-shadow .2s, opacity .15s;
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-block { width:100%; }

/* primary = champagne. One strong button per screen; everything else is quieter. */
.btn-primary, .btn-gold {
  background:linear-gradient(180deg, #DCC28C 0%, #C4A465 100%); color:#1A1610;
  border-color:rgba(255,236,196,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -12px rgba(255,194,71,.6);
}
.btn-primary:hover:not(:disabled), .btn-gold:hover:not(:disabled) { background:linear-gradient(180deg, #E4CC98 0%, #CBAC6E 100%); }
.btn-subtle  { background:var(--surface-2); color:var(--text); border-color:var(--line); }
.btn-subtle:hover:not(:disabled) { border-color:var(--line-strong); background:var(--surface-3); }
.btn-ghost   { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover:not(:disabled) { border-color:rgba(230,200,255,.32); }
.btn-cyan    { background:transparent; color:var(--cyan); border-color:rgba(41,227,255,.45); }
.btn-danger  { background:transparent; color:var(--pink); border-color:rgba(255,61,154,.45); }
.btn-sm { padding:8px 14px; font-size:13px; border-radius:var(--radius-sm); }

/* ── inputs ── */
input, select, textarea {
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text); font-family:var(--body); font-size:15px; padding:12px 14px;
  transition:border-color .2s, box-shadow .2s, background-color .2s; outline:none; width:auto;
}
input:hover, select:hover, textarea:hover { border-color:var(--line-strong); }
input:focus, select:focus, textarea:focus {
  border-color:rgba(255,194,71,.7); box-shadow:0 0 0 3px rgba(255,194,71,.12); background:var(--surface-3);
}
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.85; }
select option { background:var(--surface-2); }
input[type="date"], input[type="datetime-local"] { color-scheme:dark; }

/* ── pills / chips ── */
.pill {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer;
  font-family:var(--body); font-size:13px; transition:border-color .2s, background-color .2s, color .2s;
}
.pill:hover { border-color:var(--line-strong); }
.pill.active { border-color:rgba(255,194,71,.6); background:rgba(255,194,71,.10); color:var(--gold); }
.pill-cyan.active { border-color:rgba(41,227,255,.55); background:rgba(41,227,255,.08); color:var(--cyan); }

/* ── bottom navigation ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:rgba(18,8,38,.88); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); backdrop-filter:blur(22px) saturate(1.2);
}
.bottom-nav button {
  flex:1; background:transparent; border:none; color:var(--muted); cursor:pointer;
  font-family:var(--body); font-size:20px; line-height:1; padding:10px 2px 9px; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:5px; transition:color .2s;
  position:relative;
}
.bottom-nav button > span:first-of-type { font-size:11px; font-weight:500; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bottom-nav .ico { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav button.active { color:var(--gold); }
.bottom-nav button.active::before { content:""; position:absolute; top:-1px; left:34%; right:34%; height:1.5px; border-radius:2px; background:var(--gold); }
.bottom-nav button:active { transform:scale(.95); }

/* ── FAB ── */
.fab {
  position:fixed; bottom:calc(72px + env(safe-area-inset-bottom)); right:16px; z-index:40;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:var(--surface-2); border:1px solid rgba(255,194,71,.45); color:var(--gold);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center;
  font-size:21px; transition:transform .15s, border-color .2s;
}
.fab:active { transform:scale(.94); }

/* ── status strip ── */
.status-strip {
  background:rgba(18,8,38,.82);
  border-bottom:1px solid var(--line); padding:9px 16px; font-size:12px; color:var(--muted);
  text-align:center; position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
}

/* ── banner / toast ── */
.banner {
  position:fixed; top:calc(14px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:90; background:rgba(40,20,74,.96); border:1px solid rgba(255,194,71,.35);
  color:var(--text); padding:12px 20px; border-radius:var(--radius); font-size:14px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9); max-width:92vw; text-align:center;
  animation:bannerIn .3s cubic-bezier(.2,.8,.2,1); pointer-events:none; backdrop-filter:blur(10px);
}
@keyframes bannerIn { from{opacity:0;transform:translateX(-50%) translateY(-10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── section tabs ── */
.section-tabs { display:flex; gap:6px; overflow-x:auto; padding:14px 14px 4px;
  scrollbar-width:none; position:sticky; top:0; z-index:20;
  background:rgba(14,6,32,.88); backdrop-filter:blur(12px); }
.section-tabs::-webkit-scrollbar { display:none; }
.section-tabs .pill { flex-shrink:0; }

/* ── modal backdrop ── */
.modal-bg  { position:fixed; inset:0; z-index:60; background:rgba(10,4,24,.72); display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(8px); }
.modal-card{ background:var(--surface); border:1px solid var(--line); border-radius:22px 22px 0 0; width:100%; max-width:520px; max-height:90vh; box-shadow:0 -20px 60px -20px rgba(0,0,0,.9); overflow-y:auto; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
.modal-card-center { border-radius:20px; align-self:center; }

/* ── gift modal (reused for many popovers) ── */
.gift-modal-bg   { position:fixed; inset:0; z-index:70; background:rgba(10,4,24,.72); display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(8px); }
.gift-modal-card { background:var(--surface); border:1px solid var(--line); border-radius:20px 20px 0 0; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }

/* ── person / menu cards ── */
.person-card { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:8px; }
.person-card .av { width:48px; height:48px; border-radius:50%; background:var(--surface-2); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--pink); font-size:18px; }
.person-card .av img { width:100%; height:100%; object-fit:cover; }
.menu-row { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); gap:10px; }
.menu-row:last-child { border-bottom:none; }

/* ── swipe card ── */
.swipe-card { position:relative; border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line); user-select:none; }
.swipe-card-glow-yes { box-shadow:0 0 48px rgba(51,240,166,.5); border-color:var(--green); }
.swipe-card-glow-no  { box-shadow:0 0 48px rgba(255,61,154,.4); border-color:var(--pink); }

/* ── photo gallery ── */
.gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery::-webkit-scrollbar { display:none; }
.gallery img { flex:0 0 100%; width:100%; aspect-ratio:1/1; object-fit:cover; scroll-snap-align:center; }

/* ── zodiac compat bar ── */
.compat-bar { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.compat-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--pink),var(--cyan)); transition:width .6s ease; }

/* ── shift bar (injected by shift.js) ── */
#shift-bar { position:fixed; bottom:calc(56px + env(safe-area-inset-bottom)); right:0; left:0; z-index:25; background:rgba(18,8,38,.88); border-top:1px solid var(--line); padding:6px 14px; display:flex; align-items:center; gap:8px; font-size:12.5px; backdrop-filter:blur(10px); }

/* ── badge ── */
.badge { background:var(--pink); color:#1A0B33; border-radius:999px; font-size:10px; font-weight:700; padding:2px 7px; min-width:18px; text-align:center; display:inline-block; }

/* ── animations ── */
@keyframes pulseGlowPink { 0%,100%{box-shadow:0 0 28px rgba(255,61,154,.4)} 50%{box-shadow:0 0 60px rgba(255,61,154,.7),0 0 100px rgba(41,227,255,.2)} }
@keyframes pulseGlowCyan { 0%,100%{box-shadow:0 0 22px rgba(41,227,255,.3)} 50%{box-shadow:0 0 50px rgba(41,227,255,.6)} }
@keyframes shimmer { from{background-position:0% 50%} to{background-position:300% 50%} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.animate-fade { animation:fadeIn .3s ease-out; }

/* ── scrollbar ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:2px; }


/* ═══════════════════════════════════════════════════════════════
   Alive — motion that answers what just happened
   ═══════════════════════════════════════════════════════════════ */

/* live indicator (shift bar, "live" labels) */
.live-dot { position:relative; width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; }
.live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ping var(--room-tempo, 9s) ease-out infinite; }
.live-dot.is-paused { background:var(--gold); }
.live-dot.is-paused::after { animation:none; }
@keyframes ping { 0%{ transform:scale(1); opacity:.7 } 30%,100%{ transform:scale(3.2); opacity:0 } }

/* a number that changed (balance): up = green lift, down = short settle */
.is-bump { animation:bumpUp .7s cubic-bezier(.2,.9,.3,1.4); }
.is-bump-down { animation:bumpDown .45s ease-out; }
@keyframes bumpUp { 0%{ transform:scale(1); text-shadow:none } 35%{ transform:scale(1.28); text-shadow:0 0 18px rgba(51,240,166,.9) } 100%{ transform:scale(1); text-shadow:none } }
@keyframes bumpDown { 0%{ transform:translateY(0) } 40%{ transform:translateY(3px); opacity:.6 } 100%{ transform:translateY(0); opacity:1 } }
[data-live-number] { display:inline-block; }

/* an order that just arrived / moved stage lights up once */
.is-new { animation:arrive 1.6s ease-out; }
@keyframes arrive {
  0%   { transform:translateY(-6px) scale(.98); opacity:0; box-shadow:0 0 0 0 rgba(41,227,255,.0); border-color:var(--cyan); }
  18%  { transform:none; opacity:1; box-shadow:0 0 0 3px rgba(41,227,255,.35), 0 0 30px rgba(41,227,255,.35); border-color:var(--cyan); }
  100% { box-shadow:0 0 0 0 rgba(41,227,255,0); }
}
.order-card.is-overdue { animation:overdue 2.4s ease-in-out infinite; }
@keyframes overdue { 0%,100%{ box-shadow:0 0 0 0 rgba(255,61,154,0) } 50%{ box-shadow:0 0 22px rgba(255,61,154,.35) } }

/* sheets and popups open from where they belong */
.modal-card, .gift-modal-card { animation:sheetUp .32s cubic-bezier(.2,.8,.2,1); }
.modal-card-center, .modal-pop { animation:popIn .22s ease-out; }
.modal-bg, .gift-modal-bg { animation:fadeIn .2s ease-out; }
@keyframes sheetUp { from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes popIn { from{ transform:scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes fadeIn { from{ opacity:0 } to{ opacity:1 } }

/* touch feedback on the things people tap all night */
.pill, .person-card, .kanban-card, .order-card { transition:transform .12s ease, border-color .2s, box-shadow .2s; }
.pill:active, .person-card:active { transform:scale(.97); }

/* ── night summary / cash (manager) ── */
.night-card { max-width:640px; }
.cash-hero { display:flex; flex-direction:column; gap:2px; padding:16px; border-radius:16px; margin-bottom:12px;
  background:linear-gradient(135deg, rgba(255,194,71,.14), rgba(255,194,71,.03)); border:1px solid rgba(255,194,71,.35); }
.cash-hero span { color:var(--gold); font-size:12px; }
.cash-hero b { font-family:var(--mono); font-size:34px; line-height:1.1; }
.cash-hero small { color:var(--muted); font-size:11.5px; }
.night-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
.night-table th { color:var(--muted); font-weight:500; text-align:right; padding:6px; border-bottom:1px solid var(--line); }
.night-table td { padding:8px 6px; border-bottom:1px solid var(--line); }
.night-table input { padding:5px 6px; font-size:12px; }
.count-diff { font-size:11.5px; font-family:var(--mono); margin-right:4px; }
.night-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.night-grid > div { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); }
.night-grid span { color:var(--muted); font-size:11.5px; }
.night-grid b { font-family:var(--mono); font-size:18px; }
.night-grid small { color:var(--muted); font-size:10.5px; line-height:1.35; }
.night-grid .is-warn { border-color:rgba(255,61,154,.5); }
.night-grid .is-warn b { color:var(--pink); }
@media print {
  body::before, body::after, .no-print, #shift-bar { display:none !important; }
  body:has(#night-modal .night-card) { background:#fff; color:#111; }
  .modal-bg { position:static; background:none; backdrop-filter:none; display:block; }
  .modal-card { max-height:none; border:none; background:#fff; color:#111; animation:none; }
  .night-grid > div, .cash-hero { background:#fff; border-color:#bbb; }
  body:has(#night-modal .night-card) > *:not(#night-modal) { display:none !important; }
}

/* people who asked their phone for less motion get a still interface */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   v4 additions — brand mark, wide staff pages, line icons
   ═══════════════════════════════════════════════════════════════ */
/* monogram: a serif L inside a fine champagne ring — replaces the emoji tiles */
.brand-mark {
  width:58px; height:58px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:30px; font-weight:500; color:var(--gold); line-height:1;
  border:1px solid rgba(255,194,71,.55);
  background:radial-gradient(circle at 50% 30%, rgba(255,194,71,.14), rgba(255,194,71,0) 70%), var(--surface);
  box-shadow:0 0 0 6px rgba(255,194,71,.05), 0 18px 40px -20px rgba(255,194,71,.45);
  padding-top:2px;
}
.brand-mark-lg { width:84px; height:84px; font-size:44px; }

/* staff screens (kitchen, bar, waiter, hostess, manager, HQ) were missing this
   class entirely, so their content touched the screen edges */
.page-wide { padding:22px clamp(14px, 3vw, 36px) 120px; max-width:1440px; margin:0 auto; position:relative; z-index:1; }

.line-ico { width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* staff screens: quieter cards, serif item names */
.order-card, .kanban-card {
  background:var(--surface) !important; border:1px solid var(--line); border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
}
.order-card .item { font-family:var(--display) !important; font-weight:500 !important; font-size:17px !important; }
.kanban-col { background:rgba(255,255,255,.012); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; }
#shift-bar span { white-space:nowrap; }
.menu-row { transition:background-color .2s; }
.menu-row:hover { background:rgba(255,255,255,.015); }
table th { font-weight:500; }
/* guest without a photo: their initial in serif, not an emoji */
.avatar-initial { font-family:var(--display); font-size:72px; font-weight:400; color:var(--gold); opacity:.85; line-height:1; }
.person-avatar, .person-card .av { font-family:var(--display) !important; color:var(--gold) !important; }

/* shown only while a screen is reconnecting to the server */
#live-offline {
  position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:95;
  background:rgba(40,20,74,.95); border:1px solid rgba(255,61,154,.5); color:var(--text);
  padding:7px 14px; border-radius:999px; font-size:12.5px; backdrop-filter:blur(10px);
  animation:fadeIn .3s ease-out .8s both; /* don't flash on a sub-second blip */
}

/* ═══════════════════════════════════════════════════════════════
   Guest home — profile card, venue "now", arrival
   ═══════════════════════════════════════════════════════════════ */
.me-card { display:flex; gap:16px; align-items:center; padding:18px; margin-bottom:22px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(255,194,71,.08), rgba(255,61,154,.04) 60%, transparent), var(--surface); box-shadow:var(--shadow); }
.me-photo { width:92px; height:92px; border-radius:50%; overflow:hidden; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(255,194,71,.5), 0 0 0 5px rgba(255,194,71,.06); }
.me-photo img { width:100%; height:100%; object-fit:cover; }
.me-meta { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:6px; font-size:12.5px; color:var(--muted); }
.verified { color:var(--gold); display:inline-flex; align-items:center; gap:4px; }
.verified::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--gold);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3 6.2l2 2 4-4.4" stroke="black" stroke-width="1.6" fill="none"/></svg>') center/100% no-repeat, radial-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.section-label { font-size:13px; color:var(--muted); margin:6px 2px 8px; }
.venue-card { padding:20px; }
.now-head { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.now-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:14px; }
.now-cell { padding:12px 8px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line); text-align:center; }
.now-cell b { display:block; font-family:var(--display); font-weight:500; font-size:24px; line-height:1.1; }
.now-cell span { font-size:11.5px; color:var(--muted); }
.now-card { padding:16px; border-radius:var(--radius-lg); border:1px solid var(--line); background:rgba(22,20,26,.7); }
.now-card .now-grid { margin-top:10px; }
/* 10px thumbnails scaled up and blurred — silhouettes of the room, never faces */
.blur-row { display:flex; justify-content:center; margin:14px 0 2px; }
.blur-row img { width:44px; height:44px; border-radius:50%; object-fit:cover; filter:blur(5px) saturate(.9); margin-inline-start:-10px;
  box-shadow:0 0 0 2px var(--surface); transform:scale(1.02); }
.blur-row img:first-child { margin-inline-start:0; }
.arrival-wait { display:flex; gap:12px; align-items:center; margin-top:14px; padding:14px; border-radius:var(--radius);
  border:1px solid rgba(255,194,71,.35); background:rgba(255,194,71,.06); }
.spinner { display:inline-block; width:20px; height:20px; flex-shrink:0; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--gold); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.field-label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
.prompt-edit { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; background:var(--surface-2); }
.prompt-edit select, .prompt-edit input { width:100%; font-size:14px; }
.prompt-card { padding:12px 14px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line); margin-top:8px; }
.prompt-card span { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
.prompt-card p { font-family:var(--display); font-size:17px; line-height:1.4; margin:0; }

/* staff: arrivals */
#arrivals-fab { position:fixed; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:55;
  display:none; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg, #DCC28C, #C4A465); color:#1A1610; border:none; font-family:var(--body); font-size:14px; font-weight:500;
  box-shadow:0 12px 30px -12px rgba(255,194,71,.7); animation:callGlow 2.4s ease-in-out infinite; }
@keyframes callGlow { 0%,100%{ box-shadow:0 12px 30px -12px rgba(255,194,71,.7), 0 0 0 0 rgba(255,194,71,.0);} 50%{ box-shadow:0 12px 30px -12px rgba(255,194,71,.7), 0 0 0 6px rgba(255,194,71,.18);} }
.arrival-row { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.arrival-row:last-child { border-bottom:none; }
.arrival-av { width:54px; height:54px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:var(--display); color:var(--gold); font-size:22px; }
.arrival-av img { width:100%; height:100%; object-fit:cover; }


/* ═══════════════════════════════════════════════════════════════
   v5 — VIVID: color, glow and life (overrides the quieter v4 rules)
   ═══════════════════════════════════════════════════════════════ */
body {
  background-color:#0E0620;
  background-image:
    radial-gradient(90% 55% at 100% 0%, rgba(255,61,154,.30), transparent 60%),
    radial-gradient(80% 50% at 0% 30%, rgba(169,107,255,.30), transparent 60%),
    radial-gradient(90% 60% at 30% 110%, rgba(255,138,61,.22), transparent 60%),
    radial-gradient(60% 40% at 90% 80%, rgba(41,227,255,.14), transparent 60%),
    linear-gradient(180deg, #160A30 0%, #0E0620 100%);
  background-attachment:fixed;
}
/* the living aurora: two big glows that breathe with the room */
body::before { background:radial-gradient(circle, rgba(255,61,154,.55), rgba(255,61,154,0) 70%); width:560px; height:560px; filter:blur(90px); opacity:calc(var(--room-energy, .7) * .75); }
body::after  { background:radial-gradient(circle, rgba(169,107,255,.55), rgba(169,107,255,0) 70%); width:520px; height:520px; filter:blur(90px); opacity:calc(var(--room-energy, .7) * .75); }

.title { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:500; }
h1, h2, h3 { color:#FFF5FB; }
.eyebrow { color:var(--muted); }
::selection { background:rgba(255,61,154,.45); }
a { color:var(--cyan); }
:focus-visible { outline:2px solid var(--pink); }

/* glass cards with a glowing hairline */
.card, .modal-card, .gift-modal-card {
  background:linear-gradient(160deg, rgba(58,30,104,.72), rgba(28,12,58,.78)) !important;
  border:1px solid rgba(230,200,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 20px 50px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(169,107,255,.06);
  backdrop-filter:blur(16px) saturate(1.3);
}
.card:hover { border-color:rgba(255,61,154,.35); }

/* buttons — the action glows */
.btn { font-weight:600; letter-spacing:.01em; }
.btn-primary {
  background:var(--grad-hot); color:#fff; border-color:transparent;
  box-shadow:0 10px 28px -8px rgba(255,61,154,.65), 0 0 0 1px rgba(255,255,255,.12) inset;
  text-shadow:0 1px 2px rgba(120,0,50,.35);
}
.btn-primary:hover:not(:disabled) { background:var(--grad-hot); filter:brightness(1.08) saturate(1.1); box-shadow:0 14px 36px -8px rgba(255,61,154,.85); }
.btn-gold {
  background:var(--grad-gold); color:#2A1300; border-color:transparent;
  box-shadow:0 10px 26px -8px rgba(255,170,60,.65), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.btn-gold:hover:not(:disabled) { background:var(--grad-gold); filter:brightness(1.06); }
.btn-subtle { background:rgba(255,255,255,.07); border-color:rgba(230,200,255,.18); color:var(--text); }
.btn-subtle:hover:not(:disabled) { background:rgba(255,255,255,.12); border-color:rgba(255,61,154,.45); }
.btn-ghost { border-color:rgba(230,200,255,.3); }
.btn-ghost:hover:not(:disabled) { border-color:var(--pink); color:#fff; box-shadow:0 0 18px -4px rgba(255,61,154,.6); }
.btn-cyan { background:var(--grad-ice); color:#06122A; border-color:transparent; box-shadow:0 10px 26px -10px rgba(41,227,255,.6); }
.btn-danger { color:#FF6B9E; border-color:rgba(255,61,154,.55); }

/* inputs */
input, select, textarea { background:rgba(12,4,30,.55); border-color:rgba(230,200,255,.18); }
input:focus, select:focus, textarea:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,61,154,.22), 0 0 22px -6px rgba(255,61,154,.6); background:rgba(20,8,44,.8); }
select option { background:#25133F; }

/* pills */
.pill { background:rgba(255,255,255,.05); border-color:rgba(230,200,255,.18); }
.pill:hover { border-color:rgba(255,61,154,.5); }
.pill.active { background:var(--grad-royal); border-color:transparent; color:#fff; box-shadow:0 6px 20px -6px rgba(255,61,154,.7); }
.pill-cyan.active { background:var(--grad-ice); color:#06122A; }
.section-tabs { background:rgba(14,6,32,.72); }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-inline-start:6px; border-radius:999px; background:var(--pink); color:#fff; font-size:11px; font-weight:700; box-shadow:0 0 12px rgba(255,61,154,.8); }

/* bottom nav */
.bottom-nav { background:rgba(18,8,40,.86); border-top-color:rgba(230,200,255,.14); }
.bottom-nav button.active { color:#fff; text-shadow:0 0 14px rgba(255,61,154,.9); }
.bottom-nav button.active .ico { stroke:var(--pink); filter:drop-shadow(0 0 6px rgba(255,61,154,.9)); }
.bottom-nav button.active::before { background:var(--grad-hot); height:3px; box-shadow:0 0 12px rgba(255,61,154,.9); }

/* brand mark — a glowing gradient ring */
.brand-mark {
  color:#fff; border:none;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), transparent 60%), #1B0E36;
  box-shadow:0 0 0 2px transparent, 0 0 0 2px rgba(255,61,154,.9), 0 0 26px rgba(255,61,154,.6), 0 0 60px rgba(169,107,255,.45);
}
.fab { background:var(--grad-hot); color:#fff; border:none; box-shadow:0 12px 30px -8px rgba(255,61,154,.8); }

/* toasts & strips */
.banner { background:linear-gradient(120deg, rgba(58,30,104,.97), rgba(40,16,80,.97)); border-color:rgba(255,61,154,.6); box-shadow:0 18px 40px -12px rgba(255,61,154,.55); }
.status-strip { background:rgba(18,8,40,.8); }

/* live */
.live-dot { background:var(--green); box-shadow:0 0 10px var(--green); }

/* guest home */
.me-card { background:linear-gradient(135deg, rgba(255,61,154,.22), rgba(169,107,255,.18) 55%, rgba(41,227,255,.10)), rgba(27,14,54,.8); border-color:rgba(255,61,154,.28); }
.me-photo { box-shadow:0 0 0 2px var(--pink), 0 0 0 6px rgba(255,61,154,.18), 0 0 30px rgba(255,61,154,.5); }
.verified { color:var(--gold); }
.now-cell { background:rgba(255,255,255,.05); border-color:rgba(230,200,255,.14); }
.now-cell b { background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:26px; }
.blur-row img { box-shadow:0 0 0 2px #1B0E36, 0 0 14px rgba(255,61,154,.5); }
.arrival-wait { border-color:rgba(255,194,71,.5); background:rgba(255,194,71,.08); }
.prompt-card p { color:#fff; }
.prompt-card { border-inline-start:3px solid var(--pink); }
#arrivals-fab { background:var(--grad-hot); color:#fff; }
.cash-hero { background:linear-gradient(135deg, rgba(255,194,71,.22), rgba(255,138,61,.08)); border-color:rgba(255,194,71,.5); }
.cash-hero b { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* staff screens */
.order-card, .kanban-card { background:linear-gradient(160deg, rgba(58,30,104,.7), rgba(28,12,58,.8)) !important; border-color:rgba(230,200,255,.14) !important; }
.kanban-col { background:rgba(255,255,255,.03); }
.is-new { animation:arriveVivid 1.8s ease-out; }
@keyframes arriveVivid { 0%{ transform:translateY(-8px) scale(.97); opacity:0; box-shadow:0 0 0 0 rgba(255,61,154,0);} 20%{ transform:none; opacity:1; box-shadow:0 0 0 3px rgba(255,61,154,.6), 0 0 36px rgba(255,61,154,.6);} 100%{ box-shadow:0 0 0 0 rgba(255,61,154,0);} }

/* ── waiter: tables ── */
.tables-summary { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:12px; }
.ts-chip { padding:10px 6px; border-radius:var(--radius); text-align:center; font-size:12px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid rgba(230,200,255,.14); }
.ts-chip b { display:block; font-family:var(--display); font-size:24px; color:#fff; line-height:1.1; }
.tables-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.table-tile { text-align:right; font-family:var(--body); color:var(--text); cursor:pointer; padding:14px; border-radius:var(--radius-lg); min-height:112px;
  display:flex; flex-direction:column; gap:6px; border:1px solid rgba(230,200,255,.16); background:linear-gradient(160deg, rgba(58,30,104,.6), rgba(28,12,58,.75)); transition:transform .12s, box-shadow .2s; }
.table-tile:active { transform:scale(.97); }
.tt-top { display:flex; justify-content:space-between; align-items:center; }
.tt-id { font-family:var(--display); font-size:24px; }
.tt-status { font-size:11.5px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.08); }
.tt-mid { font-size:12.5px; color:var(--muted); }
.tt-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:auto; font-weight:600; }
.tt-open { font-size:11.5px; color:var(--gold); font-weight:500; }
.t-active { border-color:rgba(51,240,166,.45); box-shadow:0 0 22px -10px rgba(51,240,166,.7); }
.t-active .tt-status, .status-pill.t-active { background:rgba(51,240,166,.16); color:var(--green); }
.t-attention { border-color:rgba(255,61,154,.8); box-shadow:0 0 26px -6px rgba(255,61,154,.8); animation:callGlow 1.8s ease-in-out infinite; }
.t-attention .tt-status, .status-pill.t-attention { background:var(--pink); color:#fff; }
.t-cleaning { border-color:rgba(255,194,71,.6); border-style:dashed; }
.t-cleaning .tt-status, .status-pill.t-cleaning { background:rgba(255,194,71,.18); color:var(--gold); }
.t-reserved { border-color:rgba(127,140,255,.55); }
.t-reserved .tt-status, .status-pill.t-reserved { background:rgba(127,140,255,.18); color:var(--blue); }
.t-free { opacity:.85; }
.ts-chip.t-active b { color:var(--green); } .ts-chip.t-attention b { color:var(--pink); } .ts-chip.t-cleaning b { color:var(--gold); }
.status-pill { font-size:12.5px; padding:5px 12px; border-radius:999px; }
.seat-card { padding:14px; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(230,200,255,.14); margin-bottom:10px; }
.seat-head { display:flex; justify-content:space-between; gap:10px; }
.seat-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.seat-money { text-align:left; }
.seat-money span { display:block; font-size:11px; color:var(--muted); }
.seat-money b { font-family:var(--display); font-size:20px; color:var(--gold); }
.seat-items { margin-top:10px; font-size:13px; border-top:1px solid rgba(230,200,255,.12); padding-top:8px; }
.seat-items > div { display:flex; justify-content:space-between; padding:2px 0; }
.seat-total { font-weight:700; color:#fff; border-top:1px dashed rgba(230,200,255,.2); margin-top:4px; padding-top:4px !important; }
.seat-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.table-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
/* menu "+" — small, bright, inviting */
.add-btn { background:var(--grad-hot) !important; color:#fff !important; border:none !important; box-shadow:0 6px 18px -6px rgba(255,61,154,.8); font-weight:700; }
.menu-item-name, .menu-item .name { color:#fff; }
/* sheets always above the shift bar and floating buttons, with room at the bottom */
.modal-bg, .gift-modal-bg { z-index:80; }
.modal-card { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }

/* ═══════════════════════════════════════════════════════════════
   THEME "PEARL" (default): white & pearl-blue, touches of black,
   sky, mint green and red — bright, glowing, luxurious.
   The dark "velvet" theme applies when <html data-theme="velvet">.
   ═══════════════════════════════════════════════════════════════ */
html:not([data-theme="velvet"]) {
  --bg:#F4F8FC; --surface:#FFFFFF; --surface-2:#EEF4FB; --surface-3:#E2EBF7;
  --line:rgba(15,40,80,.10); --line-strong:rgba(15,40,80,.20);
  --text:#0B1324; --muted:#5A6B84;
  --pink:#F0364F;   /* red — people, likes, attention */
  --cyan:#0EA5E9;   /* sky */
  --gold:#1D5BEA;   /* pearl blue — money & emphasis */
  --green:#0FB981;  /* mint green */
  --blue:#3B82F6; --violet:#6366F1; --orange:#F59E0B;
  --glow-pink:rgba(240,54,79,.18); --glow-cyan:rgba(14,165,233,.22); --glow-gold:rgba(29,91,234,.20);
  --grad-hot:  linear-gradient(120deg, #1D5BEA 0%, #2F8CFF 50%, #38CFFF 100%);
  --grad-royal:linear-gradient(120deg, #0B1324 0%, #22324F 100%);
  --grad-gold: linear-gradient(120deg, #1D5BEA 0%, #38CFFF 100%);
  --grad-ice:  linear-gradient(120deg, #38CFFF 0%, #34D399 100%);
  --grad-ink:  linear-gradient(180deg, #243047 0%, #0B1324 100%);
  --shadow: 0 14px 36px -18px rgba(29,91,234,.35);
  color-scheme:light;
}
html:not([data-theme="velvet"]) body {
  color:var(--text);
  background-color:#F4F8FC;
  background-image:
    radial-gradient(70% 45% at 100% 0%, rgba(56,207,255,.28), transparent 62%),
    radial-gradient(60% 40% at 0% 18%, rgba(160,190,255,.35), transparent 62%),
    radial-gradient(70% 45% at 20% 105%, rgba(52,211,153,.18), transparent 60%),
    radial-gradient(50% 35% at 95% 85%, rgba(240,54,79,.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF4FB 100%);
}
/* pearl shimmer: soft sky and mint lights that breathe */
html:not([data-theme="velvet"]) body::before { background:radial-gradient(circle, rgba(56,207,255,.45), rgba(56,207,255,0) 70%); filter:blur(80px); opacity:calc(var(--room-energy,.7) * .8); }
html:not([data-theme="velvet"]) body::after  { background:radial-gradient(circle, rgba(52,211,153,.30), rgba(52,211,153,0) 70%); filter:blur(80px); opacity:calc(var(--room-energy,.7) * .8); }

html:not([data-theme="velvet"]) h1, html:not([data-theme="velvet"]) h2, html:not([data-theme="velvet"]) h3 { color:var(--text); }
html:not([data-theme="velvet"]) .title { background:linear-gradient(120deg, #0B1324 0%, #1D5BEA 70%, #38CFFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
html:not([data-theme="velvet"]) ::selection { background:rgba(56,207,255,.35); color:#0B1324; }
html:not([data-theme="velvet"]) :focus-visible { outline-color:var(--gold); }

/* pearl cards: white with a faint iridescent sheen and a blue-tinted shadow */
html:not([data-theme="velvet"]) .card,
html:not([data-theme="velvet"]) .modal-card,
html:not([data-theme="velvet"]) .gift-modal-card,
html:not([data-theme="velvet"]) .order-card,
html:not([data-theme="velvet"]) .kanban-card {
  background:linear-gradient(160deg, #FFFFFF 0%, #F6FAFF 55%, #EEF6FF 100%) !important;
  border:1px solid rgba(29,91,234,.12) !important;
  box-shadow:0 1px 0 #fff inset, 0 16px 40px -20px rgba(29,91,234,.38), 0 2px 6px -2px rgba(15,40,80,.08);
  color:var(--text);
}
html:not([data-theme="velvet"]) .card:hover { border-color:rgba(29,91,234,.30) !important; }
html:not([data-theme="velvet"]) .kanban-col { background:rgba(255,255,255,.55); border-color:rgba(29,91,234,.10); }
html:not([data-theme="velvet"]) .modal-bg, html:not([data-theme="velvet"]) .gift-modal-bg { background:rgba(15,30,60,.32); }

/* buttons */
html:not([data-theme="velvet"]) .btn-primary {
  background:var(--grad-hot); color:#fff; text-shadow:none;
  box-shadow:0 10px 26px -8px rgba(29,91,234,.60), 0 0 0 1px rgba(255,255,255,.3) inset;
}
html:not([data-theme="velvet"]) .btn-primary:hover:not(:disabled) { background:var(--grad-hot); box-shadow:0 14px 34px -8px rgba(29,91,234,.8), 0 0 24px -4px rgba(56,207,255,.6); }
/* the "gold" (money) button becomes glossy black — the touch of black */
html:not([data-theme="velvet"]) .btn-gold {
  background:var(--grad-ink); color:#fff;
  box-shadow:0 10px 26px -10px rgba(11,19,36,.55), 0 1px 0 rgba(255,255,255,.18) inset;
}
html:not([data-theme="velvet"]) .btn-gold:hover:not(:disabled) { background:var(--grad-ink); box-shadow:0 12px 30px -8px rgba(29,91,234,.55); }
html:not([data-theme="velvet"]) .btn-subtle { background:#fff; color:var(--text); border-color:rgba(29,91,234,.16); box-shadow:0 2px 6px -3px rgba(15,40,80,.15); }
html:not([data-theme="velvet"]) .btn-subtle:hover:not(:disabled) { background:#F2F7FF; border-color:rgba(29,91,234,.4); }
html:not([data-theme="velvet"]) .btn-ghost { color:var(--text); border-color:rgba(15,40,80,.22); }
html:not([data-theme="velvet"]) .btn-ghost:hover:not(:disabled) { color:var(--gold); border-color:var(--gold); box-shadow:0 0 16px -4px rgba(29,91,234,.45); }
html:not([data-theme="velvet"]) .btn-cyan { background:var(--grad-ice); color:#04263A; }
html:not([data-theme="velvet"]) .btn-danger { color:var(--pink); border-color:rgba(240,54,79,.45); }

/* inputs */
html:not([data-theme="velvet"]) input, html:not([data-theme="velvet"]) select, html:not([data-theme="velvet"]) textarea {
  background:#fff; color:var(--text); border-color:rgba(15,40,80,.16); box-shadow:0 1px 2px rgba(15,40,80,.05) inset;
}
html:not([data-theme="velvet"]) input:focus, html:not([data-theme="velvet"]) select:focus, html:not([data-theme="velvet"]) textarea:focus {
  background:#fff; border-color:#2F8CFF; box-shadow:0 0 0 3px rgba(47,140,255,.18), 0 0 20px -6px rgba(56,207,255,.7);
}
html:not([data-theme="velvet"]) select option { background:#fff; color:var(--text); }

/* pills: white; active = glossy black */
html:not([data-theme="velvet"]) .pill { background:#fff; color:var(--text); border-color:rgba(15,40,80,.14); box-shadow:0 2px 6px -4px rgba(15,40,80,.2); }
html:not([data-theme="velvet"]) .pill:hover { border-color:rgba(29,91,234,.45); }
html:not([data-theme="velvet"]) .pill.active { background:var(--grad-ink); color:#fff; border-color:transparent; box-shadow:0 8px 20px -8px rgba(11,19,36,.6), 0 0 0 1px rgba(56,207,255,.35); }
html:not([data-theme="velvet"]) .section-tabs { background:rgba(255,255,255,.78); }
html:not([data-theme="velvet"]) .badge { background:var(--pink); box-shadow:0 0 12px rgba(240,54,79,.6); }

/* bottom nav */
html:not([data-theme="velvet"]) .bottom-nav { background:rgba(255,255,255,.88); border-top-color:rgba(15,40,80,.10); box-shadow:0 -10px 30px -18px rgba(29,91,234,.35); }
html:not([data-theme="velvet"]) .bottom-nav button { color:#7686A0; }
html:not([data-theme="velvet"]) .bottom-nav button.active { color:var(--gold); text-shadow:none; }
html:not([data-theme="velvet"]) .bottom-nav button.active .ico { stroke:var(--gold); filter:drop-shadow(0 0 6px rgba(56,207,255,.9)); }
html:not([data-theme="velvet"]) .bottom-nav button.active::before { background:var(--grad-hot); box-shadow:0 0 12px rgba(56,207,255,.9); }

/* brand */
html:not([data-theme="velvet"]) .brand-mark {
  color:#0B1324; background:radial-gradient(circle at 50% 30%, #FFFFFF, #EEF5FF);
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(47,140,255,.85), 0 0 30px rgba(56,207,255,.55), 0 10px 30px -10px rgba(29,91,234,.5);
}
html:not([data-theme="velvet"]) .fab { background:var(--grad-hot); box-shadow:0 12px 28px -8px rgba(29,91,234,.7); }
html:not([data-theme="velvet"]) #fab { background:var(--grad-hot) !important; box-shadow:0 12px 28px -8px rgba(29,91,234,.7) !important; }
html:not([data-theme="velvet"]) .add-btn { background:var(--grad-hot) !important; box-shadow:0 6px 16px -6px rgba(29,91,234,.7); }

/* toasts, strips, shift bar */
html:not([data-theme="velvet"]) .banner { background:rgba(255,255,255,.97); color:var(--text); border-color:rgba(47,140,255,.55); box-shadow:0 18px 40px -14px rgba(29,91,234,.5); }
html:not([data-theme="velvet"]) .status-strip { background:rgba(255,255,255,.82); color:var(--muted); }
html:not([data-theme="velvet"]) #shift-bar { background:rgba(255,255,255,.95) !important; border-color:rgba(15,40,80,.12) !important; box-shadow:0 10px 30px -14px rgba(29,91,234,.45) !important; color:var(--text); }
html:not([data-theme="velvet"]) #live-offline { background:#fff; color:var(--text); border-color:rgba(240,54,79,.5); }
html:not([data-theme="velvet"]) .live-dot { background:var(--green); box-shadow:0 0 10px rgba(15,185,129,.8); }

/* guest home */
html:not([data-theme="velvet"]) .me-card { background:linear-gradient(135deg, rgba(56,207,255,.20), rgba(255,255,255,.9) 45%, rgba(52,211,153,.14)), #fff; border-color:rgba(29,91,234,.16); box-shadow:0 16px 40px -20px rgba(29,91,234,.45); }
html:not([data-theme="velvet"]) .me-photo { box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(47,140,255,.85), 0 0 26px rgba(56,207,255,.55); }
html:not([data-theme="velvet"]) .now-cell { background:#fff; border-color:rgba(29,91,234,.12); box-shadow:0 6px 16px -10px rgba(29,91,234,.35); }
html:not([data-theme="velvet"]) .now-cell b { background:linear-gradient(120deg, #0B1324, #1D5BEA 60%, #38CFFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
html:not([data-theme="velvet"]) .now-card { background:rgba(255,255,255,.8); border-color:rgba(29,91,234,.14); }
html:not([data-theme="velvet"]) .blur-row img { box-shadow:0 0 0 2px #fff, 0 0 12px rgba(56,207,255,.6); }
html:not([data-theme="velvet"]) .arrival-wait { border-color:rgba(47,140,255,.45); background:rgba(56,207,255,.08); }
html:not([data-theme="velvet"]) .prompt-card { background:#fff; border-inline-start-color:var(--cyan); }
html:not([data-theme="velvet"]) .prompt-card p, html:not([data-theme="velvet"]) .seat-total, html:not([data-theme="velvet"]) .ts-chip b, html:not([data-theme="velvet"]) .menu-item-name { color:var(--text); }
html:not([data-theme="velvet"]) #arrivals-fab { background:var(--grad-hot); color:#fff; }
html:not([data-theme="velvet"]) .avatar-initial { color:var(--gold); }
html:not([data-theme="velvet"]) .cash-hero { background:linear-gradient(135deg, rgba(56,207,255,.16), #fff); border-color:rgba(29,91,234,.3); }
html:not([data-theme="velvet"]) .cash-hero b { background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent; }
html:not([data-theme="velvet"]) .night-grid > div { background:#fff; }

/* staff: tables */
html:not([data-theme="velvet"]) .table-tile { background:linear-gradient(160deg, #FFFFFF, #F3F8FF); border-color:rgba(15,40,80,.12); color:var(--text); box-shadow:0 10px 24px -16px rgba(29,91,234,.4); }
html:not([data-theme="velvet"]) .tt-status { background:#EEF4FB; }
html:not([data-theme="velvet"]) .ts-chip { background:#fff; border-color:rgba(15,40,80,.10); }
html:not([data-theme="velvet"]) .seat-card { background:#fff; border-color:rgba(29,91,234,.12); }
html:not([data-theme="velvet"]) .t-active { border-color:rgba(15,185,129,.55); box-shadow:0 0 22px -10px rgba(15,185,129,.8); }
html:not([data-theme="velvet"]) .t-active .tt-status, html:not([data-theme="velvet"]) .status-pill.t-active { background:rgba(15,185,129,.14); color:#07875F; }
html:not([data-theme="velvet"]) .t-attention { border-color:rgba(240,54,79,.8); box-shadow:0 0 26px -6px rgba(240,54,79,.6); }
html:not([data-theme="velvet"]) .t-cleaning { border-color:rgba(245,158,11,.7); }
html:not([data-theme="velvet"]) .t-cleaning .tt-status, html:not([data-theme="velvet"]) .status-pill.t-cleaning { background:rgba(245,158,11,.15); color:#B45309; }
html:not([data-theme="velvet"]) .ts-chip.t-cleaning b { color:#D97706; }
html:not([data-theme="velvet"]) .is-new { animation:arrivePearl 1.8s ease-out; }
@keyframes arrivePearl { 0%{ transform:translateY(-8px) scale(.97); opacity:0; } 20%{ transform:none; opacity:1; box-shadow:0 0 0 3px rgba(56,207,255,.7), 0 0 36px rgba(56,207,255,.6);} 100%{ } }
/* staff login screen in pearl */
html:not([data-theme="velvet"]) .btn-enter { background:var(--grad-hot) !important; box-shadow:0 12px 28px -8px rgba(29,91,234,.7) !important; }
html:not([data-theme="velvet"]) .tab-btn.active { background:var(--grad-ink) !important; color:#fff !important; box-shadow:0 8px 18px -8px rgba(11,19,36,.6) !important; }
html:not([data-theme="velvet"]) .tab-btn { background:#fff; color:var(--text); }
html:not([data-theme="velvet"]) .vibe-stat { background:rgba(255,255,255,.9) !important; border-color:rgba(29,91,234,.14) !important; color:var(--text); box-shadow:0 8px 20px -12px rgba(29,91,234,.4); }
html:not([data-theme="velvet"]) .vibe-stat b { color:var(--gold); }
html:not([data-theme="velvet"]) .wordmark { background:linear-gradient(90deg,#0B1324,#1D5BEA,#38CFFF,#0B1324) !important; background-size:300% 100% !important; -webkit-background-clip:text !important; background-clip:text !important; }

/* ═══════════════════════════════════════════════════════════════
   v7 — typography & logo
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, .title { font-family:var(--display); font-weight:600; letter-spacing:-.015em; }
.title { font-size:27px; font-weight:700; }
body { font-weight:400; letter-spacing:0; }
.btn { font-weight:600; }
b, strong { font-weight:600; }

/* logo: the pearl-and-doorway mark (shared/logo.svg) replaces the letter */
.brand-mark, html:not([data-theme="velvet"]) .brand-mark {
  background:url("/shared/logo.svg") center/100% no-repeat !important;
  font-size:0 !important; color:transparent !important; border:none !important;
  box-shadow:0 12px 30px -10px rgba(29,91,234,.55), 0 0 0 1px rgba(255,255,255,.6), 0 0 34px -6px rgba(56,207,255,.55) !important;
  padding:0 !important;
}
.brand-mark { width:64px; height:64px; }
.brand-mark-lg { width:104px; height:104px; }
html[data-theme="velvet"] .brand-mark { box-shadow:0 0 0 2px rgba(255,61,154,.7), 0 0 34px rgba(255,61,154,.5), 0 0 70px rgba(169,107,255,.4) !important; }

/* wordmark "Lobby" */
.wordmark { font-family:var(--display) !important; font-weight:600 !important; letter-spacing:-.03em !important; }

/* floor (hostess / manager): tables by area */
.floor-zone { margin-bottom:16px; }
.floor-zone-head { display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 8px; }
.floor-zone-head b { font-size:17px; }
.floor-zone-head span { font-size:12.5px; color:var(--muted); }
.floor-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:8px; }
.floor-tile { aspect-ratio:1/1; border-radius:14px; cursor:pointer; font-family:var(--body); color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--surface); border:1.5px solid var(--line-strong); box-shadow:var(--shadow); transition:transform .12s; }
.floor-tile:active { transform:scale(.95); }
.ft-id { font-size:20px; font-weight:700; line-height:1; }
.ft-sub { font-size:10.5px; color:var(--muted); }
.floor-tile.t-active .ft-sub { color:var(--green); font-weight:600; }
.floor-tile.t-attention .ft-sub { color:var(--pink); font-weight:600; }
.floor-tile.t-cleaning .ft-sub { color:var(--orange); font-weight:600; }
.floor-tile.t-reserved .ft-sub { color:var(--blue); font-weight:600; }
.floor-tile.t-free { opacity:1; }
/* 50 tables: three per row on a phone */
.tables-grid { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
.table-tile { min-height:96px; padding:11px; }
.tt-id { font-size:22px; font-weight:700; }
.tt-mid { font-size:11.5px; }
.tt-status { font-size:10.5px; padding:2px 7px; }
/* the arch logo stands on its own — no circle behind it */
.brand-mark, html:not([data-theme="velvet"]) .brand-mark, html[data-theme="velvet"] .brand-mark {
  border-radius:0 !important; background-color:transparent !important;
  box-shadow:none !important; filter:drop-shadow(0 10px 18px rgba(29,91,234,.45)) drop-shadow(0 0 14px rgba(56,207,255,.35));
}
html:not([data-theme="velvet"]) .t-attention .tt-status { background:var(--pink) !important; color:#fff !important; }
html:not([data-theme="velvet"]) .t-reserved .tt-status { background:rgba(59,130,246,.14); color:#1D4ED8; }
/* guest: open service calls, just above the call button */
#call-status { position:fixed; bottom:calc(136px + env(safe-area-inset-bottom)); left:14px; z-index:44; max-width:260px; display:flex; flex-direction:column; gap:6px; }
#call-status .cs { background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:8px 12px; font-size:12.5px; box-shadow:var(--shadow); }

/* menu: tools, descriptions, tags, promos */
.menu-tools { position:sticky; top:0; z-index:5; padding:6px 0 10px; background:linear-gradient(var(--bg) 70%, transparent); }
.menu-tools input { width:100%; margin-bottom:8px; }
.menu-filters { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.menu-filters .pill { white-space:nowrap; flex-shrink:0; }
.menu-desc { font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:1px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.menu-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.menu-tags span { font-size:10.5px; padding:2px 7px; border-radius:999px; background:rgba(15,185,129,.12); color:var(--green); }
.promo-tag { font-size:10.5px; padding:2px 7px; border-radius:999px; background:rgba(240,54,79,.12); color:var(--pink); }
.add-btn:disabled { opacity:.35; cursor:not-allowed; }
/* checkbox rows (shared by staff screens) */
.toggle-row { display:flex; align-items:center; gap:8px; font-size:13.5px; margin:0 0 10px; cursor:pointer; }
.toggle-row input { width:18px; height:18px; accent-color:var(--gold); flex-shrink:0; }

/* ===== Dating D2: premium "who's here" ===== */
.swipe-card { position:relative; width:100%; aspect-ratio:3/4; max-height:62vh; border-radius:26px; overflow:hidden; background:#101828; box-shadow:0 18px 50px rgba(15,35,80,.28); touch-action:pan-y; user-select:none; }
.swipe-card > img, .pf-hero > img, .pg-tile > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.sc-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#6D8CFF,#E9579C); }
.sc-placeholder span { font-size:96px; font-weight:700; color:rgba(255,255,255,.92); }
.sc-bars { position:absolute; top:10px; left:12px; right:12px; display:flex; gap:4px; z-index:3; }
.sc-bars i { flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.35); }
.sc-bars i.on { background:#fff; }
.sc-tap { position:absolute; top:0; bottom:40%; width:40%; background:transparent; border:none; z-index:2; cursor:pointer; }
.sc-tap-prev { right:0; } .sc-tap-next { left:0; }
.sc-shade { position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(to top, rgba(6,10,22,.94) 0%, rgba(6,10,22,.55) 45%, rgba(6,10,22,0) 100%); pointer-events:none; }
.sc-info { position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px; color:#fff; text-align:right; z-index:3; cursor:pointer; }
.sc-name { font-size:28px; font-weight:700; line-height:1.1; display:flex; align-items:center; gap:8px; }
.sc-name span { font-weight:400; opacity:.9; }
.sc-verified { width:20px; height:20px; border-radius:50%; background:#3B82F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='white' stroke-width='3' fill='none'/%3E%3C/svg%3E") center/13px no-repeat; display:inline-block; }
.sc-meta { font-size:13.5px; opacity:.85; margin-top:4px; }
.sc-reasons { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sc-chip { background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:4px 11px; font-size:12px; }
.sc-bio { font-size:13.5px; line-height:1.5; margin-top:10px; opacity:.92; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-more { font-size:12px; opacity:.7; margin-top:8px; }
.sc-match { position:absolute; top:24px; left:14px; z-index:3; background:rgba(255,255,255,.94); color:#0B1324; font-weight:700; font-size:15px; border-radius:999px; padding:6px 13px; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.sc-new { position:absolute; top:24px; right:14px; z-index:3; background:linear-gradient(90deg,#E9579C,#FF7A59); color:#fff; font-size:12px; font-weight:600; border-radius:999px; padding:6px 12px; }
.sc-stamp { position:absolute; top:70px; z-index:4; font-size:28px; font-weight:800; padding:6px 16px; border-radius:12px; border:3px solid; opacity:0; transition:opacity .1s; }
.sc-stamp-yes { right:18px; color:#34D399; border-color:#34D399; transform:rotate(12deg); }
.sc-stamp-no { left:18px; color:#F87171; border-color:#F87171; transform:rotate(-12deg); }
.sc-actions, .pf-actions { display:flex; gap:16px; justify-content:center; align-items:center; margin-top:16px; }
.sc-btn { width:62px; height:62px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; transition:transform .15s; box-shadow:0 8px 22px rgba(15,35,80,.16); }
.sc-btn:active { transform:scale(.92); }
.sc-btn svg { width:26px; height:26px; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.sc-pass { background:#fff; } .sc-pass svg { stroke:#9AA6B8; }
.sc-wave, .sc-gift { width:50px; height:50px; background:#fff; font-size:20px; }
.sc-like { width:72px; height:72px; background:linear-gradient(135deg,#FF5C8A,#C23BF0); box-shadow:0 10px 28px rgba(233,87,156,.45); }
.sc-like svg { stroke:#fff; fill:#fff; }
.sc-hint { text-align:center; color:var(--muted); font-size:11px; margin-top:10px; }
.sc-empty { text-align:center; padding:48px 18px; border-radius:24px; background:var(--surface); border:1px solid var(--line); }
.sc-empty-ico { font-size:30px; color:var(--pink); } .sc-empty h3 { margin:8px 0 6px; } .sc-empty p { color:var(--muted); font-size:13px; margin-bottom:14px; }
.vibe-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.vibe-label { font-size:12px; color:var(--muted); margin-left:4px; }
/* grid */
.pg-group { margin-bottom:18px; }
.pg-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px; }
.pg-head b { color:var(--gold); } .pg-head span { color:var(--muted); font-size:12px; }
.pg-intro { margin-right:auto; background:transparent; border:1px solid var(--pink); color:var(--pink); border-radius:999px; padding:4px 11px; font-size:11.5px; cursor:pointer; }
.people-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pg-tile { position:relative; aspect-ratio:3/4; border-radius:20px; overflow:hidden; border:none; padding:0; cursor:pointer; background:#101828; box-shadow:0 8px 22px rgba(15,35,80,.16); text-align:right; }
.pg-shade { position:absolute; inset:auto 0 0 0; height:60%; background:linear-gradient(to top, rgba(6,10,22,.9), rgba(6,10,22,0)); }
.pg-info { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; color:#fff; display:flex; flex-direction:column; gap:2px; }
.pg-info b { font-size:16px; } .pg-info small { font-size:11px; opacity:.85; line-height:1.35; }
.pg-match { position:absolute; top:10px; left:10px; background:rgba(255,255,255,.94); color:#0B1324; font-weight:700; font-size:12px; border-radius:999px; padding:4px 9px; }
.pg-new { position:absolute; top:10px; right:10px; background:linear-gradient(90deg,#E9579C,#FF7A59); color:#fff; font-size:10.5px; border-radius:999px; padding:4px 8px; }
.pg-status { align-self:flex-start; margin-top:4px; font-size:10.5px; background:rgba(255,255,255,.18); border-radius:999px; padding:2px 8px; }
.pg-on { background:rgba(52,211,153,.35); } .pg-hot { background:rgba(245,158,11,.45); }
/* profile sheet */
.pf-bg { position:fixed; inset:0; background:rgba(6,10,22,.6); z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.pf-sheet { width:100%; max-width:460px; max-height:94vh; display:flex; flex-direction:column; background:var(--surface); border-radius:26px 26px 0 0; overflow:hidden; animation:slideUp .25s ease; }
.pf-hero { position:relative; width:100%; aspect-ratio:4/5; max-height:58vh; flex-shrink:0; background:#101828; }
.pf-close { position:absolute; top:22px; left:14px; z-index:4; width:36px; height:36px; border-radius:50%; border:none; background:rgba(6,10,22,.55); color:#fff; font-size:16px; cursor:pointer; }
.pf-body { padding:16px 18px 8px; overflow-y:auto; }
.pf-match { background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px; }
.pf-match-top { display:flex; align-items:baseline; gap:8px; } .pf-match-top b { font-size:26px; color:var(--pink); } .pf-match-top span { color:var(--muted); font-size:13px; }
.pf-bar { height:6px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:8px; }
.pf-bar i { display:block; height:100%; background:linear-gradient(90deg,#FF5C8A,#38CFFF); border-radius:4px; }
.pf-reasons { margin-top:10px; }
.pf-chip { display:inline-block; margin:0 0 6px 6px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); font-size:12px; }
.pf-chip-hot { border-color:rgba(233,87,156,.45); background:rgba(233,87,156,.08); }
.pf-chip-gold { border-color:var(--gold); background:rgba(245,190,70,.12); }
.pf-block { margin:12px 0; } .pf-block p { font-size:14.5px; line-height:1.6; margin:6px 0 0; }
.pf-label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.pf-prompt { background:var(--surface-2); border-radius:18px; padding:16px; margin:10px 0; border-right:4px solid var(--pink); }
.pf-prompt p { font-size:19px; font-weight:600; line-height:1.4; margin:4px 0 0; }
.pf-safety { display:flex; gap:18px; justify-content:center; margin:16px 0 6px; font-size:12px; } .pf-safety a { color:var(--muted); }
.pf-actions { padding:12px 18px calc(14px + env(safe-area-inset-bottom)); margin:0; border-top:1px solid var(--line); background:var(--surface); }
.pf-main { flex:1; height:54px; font-size:16px; }
/* profile strength */
.strength { margin-top:12px; background:var(--surface-2); border-radius:14px; padding:10px 12px; }
.strength-top { display:flex; justify-content:space-between; font-size:12.5px; } .strength-top b { color:var(--pink); }
.strength p { font-size:12px; color:var(--muted); margin:6px 0 0; }
/* one scrollable line each, so the card and its buttons stay above the fold */
.vibe-row, #intent-chips { flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.vibe-row::-webkit-scrollbar, #intent-chips::-webkit-scrollbar { display:none; }
.vibe-row .pill, #intent-chips .pill { flex-shrink:0; white-space:nowrap; padding:6px 12px; font-size:12.5px; }
.vibe-label { flex-shrink:0; white-space:nowrap; }
#intent-chips .pill:not(.active) { background:transparent; }
.swipe-card { max-height:56vh; }

/* ===== Dating D3: icebreakers & drink offers ===== */
.ib-card { max-width:440px; }
.ib-title { font-size:22px; margin-bottom:4px; }
.ib-sub { font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
.ib-label { font-size:12px; color:var(--muted); margin:10px 0 6px; }
.ib-targets, .ib-sugs { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.ib-target, .ib-sug { text-align:right; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:13px; cursor:pointer; color:var(--text); font-family:inherit; }
.ib-target.active { border-color:var(--pink); background:rgba(233,87,156,.08); }
.ib-sug { border-style:dashed; }
#ib-text { width:100%; resize:none; margin-bottom:8px; }
.ib-actions { display:flex; gap:8px; margin-top:6px; } .ib-actions .btn { flex:1; }
.ib-drinks { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.ib-drink { display:flex; flex-direction:column; gap:2px; text-align:right; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; cursor:pointer; color:var(--text); font-family:inherit; }
.ib-drink span { font-size:12px; color:var(--muted); } .ib-drink.active { border-color:var(--pink); background:rgba(233,87,156,.08); }
.req-note { margin-top:10px; background:var(--surface-2); border-radius:14px; padding:10px 12px; border-right:3px solid var(--pink); }
.req-note span { display:block; font-size:11.5px; color:var(--muted); margin-bottom:3px; } .req-note p { font-size:14px; margin:0; }
.offer-card { background:linear-gradient(135deg, rgba(233,87,156,.08), rgba(56,207,255,.08)); border:1px solid rgba(233,87,156,.3); border-radius:20px; padding:14px; margin-bottom:10px; }
.offer-top { display:flex; gap:10px; align-items:center; font-size:14px; }
.offer-sub { font-size:11.5px; color:var(--muted); margin-top:2px; }
.offer-msg { font-size:16px; font-weight:600; margin:10px 0 4px; }
.offer-actions { display:flex; gap:8px; margin-top:8px; } .offer-actions .btn { flex:1; }
  .req-card { background:var(--surface); border-color:var(--line); }

/* ===== Dating D4: groups ===== */
.crew-mine { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px 14px; margin-bottom:8px; }
.crew-mine b { display:block; font-size:14px; } .crew-mine span { font-size:12px; color:var(--muted); }
.crew-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:14px; margin-bottom:12px; box-shadow:0 8px 22px rgba(15,35,80,.08); }
.crew-top { display:flex; justify-content:space-between; align-items:center; }
.crew-faces { display:flex; flex-direction:row-reverse; justify-content:flex-end; }
.crew-face { width:54px; height:54px; border-radius:50%; overflow:hidden; border:3px solid var(--surface); margin-left:-14px; background:linear-gradient(160deg,#6D8CFF,#E9579C); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; box-shadow:0 4px 10px rgba(0,0,0,.12); }
.crew-face img { width:100%; height:100%; object-fit:cover; }
.crew-more { background:var(--surface-2); color:var(--text); font-size:15px; }
.crew-title { font-size:16px; font-weight:700; margin-top:10px; }
.crew-names { font-size:12.5px; color:var(--muted); margin-top:2px; }
.crew-actions { display:flex; gap:8px; margin-top:12px; } .crew-actions .btn { flex:1; }
.av-group { background:linear-gradient(135deg,#FF5C8A,#38CFFF) !important; color:#fff; font-size:20px; }
#group-overlay .grp-wrap { position:fixed; inset:0; z-index:70; background:var(--bg); display:flex; flex-direction:column; }
.grp-head { display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px; background:var(--surface); border-bottom:1px solid var(--line); }
.grp-back { background:transparent; border:none; font-size:22px; color:var(--text); cursor:pointer; }
.grp-leave { background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--muted); font-size:12px; cursor:pointer; }
.grp-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.grp-msg { max-width:78%; align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:8px 12px; }
.grp-msg.mine { align-self:flex-end; background:linear-gradient(135deg,#FF5C8A,#C23BF0); color:#fff; border:none; }
.grp-msg span { font-size:11.5px; font-weight:700; color:var(--pink); } .grp-msg p { margin:2px 0; font-size:14.5px; } .grp-msg small { font-size:10px; opacity:.7; }
.grp-input { display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); }
.grp-input input { flex:1; }
.offer-top .crew-faces { flex-shrink:0; padding-left:14px; }
.offer-top .crew-face { width:44px; height:44px; font-size:17px; }

/* ===== Dating D5: after the night ===== */
.met-card { text-align:center; font-size:12px; color:var(--muted); padding:8px 12px 0; }
.keep-box { margin:10px 12px 0; background:linear-gradient(135deg, rgba(233,87,156,.08), rgba(56,207,255,.08)); border:1px solid rgba(233,87,156,.3); border-radius:18px; padding:12px 14px; }
.keep-box b { font-size:14.5px; } .keep-box p { font-size:12.5px; color:var(--muted); margin:4px 0 8px; }
.keep-ended { background:var(--surface-2); border-color:var(--line); }
#convo-tools { display:flex; gap:8px; justify-content:center; padding:8px 12px 0; }
#convo-tools button { background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:11.5px; color:var(--muted); cursor:pointer; font-family:inherit; }
.phase-tag { font-size:10.5px; color:var(--muted); margin-top:3px; } .phase-wait { color:var(--pink); } .phase-end { color:var(--muted); font-style:italic; }
.after-card { margin-bottom:14px; }
.after-row { display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.after-btns { display:flex; gap:6px; }

/* ===== HQ 1: business profile ===== */
.vp-card { max-width:620px; }
.vp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.vp-x { background:none; border:none; font-size:18px; color:var(--muted); cursor:pointer; }
.vp-section { font-size:13px; font-weight:700; color:var(--pink); margin:16px 0 8px; }
.vp-photos { display:flex; gap:10px; }
.vp-slot { position:relative; border-radius:16px; overflow:hidden; background:var(--surface-2); border:1px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12.5px; }
.vp-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vp-slot-cover { flex:1; aspect-ratio:16/9; } .vp-slot-logo { width:120px; aspect-ratio:1; }
.vp-slot-actions { position:absolute; bottom:6px; left:6px; right:6px; display:flex; gap:4px; justify-content:center; }
.vp-slot-actions .btn { padding:3px 10px; font-size:11px; }
.vp-gal-edit { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.vp-g { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--surface-2); }
.vp-g img { width:100%; height:100%; object-fit:cover; }
.vp-g div { position:absolute; top:4px; left:4px; display:flex; gap:3px; }
.vp-g button { width:24px; height:24px; border-radius:50%; border:none; background:rgba(6,10,22,.6); color:#fff; cursor:pointer; font-size:12px; }
.vp-g-add { display:flex; align-items:center; justify-content:center; border:1px dashed var(--line-strong); cursor:pointer; color:var(--muted); font-size:13px; }
.vp-hours-row { display:grid; grid-template-columns:60px 80px 1fr 20px 1fr; gap:6px; align-items:center; font-size:13px; margin-bottom:6px; }
.vp-biz { background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.vp-cover { position:relative; aspect-ratio:3/1; background:linear-gradient(135deg,#DDE9FB,#F7E3EE); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.vp-cover > img:first-child { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vp-logo { position:absolute; bottom:-36px; right:20px; width:84px; height:84px; border-radius:22px; object-fit:cover; border:4px solid var(--surface); background:var(--surface-2); box-shadow:0 6px 18px rgba(0,0,0,.15); }
.vp-logo-empty { display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); }
.vp-biz-body { padding:44px 20px 18px; }
.vp-biz-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .vp-biz-top h3 { font-size:24px; margin:0; }
.vp-tag { font-size:15px; margin:10px 0 0; }
.vp-meter { margin:14px 0; font-size:12.5px; color:var(--muted); }
.vp-gal { display:flex; gap:8px; overflow-x:auto; } .vp-gal img { width:140px; height:100px; object-fit:cover; border-radius:12px; flex-shrink:0; }
/* guest home */
.hv-cover { position:relative; margin:-18px -18px 14px; aspect-ratio:16/8; overflow:hidden; border-radius:22px 22px 0 0; }
.hv-cover img:first-child { width:100%; height:100%; object-fit:cover; }
.hv-logo { position:absolute; bottom:10px; right:12px; width:56px; height:56px; border-radius:16px; object-fit:cover; border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.hv-meta { font-size:12.5px; color:var(--muted); margin-top:4px; } .hv-meta a { color:inherit; }
.hv-gal { display:flex; gap:6px; overflow-x:auto; margin-top:10px; } .hv-gal img { width:92px; height:70px; object-fit:cover; border-radius:12px; cursor:pointer; flex-shrink:0; }
.hv-gal-full { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .hv-gal-full img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; }
.hv-contact { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.hv-hours div { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line); }

/* ===== HQ 2: floor plan & stations ===== */
.fp-wrap { background:#F7F9FC; border:1px solid var(--line); border-radius:18px; padding:8px; overflow:auto; }
.fp-ed { position:fixed; inset:0; z-index:80; background:var(--bg); display:flex; flex-direction:column; }
.fp-bar { display:flex; gap:8px; align-items:center; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.fp-bar b { font-size:17px; margin-left:8px; }
.fp-body { flex:1; display:flex; min-height:0; }
.fp-canvas { flex:1; overflow:auto; padding:16px; background:#EEF2F8; }
.fp-canvas svg { background:#FAFBFD; border-radius:14px; box-shadow:0 6px 20px rgba(15,35,80,.08); max-width:1400px; margin:0 auto; }
.fp-side { width:280px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line); padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.fp-side h4 { font-size:17px; margin-bottom:6px; } .fp-side p { font-size:13px; line-height:1.55; }
.fp-side input, .fp-side select { width:100%; margin-bottom:6px; }
.fp-del { margin-top:12px; color:var(--pink); }
.fp-colors { display:flex; gap:6px; margin-bottom:8px; } .fp-colors button { width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.fp-colors button.on { border-color:var(--pink); }
.fp-msg { padding:8px 16px; font-size:13px; color:var(--pink); background:var(--surface); border-top:1px solid var(--line); min-height:36px; margin:0; }
@media (max-width:760px) { .fp-body { flex-direction:column; } .fp-side { width:auto; border-right:none; border-top:1px solid var(--line); max-height:40vh; } }
.floor-mode { display:flex; gap:6px; margin-bottom:10px; }
.bk-legend { display:flex; gap:14px; justify-content:center; font-size:12px; color:var(--muted); margin:8px 0; }
.bk-legend span::before { content:""; display:inline-block; width:12px; height:12px; border-radius:4px; margin-left:5px; vertical-align:-2px; border:2px solid; }
.lg-free::before { border-color:#1FA971 !important; background:#fff; } .lg-pick::before { border-color:#E23C78 !important; background:#FFE0EA; } .lg-busy::before { border-color:#C3CAD6 !important; background:#E6EAF0; }
.st-row { display:flex; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.st-add { display:flex; gap:6px; margin-top:12px; } .st-add input { flex:1; }

/* ===== HQ 3: safety center ===== */
.sf-card { margin-bottom:10px; } .sf-open { border-color:rgba(226,60,120,.45); }
.sf-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.sf-st { font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted); }
.sf-st.sf-open { background:#FFE3EE; color:#C2185B; } .sf-st.sf-in_review { background:#FFF1D6; color:#A86400; } .sf-st.sf-resolved { background:#E3F5E8; color:#1B7F4B; }
.sf-who { font-size:14px; } .sf-reason { font-size:14px; margin:6px 0; }
.sf-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.sf-bubble { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:6px 10px; font-size:13.5px; display:inline-block; }
.sf-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.sf-photo { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:8px; }
.sf-photo img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; margin-bottom:6px; }
.sf-team { display:grid; grid-template-columns:140px 1fr auto auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.sf-role { display:inline-flex; gap:4px; align-items:center; margin-left:12px; font-size:13px; }

/* ===== HQ 4: feature switches ===== */
body.feat-off-dating [data-feat="dating"] { display:none !important; }
body.feat-off-groups [data-feat="groups"] { display:none !important; }
body.feat-off-drinkOffers [data-feat="drinkOffers"] { display:none !important; }
body.feat-off-gifts [data-feat="gifts"] { display:none !important; }
body.feat-off-reservations [data-feat="reservations"] { display:none !important; }
body.feat-off-games [data-feat="games"] { display:none !important; }
body.feat-off-ai [data-feat="ai"] { display:none !important; }
.cm-banner { background:#FFF4DC; border:1px solid #F2C46B; border-radius:14px; padding:10px 14px; font-size:13.5px; margin-bottom:12px; }
.cm-grid { display:grid; grid-template-columns:1fr 130px; gap:8px 12px; align-items:center; max-width:560px; }
.cm-grid input { width:100%; }
.st-table { width:100%; border-collapse:collapse; font-size:13.5px; } .st-table td, .st-table th { padding:8px 6px; border-bottom:1px solid var(--line); text-align:right; }
.st-table .num { font-family:var(--mono); text-align:left; } .st-total td { font-weight:700; border-top:2px solid var(--line-strong); }
.ft-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }

/* network / failure toast (calm.js) */
#calm-toast { position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:200;
  background:#0B1324; color:#fff; padding:10px 16px; border-radius:14px; font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:opacity .2s, transform .2s; max-width:90vw; text-align:center; }
#calm-toast.show { opacity:1; transform:translate(-50%, 0); }

/* in-app dialogs (dialogs.js) */
.ui-dlg-wrap { position:fixed; inset:0; z-index:1000; background:rgba(8,14,30,.45); display:flex; align-items:center; justify-content:center; padding:18px; animation:uiFade .12s ease-out; }
.ui-dlg { background:var(--surface, #fff); color:var(--text, #0B1324); border-radius:20px; padding:20px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ui-dlg-msg { font-size:15.5px; line-height:1.55; margin-bottom:14px; white-space:normal; }
.ui-dlg-input { width:100%; font-size:18px; padding:10px 12px; margin-bottom:14px; }
.ui-dlg-btns { display:flex; gap:10px; } .ui-dlg-btns .btn { flex:1; min-height:46px; font-size:15px; }
.ui-dlg-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; } .ui-dlg-list .btn { min-height:46px; font-size:15px; }
@keyframes uiFade { from { opacity:0; } to { opacity:1; } }

/* ===== floating bars must never cover buttons =====
   The shift bar (bottom) and the "guest waiting" button (top) float over the
   page. Content now gets room above/below them, and the shift bar wraps
   instead of pushing its last buttons off the screen. */
body.has-shift-bar, body:has(#shift-bar) { padding-bottom:calc(170px + env(safe-area-inset-bottom)) !important; }
#shift-bar { flex-wrap:wrap; justify-content:center; row-gap:6px; max-width:100vw; box-sizing:border-box; }
#shift-bar .btn { padding:6px 12px; }
body.has-arrivals-fab { padding-top:calc(58px + env(safe-area-inset-top)) !important; }
#comp-fab { bottom:calc(130px + env(safe-area-inset-bottom)) !important; }

/* a refreshed (already open) window keeps still — no replayed pop-in animation */
.calm-refreshed .modal-bg, .calm-refreshed .modal-card, .calm-refreshed .modal-pop, .calm-refreshed * { animation:none !important; }

/* a window that refreshes while open doesn't replay its entrance animation */
.no-anim, .no-anim .modal-card { animation:none !important; }

/* The live events ticker in screen headers stays ONE line: a long event used to wrap to a second
   line and push the tabs/buttons below it down ~19px every few seconds — taps landed on the wrong tab. */
#live-tick { white-space: nowrap; overflow: hidden; min-width: 0; flex: 0 1 auto; max-width: 60%; }