/* =============================================================
   BigWheel IT — Dev OS · DARK · app.css
   Phase 16A UI redesign — dark-first, no frameworks, vanilla CSS.
   Built from the Claude Design handoff (handoff/css/app.css) plus a
   legacy compatibility section preserving Phase 13/14/15 utility
   classes that older admin and developer views still depend on.

   Sections:
     1. Design tokens
     2. Reset + base
     3. App shell, sidebar, topbar, popover, command palette
     4. Page surface + components (buttons, pills, badges, forms,
        cards, panels, metrics, tables, avatars, progress, empty,
        feed, callout, helpers, login)
     5. Responsive
     6. Reduced motion
     7. Legacy compatibility — Phase 13/14/15 classes (dark-mode)
   ============================================================= */

:root {
  /* Surfaces */
  --bg:               #0A0B0D;
  --bg-2:             #06070A;
  --surface:          #13151A;
  --surface-elev:     #1A1D24;
  --surface-hi:       #20242D;
  --surface-tint:     #161922;
  --border-subtle:    #1F242D;
  --border:           #2A2F39;
  --border-strong:    #3F434D;

  /* Text */
  --text-primary:     #E6E8EB;
  --text-secondary:   #9EA3AD;
  --text-tertiary:    #5F6672;
  --text-quaternary:  #3F434D;

  /* Accent */
  --primary:          #3B82F6;
  --primary-hover:    #2563EB;
  --primary-soft:     #1E3A8A;
  --primary-glow:     rgba(59,130,246,0.4);
  --primary-tint:     rgba(59,130,246,0.10);

  /* Status */
  --success:          #10B981;
  --success-text:     #34D399;
  --warning:          #F59E0B;
  --warning-text:     #FCD34D;
  --danger:           #EF4444;
  --danger-text:      #FCA5A5;
  --info:             #8B5CF6;
  --info-text:        #A78BFA;

  /* Spacing — 8pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Radius */
  --r-btn: 6px; --r-input: 6px; --r-card: 8px;
  --r-pill: 999px; --r-modal: 12px;

  /* Shadow */
  --sh-hover: 0 4px 16px -4px rgba(0,0,0,0.4);
  --sh-modal: 0 20px 60px -20px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.4);
  --sh-pop:   0 12px 32px -12px rgba(0,0,0,0.6);
  --sh-ring:  0 0 0 3px var(--primary-glow);

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;

  /* Shell */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
::selection { background: var(--primary-soft); color: var(--text-primary); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
code, .mono { font-family: var(--font-mono); }
img { max-width: 100%; height: auto; display: block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.visually-hidden:focus { position: static !important; width: auto; height: auto; clip: auto; padding: 8px 12px; background: var(--surface); color: var(--text-primary); }

/* ===== App shell ===== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 200ms ease-out;
}
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.app.auth-shell { grid-template-columns: 1fr; }

/* ===== Sidebar ===== */
.sb {
  background: var(--bg-2);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 25;
}
.sb-head {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.sb-mark {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--primary), var(--info));
  border-radius: 7px;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
  font-family: var(--font-mono);
  flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.4);
}
.sb-name { display: grid; line-height: 1.15; min-width: 0; white-space: nowrap; }
.sb-name strong { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
.sb-name small { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.sb-toggle {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-tertiary);
  transition: all 120ms ease;
}
.sb-toggle:hover { background: var(--surface-elev); color: var(--text-primary); }
.app.collapsed .sb-name { display: none; }
.app.collapsed .sb-head { justify-content: center; }
.app.collapsed .sb-search { display: none; }
.app.collapsed .sb-section-title { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.app.collapsed .sb-nav a .label,
.app.collapsed .sb-nav a .kbd,
.app.collapsed .sb-nav a .count { display: none; }
.app.collapsed .sb-nav a { justify-content: center; padding: 0; width: 36px; height: 36px; margin: 0 auto; }
.app.collapsed .sb-foot { padding: 12px 0; }
.app.collapsed .sb-foot .who { display: none; }

.sb-search { padding: 12px 12px 8px; position: relative; }
.sb-search input {
  width: 100%; height: 32px;
  padding: 0 12px 0 30px;
  background: var(--surface-tint);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12.5px;
}
.sb-search input::placeholder { color: var(--text-tertiary); }
.sb-search input:focus { outline: none; border-color: var(--border); }
.sb-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.sb-search .kbd {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-tertiary);
  padding: 2px 5px; border: 1px solid var(--border-subtle);
  border-radius: 4px; background: var(--bg);
}

.sb-section-title {
  padding: 14px 16px 4px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-quaternary);
  transition: opacity 150ms ease;
}

.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.sb-nav a {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
  position: relative;
  transition: all 120ms ease;
}
.sb-nav a .ic { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; }
.sb-nav a .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-nav a .count {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-elev); color: var(--text-secondary);
  padding: 2px 6px; border-radius: 999px;
}
.sb-nav a .kbd {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-quaternary);
  padding: 2px 5px; border: 1px solid var(--border-subtle);
  border-radius: 4px;
}
.sb-nav a:hover { background: var(--surface-elev); color: var(--text-primary); }
.sb-nav a:hover .kbd { color: var(--text-secondary); border-color: var(--border); }
.sb-nav a.active { background: var(--primary-tint); color: #93C5FD; }
.sb-nav a.active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px;
  background: var(--primary); border-radius: 0 2px 2px 0;
}
.sb-nav a.active .count { background: var(--primary); color: #fff; }

.sb-foot {
  margin-top: auto; padding: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px;
}
.sb-foot .who { display: grid; line-height: 1.2; min-width: 0; }
.sb-foot .who strong { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.sb-foot .who small { font-size: 11px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.sb-foot .who small .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 6px var(--success);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 var(--success); }
  50%      { box-shadow: 0 0 0 2px var(--bg-2), 0 0 8px var(--success); }
}

/* ===== Main column + topbar ===== */
.main { min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.topbar {
  height: var(--topbar-h);
  background: rgba(10,11,13,0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar .menu-toggle { display: none; }
@media (max-width: 820px) { .topbar .menu-toggle { display: grid; } }

.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-tertiary); min-width: 0; }
.crumbs .here { color: var(--text-primary); font-weight: 500; }
.crumbs svg { color: var(--text-quaternary); flex: none; }

.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--text-secondary);
  display: grid; place-items: center;
  position: relative;
  transition: all 120ms ease;
}
.icon-btn:hover { background: var(--surface-elev); color: var(--text-primary); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(10,11,13,1);
  animation: pulse 2s ease-in-out infinite;
}

/* ===== Avatar button + popover ===== */
.av-button {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-mono);
  transition: all 120ms ease;
}
.av-button:hover { border-color: var(--border-strong); }
.av-button.accent {
  background: linear-gradient(135deg, #1E3A8A, #4C1D95);
  color: #fff; border-color: rgba(255,255,255,0.1);
}

.popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sh-pop);
  width: 280px;
  z-index: 40;
  overflow: hidden;
  animation: popIn 120ms ease-out;
}
.popover[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.popover-head {
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 12px;
}
.popover-head .av {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #1E3A8A, #4C1D95);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-mono);
  flex: none;
}
.popover-head .who { display: grid; line-height: 1.25; min-width: 0; }
.popover-head .who strong { font-size: 13px; font-weight: 600; }
.popover-head .who small { font-size: 11px; color: var(--text-tertiary); }
.popover-list { padding: 6px; display: flex; flex-direction: column; }
.popover-list a, .popover-list button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  text-align: left;
  transition: all 120ms ease;
}
.popover-list a:hover, .popover-list button:hover { background: var(--surface-elev); color: var(--text-primary); }
.popover-list a svg, .popover-list button svg { color: var(--text-tertiary); }
.popover-list .sep { height: 1px; background: var(--border-subtle); margin: 6px 4px; }
.popover-list .danger { color: var(--danger-text); }
.popover-list .danger:hover { background: rgba(239,68,68,0.08); color: var(--danger); }
.popover-list .danger svg { color: var(--danger-text); }

/* ===== Page surface ===== */
.page {
  padding: 28px 32px 80px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

/* Container helper — used by legacy app layout */
.container { max-width: 1480px; margin: 0 auto; padding: 28px 32px 80px; }

/* ===== Page head ===== */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-head-text { min-width: 0; }
.page-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-head h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  line-height: 1.1;
}
.page-head .sub { color: var(--text-secondary); font-size: 14px; margin: 0; max-width: 60ch; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, color 120ms ease, box-shadow 120ms ease;
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 12px -4px rgba(59,130,246,0.4);
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-secondary:hover { background: var(--surface-elev); border-color: var(--border-strong); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-elev); color: var(--text-primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #DC2626; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; }
.btn[disabled], .btn:disabled { opacity: 0.5; pointer-events: none; }

/* ===== Pills / filter chips ===== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11.5px; font-weight: 500;
  text-decoration: none;
  transition: all 120ms ease;
}
.pill:hover { background: var(--surface-elev); color: var(--text-primary); }
.pill.active {
  background: var(--primary-tint);
  border-color: rgba(59,130,246,0.4);
  color: #93C5FD;
}
.pill .ct { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.pill.active .ct { color: var(--primary); }

/* ===== Status badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 500;
  background: var(--border); color: var(--text-secondary);
  white-space: nowrap; line-height: 1;
}
.badge.draft     { background: rgba(95,102,114,0.18); color: var(--text-secondary); }
.badge.submitted { background: rgba(59,130,246,0.15); color: #60A5FA; }
.badge.review    { background: rgba(245,158,11,0.15); color: var(--warning-text); }
.badge.approved  { background: rgba(16,185,129,0.15); color: var(--success-text); }
.badge.rejected  { background: rgba(239,68,68,0.15); color: var(--danger-text); }
.badge.signed    { background: rgba(16,185,129,0.15); color: var(--success); }
.badge.info      { background: rgba(139,92,246,0.15); color: var(--info-text); }
.badge.plain     { background: var(--surface-elev); color: var(--text-secondary); }

/* ===== Forms ===== */
.field { display: block; margin-bottom: 16px; }
.field.error .input,
.field.error .select,
.field.error .textarea,
.field.error input:not([type="checkbox"]):not([type="radio"]),
.field.error select,
.field.error textarea { border-color: var(--danger); }
.label, .field label, .field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.input, .select, .textarea,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.field select,
.field textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: var(--text-primary);
  transition: border-color 120ms, box-shadow 120ms;
}
.textarea, .field textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; }
.input::placeholder, .textarea::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .select:focus, .textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--sh-ring);
}
.input.error { border-color: var(--danger); }
.hint, .help { margin-top: 6px; font-size: 12px; color: var(--text-tertiary); }
.hint.error, .help.error { color: var(--danger-text); }

/* ===== Cards / panels ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  transition: all 150ms ease;
}
.card:hover { border-color: var(--border); }
.panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
}
.panel-head, .card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px; flex-wrap: wrap;
}
.card .card-header { padding: 0 0 12px; margin: 0 0 12px; }
.panel-head h3, .card-header h3 {
  margin: 0;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.panel-head h3 .count, .card-header h3 .count {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-elev); color: var(--text-secondary);
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border-subtle);
}
.panel-head .meta { color: var(--text-tertiary); font-size: 12px; }
.panel-body { padding: 18px; }
.card-divider { height: 1px; background: var(--border-subtle); margin: 16px 0; }

/* ===== Metric tiles ===== */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px) { .metric-grid { grid-template-columns: 1fr 1fr; } }
.metric {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 16px 12px;
  position: relative; overflow: hidden;
  transition: all 150ms ease;
}
.metric:hover { border-color: var(--border); background: var(--surface-tint); transform: translateY(-1px); }
.metric .label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}
.metric .label .ic { color: var(--primary); }
.metric .num {
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.03em; color: var(--text-primary); line-height: 1;
}
.metric .row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary);
}
.metric .delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 500; }
.metric .delta.up { color: var(--success-text); }
.metric .delta.down { color: var(--danger-text); }
.metric .spark { position: absolute; right: 14px; top: 12px; opacity: 0.85; }

/* ===== Tables ===== */
.table-wrap, .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
}
.data-table, .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.data-table thead th, .tbl thead th {
  text-align: left;
  padding: 10px 18px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.data-table tbody td, .tbl tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle; color: var(--text-primary);
}
.data-table tbody tr:last-child td, .tbl tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr, .tbl tbody tr { transition: background 100ms ease; }
.data-table tbody tr:hover td, .tbl tbody tr:hover td { background: var(--surface-tint); }
.data-table .stack-cell { display: grid; gap: 2px; }
.data-table .stack-cell small { color: var(--text-tertiary); font-size: 11.5px; }
.data-table .right { text-align: right; }
.data-table .who, .tbl .who { display: flex; align-items: center; gap: 10px; }

/* Mobile: data-tables flatten to cards. Legacy .tbl tables get a horizontal scroll instead. */
@media (max-width: 768px) {
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .data-table tbody td {
    border: 0; padding: 6px 0;
    display: flex; justify-content: space-between; align-items: center;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .data-table .right { text-align: left; }
}

/* ===== Avatars ===== */
.av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 600;
  font-family: var(--font-mono);
  flex: none;
}
.av.lg { width: 36px; height: 36px; font-size: 12px; }
.av.xl { width: 48px; height: 48px; font-size: 14px; }
.av.accent { background: linear-gradient(135deg, #1E3A8A, #4C1D95); color: #fff; border-color: rgba(255,255,255,0.08); }

/* ===== Progress bar ===== */
.progress {
  height: 4px;
  background: var(--surface-elev);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress > .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--info));
  border-radius: 4px;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.progress > .fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ===== Empty state ===== */
.empty {
  text-align: center;
  padding: 64px 24px;
}
.empty .ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  margin: 0 auto 14px;
  display: grid; place-items: center;
  color: var(--text-secondary);
}
.empty h4 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.empty p { color: var(--text-secondary); max-width: 50ch; margin: 0 auto 18px; }

/* ===== Feed / activity ===== */
.feed { display: grid; }
.feed-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px; align-items: center;
}
.feed-item:last-child { border-bottom: 0; }
.feed-item .dot-ic {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  color: var(--text-secondary);
}
.feed-item .dot-ic.success { color: var(--success-text); }
.feed-item .dot-ic.primary { color: var(--primary); }
.feed-item .dot-ic.warning { color: var(--warning-text); }
.feed-item .dot-ic.info { color: var(--info-text); }
.feed-item strong { font-weight: 500; color: var(--text-primary); }
.feed-item .when { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* ===== Phase 17 prototype-aligned primitives =====
   Strict visual reference: handoff/screenshots/*-prototype.png (local-only).
   No new tokens — these compose off the Phase 16A dark foundation. */

/* Status counters strip — mono eyebrow at the top of each page,
   e.g. "5 IN PROGRESS  · 1 IN REVIEW · 1 POSTED". */
.status-strip {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 4px 0 10px;
}
.status-strip .sep { color: var(--border); }
.status-strip strong { color: var(--text-secondary); font-weight: 600; }
.status-strip .lede { color: var(--primary); }

/* Attention cards — "3 things need your attention" row on the dashboard.
   Each card has a colored eyebrow + headline + body + footer button. */
.attention-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 16px;
}
@media (max-width: 980px) { .attention-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .attention-grid { grid-template-columns: 1fr; } }
.attn-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.attn-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
  opacity: 0.7;
}
.attn-card.warn::before  { background: var(--warning); }
.attn-card.info::before  { background: var(--info); }
.attn-card.success::before { background: var(--success); }
.attn-card.danger::before { background: var(--danger); }
.attn-card .eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; gap: 6px;
}
.attn-card.warn  .eyebrow { color: var(--warning-text); }
.attn-card.info  .eyebrow { color: var(--info-text); }
.attn-card.success .eyebrow { color: var(--success-text); }
.attn-card.danger .eyebrow { color: var(--danger-text); }
.attn-card h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.attn-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.attn-card .foot { margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.attn-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }

/* KPI strip — 4-up summary cards (Active / Posted / Total budget / Spent). */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 16px 0;
}
@media (max-width: 980px) { .kpi-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpi-strip { grid-template-columns: 1fr; } }
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi-card .eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.kpi-card .num {
  font-size: 28px; font-weight: 600; line-height: 1.1;
  color: var(--text-primary); letter-spacing: -0.02em;
}
.kpi-card .sub { font-size: 12px; color: var(--text-tertiary); }
.kpi-card .delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.kpi-card .delta.up { color: var(--success-text); }
.kpi-card .delta.down { color: var(--danger-text); }

/* Dashboard 2-col layout (left wide / right rail). */
.dash-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 16px;
}
@media (max-width: 980px) { .dash-row { grid-template-columns: 1fr; } }

/* Polished card-with-header used on dashboard panels. */
.panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.panel-head .sub { font-size: 12px; color: var(--text-tertiary); }
.panel-body { padding: 14px 18px; }
.panel-body.flush { padding: 0; }
.panel-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-tertiary);
}

/* Dark tables — refined row dividers, hover, mono budget cells. */
.tbl.tbl-clean { width: 100%; border-collapse: collapse; }
.tbl.tbl-clean thead th {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 500;
}
.tbl.tbl-clean tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px; color: var(--text-secondary);
  vertical-align: middle;
}
.tbl.tbl-clean tbody tr:last-child td { border-bottom: 0; }
.tbl.tbl-clean tbody tr { transition: background-color 120ms ease; }
.tbl.tbl-clean tbody tr:hover { background: var(--surface-tint); cursor: pointer; }
.tbl.tbl-clean .num-col { text-align: right; font-family: var(--font-mono); color: var(--text-primary); }
.tbl.tbl-clean .repo-col a {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  padding: 3px 8px; border-radius: 5px;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.tbl.tbl-clean .repo-col a:hover { color: var(--text-primary); border-color: var(--border); }
.tbl.tbl-clean .prog-col { min-width: 140px; }
.tbl.tbl-clean .prog-col .bar { height: 5px; background: var(--surface-elev); border-radius: 3px; overflow: hidden; }
.tbl.tbl-clean .prog-col .bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--info));
}
.tbl.tbl-clean .prog-col .bar.warn > i  { background: linear-gradient(90deg, var(--warning), #FBBF24); }
.tbl.tbl-clean .prog-col .bar.good > i  { background: linear-gradient(90deg, var(--success), #34D399); }
.tbl.tbl-clean .prog-col .bar.danger > i { background: linear-gradient(90deg, var(--danger), #F87171); }
.tbl.tbl-clean .prog-col .pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 4px; display: block; }

/* Status badges — same color language across pages. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-elev);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }
.badge.ok      { background: rgba(16,185,129,0.10); color: var(--success-text); border-color: rgba(16,185,129,0.30); }
.badge.ok .dot { background: var(--success); }
.badge.warn    { background: rgba(245,158,11,0.10); color: var(--warning-text); border-color: rgba(245,158,11,0.30); }
.badge.warn .dot { background: var(--warning); }
.badge.info    { background: rgba(59,130,246,0.10); color: #93C5FD; border-color: rgba(59,130,246,0.30); }
.badge.info .dot { background: var(--primary); }
.badge.danger  { background: rgba(239,68,68,0.10); color: var(--danger-text); border-color: rgba(239,68,68,0.30); }
.badge.danger .dot { background: var(--danger); }
.badge.muted   { background: transparent; color: var(--text-tertiary); border-color: var(--border-subtle); }

/* Provider cards — 4-up grid on the payments providers page header. */
.provider-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 16px;
}
@media (max-width: 1100px) { .provider-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .provider-grid { grid-template-columns: 1fr; } }
.provider-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 132px;
}
.provider-card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.provider-card .mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
}
.provider-card .name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; }
.provider-card .desc { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin: 0; }
.provider-card .foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; }

/* Pipeline by stage row (opportunities prototype). */
.stage-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-top: 16px;
}
@media (max-width: 980px) { .stage-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stage-row { grid-template-columns: 1fr; } }
.stage-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
}
.stage-card .eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.stage-card .num { font-size: 22px; font-weight: 600; color: var(--text-primary); line-height: 1.1; margin-top: 4px; }
.stage-card .val { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }

/* Inputs inside admin .panel forms get the same dark-input chrome
   used by the non-landing public pages. Strictly scoped — does not
   reach the print layout, login form, or any non-.panel surface. */
.panel .field label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.panel .field input[type=text],
.panel .field input[type=email],
.panel .field input[type=tel],
.panel .field input[type=url],
.panel .field input[type=password],
.panel .field input[type=number],
.panel .field select,
.panel .field textarea {
  width: 100%;
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--text-primary);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.panel .field input:focus,
.panel .field select:focus,
.panel .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.panel .field input::placeholder,
.panel .field textarea::placeholder { color: var(--text-tertiary); }
.panel .field .help { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.panel .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 720px) { .panel .grid-2 { grid-template-columns: 1fr; } }

/* Compact activity feed used in dashboard right rail. */
.activity-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.activity-row:last-child { border-bottom: 0; }
.activity-row .ic-tile {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  color: var(--text-secondary);
}
.activity-row .ic-tile.ok      { color: var(--success-text); border-color: rgba(16,185,129,0.30); background: rgba(16,185,129,0.08); }
.activity-row .ic-tile.warn    { color: var(--warning-text); border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.08); }
.activity-row .ic-tile.info    { color: #93C5FD; border-color: rgba(59,130,246,0.30); background: rgba(59,130,246,0.08); }
.activity-row .body { min-width: 0; }
.activity-row .body strong { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-row .body small { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }
.activity-row .when { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }

/* ===== Mobile drawer ===== */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 80;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
@media (min-width: 821px) { .drawer-backdrop { display: none; } }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sb {
    position: fixed; left: 0; top: 0;
    width: 280px; height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 90;
    box-shadow: var(--sh-modal);
  }
  .app.drawer-open .sb { transform: translateX(0); }
}

/* ===== Login layout ===== */
.login-shell {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(59,130,246,0.08), transparent 70%),
    radial-gradient(ellipse 600px 400px at 50% 100%, rgba(139,92,246,0.05), transparent 70%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
}
.login-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  text-decoration: none;
  color: inherit;
}
.login-brand .sb-mark { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
.login-card h1 {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.login-card .lead { text-align: center; color: var(--text-secondary); margin: 0 0 32px; }
.login-card .below {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0;
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.login-card .below .rule { flex: 1; height: 1px; background: var(--border-subtle); }
.login-card .below .kbd { font-family: var(--font-mono); }
.login-card .footnote { text-align: center; color: var(--text-tertiary); font-size: 12px; margin-top: 28px; }

/* ===== Callout ===== */
.callout {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--primary);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px; color: var(--text-secondary);
}
.callout strong { color: var(--text-primary); font-weight: 500; }
.callout.warn   { border-left-color: var(--warning); }
.callout.danger { border-left-color: var(--danger); }
.callout.success { border-left-color: var(--success); }
.callout.info   { border-left-color: var(--info); }

/* ===== Flash ===== */
.flash {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--primary);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 12px;
}
.flash.success { border-left-color: var(--success); color: var(--success-text); }
.flash.error   { border-left-color: var(--danger);  color: var(--danger-text); }
.flash.warning { border-left-color: var(--warning); color: var(--warning-text); }
.flash.info    { border-left-color: var(--info);    color: var(--info-text); }

/* ===== Helpers ===== */
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.row-cluster { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--text-secondary); }
.tert  { color: var(--text-tertiary); }
.small { font-size: 12px; }
.grid-bottom { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .grid-bottom { grid-template-columns: 1fr; } }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Responsive shell ===== */
@media (max-width: 820px) {
  .topbar { padding: 0 14px; }
  .page, .container { padding: 18px 14px 100px; }
  .page-head h1 { font-size: 22px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
}


/* =============================================================
   LEGACY COMPATIBILITY — Phase 13/14/15 utility classes
   Dark-mode-translated versions of the class names that older
   admin / developer / public views still depend on. Phase 16A
   only redesigns the foundation, landing, login, and navigation.
   The rest of the portal renders against these mappings.
   ============================================================= */

/* --- Common typography helpers used by older views ----------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--text-tertiary);
  text-transform: uppercase;
}
.h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 6px; line-height: 1.1; }
.h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.15; }
.h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; line-height: 1.25; }
.lead { color: var(--text-secondary); font-size: 14px; }
.sub  { color: var(--text-secondary); font-size: 14px; }

/* --- Status pills (Phase 13 status_pill partial) ------------- */
/* Legacy markup uses class="pill draft|submitted|review|approved|changes|signed|rejected|archived|active|inactive|pending|none" + an inner <span class="dot"></span> */
.pill .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pill.draft     { background: rgba(95,102,114,0.18); color: var(--text-secondary); border-color: transparent; }
.pill.submitted { background: rgba(59,130,246,0.15); color: #60A5FA; border-color: transparent; }
.pill.review    { background: rgba(245,158,11,0.15); color: var(--warning-text); border-color: transparent; }
.pill.approved  { background: rgba(16,185,129,0.15); color: var(--success-text); border-color: transparent; }
.pill.changes   { background: rgba(239,68,68,0.15); color: var(--danger-text); border-color: transparent; }
.pill.rejected  { background: rgba(239,68,68,0.15); color: var(--danger-text); border-color: transparent; }
.pill.signed    { background: rgba(16,185,129,0.18); color: var(--success); border-color: transparent; }
.pill.archived  { background: rgba(95,102,114,0.18); color: var(--text-secondary); border-color: transparent; }

/* --- Legacy button class aliases ----------------------------- */
/* Old views write class="btn accent" / class="btn ghost" / class="btn sm" / class="btn accent sm" etc. */
.btn.accent {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 12px -4px rgba(59,130,246,0.4);
}
.btn.accent:hover { background: var(--primary-hover); }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn.ghost:hover { background: var(--surface-elev); color: var(--text-primary); border-color: var(--border-strong); }
.btn.sm, .btn.btn-small { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.btn-large { height: 40px; padding: 0 20px; font-size: 14px; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-row.end { justify-content: flex-end; }
.chip {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary); font-size: 12px;
  text-decoration: none;
  transition: all 120ms ease;
}
.chip:hover { background: var(--surface-elev); color: var(--text-primary); }
.chip.active { background: var(--primary-tint); border-color: rgba(59,130,246,0.4); color: #93C5FD; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Grid helpers used by older forms ------------------------ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }

/* --- Phase 14 utility classes -------------------------------- */
.bwit-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 36px 24px;
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-secondary);
}
.bwit-empty.compact { padding: 20px 16px; }
.bwit-empty-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.bwit-empty-icon svg { width: 24px; height: 24px; }
.bwit-empty-title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.bwit-empty-body  { font-size: 13px; color: var(--text-secondary); max-width: 52ch; }
.bwit-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }

.bwit-op-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13px;
}
.bwit-op-row + .bwit-op-row { margin-top: 6px; }
.bwit-op-row .bwit-op-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 8px; }
.bwit-op-row.ok      { border-left: 2px solid var(--success); }
.bwit-op-row.ok .bwit-op-dot      { background: var(--success); }
.bwit-op-row.ok      .bwit-op-label strong { color: var(--success-text); }
.bwit-op-row.warn    { border-left: 2px solid var(--warning); }
.bwit-op-row.warn .bwit-op-dot    { background: var(--warning); }
.bwit-op-row.warn    .bwit-op-label strong { color: var(--warning-text); }
.bwit-op-row.danger  { border-left: 2px solid var(--danger); }
.bwit-op-row.danger .bwit-op-dot  { background: var(--danger); }
.bwit-op-row.danger  .bwit-op-label strong { color: var(--danger-text); }
.bwit-op-row.info    { border-left: 2px solid var(--info); }
.bwit-op-row.info .bwit-op-dot    { background: var(--info); }
.bwit-op-row.info    .bwit-op-label strong { color: var(--info-text); }
.bwit-op-row .bwit-op-label { flex: 1 1 auto; }
.bwit-op-row .bwit-op-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }

.bwit-callout {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--warning);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px; color: var(--warning-text);
}
.bwit-callout strong { color: var(--text-primary); font-weight: 500; }
.bwit-callout.info    { border-left-color: var(--info);    color: var(--info-text); }
.bwit-callout.danger  { border-left-color: var(--danger);  color: var(--danger-text); }
.bwit-callout.success { border-left-color: var(--success); color: var(--success-text); }

.bwit-stack-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bwit-stack-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dotted var(--border-subtle);
  font-size: 13px;
  color: var(--text-secondary);
}
.bwit-stack-list li:last-child { border-bottom: 0; }
.bwit-stack-list li .muted { color: var(--text-tertiary); font-size: 12px; }

.bwit-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.bwit-page-header-text { min-width: 0; }
.bwit-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Phase 14 user-menu hotfix (cb364ea) preserved ----------- */
.bwit-user-menu { position: relative; display: inline-flex; }
.bwit-user-menu-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: inherit;
  padding: 6px 8px; border-radius: 8px;
  cursor: pointer;
}
.bwit-user-menu-trigger:hover { background: var(--surface-elev); }
.bwit-user-menu-trigger .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-elev); color: var(--text-primary);
  display: grid; place-items: center;
  font: 600 11px/1 var(--font-mono);
  border: 1px solid var(--border);
}
.bwit-user-menu-trigger.admin .av { background: linear-gradient(135deg, #1E3A8A, #4C1D95); color: #fff; }
.bwit-user-menu-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.bwit-user-menu-caret { color: var(--text-tertiary); }
.bwit-user-menu-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--sh-pop);
  width: 280px;
  z-index: 40;
  overflow: hidden;
  flex-direction: column;
  padding: 6px;
}
.bwit-user-menu-panel[hidden] { display: none; }
.bwit-user-menu.is-open > .bwit-user-menu-panel { display: flex; }
.bwit-user-menu-meta {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.bwit-user-menu-meta-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.bwit-user-menu-meta-email { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.bwit-user-menu-panel > a,
.bwit-user-menu-panel form button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  text-align: left;
  border: 0; background: transparent;
  cursor: pointer;
}
.bwit-user-menu-panel > a:hover,
.bwit-user-menu-panel form button:hover { background: var(--surface-elev); color: var(--text-primary); }
.bwit-user-menu-signout { margin-top: 4px; border-top: 1px solid var(--border-subtle); padding-top: 4px; }
.bwit-user-menu-signout button { color: var(--danger-text); }
.bwit-user-menu-signout button:hover { background: rgba(239,68,68,0.08); color: var(--danger); }

/* --- Legacy topnav (only matters if app layout still ships the
   old top nav for any reason). The Phase 16A app layout switches
   to sidebar + topbar; this block keeps the old class names from
   crashing the page if they appear. */
.topnav {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  height: var(--topbar-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-subtle);
}
.topnav .lockup img { height: 24px; width: auto; }
.topnav nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav nav a {
  font: 500 13px/1 var(--font-sans);
  color: var(--text-secondary);
  padding: 8px 12px; border-radius: 6px;
  cursor: pointer; border: 0; background: transparent;
  text-decoration: none;
}
.topnav nav a:hover { background: var(--surface-elev); color: var(--text-primary); }
.topnav nav a.active { background: var(--primary-tint); color: #93C5FD; }
.topnav .spacer { flex: 1; }

/* --- Public landing dark-mode overrides ---------------------- */
/* Phase 16A keeps the existing landing.php structure but renders it
   in dark mode. Full landing redesign is deferred to Phase 16B. */
body.bwit-public { background: var(--bg); color: var(--text-primary); }
.bwit-public-nav {
  background: rgba(10,11,13,0.8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 20;
}
.bwit-public-nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; gap: 16px;
}
.bwit-public-lockup img { height: 26px; width: auto; }
.bwit-public-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bwit-public-actions a { color: var(--text-secondary); font-size: 13px; padding: 6px 10px; border-radius: 6px; }
.bwit-public-actions a:hover { color: var(--text-primary); background: var(--surface-elev); }

.bwit-public-footer { border-top: 1px solid var(--border-subtle); margin-top: 64px; background: var(--bg-2); }
.bwit-public-footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  color: var(--text-tertiary); font-size: 12px;
}
.bwit-public-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.bwit-public-footer-links a { color: var(--text-secondary); }
.bwit-public-footer-links a:hover { color: var(--text-primary); }

/* --- Non-landing public page wrappers ----------------------- */
/* Phase 16A hotfix: signup, contact, privacy, terms all wrap
   their body in .bwit-section > .bwit-section-inner. Before this
   block these classes had no rules, so the form sat against the
   left edge with a large empty right side. Polish only — backend
   behaviour, form action / CSRF / input names unchanged. */
body.bwit-public main { padding: 48px 24px 24px; }
.bwit-section { display: block; }
.bwit-section-inner { margin: 0 auto; width: 100%; }
.bwit-section .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.bwit-section-title {
  font-size: 32px; font-weight: 600; line-height: 1.2;
  color: var(--text-primary); margin: 0 0 12px;
}
.bwit-section-lead {
  color: var(--text-secondary); font-size: 15px; line-height: 1.6;
  margin: 0 0 24px;
}
.bwit-section .card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 24px; }
.bwit-section .card-header { margin-bottom: 12px; }
.bwit-section .h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; }
.bwit-section .muted { color: var(--text-tertiary); }

/* Phase 17 final polish — make signup, contact, privacy and terms
   feel like deliberate dark surfaces, not minimum-effort fallbacks. */
.bwit-section .field label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.bwit-section .field input[type=text],
.bwit-section .field input[type=email],
.bwit-section .field input[type=tel],
.bwit-section .field input[type=url],
.bwit-section .field select,
.bwit-section .field textarea {
  width: 100%;
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 14px/1.4 var(--font-sans);
  color: var(--text-primary);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.bwit-section .field input:focus,
.bwit-section .field select:focus,
.bwit-section .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.bwit-section .field input::placeholder,
.bwit-section .field textarea::placeholder { color: var(--text-tertiary); }
.bwit-section .field.error input,
.bwit-section .field.error select,
.bwit-section .field.error textarea { border-color: var(--danger); }
.bwit-section .help { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.bwit-section .field.error .help { color: var(--danger-text); }
.bwit-section .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 720px) { .bwit-section .grid-2 { grid-template-columns: 1fr; } }
.bwit-section a { color: #93C5FD; }
.bwit-section a:hover { color: var(--primary); text-decoration: underline; }
/* Long-form legal pages (privacy / terms): tighten typography. */
.bwit-section article.card h3.h3 {
  font-size: 15px; letter-spacing: -0.005em;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.bwit-section article.card ul,
.bwit-section article.card ol { padding-left: 20px; }
.bwit-section article.card li { margin-bottom: 4px; }
.bwit-section article.card code {
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px; border-radius: 4px;
  font-size: 12px; color: var(--text-secondary);
}

/* Landing collaboration tiles + security rail — dark surfaces */
.bwit-collab-grid-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
@media (max-width: 980px) { .bwit-collab-grid-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bwit-collab-grid-flow { grid-template-columns: 1fr; } }
.bwit-collab-tile {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.bwit-collab-tile:hover { border-color: var(--border); transform: translateY(-1px); }
.bwit-collab-tile-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.bwit-collab-tile-when { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-tertiary); text-transform: uppercase; }
.bwit-collab-tile h4 { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.bwit-collab-tile p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.bwit-collab-tile-meta { margin-top: auto; padding-top: 10px; border-top: 1px dotted var(--border-subtle); font-size: 11px; color: var(--text-tertiary); }
.bwit-collab-tile-meta .mono { color: var(--text-secondary); background: var(--surface-elev); padding: 2px 6px; border-radius: 4px; font-size: 10px; }

.bwit-security-rail { display: flex; flex-direction: column; gap: 14px; }
.bwit-security-stack-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.bwit-security-stack-sub { color: var(--text-secondary); font-size: 13px; margin: 4px 0 0; }
.bwit-security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .bwit-security-grid { grid-template-columns: 1fr; } }
.bwit-security-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px;
}
.bwit-security-card-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--info-text); }
.bwit-security-card h4 { margin: 4px 0 4px; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.bwit-security-card p { margin: 0; font-size: 12px; color: var(--text-secondary); }

/* Generic legacy placeholder block used by the landing hero --- */
.ph {
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06));
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 32px; color: var(--text-tertiary);
  text-align: center;
}


/* =============================================================
   PHASE 16A — STRICT DARK LANDING REFERENCE
   -------------------------------------------------------------
   Visual-only. Scoped under `body.landing-page` so the existing
   dark app shell, login, internal admin/developer pages, and the
   existing dark `bwit-public` chrome on signup/contact/privacy/terms
   are untouched.

   Translated from the Claude Design strict reference
   `handoff/bigwheel-landing.html` (extracted plain HTML+CSS from
   inside its bundler template block). Every selector is prefixed
   `.dl-*` (dark landing) to avoid collisions with the Phase 16A
   foundation classes (.btn, .sb, .topbar, .feature, .empty,
   .container, .card, etc.) that the rest of the app depends on.

   This SUPERSEDES the previous failed light-olive landing attempt.
   ============================================================= */

body.landing-page {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
    overflow-x: hidden;
}
body.landing-page ::selection { background: var(--primary-soft); color: var(--text-primary); }
body.landing-page a { color: inherit; text-decoration: none; }

/* ===== Nav ===== */
.landing-page .dl-nav {
    position: sticky; top: 0; z-index: 30;
    background: rgba(10,11,13,0.7);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-subtle);
}
.landing-page .dl-nav-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 14px 32px;
    display: flex; align-items: center; gap: 32px;
}
.landing-page .dl-brand {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-primary);
    font-weight: 600; font-size: 15px;
    letter-spacing: -0.01em;
}
.landing-page .dl-brand-mark {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--primary), var(--info));
    border-radius: 7px;
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 13px;
    font-family: var(--font-mono);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.4);
}
.landing-page .dl-nav-links { display: flex; gap: 4px; }
.landing-page .dl-nav-links a {
    padding: 6px 12px;
    font-size: 14px;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: all 120ms ease;
}
.landing-page .dl-nav-links a:hover { color: var(--text-primary); background: var(--surface-elev); }
.landing-page .dl-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ===== Buttons (landing-only — does not override .btn from the app shell) ===== */
.landing-page .dl-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; height: 36px; padding: 0 16px;
    border-radius: 6px;
    font-size: 13.5px; font-weight: 500;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, color 120ms ease, box-shadow 120ms ease;
    text-decoration: none;
}
.landing-page .dl-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-glow); }
.landing-page .dl-btn:active { transform: translateY(1px); }
.landing-page .dl-btn-primary {
    background: var(--primary); color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 16px -4px rgba(59,130,246,0.5);
}
.landing-page .dl-btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.landing-page .dl-btn-secondary {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-primary);
}
.landing-page .dl-btn-secondary:hover { background: var(--surface-elev); border-color: var(--border-strong); }
.landing-page .dl-btn-ghost { color: var(--text-secondary); }
.landing-page .dl-btn-ghost:hover { color: var(--text-primary); background: var(--surface-elev); }
.landing-page .dl-btn-lg { height: 44px; padding: 0 22px; font-size: 14.5px; }

@media (max-width: 720px) {
    .landing-page .dl-nav-links { display: none; }
    .landing-page .dl-nav-inner { padding: 12px 18px; gap: 16px; }
}

/* ===== Hero ===== */
.landing-page .dl-hero {
    position: relative;
    padding: 88px 32px 88px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 900px 500px at 20% 0%, rgba(59,130,246,0.12), transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 30%, rgba(139,92,246,0.10), transparent 60%);
}
.landing-page .dl-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,0.025) 100%),
        linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,0.025) 100%);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.landing-page .dl-hero-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 56px; align-items: center;
    position: relative; z-index: 1;
}
@media (max-width: 940px) {
    .landing-page .dl-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .landing-page .dl-hero { padding: 56px 18px 64px; }
}
.landing-page .dl-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 8px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.1em;
    color: var(--primary); text-transform: uppercase;
    background: var(--primary-tint);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 999px;
    margin-bottom: 24px;
}
.landing-page .dl-eyebrow .dl-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 12px var(--primary);
    animation: dlPulse 2s infinite;
}
@keyframes dlPulse {
    0%, 100% { box-shadow: 0 0 0 var(--primary); }
    50%      { box-shadow: 0 0 14px var(--primary); }
}
.landing-page .dl-headline {
    font-size: clamp(40px, 6vw, 60px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin: 0 0 20px;
    max-width: 18ch;
}
.landing-page .dl-gradient {
    background: linear-gradient(120deg, var(--primary), var(--info));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.landing-page .dl-lead {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 54ch;
    margin: 0 0 32px;
    line-height: 1.55;
}
.landing-page .dl-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.landing-page .dl-trust-row {
    display: flex; gap: 22px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--text-tertiary);
}
.landing-page .dl-trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.landing-page .dl-trust-row .dl-ic {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.6);
}

/* ===== Hero code window ===== */
.landing-page .dl-cw {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.4);
    position: relative;
}
.landing-page .dl-cw::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), transparent 50%);
}
.landing-page .dl-cw-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    background: var(--surface-elev);
    border-bottom: 1px solid var(--border-subtle);
}
.landing-page .dl-cw-bar .dl-cw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.landing-page .dl-cw-bar .dl-cw-path {
    margin-left: 10px;
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--text-tertiary);
}
.landing-page .dl-cw-body {
    padding: 22px 24px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--text-secondary);
}
.landing-page .dl-cw-body .dl-prompt { color: var(--text-tertiary); }
.landing-page .dl-cw-body .dl-cmd { color: #93C5FD; }
.landing-page .dl-cw-body .dl-str { color: var(--success-text); }
.landing-page .dl-cw-body .dl-note { color: var(--text-tertiary); }
.landing-page .dl-cw-body .dl-ok { color: var(--success-text); }
.landing-page .dl-cw-body .dl-ref { color: var(--primary); }
.landing-page .dl-cw-body .dl-hash { color: var(--warning-text); }
.landing-page .dl-cw-body .dl-cursor {
    display: inline-block; width: 7px; height: 14px;
    background: var(--primary); vertical-align: -2px;
    animation: dlBlink 1.1s steps(2,end) infinite;
}
@keyframes dlBlink { 50% { opacity: 0; } }

/* ===== Logo strip ===== */
.landing-page .dl-logos-strip {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 32px;
    background: var(--bg-2);
}
.landing-page .dl-logos-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 220px 1fr;
    gap: 40px; align-items: center;
}
@media (max-width: 820px) {
    .landing-page .dl-logos-inner { grid-template-columns: 1fr; gap: 20px; }
}
.landing-page .dl-logos-label {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.landing-page .dl-logos { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; }
.landing-page .dl-mock {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-quaternary);
    letter-spacing: 0.08em;
    font-weight: 500;
    transition: color 200ms ease;
}
.landing-page .dl-mock:hover { color: var(--text-tertiary); }
.landing-page .dl-mock.serif { font-family: var(--font-sans); font-weight: 700; font-style: italic; letter-spacing: -0.01em; }
.landing-page .dl-mock.bold  { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; font-size: 16px; }
.landing-page .dl-mock.thin  { font-family: var(--font-sans); font-weight: 300; font-size: 18px; letter-spacing: 0.06em; }

/* ===== Section base ===== */
.landing-page .dl-section { padding: 96px 32px; position: relative; }
.landing-page .dl-container { max-width: 1240px; margin: 0 auto; }
.landing-page .dl-section-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.landing-page .dl-section-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}
.landing-page .dl-h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600; letter-spacing: -0.025em;
    line-height: 1.1; margin: 0 0 16px;
}
.landing-page .dl-section-sub {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 56ch; margin: 0 auto;
}
@media (max-width: 720px) { .landing-page .dl-section { padding: 64px 18px; } }

/* ===== Feature grid ===== */
.landing-page .dl-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 980px) { .landing-page .dl-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .landing-page .dl-feature-grid { grid-template-columns: 1fr; } }
.landing-page .dl-feature {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 26px;
    position: relative;
    transition: all 200ms ease;
    overflow: hidden;
}
.landing-page .dl-feature:hover {
    transform: translateY(-2px);
    border-color: var(--border);
    background: var(--surface-tint);
    box-shadow: 0 12px 32px -16px rgba(0,0,0,0.6);
}
.landing-page .dl-feature::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(59,130,246,0.04) 100%);
    opacity: 0; transition: opacity 200ms ease;
    pointer-events: none;
}
.landing-page .dl-feature:hover::before { opacity: 1; }
.landing-page .dl-feat-ic {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--surface-elev);
    border: 1px solid var(--border);
    color: var(--primary);
    display: grid; place-items: center;
    margin-bottom: 18px;
}
.landing-page .dl-feat-ic svg { width: 20px; height: 20px; }
.landing-page .dl-feature.violet .dl-feat-ic { color: var(--info-text); background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.25); }
.landing-page .dl-feature.green  .dl-feat-ic { color: var(--success-text); background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.25); }
.landing-page .dl-feature.amber  .dl-feat-ic { color: var(--warning-text); background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.landing-page .dl-feat-num {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.14em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.landing-page .dl-feature h3 {
    font-size: 18px; font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.landing-page .dl-feature p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 12px;
}
.landing-page .dl-stats {
    display: flex; gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 16px;
}
.landing-page .dl-stats div { display: grid; gap: 2px; }
.landing-page .dl-stats strong { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.landing-page .dl-stats small {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* ===== Workflow / steps ===== */
.landing-page .dl-workflow {
    background: var(--bg-2);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.landing-page .dl-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}
@media (max-width: 920px) { .landing-page .dl-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .landing-page .dl-steps { grid-template-columns: 1fr; } }
.landing-page .dl-step {
    background: var(--surface);
    padding: 28px 24px;
    position: relative;
}
.landing-page .dl-step .dl-step-n {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.16em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.landing-page .dl-step h4 {
    font-size: 16px; font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.landing-page .dl-step p {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ===== Showcase: dashboard preview ===== */
.landing-page .dl-showcase { position: relative; }
.landing-page .dl-showcase::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 800px 600px at 50% 50%, rgba(59,130,246,0.08), transparent 60%);
    pointer-events: none;
}
.landing-page .dl-showcase-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 40px 100px -40px rgba(0,0,0,0.8), 0 12px 32px rgba(0,0,0,0.5);
    position: relative;
}
.landing-page .dl-showcase-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--surface-elev);
    border-bottom: 1px solid var(--border-subtle);
}
.landing-page .dl-showcase-bar .dl-cw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.landing-page .dl-showcase-bar .dl-url {
    margin-left: 12px; padding: 3px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-tertiary);
}
.landing-page .dl-showcase-body {
    display: grid; grid-template-columns: 220px 1fr;
    background: var(--bg);
    min-height: 460px;
}
@media (max-width: 720px) {
    .landing-page .dl-showcase-body { grid-template-columns: 1fr; }
    .landing-page .dl-sc-sidebar { display: none; }
}
.landing-page .dl-sc-sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--border-subtle);
    padding: 14px;
}
.landing-page .dl-sc-nav-item {
    display: flex; align-items: center; gap: 10px;
    height: 30px; padding: 0 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    border-radius: 6px;
    margin-bottom: 2px;
}
.landing-page .dl-sc-nav-item.active { background: var(--primary-tint); color: #93C5FD; }
.landing-page .dl-sc-nav-item .dl-sc-dot {
    width: 14px; height: 14px;
    background: var(--surface-elev);
    border-radius: 4px;
}
.landing-page .dl-sc-nav-item.active .dl-sc-dot { background: var(--primary); }
.landing-page .dl-sc-nav-section {
    padding: 12px 10px 4px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-quaternary);
}
.landing-page .dl-sc-main { padding: 22px 26px; }
.landing-page .dl-sc-greet {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-tertiary); margin-bottom: 6px;
}
.landing-page .dl-sc-greet .dl-live {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--success);
    animation: dlPulse 2s infinite;
}
.landing-page .dl-sc-h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 18px; }
.landing-page .dl-sc-metrics {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 18px;
}
@media (max-width: 540px) { .landing-page .dl-sc-metrics { grid-template-columns: 1fr 1fr; } }
.landing-page .dl-sc-metric {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px;
}
.landing-page .dl-sc-metric .dl-l {
    font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.landing-page .dl-sc-metric .dl-v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.landing-page .dl-sc-metric .dl-s {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--success-text);
    margin-top: 4px;
}
.landing-page .dl-sc-metric .dl-s.down { color: #FCA5A5; }
.landing-page .dl-sc-panel {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}
.landing-page .dl-sc-panel-head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px; font-weight: 500;
    display: flex; justify-content: space-between; align-items: center;
}
.landing-page .dl-sc-panel-head .dl-ct {
    font-family: var(--font-mono); font-size: 9.5px;
    color: var(--text-tertiary);
    background: var(--surface-elev);
    padding: 2px 6px; border-radius: 999px;
}
.landing-page .dl-sc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
}
.landing-page .dl-sc-row:last-child { border-bottom: 0; }
.landing-page .dl-sc-row .dl-av {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #1E3A8A, #4C1D95);
    color: #fff;
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,0.08);
}
.landing-page .dl-sc-row .dl-n { flex: 1; }
.landing-page .dl-sc-row .dl-n strong { font-weight: 500; }
.landing-page .dl-sc-row .dl-n .dl-sub {
    font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px;
}
.landing-page .dl-sc-row .dl-badge {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: rgba(245,158,11,0.15); color: var(--warning-text);
    font-weight: 500;
}
.landing-page .dl-sc-row .dl-badge.ok { background: rgba(16,185,129,0.15); color: var(--success-text); }
.landing-page .dl-sc-row .dl-when { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }

/* ===== Security ===== */
.landing-page .dl-security {
    background: var(--bg-2);
    border-top: 1px solid var(--border-subtle);
}
.landing-page .dl-security-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px; align-items: center;
}
@media (max-width: 940px) { .landing-page .dl-security-grid { grid-template-columns: 1fr; gap: 28px; } }
.landing-page .dl-sec-features { display: grid; gap: 14px; }
.landing-page .dl-sec-feature {
    display: grid; grid-template-columns: 36px 1fr; gap: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
.landing-page .dl-sec-feature .dl-ic {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--surface-elev);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--success-text);
}
.landing-page .dl-sec-feature .dl-ic svg { width: 18px; height: 18px; }
.landing-page .dl-sec-feature h4 { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.landing-page .dl-sec-feature p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.landing-page .dl-vault {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px;
    position: relative;
    box-shadow: 0 20px 60px -30px rgba(0,0,0,0.7);
}
.landing-page .dl-vault-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.landing-page .dl-vault-lock {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
    border: 1px solid rgba(16,185,129,0.3);
    color: var(--success-text);
    display: grid; place-items: center;
}
.landing-page .dl-vault-lock svg { width: 20px; height: 20px; }
.landing-page .dl-vault-head h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.landing-page .dl-vault-head small {
    display: block; margin-top: 2px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.landing-page .dl-vault-row {
    padding: 12px 14px;
    background: var(--surface-tint);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    margin-bottom: 8px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    position: relative; overflow: hidden;
    word-break: break-all;
}
.landing-page .dl-vault-row::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--success); opacity: 0.5;
}
.landing-page .dl-vault-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
}
.landing-page .dl-vault-foot .dl-tert { color: var(--text-tertiary); }
.landing-page .dl-vault-foot .dl-aes { color: var(--success-text); display: inline-flex; align-items: center; gap: 6px; }
.landing-page .dl-vault-foot .dl-aes::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--success); display: inline-block;
}

/* ===== FAQ ===== */
.landing-page .dl-faq-grid {
    display: grid; gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    max-width: 820px; margin: 0 auto;
}
.landing-page .dl-faq-item {
    background: var(--surface);
    padding: 22px 24px;
}
.landing-page .dl-faq-item h4 {
    margin: 0 0 8px;
    font-size: 15px; font-weight: 500;
    display: flex; align-items: center; gap: 10px;
}
.landing-page .dl-faq-item h4::before {
    content: "+"; color: var(--primary);
    font-family: var(--font-mono); font-size: 16px; font-weight: 400;
}
.landing-page .dl-faq-item p {
    margin: 0;
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.55;
    padding-left: 24px;
}

/* ===== Final CTA ===== */
.landing-page .dl-final-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(59,130,246,0.12), transparent 60%);
}
.landing-page .dl-final-cta::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,0.025) 100%),
        linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,0.025) 100%);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.landing-page .dl-final-cta > .dl-container { position: relative; z-index: 1; }
.landing-page .dl-final-cta .dl-h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.landing-page .dl-final-cta .dl-lead { margin: 0 auto 32px; }
.landing-page .dl-final-cta .dl-cta-row { justify-content: center; margin-bottom: 0; }

/* ===== Footer ===== */
.landing-page .dl-footer {
    background: var(--bg-2);
    border-top: 1px solid var(--border-subtle);
    padding: 48px 32px 32px;
}
.landing-page .dl-foot-inner { max-width: 1240px; margin: 0 auto; }
.landing-page .dl-foot-cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 36px;
}
@media (max-width: 820px) {
    .landing-page .dl-foot-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.landing-page .dl-foot-col h5 {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 14px;
}
.landing-page .dl-foot-col a {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
    transition: color 120ms ease;
}
.landing-page .dl-foot-col a:hover { color: var(--text-primary); }
.landing-page .dl-foot-blurb {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 32ch;
    line-height: 1.55;
    margin: 10px 0 0;
}
.landing-page .dl-foot-bottom {
    display: flex; justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12px; color: var(--text-tertiary);
    flex-wrap: wrap; gap: 12px;
}
.landing-page .dl-foot-bottom .dl-mono { font-family: var(--font-mono); }