:root {
  /* Neutrals — Untitled UI gray ramp */
  --bg:#f6f7f9;
  --bg-soft:#fbfcfd;
  --panel:#ffffff;
  --ink:#101828;
  --ink-soft:#344054;
  --muted:#667085;
  --faint:#98a2b3;
  --line:#eaecf0;
  --line-soft:#f2f4f7;
  /* Brand */
  --accent:#6366f1;
  --accent-ink:#4f46e5;
  --accent-soft:#eef2ff;
  --accent-softer:#f5f7ff;
  /* Semantic */
  --success:#079455; --success-soft:#ecfdf3;
  --warn:#dc9a00;    --warn-soft:#fffaeb;
  --danger:#d92d20;  --danger-soft:#fef3f2;
  /* Geometry */
  --radius:10px; --radius-lg:14px; --radius-sm:8px;
  --calc:#fafbfc;
  /* Elevation */
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.09), 0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 6px 16px rgba(16,24,40,.10), 0 2px 5px rgba(16,24,40,.05);
  --shadow-lg:0 18px 48px rgba(16,24,40,.20);
  --shadow:var(--shadow-sm);            /* back-compat alias */
  /* Motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
}

/* ---------- Top bar (workspace toolbar) ---------- */
#topbar {
  display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:14px 22px 10px;
  background:var(--bg);
  position:sticky; top:0; z-index:6;
}
.topbar-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; }

/* ---- Sheet tabs (segmented, Linear-style) ---- */
#tabbar { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
#tabbar .tab {
  padding:7px 13px; background:transparent; border:1px solid transparent; color:var(--muted);
  cursor:pointer; border-radius:9px; font:inherit; font-weight:600; font-size:12.5px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .15s var(--ease-out), color .15s var(--ease-out),
             border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .1s var(--ease-out);
}
#tabbar .tab:hover { background:var(--line-soft); color:var(--ink-soft); }
#tabbar .tab:active { transform:scale(.97); }
#tabbar .tab.active {
  background:var(--panel); border-color:var(--line); color:var(--accent-ink);
  box-shadow:var(--shadow-xs);
}

/* ---- Toolbar (search + actions) ---- */
#toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#toolbar input, #toolbar button {
  font:inherit; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel); color:var(--ink); padding:8px 12px; height:36px;
}
#search {
  min-width:240px; box-shadow:var(--shadow-xs); padding-left:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:11px center;
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
#toolbar input[type="checkbox"] { min-width:0; width:auto; height:auto; padding:0; border:none; box-shadow:none; }
#toolbar input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
#toolbar button {
  cursor:pointer; font-weight:600; box-shadow:var(--shadow-xs);
  display:inline-flex; align-items:center; gap:5px;
  transition:background .15s var(--ease-out), border-color .15s var(--ease-out), transform .1s var(--ease-out);
}
#toolbar button:hover { background:var(--bg-soft); border-color:#dcdfe5; }
#toolbar button:active { transform:scale(.97); }
/* Primary action: + Row */
#toolbar #addRow {
  background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--shadow-xs);
}
#toolbar #addRow:hover { background:var(--accent-ink); border-color:var(--accent-ink); }
#whoami {
  margin-left:auto; color:var(--muted); cursor:pointer;
  padding:7px 10px; border-radius:var(--radius-sm); transition:background .15s var(--ease-out);
}
#whoami:hover { background:var(--line-soft); color:var(--ink); }

/* ---------- Summary strip (stat cards) ---------- */
#summary {
  margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; align-items:stretch; justify-content:flex-end;
  max-width:66%;
}
.stat-chip {
  display:inline-flex; align-items:center; gap:10px; padding:9px 13px 9px 10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-xs); transition:box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.stat-chip:hover { box-shadow:var(--shadow-sm); border-color:#dcdfe5; }
.stat-ico {
  font-size:15px; line-height:1; width:30px; height:30px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border-radius:8px;
}
.stat-chip.money .stat-ico { background:var(--success-soft); }
.stat-text { display:flex; flex-direction:column; gap:1px; line-height:1.1; }
.stat-lbl { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; font-weight:600; }
.stat-val { font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap; letter-spacing:-.01em; }
.stat-chip.money .stat-val { color:var(--success); }

/* ---------- Grid frame ---------- */
#grid {
  height: calc(100vh - 168px);
  margin:6px 22px 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

/* Manually overridden formula cell: faint left accent vs auto-calc */
.tabulator-cell.formula-override { box-shadow: inset 2px 0 0 rgba(220,154,0,.6); }

/* ---------- Tabulator overrides (clean SaaS table) ---------- */
.tabulator { background:var(--panel); border:none; font-size:13px; color:var(--ink); }
.tabulator .tabulator-tableholder,
.tabulator .tabulator-tableholder .tabulator-table { background:var(--panel); }
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-group { background:var(--panel); }
.tabulator .tabulator-header {
  background:var(--bg-soft); border-bottom:1px solid var(--line);
  font-weight:600; color:var(--muted);
}
.tabulator .tabulator-header .tabulator-col {
  background:transparent; border-right:1px solid var(--line-soft); color:var(--muted);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.045em;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding:11px 12px; }
/* editable column titles: look like headers, editable on click */
.tabulator input.tabulator-title-editor {
  border:none !important; background:transparent !important; box-shadow:none !important;
  font:inherit !important; font-weight:600 !important; color:var(--ink) !important;
  text-transform:uppercase; letter-spacing:.045em;
  padding:0 !important; width:100%;
}
.tabulator input.tabulator-title-editor:focus {
  outline:none; border-bottom:1px solid var(--accent) !important; background:var(--panel) !important;
}
.tabulator .tabulator-row { border-bottom:1px solid var(--line-soft); min-height:44px; }
.tabulator .tabulator-row .tabulator-cell {
  border-right:1px solid var(--line-soft); padding:11px 12px; color:var(--ink);
  white-space:nowrap; text-overflow:ellipsis;
}
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even,
.tabulator .tabulator-row.tabulator-row-odd { background:var(--panel); }
.tabulator .tabulator-row .tabulator-cell.tabulator-editing {
  border:1px solid var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft);
  padding:9px 11px;
}

/* ---------- Section bands (group rows) ---------- */
.tabulator .tabulator-row.tabulator-group {
  background:transparent; border:none; padding:0; min-height:0;
}
.tabulator .tabulator-row.tabulator-group .tabulator-arrow { display:none; }
.sec-band {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 14px; background:var(--bg-soft); border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); border-left:3px solid var(--muted);
  font-weight:600; color:var(--ink-soft); letter-spacing:.01em;
}
.sec-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.sec-color { width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer; border-radius:50%; flex:0 0 auto; }
.sec-color::-webkit-color-swatch-wrapper { padding:0; }
.sec-color::-webkit-color-swatch { border:1px solid rgba(0,0,0,.15); border-radius:50%; }
.sec-color::-moz-color-swatch { border:1px solid rgba(0,0,0,.15); border-radius:50%; }
.sec-name { text-transform:uppercase; font-size:11px; letter-spacing:.06em; font-weight:700; }
.sec-name-edit { cursor:pointer; }
.sec-name-edit:hover { text-decoration:underline; }
.sec-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px; padding:2px 7px; border-radius:6px; margin-left:6px; }
.sec-del:hover { background:var(--danger-soft); color:var(--danger); }
body:not(.layout-mode) .sec-del { display:none; }
.sec-count { color:var(--faint); font-weight:600; }
.sec-add {
  margin-left:10px; font:inherit; font-size:11.5px; font-weight:600;
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  border-radius:7px; padding:4px 11px; cursor:pointer;
  transition:background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out), transform .1s var(--ease-out);
  position:sticky; left:12px;
}
.sec-add:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.sec-add:active { transform:scale(.96); }

/* ---------- Calc / total rows ----------
   Base tabulator_simple hardcodes #f2f2f2/#fff with !important on these exact
   selectors — we must match them precisely. var(--calc) adapts to light & dark. */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs,
.tabulator .tabulator-footer .tabulator-calcs-holder,
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
.tabulator .tabulator-header .tabulator-calcs-holder,
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
  background:var(--calc) !important; font-weight:700; color:var(--ink);
}
.tabulator .tabulator-calcs .tabulator-cell { background:transparent !important; color:var(--ink); border-right-color:var(--line-soft); }
.tabulator .tabulator-footer {
  background:var(--panel); color:var(--ink); border-top:1px solid var(--line);
}
.tabulator .tabulator-footer .tabulator-calcs-holder { border-top-color:var(--line); border-bottom-color:var(--line); }
/* base sets table text color #333 — keep cells readable in dark */
.tabulator .tabulator-tableholder .tabulator-table { color:var(--ink); }

/* ---------- Row hover (clear over any row color) ---------- */
.tabulator .tabulator-row:hover .tabulator-cell { box-shadow: inset 0 0 0 9999px rgba(99,102,241,0.055); }
body[data-theme="dark"] .tabulator .tabulator-row:hover .tabulator-cell { box-shadow: inset 0 0 0 9999px rgba(138,138,255,0.12); }

/* ---------- Bottom add-row bar ---------- */
#gridFooter { padding:8px 22px 12px; }
#gridFooter #addRowBottom {
  font:inherit; font-weight:600; width:100%; border:1px dashed var(--line);
  background:transparent; color:var(--muted); border-radius:var(--radius-sm); padding:9px 14px; cursor:pointer;
  transition:border-color .15s var(--ease-out), color .15s var(--ease-out), background .15s var(--ease-out);
}
#gridFooter #addRowBottom:hover { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-softer); }

/* ---------- Arrival highlight (rows) ---------- */
.tabulator .tabulator-row.row-arrived-full { background: var(--success-soft) !important; }
.tabulator .tabulator-row.row-arrived-partial { background: var(--warn-soft) !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-arrived-full { background: rgba(52,211,153,0.14) !important; }
body[data-theme="dark"] .tabulator .tabulator-row.row-arrived-partial { background: rgba(224,167,43,0.13) !important; }
.sec-band.sec-arrived { border-left-color:var(--success); }
.sec-band.sec-arrived .sec-name { color:var(--success); }
.row-del { color:var(--faint); cursor:pointer; font-weight:700; opacity:.6; transition:opacity .12s, color .12s; }
.row-del:hover { color:var(--danger); opacity:1; }

/* ---------- Arrived −/+ stepper ---------- */
.arr-step { display:inline-flex; align-items:center; gap:6px; }
.arr-btn {
  width:24px; height:24px; padding:0; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:7px; cursor:pointer; font-size:15px; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out), transform .1s var(--ease-out);
}
.arr-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.arr-btn:active { transform:scale(.92); }
.arr-plus:hover { background:var(--success); border-color:var(--success); }
.arr-val { min-width:18px; text-align:center; font-weight:700; }

/* ---------- Status / select pills ---------- */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
  line-height:1.7; white-space:nowrap; border:1px solid transparent;
}
.pill-wrap { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }

/* ---------- Utility ---------- */
.hidden { display:none !important; }

/* ---------- App bar (always visible) ---------- */
#appbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:7;
}
.appbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark {
  width:30px; height:30px; flex:0 0 auto; border-radius:9px;
  background:linear-gradient(135deg, #818cf8 0%, #6366f1 55%, #4f46e5 100%);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 2px 6px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-mark svg { width:17px; height:17px; }
#appTitle { font-weight:700; font-size:14px; color:var(--ink); letter-spacing:-.01em; }
.appbar-sep { width:1px; height:22px; background:var(--line); margin:0 2px; flex:0 0 auto; }
#eventLabel { color:var(--ink); font-weight:700; font-size:16px; letter-spacing:-.01em; }
.appbar-right { display:flex; align-items:center; gap:6px; }
.appbar-right button, .ghost-btn, .appbar-link {
  font:inherit; font-weight:600; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:var(--radius-sm); padding:7px 11px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .15s var(--ease-out), border-color .15s var(--ease-out),
             color .15s var(--ease-out), transform .1s var(--ease-out);
}
.appbar-right button:hover, .ghost-btn:hover, .appbar-link:hover { background:var(--bg); border-color:#dcdfe5; color:var(--ink); }
.appbar-right button:active, .ghost-btn:active, .appbar-link:active { transform:scale(.96); }
.appbar-right button svg, .ghost-btn svg, .appbar-link svg { width:16px; height:16px; flex:0 0 auto; }
#eventsBtn { color:var(--accent-ink); }
#eventsBtn .chev { width:13px; height:13px; opacity:.7; }
/* icon-only buttons (theme, menu) */
.icon-only { padding:7px; width:36px; justify-content:center; }
/* theme toggle: swap sun/moon by theme */
#themeToggle .ico-sun { display:none; }
#themeToggle .ico-moon { display:inline-flex; }
body[data-theme="dark"] #themeToggle .ico-sun { display:inline-flex; }
body[data-theme="dark"] #themeToggle .ico-moon { display:none; }
/* whoami avatar chip */
#whoami.avatar-chip { margin-left:2px; display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; }
.who-avatar {
  width:28px; height:28px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(135deg, #a5b4fc, #6366f1); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.who-text { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.who-name { font-weight:600; font-size:12.5px; color:var(--ink); }
.who-role { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

/* Overflow (☰) dropdown */
.crm-menu-wrap { position:relative; display:inline-flex; }
.crm-menu-dropdown {
  position:absolute; right:0; top:calc(100% + 8px); min-width:190px; z-index:30;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; gap:2px;
  transform-origin:top right; animation:gv-menu .16s var(--ease-out);
}
.crm-menu-item {
  font:inherit; font-weight:500; text-align:left; width:100%; border:none; background:transparent; color:var(--ink-soft);
  border-radius:8px; padding:9px 11px; cursor:pointer; display:flex; align-items:center; gap:9px;
  transition:background .14s var(--ease-out);
}
.crm-menu-item:hover { background:var(--line-soft); color:var(--ink); }
.crm-menu-item.danger { color:var(--danger); }
.crm-menu-item.danger:hover { background:var(--danger-soft); }
body[data-theme="dark"] .appbar-right button:hover, body[data-theme="dark"] .ghost-btn:hover,
body[data-theme="dark"] .appbar-link:hover, body[data-theme="dark"] .crm-menu-item:hover { background:#2a2a32; }

/* ---------- Home / events screen ---------- */
.home-wrap { max-width:820px; margin:0 auto; padding:28px 18px 64px; display:flex; flex-direction:column; gap:26px; }
.active-card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 26px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.active-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--accent), var(--accent-ink));
}
.active-card.empty { color:var(--muted); }
.active-card.empty::before { display:none; }
.active-tag { font-size:10.5px; font-weight:700; letter-spacing:.09em; color:var(--accent-ink); text-transform:uppercase; }
.active-name { font-size:25px; font-weight:700; margin-top:5px; letter-spacing:-.02em; }
.active-meta { color:var(--muted); margin-top:3px; }
.home-summary { display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; color:var(--muted); font-size:13px; }
.home-summary b { color:var(--ink); }
.primary {
  font:inherit; font-weight:600; border:none; border-radius:var(--radius-sm); background:var(--accent); color:#fff;
  cursor:pointer; padding:9px 15px;
  transition:background .15s var(--ease-out), transform .1s var(--ease-out), box-shadow .15s var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.primary:hover { background:var(--accent-ink); }
.primary:active { transform:scale(.97); }
.primary.big { display:inline-block; margin-top:18px; padding:12px 24px; font-size:15px; }
.home-section-head h3 { margin:0 0 12px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.event-list { display:flex; flex-direction:column; gap:9px; }
.event-row {
  display:flex; flex-direction:column; align-items:stretch; gap:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px;
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.event-row:hover { border-color:#dcdfe5; box-shadow:var(--shadow-xs); }
.event-row.is-active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ev-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ev-info { display:flex; flex-direction:column; gap:2px; }
.ev-name { font-weight:700; font-size:14px; letter-spacing:-.01em; }
.ev-meta { color:var(--muted); font-size:12.5px; }
.ev-actions { display:flex; gap:6px; flex-wrap:wrap; }
.ev-dash { display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:12px; padding-top:11px; border-top:1px dashed var(--line); font-size:11.5px; color:var(--muted); }
.ev-dash:empty { display:none; }
.evd { display:inline-flex; gap:4px; align-items:baseline; white-space:nowrap; }
.evd b { color:var(--ink); font-weight:700; }
.new-event-form {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
}
.new-event-form input, .new-event-form select {
  font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft); color:var(--ink);
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.new-event-form input:focus, .new-event-form select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.new-event-form #evName { flex:1; min-width:160px; }
.toggle { display:inline-flex; align-items:center; gap:6px; font:inherit; color:var(--muted); cursor:pointer; }
body[data-theme="dark"] .appbar-right button:hover, body[data-theme="dark"] .ghost-btn:hover { background:#2a2a32; }

/* ---------- Overlays / modals / login ---------- */
.overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(16,24,40,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  animation:gv-fade .18s var(--ease-out);
}
.login-card {
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:32px 30px; width:340px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:13px; text-align:center;
  transform-origin:center; animation:gv-pop .22s var(--ease-out);
}
.login-card h1 { margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em; }
.login-sub { margin:0 0 8px; color:var(--muted); font-size:13px; }
.login-card select, .login-card input {
  font:inherit; padding:11px 13px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-soft); color:var(--ink);
}
.login-card select:focus, .login-card input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.login-card button {
  font:inherit; font-weight:600; padding:11px; border-radius:var(--radius); border:none;
  background:var(--accent); color:#fff; cursor:pointer; margin-top:4px;
  transition:background .15s var(--ease-out), transform .1s var(--ease-out);
}
.login-card button:hover { background:var(--accent-ink); }
.login-card button:active { transform:scale(.98); }
.login-error { color:var(--danger); font-size:12.5px; min-height:16px; margin:0; }

/* ---------- Activity drawer ---------- */
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:380px; z-index:90;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  animation:gv-drawer .28s var(--ease-out);
}
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px;
}
.icon-btn {
  background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; padding:5px 9px; border-radius:7px;
  transition:background .14s var(--ease-out), color .14s var(--ease-out);
}
.icon-btn:hover { background:var(--line-soft); color:var(--ink); }
.drawer-body { overflow-y:auto; padding:6px 0; }
.act-item { padding:11px 18px; border-bottom:1px solid var(--line-soft); }
.act-meta { display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:3px; }
.act-user { font-weight:600; color:var(--ink); }
.act-time { color:var(--muted); }
.act-body { font-size:13px; color:var(--ink-soft); }
.act-row { color:var(--muted); }
.act-empty { padding:22px 16px; color:var(--muted); text-align:center; }

/* ---------- Modals (users / customers / events) ---------- */
.modal-card {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  width:560px; max-width:92vw; max-height:84vh; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); overflow:hidden;
  transform-origin:center; animation:gv-pop .22s var(--ease-out);
}
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line); font-weight:700; font-size:15.5px; letter-spacing:-.01em;
}
.modal-body { overflow-y:auto; padding:6px 0; }
.events-modal-card { width:680px; }
#eventsBody .home-wrap { max-width:none; margin:0; padding:16px 20px 20px; gap:18px; }
.modal-foot {
  display:flex; gap:8px; align-items:center; padding:14px 18px; border-top:1px solid var(--line); background:var(--bg-soft);
}
.modal-foot input, .modal-foot select {
  font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel); color:var(--ink);
}
.modal-foot input:focus, .modal-foot select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.modal-foot #newUserName { flex:1; }
.modal-foot #newUserPin { width:130px; }
.modal-foot #newUserAdd, .modal-foot #newCustAdd {
  font:inherit; font-weight:600; padding:9px 15px; border:none; border-radius:var(--radius-sm);
  background:var(--accent); color:#fff; cursor:pointer; transition:background .15s var(--ease-out), transform .1s var(--ease-out);
}
.modal-foot #newUserAdd:hover, .modal-foot #newCustAdd:hover { background:var(--accent-ink); }
.modal-foot #newUserAdd:active, .modal-foot #newCustAdd:active { transform:scale(.97); }
.user-row {
  display:flex; align-items:center; gap:10px; padding:12px 20px;
  border-bottom:1px solid var(--line-soft);
}
.user-row.editing { gap:8px; flex-wrap:wrap; }
.u-name { font-weight:600; flex:1; }
.u-you { color:var(--muted); font-weight:400; font-size:11.5px; }
.u-role-badge {
  font-size:11px; font-weight:600; padding:2px 10px; border-radius:999px;
  background:var(--line-soft); color:var(--muted);
}
.u-role-badge.admin { background:var(--accent-soft); color:var(--accent-ink); }
.u-actions { display:flex; gap:6px; }
.u-btn {
  font:inherit; font-size:12px; font-weight:600; padding:6px 12px; border-radius:7px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); cursor:pointer;
  transition:background .14s var(--ease-out), border-color .14s var(--ease-out), transform .1s var(--ease-out);
}
.u-btn:hover { background:var(--bg); border-color:#dcdfe5; color:var(--ink); }
.u-btn:active { transform:scale(.96); }
.u-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.u-btn.primary:hover { background:var(--accent-ink); }
.u-btn.danger:hover:not([disabled]) { background:var(--danger-soft); color:var(--danger); border-color:#fecdca; }
.u-btn[disabled] { opacity:.4; cursor:not-allowed; }
.u-in { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--bg-soft); color:var(--ink); }
.u-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.u-in.u-pin { width:170px; }
.user-row.editing .u-name, .user-row.editing input.u-in:first-child { flex:1; }
.u-empty { padding:22px; text-align:center; color:var(--muted); }
body[data-theme="dark"] .u-role-badge { background:#2a2a32; color:#bbb; }
body[data-theme="dark"] .u-btn:hover { background:#2a2a32; }

/* ---------- Floor map ---------- */
#mapbar { display:flex; align-items:center; gap:12px; padding:12px 22px 0; }
#mapbar #addTableBtn {
  font:inherit; font-weight:600; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  border-radius:var(--radius-sm); padding:8px 13px; cursor:pointer; box-shadow:var(--shadow-xs);
  transition:background .15s var(--ease-out), border-color .15s var(--ease-out), transform .1s var(--ease-out);
}
#mapbar #addTableBtn:hover { background:var(--bg); border-color:#dcdfe5; }
#mapbar #addTableBtn:active { transform:scale(.97); }
.map-hint { color:var(--muted); font-size:12.5px; }
#floormap {
  position:relative; height:calc(100vh - 214px); margin:12px 22px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:auto; box-shadow:var(--shadow-sm);
  background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:24px 24px;
}
.map-stage {
  position:absolute; z-index:0; border:2px dashed var(--accent);
  background:var(--accent-softer); border-radius:8px; pointer-events:none;
}
.map-stage-label { position:absolute; top:5px; left:9px; font-size:11px; font-weight:700; color:var(--accent-ink); letter-spacing:.04em; }
.map-table {
  position:absolute; box-sizing:border-box; border-radius:9px; z-index:1;
  border:1px solid rgba(0,0,0,.18); box-shadow:0 2px 6px rgba(16,24,40,.16);
  padding:2px 4px; text-align:center; cursor:grab; user-select:none; overflow:hidden;
  display:flex; flex-direction:column; gap:0; align-items:center; justify-content:center;
  font-size:10px; line-height:1.05; transition:box-shadow .14s var(--ease-out), transform .1s var(--ease-out);
}
.map-table.round { border-radius:50%; }
.map-table:hover { box-shadow:0 6px 18px rgba(16,24,40,.26); z-index:2; }
.map-table:active { cursor:grabbing; }
.mt-num { font-weight:700; font-size:12px; }
.mt-name { font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-guests { font-size:9px; opacity:.92; }
.stage-controls { font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.stage-controls input { width:54px; font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); }
.table-popup {
  position:fixed; z-index:120; width:248px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg); padding:14px;
  transform-origin:top left; animation:gv-pop .18s var(--ease-out);
}
.tp-head { font-weight:700; margin-bottom:4px; }
.tp-type { font-weight:400; color:var(--muted); font-size:12px; }
.tp-grid { display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center; margin-bottom:9px; }
.tp-grid label { font-size:12px; color:var(--muted); }
.tp-in { font:inherit; padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--bg-soft); color:var(--ink); width:100%; }
.tp-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tp-color { padding:2px; height:30px; cursor:pointer; }
.tp-res { font-size:12px; color:var(--muted); margin-bottom:10px; }
.tp-nolink { color:var(--muted); font-style:italic; }
.tp-actions { display:flex; flex-wrap:wrap; gap:6px; }
.tp-actions button {
  font:inherit; font-size:12px; font-weight:600; padding:6px 10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-soft); border-radius:7px; cursor:pointer;
  transition:background .14s var(--ease-out), transform .1s var(--ease-out);
}
.tp-actions button:hover { background:var(--bg); }
.tp-actions button:active { transform:scale(.96); }
.tp-actions button.danger:hover { background:var(--danger-soft); color:var(--danger); border-color:#fecdca; }
#tabbar .tab.tab-map { margin-left:6px; }
body[data-theme="dark"] #mapbar #addTableBtn:hover,
body[data-theme="dark"] .tp-actions button:hover { background:#2a2a32; }

/* ---------- Keyframes ---------- */
@keyframes gv-fade { from { opacity:0; } to { opacity:1; } }
@keyframes gv-pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes gv-menu { from { opacity:0; transform:scale(.97) translateY(-4px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes gv-drawer { from { transform:translateX(100%); } to { transform:translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, .overlay, .modal-card, .login-card, .crm-menu-dropdown, .drawer, .table-popup {
    animation:none !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- Dark theme ---------- */
body[data-theme="dark"] {
  --bg:#131316; --bg-soft:#1a1a1f; --panel:#1e1e24; --ink:#f0f0f4; --ink-soft:#cfcfd8; --muted:#9a9aa6; --faint:#74747f;
  --line:#2d2d36; --line-soft:#26262d; --accent:#8a8aff; --accent-ink:#a5a5ff; --accent-soft:#2b2b46; --accent-softer:#222238;
  --success:#34d399; --success-soft:#11271d; --warn:#e0a72b; --warn-soft:#2a2113; --danger:#f87171; --danger-soft:#2a1717;
  --calc:#202027;
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 16px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --shadow:var(--shadow-sm);
}
body[data-theme="dark"] .brand-mark { box-shadow:0 2px 8px rgba(0,0,0,.5); }
body[data-theme="dark"] .tabulator .tabulator-row:hover { background:#26262d; }
body[data-theme="dark"] .sec-band { background:#22222a; }
body[data-theme="dark"] .sec-add { background:#2a2a32; }
body[data-theme="dark"] .tabulator .tabulator-calcs-bottom,
body[data-theme="dark"] .tabulator .tabulator-calcs-group { background:#202027 !important; }
body[data-theme="dark"] #tabbar .tab:hover,
body[data-theme="dark"] #whoami:hover,
body[data-theme="dark"] #toolbar button:hover { background:#26262d; }
body[data-theme="dark"] #toolbar #addRow:hover { background:var(--accent-ink); }
body[data-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color:var(--muted); border-top-color:var(--muted); }