/* ============================================================
   CONCIERGE PORTAL — V2 (Soft Glass)
   Pilot: login page. Other pages still use portal.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;600;900&family=Geist+Mono:wght@400;600&display=swap');

:root {
  /* Light cream palette — cream-50 warm, deeper steps desaturated to off-white */
  --cream-50:  #f8f8e8;
  --cream-100: #efefe0;
  --cream-200: #e5e5d6;
  --cream-300: #d2d2c4;
  --warm-line:        rgba(0, 0, 0, 0.06);
  --warm-line-strong: rgba(0, 0, 0, 0.10);

  /* Ink */
  --ink:          #0c0a08;
  --ink-soft:     #2a2722;
  --muted:        rgba(12, 10, 8, 0.45);
  --muted-strong: rgba(12, 10, 8, 0.62);

  /* Single accent: cobalt blue */
  --accent:       #1f3fc3;
  --accent-light: #5973d8;
  --accent-deep:  #173098;

  /* Glass surfaces */
  --glass:        rgba(255, 252, 248, 0.62);
  --glass-strong: rgba(255, 252, 248, 0.85);
  --glass-border: rgba(255, 255, 255, 0.60);

  --shadow-soft: 0 6px 28px -10px rgba(56, 36, 12, 0.18), 0 2px 6px -2px rgba(56, 36, 12, 0.08);
  --shadow-card: 0 14px 50px -16px rgba(56, 36, 12, 0.25), 0 4px 12px -4px rgba(56, 36, 12, 0.10);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream-200);
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-weight: 300;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
}
.mono { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: -0.02em; }

/* ── Backdrop (warm orbs + grain) ─────────────────────────── */
.v2-backdrop {
  position: fixed; inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%,    #f8f8e8 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, #d2d2c4 0%, transparent 60%),
    linear-gradient(160deg, #e5e5d6 0%, #d2d2c4 100%);
}
.orb-accent,
.orb-cream {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.orb-accent {
  width: 380px; height: 380px;
  background: radial-gradient(circle at 35% 35%,
              #c7d2ff 0%, #1f3fc3 35%, #173098 75%, rgba(23, 48, 152, 0) 100%);
  filter: blur(40px);
}
.orb-cream {
  width: 320px; height: 320px;
  background: radial-gradient(circle at 40% 40%,
              #fafaee 0%, #d2d2c4 50%, rgba(210, 210, 196, 0) 100%);
  filter: blur(40px);
}
/* Subtle film grain (applied to a wrapper) */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(56, 36, 12, 0.07) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: 0.4;
}

/* ── Glass surfaces ───────────────────────────────────────── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}
.glass-deep {
  background: var(--glass-strong);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}
.paper {
  background: var(--cream-50);
  border: 1px solid var(--warm-line);
  border-radius: 20px;
}

/* ── Typography ───────────────────────────────────────────── */
h1 { font-weight: 900; letter-spacing: -0.040em; line-height: 1.02; margin: 0; }
h2 { font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
h3 { font-weight: 600; letter-spacing: -0.020em; line-height: 1.15; margin: 0; }
p  { margin: 0; }

.label-tiny {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Buttons (pill, soft) ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--warm-line-strong);
  font: 600 14px 'Geist', sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(56, 36, 12, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(56, 36, 12, 0.10); }
.btn:active { transform: translateY(0); }

.btn-ink {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.btn-ink:hover { background: #1a1714; }

.btn-accent {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  box-shadow: 0 4px 16px -2px rgba(31, 63, 195, 0.35);
}
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 6px 22px -2px rgba(31, 63, 195, 0.45); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(0,0,0,0.05); box-shadow: none; transform: none; }

.btn-block { width: 100%; }
.btn-lg    { padding: 13px 22px; font-size: 15px; }
.btn-sm    { padding: 6px 12px; font-size: 12px; }

/* ── Form inputs ──────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font: 600 12px 'Geist', sans-serif;
  letter-spacing: 0.02em;
  color: var(--muted-strong);
  padding-left: 4px;
}
.input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--warm-line);
  font: 300 14px 'Geist', sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.input::placeholder { color: var(--muted); }
.input:focus {
  border-color: rgba(31, 63, 195, 0.45);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 4px rgba(31, 63, 195, 0.12);
}

/* ── Brand (sparkle + wordmark) ───────────────────────────── */
.brand-row {
  display: inline-flex; align-items: center; gap: 8px;
}
.brand-sparkle {
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}
.brand-text {
  font: 900 22px 'Geist', sans-serif;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ── Alert (error message) ────────────────────────────────── */
.v2-alert {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(254, 226, 226, 0.70);
  border: 1px solid rgba(220, 38, 38, 0.20);
  color: #991b1b;
  font: 600 13px 'Geist', sans-serif;
  letter-spacing: -0.005em;
}

/* ── Link (subdued) ───────────────────────────────────────── */
.link-muted {
  color: var(--muted-strong);
  text-decoration: none;
  font: 600 13px 'Geist', sans-serif;
  letter-spacing: -0.005em;
}
.link-muted:hover { color: var(--accent-deep); }

/* ────────────────────────────────────────────────────────────
   PORTAL SHELL (base_v2.html)
   ──────────────────────────────────────────────────────────── */

.v2-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.v2-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: rgba(248, 248, 232, 0.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-right: 1px solid var(--warm-line);
  padding: 22px 14px 18px;
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  z-index: 10;
}
.v2-sidebar-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 22px;
  font: 900 19px 'Geist', sans-serif; letter-spacing: -.03em;
  color: var(--ink);
}
.v2-sidebar-brand .sparkle { color: var(--accent); font-size: 19px; line-height: 1; }

.v2-sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
  list-style: none; padding: 0; margin: 0;
}
.v2-sidebar-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: 12px;
  font: 600 13.5px 'Geist', sans-serif; letter-spacing: -.01em;
  color: var(--muted-strong);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.v2-sidebar-item:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.v2-sidebar-item .v2-sidebar-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  opacity: 0.72;
  flex-shrink: 0;
}
.v2-sidebar-item.active {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 2px 8px -2px rgba(56, 36, 12, 0.10);
}
.v2-sidebar-item.active .v2-sidebar-icon { opacity: 1; color: var(--accent); }
.v2-sidebar-item .v2-sidebar-dot {
  margin-left: auto;
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.18);
}
.v2-sidebar-item .v2-sidebar-dot.dot-warn   { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18); }
.v2-sidebar-item .v2-sidebar-dot.dot-danger { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }

/* ── Sidebar foot (restaurant + logout) ───────────────────── */
.v2-sidebar-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--warm-line);
}
.v2-sidebar-foot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}
.v2-sidebar-foot-meta { min-width: 0; flex: 1; }
.v2-sidebar-foot-name {
  font: 600 13px 'Geist', sans-serif; letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-sidebar-foot-sub {
  font: 300 11px 'Geist', sans-serif;
  color: var(--muted);
  margin-top: 1px;
}
.v2-sidebar-foot-links {
  display: flex; gap: 14px; padding: 10px 8px 0;
}
.v2-sidebar-foot-links a {
  font: 600 11.5px 'Geist', sans-serif; letter-spacing: .02em;
  color: var(--muted-strong);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.v2-sidebar-foot-links a:hover { color: var(--accent); }

/* ── Avatar primitive (used in sidebar foot, call list, etc) ── */
.v2-avatar {
  width: 32px; height: 32px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px 'Geist', sans-serif; letter-spacing: -.02em;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--cream-50), var(--cream-200));
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(56, 36, 12, 0.08);
}
.v2-avatar.avatar-accent {
  background: radial-gradient(circle at 30% 30%, #c7d2ff, var(--accent) 70%);
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}
.v2-avatar.avatar-ink {
  background: linear-gradient(135deg, var(--ink-soft), var(--ink));
  color: white;
}
.v2-avatar.avatar-lg { width: 56px; height: 56px; font-size: 21px; }
.v2-avatar.avatar-xl { width: 84px; height: 84px; font-size: 32px; }

/* ── Main content area ────────────────────────────────────── */
.v2-main {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 26px clamp(20px, 3vw, 32px);
  overflow-x: hidden;
}
.v2-main-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.v2-main > * { position: relative; z-index: 1; }

/* Mobile hamburger + overlay */
.v2-sidebar-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 99px;
  background: var(--ink);
  color: white;
  border: none;
  align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 18px;
}
.v2-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(12, 10, 8, 0.45);
  z-index: 20;
}

@media (max-width: 900px) {
  .v2-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 30;
  }
  .v2-sidebar.show { transform: translateX(0); }
  .v2-sidebar-overlay.show { display: block; }
  .v2-sidebar-toggle { display: inline-flex; }
}

/* ── Page header (used inside main, per page) ─────────────── */
.v2-page-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.v2-page-head-title h1 { font-size: 32px; }
.v2-page-head-eyebrow { margin-bottom: 4px; }
.v2-page-head-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Agent status chip (right side of page head) */
.v2-agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font: 600 12px 'Geist', sans-serif;
  background: #e4f5e6; color: #2e6f3e;
  border: 1px solid rgba(46, 111, 62, 0.12);
}
.v2-agent-chip .dot {
  width: 6px; height: 6px; border-radius: 99px; background: #2e6f3e;
}
.v2-agent-chip.warn   { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.15); }
.v2-agent-chip.warn .dot   { background: #b45309; }
.v2-agent-chip.danger { background: #fee2e2; color: #991b1b; border-color: rgba(153, 27, 27, 0.15); }
.v2-agent-chip.danger .dot { background: #b91c1c; }
.v2-agent-chip.idle   { background: rgba(0,0,0,0.05); color: var(--muted-strong); border-color: transparent; }
.v2-agent-chip.idle .dot   { background: var(--muted); }

/* ── Chip primitive (used in call cards, lists, filters) ──── */
.v2-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 99px;
  font: 600 12px 'Geist', sans-serif; letter-spacing: -.005em;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--warm-line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.v2-chip-accent { background: rgba(31, 63, 195, 0.10); color: var(--accent-deep); border-color: rgba(31, 63, 195, 0.18); }
.v2-chip-ink    { background: var(--ink); color: white; border-color: var(--ink); }
.v2-chip-mint   { background: #e4f5e6; color: #2e6f3e; border-color: rgba(46, 111, 62, 0.12); }
.v2-chip-warn   { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.15); }
.v2-chip-danger { background: #fee2e2; color: #991b1b; border-color: rgba(153, 27, 27, 0.15); }
.v2-chip-soft   { background: rgba(0,0,0,0.04); border-color: transparent; color: var(--muted-strong); }
.v2-chip-dot {
  width: 6px; height: 6px; border-radius: 99px; background: currentColor;
  display: inline-block;
}

/* ────────────────────────────────────────────────────────────
   URGENT BANNER (inbox header)
   ──────────────────────────────────────────────────────────── */

.v2-urgent-banner {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: 20px;
  color: white;
  background: linear-gradient(135deg, #4361ee 0%, #1f3fc3 70%, #173098 100%);
  box-shadow: 0 12px 28px -10px rgba(31, 63, 195, 0.50);
  margin-bottom: 18px;
  overflow: hidden;
}
.v2-urgent-banner::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 99px;
  background: rgba(199, 210, 255, 0.4);
  filter: blur(28px);
  pointer-events: none;
}
.v2-urgent-banner-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.v2-urgent-banner .eyebrow {
  font: 600 11px 'Geist', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.v2-urgent-banner .headline {
  font: 600 16px 'Geist', sans-serif;
  letter-spacing: -.02em;
  color: white;
}
.v2-urgent-banner .meta {
  position: relative; z-index: 1;
  font: 300 12px 'Geist', sans-serif;
  color: rgba(255, 255, 255, 0.78);
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.v2-urgent-banner .arrow-btn {
  position: relative; z-index: 1;
  margin-left: auto;
  width: 42px; height: 42px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-deep);
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.v2-urgent-banner .arrow-btn:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Subdued variant: only missed (no active) — accountability, not urgency */
.v2-urgent-banner.subdued {
  background: linear-gradient(135deg, var(--cream-50) 0%, var(--cream-200) 100%);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.v2-urgent-banner.subdued::after { display: none; }
.v2-urgent-banner.subdued .eyebrow { color: var(--muted); }
.v2-urgent-banner.subdued .headline { color: var(--ink); }
.v2-urgent-banner.subdued .meta {
  color: var(--muted-strong);
  border-left-color: var(--warm-line);
}
.v2-urgent-banner.subdued .arrow-btn {
  background: var(--ink); color: white;
}

/* "Missed Xd ago" badge on a call card (when token expired-unused) */
.v2-call-card .missed-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 2px 8px;
  border-radius: 99px;
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.07);
  color: var(--muted-strong);
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────
   CALL HISTORY (calls.html)
   ──────────────────────────────────────────────────────────── */

.v2-calls-layout {
  display: flex; gap: 18px;
  align-items: flex-start;
  min-height: calc(100vh - 180px);
}

/* ── Left: scrollable call list ───────────────────────────── */
.v2-calls-list {
  width: 380px;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  padding: 14px;
}
.v2-calls-filters {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.v2-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  font: 600 12px 'Geist', sans-serif; letter-spacing: -.01em;
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink-soft);
  border: 1px solid var(--warm-line);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.v2-filter-pill:hover { background: rgba(255, 255, 255, 0.85); }
.v2-filter-pill.active {
  background: var(--ink); color: white; border-color: var(--ink);
}
.v2-filter-pill.urgent {
  background: rgba(31, 63, 195, 0.10);
  color: var(--accent-deep);
  border-color: rgba(31, 63, 195, 0.18);
}
.v2-filter-pill .count {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; opacity: .65; font-weight: 500;
}
.v2-filter-pill.active .count { opacity: .85; }

/* "More reasons" dropdown — pill that opens a menu of reason filters */
.v2-filter-more {
  position: relative;
  display: inline-block;
}
.v2-filter-more summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.v2-filter-more summary::-webkit-details-marker { display: none; }
.v2-filter-more summary::marker { content: ""; }
.v2-filter-more[open] summary { background: rgba(255, 255, 255, 0.95); }
.v2-filter-more-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 50;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 18px;
  background: var(--cream-50);
  border: 1px solid var(--warm-line);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 4px;
}
.v2-filter-more-menu .v2-filter-pill {
  width: 100%;
  justify-content: space-between;
  background: transparent;
  border-color: transparent;
}
.v2-filter-more-menu .v2-filter-pill:hover {
  background: rgba(255, 255, 255, 0.7);
}
.v2-filter-more-menu .v2-filter-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.v2-filter-more-chevron {
  font-size: 11px;
  transition: transform .15s;
  opacity: .6;
  margin-left: 2px;
}
.v2-filter-more[open] .v2-filter-more-chevron { transform: rotate(180deg); }

/* ── Filter toggle button ──────────────────────────────────────── */
.v2-filter-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
}
.v2-filter-toggle-btn.has-filters {
  background: rgba(31, 63, 195, 0.08);
  color: var(--accent-deep);
  border-color: rgba(31, 63, 195, 0.2);
}
.v2-filter-active-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.v2-filter-toggle-btn .v2-filter-more-chevron {
  opacity: 0.6;
  font-size: 11px;
  transition: transform .15s;
}
.v2-filter-toggle-btn.is-open .v2-filter-more-chevron {
  transform: rotate(180deg);
}

/* Collapsible filter panel */
.v2-filter-panel {
  display: none;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 14px;
  margin: -4px 0 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--warm-line);
  border-radius: 16px;
  margin-bottom: 12px;
}
.v2-filter-panel.is-open {
  display: flex;
}
.v2-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-filter-label {
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-filter-panel select,
.v2-filter-panel input[type=date] {
  padding: 6px 11px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--warm-line);
  font: 500 13px 'Geist', sans-serif;
  color: var(--ink-soft);
  outline: none;
  cursor: pointer;
}
.v2-filter-panel select:focus,
.v2-filter-panel input[type=date]:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}
.v2-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 12px 'Geist', sans-serif;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.v2-clear-filters:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}
.v2-clear-filters i {
  font-size: 14px;
}

/* Secondary filters (reason + date range), below the tab pills */
.v2-calls-subfilters {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px;
}
.v2-calls-subfilters select,
.v2-calls-subfilters input[type=date] {
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--warm-line);
  font: 500 12px 'Geist', sans-serif;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  outline: none;
  cursor: pointer;
}
.v2-calls-subfilters input[type=date] {
  min-width: 122px;
  font-family: 'Geist Mono', monospace;
}
.v2-calls-subfilters select:focus,
.v2-calls-subfilters input[type=date]:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}
.v2-calls-subfilters .clear-link {
  font: 600 11.5px 'Geist', sans-serif;
  color: var(--accent); text-decoration: none;
  margin-left: 4px;
}
.v2-calls-subfilters .clear-link:hover { color: var(--accent-deep); }

/* Small tertiary action link (e.g. "354 calls →") */
.v2-link-action {
  font: 600 12px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.v2-link-action:hover { color: var(--accent-deep); text-decoration: underline; }

.v2-calls-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding-right: 4px;
  margin: 0 -4px;
}

.v2-call-card {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--warm-line);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.v2-call-card:hover { background: rgba(255, 255, 255, 0.78); }
.v2-call-card.active {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245, 248, 255, 0.92));
  border-color: rgba(31, 63, 195, 0.25);
  box-shadow: 0 6px 22px -8px rgba(31, 63, 195, 0.22);
}
/* Unread state — first_viewed_at IS NULL */
.v2-call-card.unread::before {
  content: '';
  position: absolute;
  top: 18px; left: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.v2-call-card.unread .v2-call-card-name {
  font-weight: 700;
}
.v2-call-card .urgent-dot {
  position: absolute; top: 13px; right: 13px;
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.20);
}
.v2-call-card-body { flex: 1; min-width: 0; }
.v2-call-card-row1 {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.v2-call-card-name {
  font: 600 14px 'Geist', sans-serif; letter-spacing: -.02em;
}
.v2-call-card-time {
  font: 500 11px 'Geist Mono', monospace;
  color: var(--muted);
  margin-left: auto;
}
.v2-call-card-summary {
  font: 300 12.5px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--muted-strong);
  line-height: 1.5;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-call-card-tags {
  display: flex; gap: 6px; align-items: center;
}
.v2-call-card-tags .v2-chip { font-size: 11px; padding: 2px 9px; }
.v2-call-card-tags .dur {
  font: 500 10.5px 'Geist Mono', monospace;
  color: var(--muted);
}

/* ── Right: call detail ───────────────────────────────────── */
.v2-calls-detail {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  position: relative;
}
.v2-call-detail-head {
  padding: 18px 22px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--warm-line);
  position: relative;
}
.v2-call-detail-head-link {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-width: 0;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 16px;
  color: var(--ink); text-decoration: none;
  transition: background .15s, transform .15s;
}
.v2-call-detail-head-link:hover { background: rgba(0, 0, 0, 0.035); }
.v2-call-detail-head-link:hover .v2-call-detail-name-arrow { opacity: 1; transform: translateX(2px); }
.v2-call-detail-head-static {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-width: 0;
}
.v2-call-detail-meta { min-width: 0; flex: 1; }
.v2-call-detail-head h2 {
  font: 900 26px 'Geist', sans-serif; letter-spacing: -.030em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.v2-call-detail-head h2.is-phone {
  font: 600 24px 'Geist Mono', monospace; letter-spacing: -.02em;
}
.v2-call-detail-phone-sub {
  font: 500 13px 'Geist Mono', monospace; letter-spacing: -.01em;
  color: var(--muted-strong);
  margin-top: 3px;
}
.v2-call-detail-id { font-size: 12px; color: var(--muted-strong); margin-top: 4px; }
.v2-call-detail-name-arrow {
  font-size: 13px; color: var(--accent);
  opacity: 0; transition: opacity .15s, transform .15s;
  display: inline-flex; align-items: center;
}
.v2-call-detail-actions-top {
  margin-left: auto; display: flex; gap: 8px;
  flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
}

/* ── Editable reason chip (click chip → menu of reasons) ──── */
.v2-reason-edit { position: relative; display: inline-block; }
.v2-reason-edit > summary {
  list-style: none; cursor: pointer; user-select: none;
}
.v2-reason-edit > summary::-webkit-details-marker { display: none; }
.v2-reason-edit > summary::marker { content: ""; }
.v2-reason-edit > summary > .v2-chip { padding-right: 18px; position: relative; }
.v2-reason-edit > summary > .v2-chip::after {
  content: '▾';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; opacity: 0.55;
}
.v2-reason-edit-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 50;
  min-width: 200px;
  max-height: 320px; overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--cream-50);
  border: 1px solid var(--warm-line);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
}
.v2-reason-edit-menu button {
  text-align: left;
  width: 100%;
  padding: 7px 12px;
  border-radius: 12px;
  background: transparent;
  border: none;
  font: 500 13px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--ink-soft);
  cursor: pointer;
}
.v2-reason-edit-menu button:hover { background: rgba(255, 255, 255, 0.75); }
.v2-reason-edit-menu button.current {
  background: var(--accent); color: white;
}

/* ── Overflow "⋯" menu in call-detail header ─────────────── */
.v2-detail-overflow { position: relative; display: inline-block; }
.v2-detail-overflow > summary {
  list-style: none; cursor: pointer; user-select: none;
  width: 30px; height: 30px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--warm-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--muted-strong);
  transition: background .15s;
}
.v2-detail-overflow > summary:hover { background: rgba(255, 255, 255, 0.95); }
.v2-detail-overflow > summary::-webkit-details-marker { display: none; }
.v2-detail-overflow > summary::marker { content: ""; }
.v2-detail-overflow-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 50;
  min-width: 190px;
  padding: 6px;
  border-radius: 16px;
  background: var(--cream-50);
  border: 1px solid var(--warm-line);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
}
.v2-detail-overflow-menu button,
.v2-detail-overflow-menu a {
  text-align: left;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  font: 500 13px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.v2-detail-overflow-menu button:hover,
.v2-detail-overflow-menu a:hover { background: rgba(255, 255, 255, 0.75); }
.v2-detail-overflow-menu button.danger { color: #991b1b; }
.v2-detail-overflow-menu button.danger:hover { background: #fee2e2; }

.v2-call-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

.v2-ai-summary {
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(31, 63, 195, 0.08), rgba(199, 210, 255, 0.40));
  border: 1px solid rgba(31, 63, 195, 0.18);
}
.v2-ai-summary .label-tiny { color: var(--accent-deep); margin-bottom: 8px; display: block; }
.v2-ai-summary p {
  font: 400 15px 'Geist', sans-serif; letter-spacing: -.012em;
  color: var(--ink); line-height: 1.55;
}

.v2-call-section { padding: 16px 18px; }
.v2-call-section .label-tiny { margin-bottom: 10px; display: block; }
.v2-call-section audio {
  width: 100%;
  height: 38px;
  display: block;
}

.v2-transcript {
  white-space: pre-wrap;
  font: 300 13px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--ink-soft); line-height: 1.55;
  max-height: 280px; overflow-y: auto;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 14px;
}

.v2-notes-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--warm-line);
  font: 300 13px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.v2-notes-form textarea:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 4px rgba(31, 63, 195, 0.10);
}

/* ── SMS thread ───────────────────────────────────────────── */
.v2-sms-thread { display: flex; flex-direction: column; gap: 8px; }
.v2-sms-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font: 300 13px 'Geist', sans-serif; line-height: 1.5;
  max-width: 86%;
}
.v2-sms-bubble.outbound {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--warm-line);
  margin-left: auto;
  color: var(--ink-soft);
}
.v2-sms-bubble.inbound {
  background: rgba(31, 63, 195, 0.08);
  border: 1px solid rgba(31, 63, 195, 0.15);
  color: var(--ink);
}
.v2-sms-meta {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 10.5px 'Geist Mono', monospace; color: var(--muted);
  margin-bottom: 3px;
}

/* ── Persistent action bar (bottom of detail) ─────────────── */
.v2-call-actions {
  padding: 14px 22px;
  border-top: 1px solid var(--warm-line);
  background: rgba(255, 252, 248, 0.7);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.v2-call-actions .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ── Empty state ──────────────────────────────────────────── */
.v2-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.v2-empty i { font-size: 36px; opacity: .35; display: block; margin-bottom: 12px; }

/* Mobile back button (only shown on small screens) */
.v2-mobile-back {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  background: transparent;
  border: none;
  font: 600 13px 'Geist', sans-serif;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
  margin-right: 12px;
}
.v2-mobile-back:hover {
  color: var(--accent-deep);
}
.v2-mobile-back i {
  font-size: 18px;
}

/* Tablet breakpoint (1100px): two-column layout, but more generous heights */
@media (max-width: 1100px) {
  .v2-calls-layout { flex-direction: column; }
  .v2-calls-list { width: 100%; max-height: 50vh; }
  .v2-calls-detail { width: 100%; max-height: none; }
}

/* Mobile breakpoint (768px): full stack, wrap filter pills, small list height */
@media (max-width: 768px) {
  .v2-calls-layout { flex-direction: column; gap: 12px; }
  .v2-calls-list { width: 100%; max-height: 60vh; }
  .v2-calls-detail { width: 100%; max-height: none; }

  /* Show mobile back button */
  .v2-mobile-back { display: flex !important; }

  /* Wrap filter pills onto multiple rows — horizontal scroll hid them under cards */
  .v2-calls-filters {
    flex-wrap: wrap;
    gap: 6px 6px;
  }
  .v2-filter-pill {
    flex-shrink: 0;
  }

  /* Collapse filter panel to single column on small phones */
  .v2-filter-panel {
    flex-direction: column;
    gap: 8px;
  }
  .v2-filter-field {
    width: 100%;
  }
  .v2-filter-panel select,
  .v2-filter-panel input[type=date] {
    width: 100%;
  }

  /* Call detail head — vertical stack so name + meta + actions don't crash */
  .v2-call-detail-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .v2-mobile-back {
    align-self: flex-start;
    margin-right: 0;
    margin-bottom: -4px;
  }
  .v2-call-detail-head-link,
  .v2-call-detail-head-static {
    align-items: center;
    gap: 12px;
  }
  .v2-call-detail-head h2 {
    font-size: 22px;
  }
  .v2-call-detail-head h2.is-phone {
    font-size: 20px;
  }
  /* Action row (reason chip + overflow) wraps below the name on mobile */
  .v2-call-detail-head .v2-reason-edit,
  .v2-call-detail-head .v2-detail-overflow {
    flex-shrink: 0;
  }
  .v2-call-detail-actions-top {
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* The "354 calls →" link sits below the meta on its own row */
  .v2-call-detail-actions-top .v2-link-action {
    margin-left: 0;
  }
}

/* ── Login screen layout ──────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  position: relative;
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px 30px;
  position: relative;
  z-index: 2;
}
.login-card h2 {
  font-size: 32px;
  text-align: center;
}
.login-tagline {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  margin-bottom: 24px;
}
.login-foot {
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ────────────────────────────────────────────────────────────
   GUEST PROFILE (guest_detail.html)
   3-column layout: profile · chat timeline · AI insights
   ──────────────────────────────────────────────────────────── */

.v2-guest-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 1100px) {
  .v2-guest-layout { grid-template-columns: 1fr; }
}

/* ── Left: profile card ───────────────────────────────────── */
.v2-profile-card {
  padding: 22px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.v2-profile-card .v2-avatar { margin: 0 auto; }
.v2-profile-card h2 {
  margin-top: 14px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.035em;
}
.v2-profile-name-edit {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
}
.v2-profile-name-edit input {
  flex: 1; min-width: 0;
  padding: 8px 14px;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--warm-line);
  font: 600 14px 'Geist', sans-serif;
  letter-spacing: -.02em;
  outline: none;
}
.v2-profile-name-edit input:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}
.v2-profile-contacts {
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px;
  color: var(--muted-strong);
  margin-top: 10px;
  line-height: 1.6;
}
.v2-profile-chips {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 14px; flex-wrap: wrap;
}

/* Stats grid inside profile area */
.v2-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--warm-line);
}
.v2-stat {
  text-align: center;
  padding: 0 6px;
  border-left: 1px solid var(--warm-line);
}
.v2-stat:first-child { border-left: none; }
.v2-stat .v {
  font: 900 22px 'Geist', sans-serif;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.v2-stat .l {
  font: 600 10.5px 'Geist', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-top: 4px;
}

/* Editable annotation blocks (preferences, staff notes, caller type) */
.v2-annot-block {
  padding: 14px 16px;
  margin-top: 12px;
}
.v2-annot-block .label-tiny { display: block; margin-bottom: 6px; }
.v2-annot-block textarea,
.v2-annot-block select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--warm-line);
  font: 300 13px 'Geist', sans-serif;
  letter-spacing: -.005em;
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.v2-annot-block select { cursor: pointer; padding: 8px 12px; }
.v2-annot-block textarea:focus,
.v2-annot-block select:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}

/* ── Center: chat-like timeline ───────────────────────────── */
.v2-timeline-wrap {
  display: flex; flex-direction: column;
  min-height: 0;
  /* Reserve room for header + composer on tall viewports */
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
.v2-timeline-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--warm-line);
  display: flex; align-items: center; gap: 10px;
}
.v2-timeline-head h3 { font-size: 18px; }
.v2-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
}

/* A single chronological event in the timeline */
.v2-event {
  display: flex; gap: 12px;
  position: relative;
}
.v2-event-time {
  flex-shrink: 0;
  width: 56px;
  text-align: right;
  font: 500 11px 'Geist Mono', monospace;
  color: var(--muted);
  padding-top: 11px;
  line-height: 1.3;
}
.v2-event-time .dt { display: block; font-weight: 600; color: var(--muted-strong); }
.v2-event-body { flex: 1; min-width: 0; }

/* Call event card */
.v2-event-call {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--warm-line);
  border-radius: 16px;
  padding: 13px 15px;
  transition: background .15s;
  text-decoration: none; color: var(--ink);
  display: block;
}
.v2-event-call:hover { background: rgba(255, 255, 255, 0.92); }
.v2-event-call.urgent {
  background: linear-gradient(135deg, rgba(199, 210, 255, 0.30), rgba(255, 255, 255, 0.85));
  border-color: rgba(31, 63, 195, 0.18);
}
.v2-event-call-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.v2-event-call-head .pill-icon {
  width: 28px; height: 28px;
  border-radius: 99px;
  background: rgba(31, 63, 195, 0.10);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.v2-event-call-head .head-title {
  font: 600 13.5px 'Geist', sans-serif;
  letter-spacing: -.01em;
}
.v2-event-call-head .dur {
  font: 500 11px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-event-call-head .open-link {
  margin-left: auto;
  font: 600 11.5px 'Geist', sans-serif;
  color: var(--accent);
  text-decoration: none;
}
.v2-event-call-head .open-link:hover { color: var(--accent-deep); }
.v2-event-call p {
  font: 300 13px 'Geist', sans-serif;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 4px;
}

/* SMS bubble (inside timeline) */
.v2-event-sms {
  display: flex;
  width: 100%;
}
.v2-event-sms .bubble {
  max-width: 84%;
  padding: 9px 14px;
  border-radius: 16px;
  font: 300 13px 'Geist', sans-serif;
  letter-spacing: -.005em;
  line-height: 1.5;
}
.v2-event-sms.outbound .bubble {
  background: var(--accent);
  border: 1px solid var(--accent);
  margin-left: auto;
  color: white;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px -4px rgba(31, 63, 195, 0.30);
}
.v2-event-sms.inbound .bubble {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--warm-line);
  color: var(--ink-soft);
  border-bottom-left-radius: 6px;
}
.v2-event-sms.outbound > div { margin-left: auto; }
.v2-event-sms .status {
  font: 600 9.5px 'Geist', sans-serif; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.v2-event-sms.outbound .status { text-align: right; }

/* Composer at the bottom of timeline */
.v2-composer {
  border-top: 1px solid var(--warm-line);
  padding: 14px 22px;
  background: rgba(255, 252, 248, 0.7);
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.v2-composer select,
.v2-composer textarea {
  padding: 10px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--warm-line);
  font: 400 13px 'Geist', sans-serif;
  letter-spacing: -.005em;
  color: var(--ink);
  outline: none;
}
.v2-composer select { min-width: 180px; cursor: pointer; }
.v2-composer textarea {
  flex: 1; min-width: 200px;
  border-radius: 18px;
  resize: vertical;
  min-height: 42px;
}
.v2-composer .feedback {
  flex-basis: 100%;
  font: 300 12px 'Geist', sans-serif; color: var(--muted-strong);
}

/* ── Right: AI insights ───────────────────────────────────── */
.v2-insights { display: flex; flex-direction: column; gap: 12px; }
.v2-insights .label-tiny { padding: 0 4px; }

.v2-insight-card {
  padding: 16px 18px;
}
.v2-insight-card .label-tiny { display: block; margin-bottom: 6px; }
.v2-insight-card .value {
  font: 900 28px 'Geist', sans-serif;
  letter-spacing: -.035em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
}
.v2-insight-card .value .unit {
  font: 300 12px 'Geist', sans-serif;
  color: var(--muted-strong);
}
.v2-insight-card .sub {
  font: 300 12px 'Geist', sans-serif;
  color: var(--muted-strong);
  margin-top: 6px;
  line-height: 1.5;
}
.v2-insight-card .empty {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted);
  line-height: 1.5;
}

/* Featured insight (cobalt-orb card) — for future "Pattern detected" */
.v2-insight-featured {
  position: relative;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #4361ee 0%, #1f3fc3 70%, #173098 100%);
  color: white;
  overflow: hidden;
  box-shadow: 0 14px 32px -12px rgba(31, 63, 195, 0.50);
}
.v2-insight-featured::after {
  content: ''; position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 99px;
  background: rgba(199, 210, 255, 0.40);
  filter: blur(30px);
  pointer-events: none;
}
.v2-insight-featured > * { position: relative; z-index: 1; }
.v2-insight-featured .eyebrow {
  font: 600 11px 'Geist', sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.v2-insight-featured p {
  font: 400 14px 'Geist', sans-serif;
  line-height: 1.55;
  margin-top: 8px;
}

/* Topic bar */
.v2-topic { margin-bottom: 10px; }
.v2-topic:last-child { margin-bottom: 0; }
.v2-topic-row {
  display: flex; justify-content: space-between;
  font: 500 12px 'Geist', sans-serif;
  margin-bottom: 5px;
}
.v2-topic-row .n {
  font-family: 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-topic-track {
  height: 6px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.v2-topic-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent);
}

/* Pending name confirmation banner */
.v2-pending-name {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 63, 195, 0.08), rgba(199, 210, 255, 0.30));
  border: 1px solid rgba(31, 63, 195, 0.18);
  font: 400 13px 'Geist', sans-serif;
}
.v2-pending-name .actions { margin-left: auto; display: flex; gap: 6px; }

/* ────────────────────────────────────────────────────────────
   GUESTS LIST (guests.html)
   ──────────────────────────────────────────────────────────── */

.v2-guests-list {
  display: flex; flex-direction: column;
  gap: 8px;
}

.v2-guest-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--warm-line);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.v2-guest-row:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px -6px rgba(56, 36, 12, 0.12);
}
.v2-guest-row-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.v2-guest-row-name {
  font: 600 14.5px 'Geist', sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-guest-row-name.unnamed {
  font-family: 'Geist Mono', monospace;
  color: var(--muted-strong);
}
.v2-guest-row-phone {
  font: 500 11.5px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-guest-row-tags {
  display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap;
}
.v2-guest-row-summary {
  font: 300 12px 'Geist', sans-serif;
  color: var(--muted-strong);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-guest-row-stats {
  text-align: right;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 3px;
  align-items: flex-end;
}
.v2-guest-row-stats .calls {
  font: 900 17px 'Geist', sans-serif;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.v2-guest-row-stats .last {
  font: 500 11px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-guest-row-actions {
  display: none;
  gap: 6px;
  flex-shrink: 0;
}
.v2-guest-row:hover .v2-guest-row-actions { display: inline-flex; }
.v2-guest-row-actions button {
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--warm-line-strong);
  color: var(--muted-strong);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.v2-guest-row-actions button:hover {
  background: #fee2e2; color: #991b1b; border-color: rgba(153, 27, 27, 0.20);
}

/* Add-guest expandable form */
.v2-add-guest {
  margin-bottom: 16px;
}
.v2-add-guest > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--ink);
  color: white;
  font: 600 13px 'Geist', sans-serif;
  user-select: none;
}
.v2-add-guest > summary::-webkit-details-marker { display: none; }
.v2-add-guest > summary::marker { content: ""; }
.v2-add-guest-form {
  margin-top: 14px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  background: var(--cream-50);
  border: 1px solid var(--warm-line);
  border-radius: 20px;
}
.v2-add-guest-form .full { grid-column: 1 / -1; }
.v2-add-guest-form label {
  font: 600 11px 'Geist', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-strong);
  display: block; margin-bottom: 5px;
}
.v2-add-guest-form input,
.v2-add-guest-form select,
.v2-add-guest-form textarea {
  width: 100%;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--warm-line);
  font: 300 13px 'Geist', sans-serif;
  letter-spacing: -.005em;
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.v2-add-guest-form input:focus,
.v2-add-guest-form select:focus,
.v2-add-guest-form textarea:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}
.v2-add-guest-form .actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}

/* Breadcrumb */
.v2-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  font: 600 12px 'Geist', sans-serif;
  letter-spacing: -.005em;
}
.v2-breadcrumb a { color: var(--muted-strong); text-decoration: none; }
.v2-breadcrumb a:hover { color: var(--accent); }
.v2-breadcrumb .sep { color: var(--muted); }
.v2-breadcrumb .current { color: var(--ink); }

/* ────────────────────────────────────────────────────────────
   NOTIFICATIONS (notifications.html)
   Channel-led panel: Email + Push hero cards, alert types list,
   collapsible Operator card, sticky save footer.
   ──────────────────────────────────────────────────────────── */

/* Toggle (used on cards and per-alert rows) */
.v2-toggle {
  appearance: none; -webkit-appearance: none;
  display: inline-block;
  width: 40px; height: 22px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.14);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
  outline: none;
  border: none;
  vertical-align: middle;
}
.v2-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 99px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: left .15s;
}
.v2-toggle:checked { background: var(--accent); }
.v2-toggle:checked::after { left: 20px; }

/* Channel hero grid (Email + Push side by side) */
.v2-notif-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .v2-notif-channels { grid-template-columns: 1fr; } }

.v2-notif-channel {
  position: relative;
  padding: 22px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--warm-line);
  background: rgba(255, 252, 248, 0.70);
  box-shadow: var(--shadow-soft);
  transition: background .2s, box-shadow .2s, color .2s, border-color .2s;
}
.v2-notif-channel.active {
  background: linear-gradient(135deg, #4361ee 0%, #1f3fc3 70%, #173098 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 16px 40px -14px rgba(31, 63, 195, 0.45);
}
.v2-notif-channel.active::after {
  content: '';
  position: absolute; right: -80px; top: -80px;
  width: 240px; height: 240px;
  border-radius: 99px;
  background: rgba(199, 210, 255, 0.40);
  filter: blur(30px);
  pointer-events: none;
}
.v2-notif-channel > * { position: relative; z-index: 1; }
.v2-notif-channel-head {
  display: flex; align-items: flex-start; gap: 14px;
}
.v2-notif-channel-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--warm-line);
  color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.v2-notif-channel.active .v2-notif-channel-icon {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.30);
  color: white;
}
.v2-notif-channel-title {
  font: 700 17px 'Geist', sans-serif; letter-spacing: -.02em;
}
.v2-notif-channel-sub {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted-strong);
  margin-top: 2px;
}
.v2-notif-channel.active .v2-notif-channel-sub { color: rgba(255, 255, 255, 0.82); }
.v2-notif-channel-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--warm-line);
}
.v2-notif-channel.active .v2-notif-channel-row {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
}
.v2-notif-channel-row .pre {
  font: 500 12px 'Geist Mono', monospace;
  opacity: 0.85;
  flex-shrink: 0;
}
.v2-notif-channel-row input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font: 500 13px 'Geist Mono', monospace;
  color: inherit;
}
.v2-notif-channel-row .badge {
  font: 600 10.5px 'Geist', sans-serif;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.v2-notif-channel-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(46, 111, 62, 0.10);
  border: 1px solid rgba(46, 111, 62, 0.18);
  font: 500 12.5px 'Geist', sans-serif;
  color: #2e6f3e;
  width: 100%;
}
.v2-notif-channel-status .dot { width: 8px; height: 8px; border-radius: 99px; background: #2e6f3e; }
.v2-notif-channel-status.warn   { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.18); color: #92400e; }
.v2-notif-channel-status.warn .dot   { background: #d97706; }
.v2-notif-channel-status.danger { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.20); color: #991b1b; }
.v2-notif-channel-status.danger .dot { background: #b91c1c; }
.v2-notif-channel-status .meta { margin-left: auto; font: 500 10.5px 'Geist Mono', monospace; color: var(--muted); }
.v2-notif-channel-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Alert types list card */
.v2-notif-alerts {
  padding: 22px;
  margin-bottom: 18px;
}
.v2-notif-alerts h2 { font-size: 18px; }
.v2-notif-alerts-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.v2-notif-alerts-sub {
  font: 300 13px 'Geist', sans-serif;
  color: var(--muted-strong);
  margin-bottom: 14px;
}
.v2-notif-alert-list {
  display: flex; flex-direction: column; gap: 8px;
}
.v2-notif-alert-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgba(255, 252, 248, 0.70);
  border: 1px solid var(--warm-line);
  transition: opacity .15s, background .15s;
}
.v2-notif-alert-row.off { opacity: 0.55; background: rgba(0, 0, 0, 0.02); }
.v2-notif-alert-row.urgent {
  border-color: rgba(220, 38, 38, 0.20);
}
.v2-notif-alert-swatch {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.v2-notif-alert-swatch.res     { background: rgba(31, 63, 195, 0.10); color: var(--accent-deep); }
.v2-notif-alert-swatch.comp    { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; }
.v2-notif-alert-swatch.follow  { background: rgba(217, 119, 6, 0.12);  color: #92400e; }
.v2-notif-alert-swatch.biz     { background: rgba(0, 0, 0, 0.06);      color: var(--ink-soft); }
.v2-notif-alert-swatch.digest  { background: rgba(46, 111, 62, 0.10);  color: #2e6f3e; }
.v2-notif-alert-meta { flex: 1; min-width: 0; }
.v2-notif-alert-name {
  display: flex; align-items: center; gap: 8px;
  font: 600 14px 'Geist', sans-serif; letter-spacing: -.015em;
}
.v2-notif-alert-desc {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted-strong);
  margin-top: 2px;
}

/* Operator section (collapsible) */
.v2-notif-op {
  padding: 20px;
  margin-bottom: 18px;
}
.v2-notif-op-head {
  display: flex; align-items: center; gap: 14px;
}
.v2-notif-op-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--warm-line);
}
.v2-notif-op-emailrow {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.v2-notif-op-emailrow input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--warm-line-strong);
  font: 500 13px 'Geist Mono', monospace;
  color: var(--ink);
  outline: none;
}
.v2-notif-op-emailrow input:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}
.v2-notif-op-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-notif-op-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border-radius: 99px;
  background: white;
  color: var(--ink-soft);
  border: 1px solid var(--warm-line-strong);
  cursor: pointer;
  font: 500 12.5px 'Geist', sans-serif;
  user-select: none;
}
.v2-notif-op-chip.on {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.v2-notif-op-chip input { display: none; }
.v2-notif-op-chip .glyph { font-size: 12px; opacity: 0.9; }

/* Sticky save footer */
.v2-notif-footer {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 252, 248, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--warm-line);
  box-shadow: var(--shadow-soft);
}
.v2-notif-footer .info {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted-strong);
}
.v2-notif-footer .info strong { color: var(--ink); font-weight: 600; }
.v2-notif-footer .actions { margin-left: auto; display: flex; gap: 8px; }

/* ────────────────────────────────────────────────────────────
   ACCOUNT (account.html)
   Direction A · classic split — identity strip + email/password
   side-by-side cards + team panel below.
   ──────────────────────────────────────────────────────────── */

/* Identity strip */
.v2-account-identity {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.v2-account-identity-main { flex: 1; min-width: 0; }
.v2-account-identity-name {
  font: 700 17px 'Geist', sans-serif; letter-spacing: -.02em;
}
.v2-account-identity-sub {
  font: 500 12.5px 'Geist Mono', monospace;
  color: var(--muted-strong);
  margin-top: 2px;
}
.v2-account-identity-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Two-card row + cards */
.v2-account-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .v2-account-row { grid-template-columns: 1fr; } }

.v2-account-card {
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.v2-account-card-head {
  display: flex; align-items: center; gap: 12px;
}
.v2-account-card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.v2-account-card-icon.email  { background: rgba(31, 63, 195, 0.10);  color: var(--accent-deep); }
.v2-account-card-icon.lock   { background: rgba(0, 0, 0, 0.06);      color: var(--ink-soft); }
.v2-account-card-title h3 { font-size: 16px; line-height: 1.2; }
.v2-account-card-title-sub {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted-strong);
  margin-top: 1px;
}

.v2-account-current {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  display: flex; align-items: center; gap: 10px;
}
.v2-account-current .mono {
  font: 500 13px 'Geist Mono', monospace;
}

.v2-account-field { display: flex; flex-direction: column; gap: 6px; }
.v2-account-field label.label-tiny { display: block; }
.v2-account-field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--warm-line-strong);
  font: 500 13.5px 'Geist', sans-serif;
  letter-spacing: -.01em;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.v2-account-field input.mono { font-family: 'Geist Mono', monospace; }
.v2-account-field input:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}
.v2-account-field .help {
  font: 300 11.5px 'Geist', sans-serif;
  color: var(--muted);
}
.v2-account-field .field-error {
  font: 500 11.5px 'Geist', sans-serif;
  color: #991b1b;
}

/* Inline informative banner (cobalt-tinted) */
.v2-account-info {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(31, 63, 195, 0.07);
  border: 1px solid rgba(31, 63, 195, 0.15);
  font: 300 12px 'Geist', sans-serif;
  color: var(--accent-deep);
  display: flex; gap: 8px; align-items: flex-start;
}
.v2-account-info .ico { flex-shrink: 0; font-size: 13px; line-height: 1.3; }

/* Password strength meter */
.v2-pw-meter { display: flex; gap: 4px; height: 4px; }
.v2-pw-meter .seg {
  flex: 1; border-radius: 99px;
  background: rgba(0, 0, 0, 0.08);
  transition: background .2s;
}
.v2-pw-meter[data-score="1"] .seg:nth-child(-n+1) { background: #b91c1c; }
.v2-pw-meter[data-score="2"] .seg:nth-child(-n+2) { background: #d97706; }
.v2-pw-meter[data-score="3"] .seg:nth-child(-n+3) { background: #c79500; }
.v2-pw-meter[data-score="4"] .seg                  { background: #2e7d3a; }

.v2-pw-meter-row {
  display: flex; justify-content: space-between; margin-top: 6px;
}
.v2-pw-meter-row .label,
.v2-pw-meter-row .score {
  font: 500 11px 'Geist Mono', monospace;
}
.v2-pw-meter-row .label { color: var(--muted-strong); }
.v2-pw-meter-row .score { font-weight: 600; }
.v2-pw-meter-row .score.s1 { color: #b91c1c; }
.v2-pw-meter-row .score.s2 { color: #d97706; }
.v2-pw-meter-row .score.s3 { color: #c79500; }
.v2-pw-meter-row .score.s4 { color: #2e7d3a; }

/* Requirements checklist grid */
.v2-pw-reqs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--warm-line);
}
.v2-pw-req {
  display: flex; align-items: center; gap: 8px;
  font: 500 12px 'Geist', sans-serif;
  color: var(--muted-strong);
}
.v2-pw-req .dot {
  width: 14px; height: 14px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.06);
  color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.v2-pw-req.met { color: var(--ink-soft); }
.v2-pw-req.met .dot { background: #2e7d3a; color: white; }

.v2-account-card-submit { align-self: flex-start; margin-top: auto; }

/* Team section */
.v2-account-team {
  padding: 24px;
}
.v2-account-team-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.v2-account-team-head h2 { font-size: 18px; }
.v2-account-operator {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 252, 248, 0.65);
  border: 1px solid var(--warm-line);
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
}
@media (max-width: 700px) {
  .v2-account-operator { grid-template-columns: 1fr; }
}
.v2-account-operator-main {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.v2-account-operator-name {
  display: flex; align-items: center; gap: 8px;
  font: 600 14.5px 'Geist', sans-serif;
}
.v2-account-operator-meta {
  font: 500 12px 'Geist Mono', monospace;
  color: var(--muted-strong); margin-top: 2px;
}
.v2-account-operator-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.v2-account-perm-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font: 500 12.5px 'Geist', sans-serif;
  color: var(--ink-soft);
}
.v2-account-perm-toggle input { display: none; }
.v2-account-perm-toggle .cbx {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: transparent;
}
.v2-account-perm-toggle input:checked + .cbx {
  background: var(--accent); border-color: var(--accent); color: white;
}

/* Add-operator inline form (when no operator yet) */
.v2-account-add-op {
  padding: 18px;
  border-radius: 16px;
  background: var(--cream-50);
  border: 1px solid var(--warm-line);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.v2-account-add-op .full { grid-column: 1 / -1; }
.v2-account-add-op label.label-tiny { display: block; margin-bottom: 5px; }
.v2-account-add-op input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--warm-line);
  font: 500 13px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--ink);
  outline: none;
}
.v2-account-add-op input:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}

/* ────────────────────────────────────────────────────────────
   WEEKLY REPORT (reports_detail.html)
   Direction B · issue-first, mixed with A's stat tiles
   ──────────────────────────────────────────────────────────── */

/* Page eyebrow + h1 (date range) + generation meta */
.v2-report-head {
  margin-bottom: 22px;
}
.v2-report-crumbs {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font: 600 11px 'Geist', sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-strong);
}
.v2-report-crumbs a { color: var(--muted-strong); text-decoration: none; }
.v2-report-crumbs a:hover { color: var(--accent); }
.v2-report-crumbs .sep { color: var(--muted); }
.v2-report-head h1 { font-size: 30px; }
.v2-report-meta {
  font: 500 12px 'Geist Mono', monospace;
  color: var(--muted-strong);
  margin-top: 6px;
}
.v2-report-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 4-tile stat row (Total / Real / Reservations / KB failures) */
.v2-report-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .v2-report-stats { grid-template-columns: repeat(2, 1fr); } }

.v2-report-stat {
  padding: 18px;
  border-radius: 20px;
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}
.v2-report-stat.accent {
  background: linear-gradient(135deg, rgba(31, 63, 195, 0.10), rgba(199, 210, 255, 0.45));
  border-color: rgba(31, 63, 195, 0.20);
}
.v2-report-stat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.v2-report-stat .label { font: 600 10.5px 'Geist', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.v2-report-stat.accent .label { color: var(--accent-deep); }
.v2-report-stat .delta { font: 500 10.5px 'Geist Mono', monospace; }
.v2-report-stat .delta.up   { color: #2e7d3a; }
.v2-report-stat .delta.down { color: #b91c1c; }
.v2-report-stat .delta.flat { color: var(--muted); }
.v2-report-stat .value {
  font: 900 36px 'Geist', sans-serif; letter-spacing: -.04em; line-height: 1;
  color: var(--ink);
}
.v2-report-stat.accent .value { color: var(--accent-deep); }
.v2-report-stat .sub {
  font: 300 11.5px 'Geist', sans-serif; color: var(--muted-strong); margin-top: 6px;
}

/* Quality bar + avg call + extras row */
.v2-report-quality {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px;
  align-items: center;
  padding: 20px 22px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .v2-report-quality { grid-template-columns: 1fr; } }

.v2-qbar {
  height: 8px; border-radius: 99px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
}
.v2-qbar .seg-good { background: #2e7d3a; }
.v2-qbar .seg-poor { background: #b91c1c; }
.v2-qbar-legend {
  display: flex; gap: 16px; margin-top: 10px;
  font: 500 12px 'Geist', sans-serif;
}
.v2-qbar-legend .dot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }

.v2-report-quality .stat-col { border-left: 1px solid var(--warm-line); padding-left: 28px; }
.v2-report-quality .stat-col .label { font: 600 10.5px 'Geist',sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.v2-report-quality .stat-col .v {
  display: flex; align-items: baseline; gap: 8px; margin-top: 6px;
  font: 900 30px 'Geist',sans-serif; letter-spacing: -.035em; line-height: 1;
}
.v2-report-quality .stat-col .v .unit { font: 500 12px 'Geist Mono',monospace; color: var(--muted-strong); }
.v2-report-quality .stat-col .hint { font: 500 11.5px 'Geist',sans-serif; margin-top: 4px; }
.v2-report-quality .stat-col .hint.good { color: #2e7d3a; }
.v2-report-quality .stat-col .hint.bad  { color: #b91c1c; }

/* Two-column analysis grid */
.v2-report-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px;
  margin-bottom: 22px;
}
@media (max-width: 1100px) { .v2-report-grid { grid-template-columns: 1fr; } }

.v2-report-card {
  padding: 22px;
}
.v2-report-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.v2-report-card-head h2 { font-size: 18px; }
.v2-report-card-head .iconbox {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(31, 63, 195, 0.10); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* Markdown narrative styling */
.v2-report-md {
  font: 400 14px 'Geist', sans-serif; color: var(--ink-soft);
  line-height: 1.65;
}
.v2-report-md h1, .v2-report-md h2, .v2-report-md h3 {
  color: var(--ink);
  margin: 1.2em 0 .4em;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.v2-report-md h1 { font-size: 18px; font-weight: 700; }
.v2-report-md h2 {
  font-size: 15px; font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--warm-line);
}
.v2-report-md h3 { font-size: 13.5px; font-weight: 600; color: var(--accent-deep); }
.v2-report-md p { margin: 0 0 .8em; }
.v2-report-md ul, .v2-report-md ol { padding-left: 1.25em; margin: 0 0 .8em; }
.v2-report-md li { margin-bottom: .25em; }
.v2-report-md strong { color: var(--ink); font-weight: 600; }
.v2-report-md em { color: var(--ink); }
.v2-report-md code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font: 500 12px 'Geist Mono', monospace;
}
.v2-report-md blockquote {
  margin: .8em 0;
  padding: 8px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(31, 63, 195, 0.04);
  color: var(--ink);
  font-style: normal;
}
.v2-report-md hr {
  border: none; border-top: 1px solid var(--warm-line);
  margin: 1.2em 0;
}

/* Calls table (week_calls) */
.v2-report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 400 13px 'Geist', sans-serif;
}
.v2-report-table thead th {
  text-align: left;
  font: 600 10.5px 'Geist',sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  padding: 14px 18px;
  background: rgba(255, 255, 252, 0.5);
  border-bottom: 1px solid var(--warm-line);
}
.v2-report-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--warm-line);
  color: var(--ink-soft);
  vertical-align: top;
}
.v2-report-table tbody tr:last-child td { border-bottom: none; }
.v2-report-table .mono { font: 500 12px 'Geist Mono', monospace; color: var(--muted-strong); }
.v2-report-table .caller-unknown { color: var(--muted); }
.v2-report-table .reason {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font: 500 11px 'Geist Mono', monospace;
}
.v2-report-table .reason.reservation   { background: rgba(46, 125, 58, 0.10); color: #2e7d3a; }
.v2-report-table .reason.private_event { background: rgba(199, 149, 0, 0.13); color: #806000; }
.v2-report-table .reason.complaint     { background: rgba(220, 38, 38, 0.10);  color: #b91c1c; }
.v2-report-table .reason.hours,
.v2-report-table .reason.parking       { background: rgba(0, 0, 0, 0.05); color: var(--ink-soft); }
.v2-report-table .reason.non_customer  { background: rgba(0, 0, 0, 0.04); color: var(--muted-strong); }
.v2-report-table .reason.other         { background: rgba(31, 63, 195, 0.08); color: var(--accent-deep); }
.v2-report-table .qpill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  font: 600 10.5px 'Geist',sans-serif;
}
.v2-report-table .qpill .dot { width: 6px; height: 6px; border-radius: 99px; }
.v2-report-table .qpill.good     { background: rgba(46, 125, 58, 0.10); color: #2e7d3a; }
.v2-report-table .qpill.good .dot { background: #2e7d3a; }
.v2-report-table .qpill.poor     { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.v2-report-table .qpill.poor .dot { background: #b91c1c; }
.v2-report-table .qpill.flat     { background: rgba(0, 0, 0, 0.05); color: var(--muted); }
.v2-report-table .qpill.flat .dot { background: var(--muted); }
.v2-report-table .question { font-style: italic; color: #b91c1c; max-width: 360px; }

/* Operational alert banner (red-tinted) */
.v2-report-alert {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
  border: 1px solid rgba(220, 38, 38, 0.18);
}
.v2-report-alert .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 22px 'Geist',sans-serif;
  flex-shrink: 0;
}
.v2-report-alert .body { flex: 1; min-width: 0; }
.v2-report-alert .meta-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.v2-report-alert .tag {
  font: 600 10px 'Geist',sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
}
.v2-report-alert .title {
  font: 600 16px 'Geist', sans-serif; letter-spacing: -.015em;
  color: var(--ink);
}
.v2-report-alert .hint {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted-strong); margin-top: 4px;
}

/* Pull-quote (TL;DR at top of weekly analysis) */
.v2-report-quote {
  font: 500 15px 'Geist', sans-serif; letter-spacing: -.012em;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  margin-bottom: 18px;
}

/* Numbered analysis sections (01 02 03 04) */
.v2-report-sections { display: flex; flex-direction: column; gap: 16px; }
.v2-report-section {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 12px;
}
.v2-report-section .num {
  font: 700 10.5px 'Geist Mono', monospace;
  color: var(--accent-deep);
  padding-top: 3px;
}
.v2-report-section .heading {
  font: 600 13.5px 'Geist', sans-serif;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.v2-report-section .body.v2-report-md {
  font-size: 12.75px;
  line-height: 1.6;
  color: var(--muted-strong);
}
.v2-report-section .body.v2-report-md p { margin-bottom: .5em; }
.v2-report-section .body.v2-report-md strong { color: var(--ink); }
.v2-report-section .body.v2-report-md ul,
.v2-report-section .body.v2-report-md ol { margin: .25em 0 .5em; padding-left: 1.1em; }

/* KB gap card (severity + title + body + suggestion block) */
.v2-kb-gap {
  padding: 14px;
  margin-bottom: 10px;
}
.v2-kb-gap:last-child { margin-bottom: 0; }
.v2-kb-gap-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.v2-kb-gap-sev {
  width: 8px; height: 8px; border-radius: 99px;
  flex-shrink: 0;
  display: inline-block;
}
.v2-kb-gap-sev.high { background: #b91c1c; }
.v2-kb-gap-sev.med  { background: #d97706; }
.v2-kb-gap-sev.low  { background: var(--muted); }
.v2-kb-gap-title {
  font: 600 13.5px 'Geist', sans-serif; letter-spacing: -.015em;
  color: var(--ink);
  flex: 1; min-width: 0;
}
.v2-kb-gap-body.v2-report-md {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-strong);
}
.v2-kb-gap-body.v2-report-md code,
.v2-kb-gap-body.v2-report-md pre {
  display: block;
  background: rgba(46, 125, 58, 0.06);
  border: 1px solid rgba(46, 125, 58, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0;
  font: 500 12px 'Geist Mono', monospace;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.v2-kb-gap-body.v2-report-md pre code {
  background: transparent;
  border: none;
  padding: 0; margin: 0;
  display: inline;
}
.v2-kb-gap-body.v2-report-md strong { color: var(--ink); }

/* Green "Sugerencia del agente" block inside KB-gap cards */
.v2-kb-suggestion {
  background: rgba(46, 125, 58, 0.06);
  border: 1px solid rgba(46, 125, 58, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
}
.v2-kb-suggestion .label {
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #2e7d3a;
  display: block;
  margin-bottom: 4px;
}
.v2-kb-suggestion .text {
  font: 400 12.5px 'Geist', sans-serif;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ────────────────────────────────────────────────────────────
   BILLING (billing.html) — Direction C · side-by-side refined
   ──────────────────────────────────────────────────────────── */

.v2-bill-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .v2-bill-cards { grid-template-columns: 1fr; } }

.v2-bill-card {
  padding: 26px;
  display: flex; flex-direction: column;
}

.v2-bill-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.v2-bill-head h3 { font-size: 16px; }
.v2-bill-head .status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 99px;
  font: 600 11px 'Geist', sans-serif; letter-spacing: -.005em;
}
.v2-bill-head .status .dot { width: 6px; height: 6px; border-radius: 99px; }
.v2-bill-head .status.mint  { background: rgba(46,125,58,0.10); color: #2e7d3a; }
.v2-bill-head .status.mint .dot  { background: #2e7d3a; }
.v2-bill-head .status.amber { background: rgba(217,119,6,0.12); color: #92400e; }
.v2-bill-head .status.amber .dot { background: #d97706; }
.v2-bill-head .status.danger{ background: rgba(220,38,38,0.10); color: #991b1b; }
.v2-bill-head .status.danger .dot{ background: #b91c1c; }
.v2-bill-head .status.soft  { background: rgba(0,0,0,0.05); color: var(--muted-strong); }
.v2-bill-head .status.soft .dot  { background: var(--muted-strong); }

.v2-bill-desc {
  font: 300 13px 'Geist', sans-serif;
  color: var(--muted-strong);
}

.v2-bill-hero {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 14px;
}
.v2-bill-hero .v {
  font: 900 48px 'Geist', sans-serif; letter-spacing: -.04em; line-height: 1;
}
.v2-bill-hero .v.danger { color: #b91c1c; }
.v2-bill-hero .sub {
  font: 300 13.5px 'Geist', sans-serif;
  color: var(--muted-strong);
}
.v2-bill-hero .sub strong { color: var(--ink); font-weight: 600; }

/* Inner panel inside cards (benefits list / sparkline) */
.v2-bill-inner {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid var(--warm-line);
}
.v2-bill-inner .label-tiny { display: block; margin-bottom: 10px; }
.v2-bill-benefits {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.v2-bill-benefit {
  display: flex; align-items: center; gap: 8px;
  font: 400 12.5px 'Geist', sans-serif;
  color: var(--ink-soft);
}
.v2-bill-benefit .tick {
  width: 14px; height: 14px; border-radius: 99px;
  background: rgba(46,125,58,0.12); color: #2e7d3a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}

.v2-bill-spark {
  width: 100%;
  height: 70px;
  display: block;
}
.v2-bill-spark .area { fill: rgba(31,63,195,0.12); stroke: none; }
.v2-bill-spark .line {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.v2-bill-spark .dot { fill: var(--accent-deep); }

.v2-bill-spark-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.v2-bill-spark-meta .label-tiny { margin: 0; }
.v2-bill-spark-meta .stats {
  font: 500 11px 'Geist Mono', monospace;
  color: var(--muted-strong);
}

/* Status band (mint / amber tinted, bottom of card) */
.v2-bill-band {
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 12px;
  font: 400 12.5px 'Geist', sans-serif;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.v2-bill-band.mint {
  background: rgba(46,125,58,0.07); border: 1px solid rgba(46,125,58,0.18); color: #2e7d3a;
}
.v2-bill-band.amber {
  background: rgba(217,119,6,0.10); border: 1px solid rgba(217,119,6,0.22); color: #92400e;
}
.v2-bill-band.danger {
  background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.20); color: #991b1b;
}
.v2-bill-band strong { color: var(--ink); font-weight: 600; }

/* Footer actions row inside cards */
.v2-bill-actions { display: flex; gap: 8px; }
.v2-bill-actions .btn { flex: 1; justify-content: center; }
.v2-bill-actions .btn.shrink { flex: 0 0 auto; }

/* Top-up preset buttons + custom input + Top up */
.v2-bill-topup { display: flex; gap: 8px; align-items: stretch; }
.v2-bill-preset {
  flex: 0.65;
  padding: 10px 0;
  border-radius: 99px;
  border: 1px solid var(--warm-line-strong);
  background: white;
  color: var(--ink);
  font: 600 13px 'Geist', sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.v2-bill-preset:hover { background: rgba(0, 0, 0, 0.03); }
.v2-bill-preset.on {
  background: var(--ink); color: white; border-color: var(--ink);
}
.v2-bill-amount-wrap { position: relative; flex: 1; }
.v2-bill-amount-wrap .pre {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font: 500 13px 'Geist Mono', monospace; color: var(--muted);
}
.v2-bill-amount {
  width: 100%; height: 40px;
  padding-left: 26px; padding-right: 14px;
  border-radius: 99px;
  border: 1px solid var(--warm-line-strong);
  background: white;
  font: 500 13px 'Geist Mono', monospace; color: var(--ink);
  outline: none;
}
.v2-bill-amount:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}

/* Expenses table */
.v2-bill-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 400 13px 'Geist', sans-serif;
}
.v2-bill-table thead th {
  text-align: left;
  font: 600 10.5px 'Geist',sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  padding: 12px 22px;
  background: rgba(255, 255, 252, 0.5);
  border-bottom: 1px solid var(--warm-line);
}
.v2-bill-table tbody td {
  padding: 10px 22px;
  border-bottom: 1px solid var(--warm-line);
  color: var(--ink-soft);
  font: 500 13px 'Geist Mono', monospace;
}
.v2-bill-table tbody tr:last-child td { border-bottom: none; }
.v2-bill-table td.num { text-align: right; }
.v2-bill-table td.cost { font-weight: 600; color: var(--ink); }
.v2-bill-table .voice-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border-radius: 99px;
  font: 500 10.5px 'Geist',sans-serif;
  background: rgba(0,0,0,0.04); color: var(--muted-strong);
}

/* Weekly reports list — glass-row layout (one row per report) */
.v2-reports-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.v2-report-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 80px) 160px 80px;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--warm-line);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, box-shadow .15s, transform .15s;
}
.v2-report-row:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px -6px rgba(56, 36, 12, 0.12);
}
@media (max-width: 900px) {
  .v2-report-row { grid-template-columns: 1fr; }
  .v2-report-row .v2-report-row-stat { display: flex; justify-content: space-between; }
}
.v2-report-row-date {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.v2-report-row-date .range {
  font: 600 14.5px 'Geist', sans-serif; letter-spacing: -.015em;
}
.v2-report-row-date .gen {
  font: 500 11px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-report-row-stat {
  text-align: right;
}
.v2-report-row-stat .v {
  font: 900 22px 'Geist', sans-serif;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.v2-report-row-stat .l {
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-strong);
  margin-top: 4px;
}
.v2-report-row-stat.danger .v { color: #b91c1c; }
.v2-report-row-stat.good   .v { color: #2e7d3a; }

.v2-report-row-quality {
  display: flex; flex-direction: column; gap: 5px;
}
.v2-report-row-quality .v2-qbar { height: 6px; }
.v2-report-row-quality .legend {
  display: flex; gap: 8px;
  font: 500 10.5px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-report-row-quality .legend .ok { color: #2e7d3a; }
.v2-report-row-quality .legend .bad { color: #b91c1c; }

.v2-report-row-arrow {
  text-align: right;
  font: 600 14px 'Geist', sans-serif;
  color: var(--accent);
  white-space: nowrap;
}
.v2-report-row:hover .v2-report-row-arrow { color: var(--accent-deep); }

.v2-report-row-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px;
  border-radius: 99px;
  font: 600 10.5px 'Geist', sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(217, 119, 6, 0.10);
  color: #92400e;
}
.v2-report-row-status.failed { background: rgba(220, 38, 38, 0.10); color: #991b1b; }

/* Red critical-callers strip at the bottom of the analysis card */
.v2-critical-strip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.18);
}
.v2-critical-strip .sev {
  width: 8px; height: 8px; border-radius: 99px;
  background: #b91c1c;
  flex-shrink: 0;
}
.v2-critical-strip .text {
  flex: 1; min-width: 0;
  font: 400 12.5px 'Geist', sans-serif; line-height: 1.4;
  color: var(--ink-soft);
}
.v2-critical-strip .text strong { color: var(--ink); font-weight: 600; }

/* Loading / failed states */
.v2-report-state {
  padding: 60px 20px;
  text-align: center;
}
.v2-report-state .spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(31, 63, 195, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Danger button variant */
.btn-danger {
  background: #fee2e2;
  border-color: rgba(153, 27, 27, 0.20);
  color: #991b1b;
}
.btn-danger:hover {
  background: #fecaca;
  color: #7f1d1d;
}

/* ────────────────────────────────────────────────────────────
   DASHBOARD (dashboard.html)
   Hero banner, KPI cards with sparklines, heatmap, ROI,
   bars / topic table / recent reservations
   ──────────────────────────────────────────────────────────── */

.v2-dash-grid {
  display: flex; flex-direction: column;
  gap: 18px;
}

/* ── Hero banner (cobalt gradient + overnight summary + stats) ───── */
.v2-dash-hero {
  position: relative;
  display: flex; gap: 22px; align-items: stretch;
  padding: 26px 30px;
  border-radius: 24px;
  background: linear-gradient(135deg, #4361ee 0%, #1f3fc3 70%, #173098 100%);
  color: white;
  overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(31, 63, 195, 0.50);
}
.v2-dash-hero::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px;
  border-radius: 99px;
  background: rgba(199, 210, 255, 0.30);
  filter: blur(40px);
  pointer-events: none;
}
.v2-dash-hero-left {
  flex: 1; min-width: 0;
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 10px;
}
.v2-dash-hero-eyebrow {
  font: 600 11px 'Geist', sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
}
.v2-dash-hero-greeting {
  font: 900 32px 'Geist', sans-serif;
  letter-spacing: -.035em;
  color: white;
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.v2-dash-hero-greeting .agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.30);
  font: 600 12px 'Geist', sans-serif; letter-spacing: -.005em;
  color: rgba(255, 255, 255, 0.92);
}
.v2-dash-hero-greeting .agent-chip .dot {
  width: 6px; height: 6px; border-radius: 99px; background: #6ee7a0;
  box-shadow: 0 0 0 3px rgba(110, 231, 160, 0.30);
}
.v2-dash-hero-story-eyebrow {
  font: 600 11px 'Geist', sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
}
.v2-dash-hero-story {
  font: 500 17px 'Geist', sans-serif;
  letter-spacing: -.02em;
  color: white;
  line-height: 1.45;
  max-width: 560px;
}
.v2-dash-hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
}
.v2-dash-hero-actions .btn {
  background: rgba(255, 255, 255, 0.96);
  color: var(--accent-deep);
  border-color: transparent;
}
.v2-dash-hero-actions .btn:hover {
  background: white;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.20);
}
.v2-dash-hero-actions .btn.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.v2-dash-hero-actions .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.50);
}

.v2-dash-hero-stats {
  position: relative; z-index: 1;
  display: flex; gap: 10px;
  align-items: stretch;
  align-self: center;
}
.v2-dash-hero-stat {
  width: 88px; min-height: 88px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex; flex-direction: column; justify-content: space-between;
  color: white;
}
.v2-dash-hero-stat .v {
  font: 900 28px 'Geist', sans-serif;
  letter-spacing: -.035em;
  line-height: 1;
}
.v2-dash-hero-stat .l {
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 900px) {
  .v2-dash-hero { flex-direction: column; }
  .v2-dash-hero-stats { align-self: flex-start; }
}

/* ── KPI cards grid (5 cards, first is wider accent) ─────── */
.v2-dash-kpis {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) { .v2-dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .v2-dash-kpis { grid-template-columns: 1fr; } }

/* Main two-column grid (left: heatmap+charts, right: KB+recent) */
.v2-dash-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}
/* Grid items default to min-width: auto which lets wide children (heatmap
   min-width: 480px) expand the entire column past the viewport. Force min-width: 0
   so the heatmap's overflow-x: auto can actually scroll instead. */
.v2-dash-main-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .v2-dash-main-grid { grid-template-columns: 1fr; }
}

/* Inner charts row (calls/day + topic×outcome) */
.v2-dash-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .v2-dash-charts-row { grid-template-columns: 1fr; }
}

/* Heatmap: horizontal scroll on small screens */
@media (max-width: 600px) {
  .v2-dash-heatmap-wrap { overflow-x: auto; }
  .v2-dash-heatmap { min-width: 480px; }
}

/* Hero: reduce greeting size on small phones */
@media (max-width: 480px) {
  .v2-dash-hero { padding: 20px 18px; }
  .v2-dash-hero-greeting { font-size: 24px; }
  .v2-dash-hero-stats { flex-wrap: wrap; gap: 8px; }
  .v2-dash-hero-stat { width: 80px; min-height: 76px; }
}

/* ── Dashboard page head — wrap into rows on mobile ─────────── */
@media (max-width: 768px) {
  .v2-page-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .v2-page-head-actions {
    margin-left: 0;
    width: 100%;
  }
  /* KPI sparkline — shorter so cards don't take half the viewport */
  .v2-dash-spark { height: 36px; margin-top: 6px; }
  /* KPI card padding — tighter on narrow screens */
  .v2-dash-kpi { padding: 14px 14px 10px; }
  .v2-dash-kpi-value { font-size: 32px; }
  /* Dashboard cards — uniform tighter padding on mobile */
  .v2-dash-card { padding: 14px 16px; }
}

.v2-dash-kpi.accent {
  background: linear-gradient(135deg, rgba(31, 63, 195, 0.10), rgba(199, 210, 255, 0.45));
  border: 1px solid rgba(31, 63, 195, 0.20);
  box-shadow: var(--shadow-soft);
  border-radius: 24px;
  position: relative; overflow: hidden;
}
.v2-dash-kpi.accent::after {
  content: ''; position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 99px;
  background: rgba(199, 210, 255, 0.40);
  filter: blur(30px);
  pointer-events: none;
}
.v2-dash-kpi.accent > * { position: relative; z-index: 1; }
.v2-dash-kpi.accent .v2-dash-kpi-label,
.v2-dash-kpi.accent .v2-dash-kpi-label .trend { color: var(--accent-deep); }
.v2-dash-kpi.accent .v2-dash-kpi-value { color: var(--accent-deep); }
.v2-dash-kpi.accent .v2-dash-spark .area { fill: rgba(31, 63, 195, 0.18); }
.v2-dash-kpi.accent .v2-dash-spark .line { stroke: var(--accent-deep); stroke-width: 2; }
.v2-dash-kpi.accent .v2-dash-spark .dot { r: 3; }

.v2-dash-kpi {
  padding: 16px 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.v2-dash-kpi-label {
  font: 600 10.5px 'Geist', sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted-strong);
  display: flex; align-items: center; gap: 6px;
}
.v2-dash-kpi-label .trend {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(31, 63, 195, 0.10);
  color: var(--accent-deep);
  font: 600 10.5px 'Geist', sans-serif; letter-spacing: -.005em;
  text-transform: none;
}
.v2-dash-kpi-label .trend.down {
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted-strong);
}
.v2-dash-kpi-value {
  display: flex; align-items: baseline; gap: 6px;
  font: 900 40px 'Geist', sans-serif;
  letter-spacing: -.04em;
  color: var(--ink);
  line-height: 1;
}
.v2-dash-kpi-value .unit {
  font: 600 13px 'Geist', sans-serif;
  color: var(--muted);
}
.v2-dash-spark {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 10px;
  overflow: visible;
}
.v2-dash-spark .area { fill: rgba(31, 63, 195, 0.10); stroke: none; }
.v2-dash-spark .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.v2-dash-spark .dot { fill: var(--accent-deep); }

/* ── Generic dashboard card heading ───────────────────────── */
.v2-dash-card {
  padding: 18px 20px;
  min-width: 0;        /* allow flex/grid parents to shrink card below content min-width */
  overflow: hidden;    /* clip wide children (heatmap, charts) instead of expanding card */
}
.v2-dash-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.v2-dash-card-head h3 { font-size: 16px; }
.v2-dash-card-head .meta {
  margin-left: auto;
  font: 500 11.5px 'Geist Mono', monospace;
  color: var(--muted);
}

/* ── Heatmap (7 × 24) ─────────────────────────────────────── */
.v2-dash-heatmap-wrap { overflow-x: auto; }
.v2-dash-heatmap {
  display: grid;
  grid-template-columns: 36px repeat(24, 1fr);
  gap: 3px;
  min-width: 560px;
}
.v2-dash-heatmap .hdr,
.v2-dash-heatmap .row-label {
  font: 600 10px 'Geist Mono', monospace;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0;
}
.v2-dash-heatmap .row-label { text-align: right; padding-right: 4px; align-self: center; }
.v2-dash-heatmap .cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(31, 63, 195, var(--cell-op, 0));
  min-width: 14px;
  min-height: 14px;
}
.v2-dash-heatmap .cell.zero { background: rgba(0, 0, 0, 0.04); }
.v2-dash-heatmap-legend {
  display: flex; align-items: center; gap: 6px;
  font: 500 10.5px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-dash-heatmap-legend .scale {
  display: inline-flex; gap: 3px;
}
.v2-dash-heatmap-legend .scale .step {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: rgba(31, 63, 195, var(--op, 0));
}

/* ── ROI block ────────────────────────────────────────────── */
.v2-dash-roi {
  display: flex; flex-direction: column;
  gap: 14px;
}
.v2-dash-roi-row {
  display: flex; gap: 12px;
}
.v2-dash-roi-stat {
  flex: 1;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--warm-line);
}
.v2-dash-roi-stat .label {
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted-strong);
}
.v2-dash-roi-stat .v {
  font: 900 22px 'Geist', sans-serif;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1;
}
.v2-dash-roi-stat .sub {
  font: 300 11.5px 'Geist', sans-serif;
  color: var(--muted);
  margin-top: 4px;
}

.v2-dash-roi-empty {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 63, 195, 0.08), rgba(199, 210, 255, 0.20));
  border: 1px solid rgba(31, 63, 195, 0.15);
}
.v2-dash-roi-empty .label {
  font: 600 10px 'Geist', sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--accent-deep);
}
.v2-dash-roi-empty p {
  font: 300 13px 'Geist', sans-serif;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 6px;
}
.v2-dash-roi-empty form {
  margin-top: 12px;
  display: flex; gap: 8px; align-items: center;
}
.v2-dash-roi-empty input {
  flex: 1;
  padding: 9px 14px;
  border-radius: 99px;
  background: white;
  border: 1px solid var(--warm-line);
  font: 600 13px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--ink);
  outline: none;
}
.v2-dash-roi-empty input:focus {
  border-color: rgba(31, 63, 195, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 63, 195, 0.10);
}

/* ── Bar chart (calls per day) ────────────────────────────── */
.v2-dash-bars {
  display: block;
  width: 100%;
  height: 140px;
}
.v2-dash-bars rect { fill: var(--accent); rx: 2; ry: 2; }
.v2-dash-bars rect.muted { fill: rgba(31, 63, 195, 0.20); }
.v2-dash-bars text {
  font: 500 9px 'Geist Mono', monospace;
  fill: var(--muted);
}

/* ── Topic × outcome (3-column intensity grid) ─────────────── */
.v2-dash-topics {
  display: grid;
  grid-template-columns: 1fr 38px 38px 38px;
  gap: 0 6px;
  align-items: center;
}
.v2-dash-topics .head {
  font: 600 9px 'Geist', sans-serif;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}
.v2-dash-topics .head.res { color: #2e6f3e; text-align: center; }
.v2-dash-topics .head.esc { color: var(--accent-deep); text-align: center; }
.v2-dash-topics .head.inc { text-align: center; }
.v2-dash-topics .topic-name {
  display: flex; align-items: center; gap: 6px;
  font: 500 12.5px 'Geist', sans-serif;
  padding: 7px 0;
  border-top: 1px solid var(--warm-line);
}
.v2-dash-topics .topic-name .total {
  margin-left: auto;
  font: 500 10.5px 'Geist Mono', monospace;
  color: var(--muted);
}
.v2-dash-topics .cell {
  padding: 7px 0;
  border-top: 1px solid var(--warm-line);
  display: flex; justify-content: center;
}
.v2-dash-topics .cell .pill {
  font: 500 11px 'Geist Mono', monospace;
  padding: 2px 9px;
  border-radius: 6px;
  min-width: 24px;
  text-align: center;
  background: transparent;
  color: var(--muted);
}
.v2-dash-topics .cell.has-value .pill.res {
  background: rgba(46, 111, 62, calc(0.08 + var(--int, 0) * 0.55));
  color: #2e6f3e;
}
.v2-dash-topics .cell.has-value .pill.esc {
  background: rgba(31, 63, 195, calc(0.08 + var(--int, 0) * 0.55));
  color: var(--accent-deep);
}
.v2-dash-topics .cell.has-value .pill.inc {
  background: rgba(0, 0, 0, calc(0.05 + var(--int, 0) * 0.18));
  color: var(--ink);
}

/* ── KB completion donut card ─────────────────────────────── */
.v2-dash-kb {
  position: relative;
  padding: 20px;
  overflow: hidden;
}
.v2-dash-kb::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  border-radius: 99px;
  background: rgba(199, 210, 255, 0.35);
  filter: blur(30px);
  pointer-events: none;
}
.v2-dash-kb > * { position: relative; z-index: 1; }
.v2-dash-kb-row {
  display: flex; align-items: center; gap: 18px;
  margin-top: 12px;
}
.v2-dash-kb-text { flex: 1; }
.v2-dash-kb-text h3 { font-size: 16px; margin-bottom: 4px; }
.v2-dash-kb-text p {
  font: 300 12.5px 'Geist', sans-serif;
  color: var(--muted-strong);
  line-height: 1.5;
}
.v2-dash-kb-text strong { color: var(--accent-deep); font-weight: 600; }

/* ── Calls-per-day line/area chart ────────────────────────── */
.v2-dash-calls-day-wrap {
  position: relative;
  flex: 1;
  min-height: 140px;
  padding-bottom: 20px;
}
.v2-dash-calls-day-wrap .chart {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
}
.v2-dash-calls-day-wrap .chart .area { fill: rgba(31, 63, 195, 0.12); stroke: none; }
.v2-dash-calls-day-wrap .chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.v2-dash-calls-day-wrap .chart .dot { fill: var(--accent-deep); }
.v2-dash-calls-day-wrap .last-label {
  font: 600 11px 'Geist Mono', monospace;
  fill: var(--accent-deep);
}
.v2-dash-calls-day-wrap .xlabel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font: 500 9.5px 'Geist Mono', monospace;
  color: var(--muted);
}

/* ── ROI setup (dashed cobalt) ────────────────────────────── */
.v2-dash-roi-setup {
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 252, 0.95), rgba(199, 210, 255, 0.30));
  border: 1px dashed rgba(31, 63, 195, 0.40);
}
.v2-dash-roi-setup .label-tiny { color: var(--accent-deep); display: block; margin-bottom: 8px; }
.v2-dash-roi-setup p {
  font: 300 13px 'Geist', sans-serif;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 12px;
}
.v2-dash-roi-setup .input-row {
  display: flex; gap: 8px; align-items: center;
}
.v2-dash-roi-setup .input-pill {
  flex: 1;
  display: flex; align-items: center; gap: 4px;
  background: white;
  border-radius: 99px;
  padding: 6px 14px;
  border: 1px solid var(--warm-line-strong);
}
.v2-dash-roi-setup .input-pill input {
  border: none; outline: none; background: transparent;
  font: 500 13px 'Geist Mono', monospace;
  width: 100%; color: var(--ink);
}
.v2-dash-roi-setup .input-pill .pre,
.v2-dash-roi-setup .input-pill .suf {
  font: 500 12px 'Geist Mono', monospace;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Recent reservations list ─────────────────────────────── */
.v2-dash-recent { display: flex; flex-direction: column; gap: 6px; }
.v2-dash-recent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--warm-line);
  text-decoration: none;
  color: var(--ink);
}
.v2-dash-recent-row:last-child { border-bottom: none; }
.v2-dash-recent-row:hover { background: rgba(0, 0, 0, 0.025); border-radius: 10px; }
.v2-dash-recent-name {
  font: 600 13.5px 'Geist', sans-serif;
  letter-spacing: -.015em;
}
.v2-dash-recent-meta {
  font: 300 11.5px 'Geist', sans-serif;
  color: var(--muted-strong);
}
.v2-dash-recent-time {
  margin-left: auto;
  font: 500 11.5px 'Geist Mono', monospace;
  color: var(--muted);
}

/* ── Filter pills (period) — small variant for page-head ──── */
.v2-period-pills { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(0,0,0,0.05); }
.v2-period-pills a {
  padding: 5px 12px;
  border-radius: 99px;
  font: 600 12px 'Geist', sans-serif; letter-spacing: -.005em;
  color: var(--muted-strong);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.v2-period-pills a.active {
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}