/* ═══════════════════════════════════════════════════════
   Shared design system for homepage + deep views (v2)
   Mirrors vera_hp_dashboard.html exactly.
   ═══════════════════════════════════════════════════════ */
:root {
  --bg-1: #1a1f2e;
  --bg-2: #0f1420;
  --bg-3: #243447;
  --glass: rgba(30, 38, 55, 0.55);
  --glass-strong: rgba(40, 50, 70, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --text: #f4f5f7;
  --text-dim: #9ba4b5;
  --text-dimmer: #6b7486;

  /* Theme-aware tints — used where rgba(255,255,255,X) was hardcoded.
     Dark theme: white tint (lifts a glass card off dark bg).
     Light theme: ink tint (deepens a glass card on light bg). */
  --tint-1: rgba(255,255,255,0.03);
  --tint-2: rgba(255,255,255,0.05);
  --tint-3: rgba(255,255,255,0.08);
  --hairline: rgba(255,255,255,0.06);
  --hairline-strong: rgba(255,255,255,0.12);
  --soft-shadow: 0 0 0 transparent;

  --card-yellow: #f5d547; --card-yellow-ink: #3a2e00;
  --card-orange: #ff8a65; --card-orange-ink: #4a1a08;
  --card-green:  #7dd87d; --card-green-ink:  #0f3d1a;
  --card-blue:   #a8d8f0; --card-blue-ink:   #0d2a42;
  --card-red:    #ff6b6b; --card-red-ink:    #4a0d0d;
  --card-purple: #b5a0e8; --card-purple-ink: #2a1d4d;

  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  --radius-chip: 0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-2); color: var(--text); min-height: 100vh; overflow-x: hidden; }

/* Venue hero image — set --hero-image per page to swap. Sits behind the gradients. */
.hero-bg {
  position: fixed; inset: 0; z-index: -3;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(24px) brightness(0.32) saturate(0.82);
  transform: scale(1.08);
  pointer-events: none;
}

body::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(90, 110, 160, 0.28), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(60, 80, 120, 0.24), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(40, 55, 85, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(26,32,54,0.35) 0%, rgba(15,20,32,0.55) 50%, rgba(10,14,24,0.75) 100%);
  z-index: -2;
}
body::after {
  content: ''; position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.015) 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 180px 180px, 220px 220px;
  z-index: -1; pointer-events: none;
}
a { color: inherit; text-decoration: none; }

.app {
  display: grid; grid-template-columns: 220px 1fr 300px;
  gap: 20px; padding: 20px;
  max-width: 1680px; margin: 0 auto; min-height: 100vh;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
  background: var(--glass); backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 22px;
  height: fit-content; position: sticky; top: 20px;
}
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.user-avatar {
  width: 36px; height: 36px; border-radius: 0;
  background: linear-gradient(135deg, #f5d547, #ff8a65);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  color: #3a2e00; font-size: 14px;
}
.user-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 14px; }
.nav-section-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  padding: 0 10px; display: flex; justify-content: space-between; align-items: center;
  letter-spacing: 0.02em;
}
.add-btn {
  width: 18px; height: 18px; border-radius: 0;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center; font-size: 12px;
  color: var(--text-dim); cursor: pointer; border: none;
}
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 0; cursor: pointer;
  transition: background 0.2s; font-size: 13px; color: var(--text);
}
.nav-item:hover { background: rgba(255,255,255,0.04); }
.nav-item.active { background: rgba(255,255,255,0.08); }
.nav-dot {
  width: 22px; height: 22px; border-radius: 0;
  display: grid; place-items: center; flex-shrink: 0; font-size: 11px;
}
.dot-frankies { background: linear-gradient(135deg, #ff6b6b, #ff8a65); color: #4a0d0d; }
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-row { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--text-dim); font-size: 13px; cursor: pointer; }

/* ═══ MAIN shell ═══ */
.main { display: flex; flex-direction: column; gap: 20px; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; flex-wrap: wrap; gap: 14px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand-logo i { font-style: italic; font-weight: 500; color: #f5d547; }
.brand-sep { color: var(--text-dimmer); }
.brand-group { font-size: 14px; color: var(--text-dim); }
.brand-group i { color: #f5d547; font-weight: 500; font-style: italic; }
.topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.date-stamp { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.08em; }
.health-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: var(--radius-chip); padding: 6px 14px 6px 6px;
  backdrop-filter: blur(20px);
}
.health-ring {
  width: 34px; height: 34px; border-radius: 0;
  background: conic-gradient(#7dd87d 0deg 280deg, rgba(255,255,255,0.1) 280deg 360deg);
  display: grid; place-items: center; position: relative;
}
.health-ring::before { content: ''; position: absolute; inset: 3px; border-radius: 0; background: var(--bg-1); }
.health-ring span { position: relative; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; }
.health-text { font-size: 11px; line-height: 1.2; }
.health-text b { display: block; font-weight: 600; color: var(--text-dim); font-size: 10px; letter-spacing: 0.05em; }
.health-text em { font-style: italic; font-weight: 500; color: var(--text); }
.pos-chip {
  background: rgba(125, 216, 125, 0.12); border: 1px solid rgba(125, 216, 125, 0.28);
  color: #7dd87d; font-size: 11px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-chip);
  display: flex; align-items: center; gap: 8px; letter-spacing: 0.03em;
}
.pos-chip::before { content: ''; width: 6px; height: 6px; background: #7dd87d; border-radius: 0; box-shadow: 0 0 8px rgba(125, 216, 125, 0.6); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 0;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  display: grid; place-items: center; cursor: pointer; color: var(--text-dim);
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px;
  font-size: 12px; color: var(--text-dim); letter-spacing: 0.03em;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--text-dimmer); }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* Page head card */
.page-head {
  background: var(--glass-strong);
  backdrop-filter: blur(30px) saturate(140%); -webkit-backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 28px 30px; position: relative; overflow: hidden;
}
/* Calendar MTD cumulative subline + month-total footer (v2 deep view) */
.big-day-mtd {
  display: block; margin-top: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.34);
  font-variant-numeric: tabular-nums;
}
.big-day.high .big-day-mtd, .big-day.today .big-day-mtd { color: rgba(0, 0, 0, 0.50); }
.cal-month-total-v2 {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 14px; padding: 16px 8px 6px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'DM Mono', monospace;
}
.cal-month-total-v2 .cmt-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.cal-month-total-v2 .cmt-val {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px; font-weight: 700; color: #f5d547;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Review toast — fixed bottom-right popup for new reviews */
.review-toast {
  position: fixed; bottom: 100px; right: 24px; z-index: 70;
  max-width: 380px; width: calc(100vw - 48px);
  display: flex; flex-direction: column; gap: 0;
}
.review-toast-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(15, 22, 38, 0.94); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
}
.review-toast-title { font-size: 12px; font-weight: 600; color: var(--text); }
.review-toast-dismiss-all {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
  background: none; border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 3px 8px; cursor: pointer;
}
.review-toast-dismiss-all:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.30); }
.review-card {
  background: rgba(15, 22, 38, 0.94); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: none;
  padding: 12px 14px;
  animation: rev-slide 0.32s ease-out;
}
@keyframes rev-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.review-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.review-stars { color: #fbbf24; font-size: 13px; letter-spacing: 1px; }
.review-platform {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
}
.review-text { font-size: 12.5px; color: var(--text); line-height: 1.45; margin-bottom: 8px; }
.review-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-dim); }
.review-author { font-style: italic; }
.review-dismiss {
  background: none; border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-dim); padding: 3px 8px;
  font-size: 10px; cursor: pointer; font-family: 'DM Mono', monospace;
}
.review-dismiss:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.30); }
@media (max-width: 700px) {
  .review-toast { bottom: 88px; right: 12px; max-width: calc(100vw - 24px); }
}

/* Vera chat panel — slides up above the bottom strip when conversation starts.
   Closeable, multi-turn, persists history per client. */
.vera-chat-panel {
  position: fixed; left: 0; right: 0; bottom: 80px; z-index: 60;
  display: none; pointer-events: none;
}
.vera-chat-panel.open { display: block; pointer-events: auto; }
.vera-chat-inner {
  max-width: 920px; margin: 0 auto; padding: 0 18px 12px;
}
.vera-chat-card {
  background: rgba(15, 22, 38, 0.92);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  max-height: 56vh; overflow-y: auto;
  padding: 18px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.vera-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: sticky; top: -18px; padding-top: 18px; margin-top: -18px;
  background: rgba(15, 22, 38, 0.92);
}
.vera-chat-head .vc-title {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.vera-chat-head .vc-close {
  background: none; border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6); width: 28px; height: 28px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.vera-chat-head .vc-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.vera-msg { margin-bottom: 14px; line-height: 1.55; font-size: 14px; }
.vera-msg .vm-role {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 4px;
}
.vera-msg.user .vm-role { color: #f5d547; }
.vera-msg.user .vm-text { color: #fff; }
.vera-msg.assistant .vm-role { color: #b5a0e8; }
.vera-msg.assistant .vm-text { color: rgba(255, 255, 255, 0.88); }
.vera-msg.assistant .vm-text b { color: #fff; }
.vera-msg .vm-text { white-space: pre-wrap; }
.vera-msg.error .vm-role { color: #ff8a65; }
.vera-msg.error .vm-text { color: #ff8a65; }
.vera-typing {
  display: inline-flex; gap: 4px; padding: 8px 0;
}
.vera-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(181, 160, 232, 0.55);
  animation: vt-pulse 1.2s infinite ease-in-out;
}
.vera-typing span:nth-child(2) { animation-delay: 0.18s; }
.vera-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes vt-pulse { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }
@media (max-width: 700px) {
  .vera-chat-panel { bottom: 72px; }
  .vera-chat-card { max-height: 50vh; padding: 14px 16px; }
  .vera-msg { font-size: 13px; }
}

/* Today's outlook card — sits between the morning briefing hero and the
   hourly card. Mirrors the LINE-briefing today section: rolling-window stats,
   same-weekday comparison, anomaly flags. Each line cites its data source. */
.today-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 22px 26px; margin-top: 14px; position: relative; overflow: hidden;
}
.today-card-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.today-card-head .tc-glyph { font-size: 17px; line-height: 1; }
.today-card-head .tc-label {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase;
}
.today-card-head .tc-date {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: -0.02em; color: var(--text);
  margin-left: auto;
}
.today-outlook {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: 19px; line-height: 1.4; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 14px; max-width: 880px;
}
.today-outlook b { font-weight: 700; }
.today-outlook .up { color: #7dd87d; font-weight: 600; }
.today-outlook .down { color: #ff8a65; font-weight: 600; }
.today-outlook i { font-style: italic; color: #f5d547; font-weight: 500; }
.today-where {
  display: inline-flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 10px 14px;
  background: rgba(255, 138, 101, 0.08);
  border-left: 3px solid rgba(255, 138, 101, 0.55);
  font-size: 13px; color: var(--text); line-height: 1.5;
  max-width: 880px;
}
.today-where .tw-label {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #ff8a65; flex: 0 0 auto; padding-top: 1px;
}
.today-where .tw-text b { font-weight: 600; }
.today-lines { display: flex; flex-direction: column; gap: 10px; }
.today-line {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.55; color: var(--text);
}
.today-line .tl-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 7px; box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.today-line.green .tl-dot { background: #7dd87d; }
.today-line.amber .tl-dot { background: #f5d547; }
.today-line.red .tl-dot { background: #ff8a65; }
.today-line .tl-text { flex: 1 1 auto; }
.today-line .tl-text b { font-weight: 600; color: var(--text); }
.today-line .tl-source {
  display: inline-block; margin-left: 6px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: var(--text-dim); background: rgba(255,255,255,0.04);
  padding: 1px 6px; border-radius: 0;
  letter-spacing: 0.04em;
}
.today-empty {
  font-style: italic; color: var(--text-dim);
  font-size: 13px; padding: 6px 0;
}
@media (max-width: 700px) {
  .today-card { padding: 18px 20px; }
  .today-card-head .tc-date { font-size: 15px; }
  .today-line { font-size: 13px; }
}

/* Private briefing drop zone — top right corner of the morning check-in hero.
   "Drop your daily sales here, get the briefing privately."
   The label/timestamp row needs right-side breathing room so the chip
   doesn't sit on top of the "07:58 · UPDATED" timestamp. */
.page-head:has(.private-brief-drop) .page-head-label { padding-right: 175px; }
@media (max-width: 700px) {
  .page-head:has(.private-brief-drop) .page-head-label { padding-right: 130px; }
}
.private-brief-drop {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245, 213, 71, 0.08);
  border: 1px dashed rgba(245, 213, 71, 0.32);
  color: var(--text); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; padding: 7px 10px 7px 9px;
  cursor: pointer; transition: all .18s ease;
  max-width: 142px; overflow: hidden; white-space: nowrap;
}
.private-brief-drop:hover {
  background: rgba(245, 213, 71, 0.14);
  border-color: rgba(245, 213, 71, 0.55);
  max-width: 320px;
}
.private-brief-drop .pbd-icon { font-size: 13px; line-height: 1; opacity: 0.9; }
.private-brief-drop .pbd-text { font-family: 'DM Mono', monospace; font-size: 10px; }
.private-brief-drop .pbd-hint {
  font-family: 'Inter', sans-serif; font-size: 10px; color: var(--text-dim);
  opacity: 0; max-width: 0; transition: all .18s ease .04s;
  white-space: nowrap; overflow: hidden;
}
.private-brief-drop:hover .pbd-hint { opacity: 1; max-width: 200px; margin-left: 4px; }
.private-brief-drop.dragover {
  background: rgba(245, 213, 71, 0.22);
  border-color: rgba(245, 213, 71, 0.85);
  border-style: solid;
}
.private-brief-drop.success {
  background: rgba(125, 216, 125, 0.15);
  border-color: rgba(125, 216, 125, 0.55);
  border-style: solid;
}
.private-brief-drop.success .pbd-icon { color: #7dd87d; }
@media (max-width: 700px) {
  .private-brief-drop { font-size: 10px; padding: 6px 9px; }
  .private-brief-drop .pbd-hint { display: none; }
}
.page-head::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245, 213, 71, 0.08), transparent 70%);
  pointer-events: none;
}
.page-head-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.08em; display: flex; justify-content: space-between;
  margin-bottom: 14px;
}
.page-head-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 34px; line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 14px; max-width: 760px;
}
.page-head-title i { font-style: italic; font-weight: 500; color: #f5d547; }
.page-head-body {
  font-size: 14px; line-height: 1.6; color: var(--text-dim);
  max-width: 720px;
}
.page-head-body b { color: var(--text); font-weight: 600; }
.page-head-body i { font-style: italic; color: var(--text); }
.page-head-body .up { color: #7dd87d; font-weight: 600; }
.page-head-body .down { color: #ff8a65; font-weight: 600; }
.page-head-body .star { color: #f5d547; }
.page-head-author {
  display: flex; align-items: center; gap: 10px;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; color: var(--text-dim);
}
.page-head-author b { color: var(--text); font-weight: 600; }
.vera-avatar {
  width: 28px; height: 28px; border-radius: 0;
  background: linear-gradient(135deg, #b5a0e8, #a8d8f0);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  color: #2a1d4d; font-size: 12px;
}

.page-head-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.action-btn {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-chip);
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04);
  color: var(--text); cursor: pointer; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.action-btn:hover { background: rgba(255,255,255,0.08); }
.action-btn.primary { background: #f5d547; color: #3a2e00; border-color: #f5d547; }
.action-btn.primary:hover { background: #ffe066; }

/* Metric tiles */
.metric-card {
  border-radius: var(--radius-md); padding: 20px;
  position: relative; overflow: hidden; min-height: 158px;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s;
}
.metric-card:hover { transform: translateY(-3px); }
.metric-card.yellow { background: var(--card-yellow); color: var(--card-yellow-ink); }
.metric-card.orange { background: var(--card-orange); color: var(--card-orange-ink); }
.metric-card.green  { background: var(--card-green);  color: var(--card-green-ink); }
.metric-card.blue   { background: var(--card-blue);   color: var(--card-blue-ink); }
.metric-card.red    { background: var(--card-red);    color: var(--card-red-ink); }
.metric-card.purple { background: var(--card-purple); color: var(--card-purple-ink); }
.metric-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.metric-label-group { display: flex; align-items: center; gap: 8px; }
.metric-icon {
  width: 28px; height: 28px; border-radius: 0;
  background: rgba(0,0,0,0.12); display: grid; place-items: center; flex-shrink: 0; font-size: 14px;
}
.metric-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.78; }
.metric-share {
  width: 22px; height: 22px; border-radius: 0;
  background: rgba(0,0,0,0.1); display: grid; place-items: center;
  cursor: pointer; opacity: 0.65; font-size: 12px;
}
.metric-value {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 38px; line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px;
}
.metric-sub { font-size: 12px; opacity: 0.75; line-height: 1.4; margin-bottom: 10px; }
.metric-foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
}
.progress-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.15); border-radius: 0; overflow: hidden; margin-right: 10px; }
.progress-fill { height: 100%; background: rgba(0,0,0,0.5); border-radius: 0; }

/* Section card */
.section-card {
  background: var(--glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 22px;
}
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.section-label { font-size: 10px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.1em; }
.section-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin-top: 4px; }
.section-meta { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.section-link {
  font-size: 12px; color: var(--text-dim); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.section-link:hover { background: rgba(255,255,255,0.05); color: var(--text); }

/* ═══ RIGHT RAIL (shared) ═══ */
.activity { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; height: fit-content; }
.activity-head { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; padding: 4px 6px 8px; letter-spacing: -0.01em; }
.sync-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(125, 216, 125, 0.08);
  border: 1px solid rgba(125, 216, 125, 0.15);
  border-radius: var(--radius-md); font-size: 11px;
}
.sync-chip::before { content: ''; width: 7px; height: 7px; background: #7dd87d; border-radius: 0; box-shadow: 0 0 8px rgba(125, 216, 125, 0.6); }
.sync-chip b { font-weight: 700; color: #7dd87d; letter-spacing: 0.05em; font-size: 10px; }
.sync-chip-sub { color: var(--text-dim); font-size: 11px; margin-left: auto; }

.rec-item {
  background: var(--glass-strong); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: 12px 14px; display: flex; gap: 10px; position: relative;
}
.rec-avatar {
  width: 32px; height: 32px; border-radius: 0;
  flex-shrink: 0; display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 11px;
}
.rec-avatar.red { background: #ff6b6b; color: #4a0d0d; }
.rec-avatar.orange { background: #ff8a65; color: #4a1a08; }
.rec-avatar.yellow { background: #f5d547; color: #3a2e00; }
.rec-avatar.green { background: #7dd87d; color: #0f3d1a; }
.rec-avatar.blue { background: #a8d8f0; color: #0d2a42; }
.rec-avatar.purple { background: #b5a0e8; color: #2a1d4d; }
.rec-content { flex: 1; min-width: 0; }
.rec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.rec-author { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.03em; }
.rec-time { font-size: 10px; color: var(--text-dimmer); }
.rec-text { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.rec-text b { color: var(--text); font-weight: 600; }

.ask-vera {
  background: linear-gradient(135deg, rgba(181, 160, 232, 0.18), rgba(168, 216, 240, 0.1));
  border: 1px solid rgba(181, 160, 232, 0.25);
  border-radius: var(--radius-md); padding: 14px; margin-top: 4px;
}
.ask-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ask-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px; }
.ask-status { font-size: 10px; color: var(--text-dim); letter-spacing: 0.05em; margin-top: 1px; }
.ask-chip {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.05);
  padding: 8px 10px; border-radius: 0;
  font-size: 11px; font-style: italic; color: var(--text-dim);
  line-height: 1.4; margin-bottom: 6px;
}

/* Ask Vera banner (inline at end of page) */
.ask-banner {
  background: linear-gradient(135deg, rgba(181, 160, 232, 0.14), rgba(168, 216, 240, 0.08));
  border: 1px solid rgba(181, 160, 232, 0.25);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: border-color 0.2s;
}
.ask-banner:hover { border-color: rgba(181, 160, 232, 0.45); }
.ask-av {
  width: 38px; height: 38px; border-radius: 0;
  background: linear-gradient(135deg, #b5a0e8, #a8d8f0);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  color: #2a1d4d; font-size: 14px;
}
.ask-txt { flex: 1; font-size: 13px; color: var(--text-dim); }
.ask-txt b { color: var(--text); font-weight: 600; }
.ask-txt i { font-style: italic; color: var(--text); }
.ask-arrow { color: #b5a0e8; font-size: 16px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   VERA PRESENCE — (A) header chip · (B) bottom strip · (C) card notes
   Makes the agent feel like a colleague sitting on your shoulder,
   not a feature hidden behind a button.
   ═══════════════════════════════════════════════════════ */

/* A. Header chip — slotted into .topbar next to the brand */
.vera-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 0;
  background: linear-gradient(135deg, rgba(181,160,232,0.22), rgba(168,216,240,0.14));
  border: 1px solid rgba(181,160,232,0.38);
  cursor: pointer; transition: border-color 0.2s, transform 0.15s;
  text-decoration: none; color: inherit;
}
.vera-chip:hover { border-color: rgba(181,160,232,0.65); transform: translateY(-1px); }
.vera-chip-av {
  width: 32px; height: 32px; border-radius: 0;
  background: linear-gradient(135deg, #b5a0e8, #a8d8f0);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  color: #2a1d4d; font-size: 13px;
  position: relative;
}
.vera-chip-av::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 0;
  background: #7dd87d; border: 2px solid var(--bg-1);
  box-shadow: 0 0 6px rgba(125,216,125,0.7);
  animation: veraPulse 2s ease-in-out infinite;
}
@keyframes veraPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.vera-chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.vera-chip-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -0.005em; }
.vera-chip-sub { font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }

/* B. Bottom strip — fixed, full-width, always-available chat
   Floats above the page like a pedestal — Vera's presence, not page chrome. */
.vera-strip {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background:
    linear-gradient(135deg, rgba(181,160,232,0.18) 0%, rgba(168,216,240,0.10) 100%),
    rgba(28,32,50,0.92);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-top: 1px solid rgba(181,160,232,0.4);
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:
    0 -16px 40px rgba(0,0,0,0.45),
    0 -2px 0 rgba(181,160,232,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.vera-strip-inner {
  max-width: 1680px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.vera-strip-av {
  width: 40px; height: 40px; border-radius: 0;
  background: linear-gradient(135deg, #b5a0e8, #a8d8f0);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  color: #2a1d4d; font-size: 15px; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(181,160,232,0.28);
}
.vera-strip-input {
  flex: 1; background: rgba(10,14,24,0.55);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 0;
  padding: 12px 16px; color: var(--text);
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.vera-strip-input::placeholder { color: rgba(155,164,181,0.85); font-style: italic; }
.vera-strip-input:focus {
  border-color: rgba(181,160,232,0.7);
  background: rgba(10,14,24,0.75);
  box-shadow: 0 0 0 3px rgba(181,160,232,0.15);
}
.vera-strip-hint {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-dim); padding: 6px 10px; border-radius: 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
.vera-strip-send {
  width: 40px; height: 40px; border-radius: 0;
  background: linear-gradient(135deg, #b5a0e8, #a8d8f0);
  color: #2a1d4d; border: none;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px;
  cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; line-height: 1;
}
.vera-strip-send:hover { filter: brightness(1.1); }

/* Ensure content isn't hidden behind the fixed strip */
body { padding-bottom: 82px; }

/* C. Inline Vera notes — small italic narration on key cards */
.vera-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(181,160,232,0.2);
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  font-style: italic; cursor: pointer;
  transition: color 0.15s;
}
.vera-note:hover { color: var(--text); }
.vera-note::before {
  content: 'V'; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 0;
  background: linear-gradient(135deg, #b5a0e8, #a8d8f0);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-style: normal; color: #2a1d4d; font-size: 11px;
}
.vera-note b { color: var(--text); font-weight: 600; font-style: normal; }
.vera-note .vn-arrow { margin-left: auto; color: #b5a0e8; font-style: normal; font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   OUTLET SWITCHER — header dropdown that swaps the active venue
   ═══════════════════════════════════════════════════════ */
.outlet-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  padding: 6px 10px 6px 8px;
  font-size: 14px; color: var(--text-dim); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.outlet-chip:hover { border-color: var(--text-dim); }
.outlet-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f5d547; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(245,213,71,0.45);
}
.outlet-chip-dot.lk { background: #b5a0e8; box-shadow: 0 0 6px rgba(181,160,232,0.5); }
.outlet-chip-dot.s6 { background: #ff8a65; box-shadow: 0 0 6px rgba(255,138,101,0.5); }
.outlet-chip-dot.fr { background: #7dd87d; box-shadow: 0 0 6px rgba(125,216,125,0.45); }
.outlet-chip-name { color: var(--text); font-weight: 600; font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.005em; }
.outlet-chip-name i { color: #f5d547; font-style: italic; font-weight: 500; }
.outlet-chip-caret { color: var(--text-dimmer); font-size: 10px; margin-left: 2px; }

.outlet-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px;
  background: rgba(28,32,50,0.96); backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 100; padding: 6px;
  display: none;
}
.outlet-menu.open { display: block; }
.outlet-menu-item {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 12px;
  padding: 12px 14px; cursor: pointer; align-items: center;
  border: 1px solid transparent;
}
.outlet-menu-item:hover { background: rgba(255,255,255,0.04); }
.outlet-menu-item.current { background: rgba(245,213,71,0.05); border-color: rgba(245,213,71,0.2); }
.outlet-menu-dot { width: 8px; height: 8px; border-radius: 50%; }
.outlet-menu-dot.fr { background: #7dd87d; }
.outlet-menu-dot.s6 { background: #ff8a65; }
.outlet-menu-dot.lk { background: #b5a0e8; }
.outlet-menu-dot.all { background: linear-gradient(135deg, #f5d547, #ff8a65); }
.outlet-menu-name {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: -0.005em;
}
.outlet-menu-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.02em; }
.outlet-menu-stat {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: -0.01em; text-align: right;
}
.outlet-menu-stat-sub { font-size: 10px; color: var(--text-dimmer); margin-top: 2px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.outlet-menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 12px; }

/* Responsive */
@media (max-width: 1280px) {
  .app { grid-template-columns: 200px 1fr 280px; }
  .page-head-title { font-size: 28px; }
  .metric-value { font-size: 34px; }
}
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .sidebar, .activity { position: static; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE — bottom-tab nav, stacked grids, thumb-friendly Vera
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .app {
    padding: 12px 12px 100px; gap: 12px;
    grid-template-columns: 1fr;
  }

  /* Hide full sidebar; show bottom-tab bar instead */
  .sidebar { display: none; }

  /* Topbar tightens */
  .topbar { padding: 0 4px; gap: 8px; }
  .brand-sep { display: none; }
  .brand-logo { font-size: 16px; }
  .vera-chip-text { display: none; }
  .health-chip { padding: 4px 10px 4px 4px; gap: 6px; }
  .health-text { display: none; }
  .pos-chip { font-size: 9px; padding: 5px 9px; }
  .date-stamp { display: none; }
  .icon-btn { width: 30px; height: 30px; font-size: 14px; }

  /* Page head shrinks */
  .page-head { padding: 20px 18px; }
  .page-head-title { font-size: 22px; line-height: 1.2; }
  .page-head-body { font-size: 13px; }
  .page-head-foot { gap: 6px; }
  .action-btn { font-size: 11px; padding: 8px 12px; }

  /* Section cards */
  .section-card { padding: 18px 16px; }
  .section-title { font-size: 17px; }

  /* Metric tiles always 2-up on mobile */
  .metrics, .metrics-big, .metrics-small { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .metric-card { min-height: 130px; padding: 14px 16px; }
  .metric-value { font-size: 26px; }
  .metric-card.small .metric-value { font-size: 22px; }
  .metric-sub { font-size: 11px; }

  /* Two-col grids stack */
  .mid-row, .two-col, .integ-row, .platform-row, .gauge-row, .quad-grid, .agent-grid, .pattern-grid,
  .field-grid-2, .stats-strip { grid-template-columns: 1fr !important; gap: 10px; }

  /* Hourly chart fits */
  .hourly-grid { gap: 4px; min-height: 130px; }
  .hr-val { font-size: 9.5px; }
  .hr-label { font-size: 9px; }

  /* Calendar legibility */
  .big-grid { gap: 4px; }
  .big-day { min-height: 56px; padding: 6px; }
  .big-day-num { font-size: 11px; }
  .big-day-val { font-size: 11px; }
  .big-day-sub { display: none; }

  /* Right rail comes after main, full width */
  .activity { gap: 8px; }
  .rec-item { padding: 10px 12px; }
  .activity-head { font-size: 16px; }

  /* Vera chip in topbar — keep dot, lose text */
  .outlet-chip { padding: 5px 8px 5px 6px; font-size: 12px; }
  .outlet-chip-name { font-size: 12px; }
  .outlet-menu { left: -10px; min-width: calc(100vw - 32px); max-width: 380px; }

  /* Vera bottom strip — thumb-friendly */
  .vera-strip { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom,0px)); }
  .vera-strip-inner { gap: 8px; }
  .vera-strip-av { width: 36px; height: 36px; font-size: 14px; }
  .vera-strip-input { padding: 11px 14px; font-size: 14px; }
  .vera-strip-hint { display: none; }
  .vera-strip-send { width: 36px; height: 36px; font-size: 16px; }

  body { padding-bottom: 70px; }
}

/* Bottom-tab nav (replaces sidebar on mobile)
   Sits ABOVE the vera-strip — bottom positioned past vera-strip's height
   (incl. safe-area-inset) so it's not hidden by the chat bar on iPhones
   with home indicator. z-index 60 keeps it above vera-strip's z=50. */
.bottom-nav { display: none; }
@media (max-width: 900px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0;
    background: rgba(10,14,24,0.95);
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    z-index: 60;
    justify-content: space-around;
    padding: 6px 4px;
  }
  .bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px; min-width: 0;
    color: var(--text-dim); text-decoration: none;
    transition: color 0.15s;
  }
  .bottom-nav a.active { color: #f5d547; }
  .bottom-nav a:hover { color: var(--text); }
  .bn-icon { font-size: 16px; line-height: 1; }
  .bn-label { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'DM Mono', monospace; line-height: 1.2; white-space: nowrap; }
  /* Push the Vera strip up so it doesn't sit under the tab bar */
  .vera-strip { bottom: 56px; }
  body { padding-bottom: 130px; }
}
@media (max-width: 600px) {
  .outlet-menu { left: -10px; min-width: calc(100vw - 40px); }
}

/* ═══════════════════════════════════════════════════════
   LIGHT THEME — html.theme-light
   Inverts the canvas (cream paper) but keeps colored KPI tiles, brand
   gold, Vera purple etc. unchanged. Card backgrounds become opaque
   white-ish, text becomes dark navy, hero image gets a soft warm wash
   instead of a heavy dark blur.
   ═══════════════════════════════════════════════════════ */
html.theme-light {
  --bg-1: #faf9f6;
  --bg-2: #f3efe6;
  --bg-3: #e8e2d3;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(26, 32, 46, 0.10);
  --text: #1a1f2e;
  --text-dim: #5a6470;
  --text-dimmer: #8a94a3;

  --tint-1: rgba(26, 32, 46, 0.025);
  --tint-2: rgba(26, 32, 46, 0.045);
  --tint-3: rgba(26, 32, 46, 0.07);
  --hairline: rgba(26, 32, 46, 0.08);
  --hairline-strong: rgba(26, 32, 46, 0.16);
  --soft-shadow: 0 6px 24px rgba(26, 32, 46, 0.06);
}

/* Body canvas — warm cream gradient instead of cool dark */
html.theme-light body { background: var(--bg-1); color: var(--text); }
html.theme-light body::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(245, 213, 71, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(255, 138, 101, 0.07), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(181, 160, 232, 0.08), transparent 60%),
    linear-gradient(180deg, #faf9f6 0%, #f3efe6 60%, #e8e2d3 100%);
}
html.theme-light body::after {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(26,32,46,0.025) 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(26,32,46,0.03) 1px, transparent 1px);
}

/* Hero image — soft wash not heavy darken */
html.theme-light .hero-bg {
  filter: blur(28px) brightness(1.05) saturate(0.7) opacity(0.35);
}

/* Cards get a soft drop shadow + crisp border for readability on cream */
html.theme-light .section-card,
html.theme-light .page-head,
html.theme-light .calendar,
html.theme-light .hourly-card,
html.theme-light .report-banner,
html.theme-light .ask-banner,
html.theme-light .convo-card,
html.theme-light .agent-card,
html.theme-light .gen-card,
html.theme-light .reports-list .report-row,
html.theme-light .stat-card,
html.theme-light .pattern-card,
html.theme-light .gauge-card,
html.theme-light .platform-card,
html.theme-light .integ-card,
html.theme-light .settings-section,
html.theme-light .cfg-section,
html.theme-light .cap-card,
html.theme-light .conn-card,
html.theme-light .variance-card,
html.theme-light .coverage,
html.theme-light .stock-coverage,
html.theme-light .hours,
html.theme-light .spark,
html.theme-light .stock-kpi,
html.theme-light .ctx-kpi,
html.theme-light .review-item,
html.theme-light .rec-item,
html.theme-light .rc,
html.theme-light .activity .ask-vera,
html.theme-light .vera-strip,
html.theme-light .outlet-menu {
  box-shadow: 0 6px 22px rgba(26, 32, 46, 0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Sidebar pops above the cream canvas */
html.theme-light .sidebar {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(26,32,46,0.06);
}

/* Bottom-nav (mobile) flips to light glass */
html.theme-light .bottom-nav {
  background: rgba(255, 255, 255, 0.94);
  border-top-color: rgba(26,32,46,0.08);
}
html.theme-light .bottom-nav a { color: var(--text-dim); }
html.theme-light .bottom-nav a.active { color: #a68852; }

/* Topbar Vera + outlet chips stay visible — flip glass + text */
html.theme-light .health-chip,
html.theme-light .icon-btn,
html.theme-light .outlet-chip {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(26,32,46,0.1);
}
html.theme-light .icon-btn { color: var(--text); }
html.theme-light .health-ring::before { background: #fff; }
html.theme-light .health-ring span { color: var(--text); }

/* Vera bottom strip — lavender wash on light bg */
html.theme-light .vera-strip {
  background:
    linear-gradient(135deg, rgba(181,160,232,0.18) 0%, rgba(168,216,240,0.14) 100%),
    rgba(255, 255, 255, 0.94);
  border-top-color: rgba(181, 160, 232, 0.4);
}
html.theme-light .vera-strip-input {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(26,32,46,0.14);
  color: var(--text);
}
html.theme-light .vera-strip-input::placeholder { color: var(--text-dim); }

/* Vera-note dashed border — visible on light bg */
html.theme-light .vera-note {
  border-top-color: rgba(181, 160, 232, 0.3);
}

/* Outlet menu — solid white */
html.theme-light .outlet-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(26,32,46,0.1);
}
html.theme-light .outlet-menu-item.current {
  background: rgba(245, 213, 71, 0.18);
  border-color: rgba(166, 136, 82, 0.3);
}

/* Recommendation rail — keep colored borders, lift cards */
html.theme-light .rc { background: rgba(255, 255, 255, 0.88); }
html.theme-light .rc.done { background: rgba(125, 216, 125, 0.14); }

/* Ask Vera buttons + chips — adjust contrast */
html.theme-light .rc-btn {
  background: rgba(26,32,46,0.04);
  border-color: rgba(26,32,46,0.12);
  color: var(--text);
}
html.theme-light .rc-btn:hover { background: rgba(26,32,46,0.08); }
html.theme-light .rc-btn.ghost { background: transparent; color: var(--text-dim); }

/* Action buttons */
html.theme-light .action-btn {
  background: rgba(255,255,255,0.7);
  border-color: rgba(26,32,46,0.14);
  color: var(--text);
}
html.theme-light .action-btn:hover { background: rgba(255,255,255,0.95); }

/* Pill-style filters (.rf-btn, .cn-link, .sn-link, .pill, .chip) */
html.theme-light .rf-btn,
html.theme-light .cn-link,
html.theme-light .sn-link,
html.theme-light .pill,
html.theme-light .chip,
html.theme-light .reply-chip,
html.theme-light .metric-tab,
html.theme-light .cal-nav-btn,
html.theme-light .conn-btn,
html.theme-light .integ-btn,
html.theme-light .menu-edit {
  background: rgba(255,255,255,0.7);
  border-color: rgba(26,32,46,0.14);
  color: var(--text-dim);
}
html.theme-light .rf-btn:hover,
html.theme-light .cn-link:hover,
html.theme-light .sn-link:hover,
html.theme-light .pill:hover { color: var(--text); }

/* Source badges (Google, Tripadvisor pills next to reviews) */
html.theme-light .src-badge {
  background: rgba(26,32,46,0.04);
  border-color: rgba(26,32,46,0.1);
  color: var(--text-dim);
}

/* Tables — keep zebra-readable */
html.theme-light .data-table th,
html.theme-light .top-table th,
html.theme-light .fc-table th,
html.theme-light .me-table th,
html.theme-light .proc-table th,
html.theme-light .ctx-table th,
html.theme-light .reorder-table th {
  background: rgba(26,32,46,0.025);
  border-bottom-color: rgba(26,32,46,0.1);
}
html.theme-light .data-table td,
html.theme-light .top-table td,
html.theme-light .fc-table td,
html.theme-light .me-table td,
html.theme-light .proc-table td,
html.theme-light .ctx-table td,
html.theme-light .reorder-table td {
  border-bottom-color: rgba(26,32,46,0.06);
}
html.theme-light .data-table tr:hover,
html.theme-light .top-table tr:hover,
html.theme-light .fc-table tr:hover,
html.theme-light .me-table tr:hover,
html.theme-light .proc-table tr:hover,
html.theme-light .reorder-table tr:hover { background: rgba(26,32,46,0.02); }

/* Calendar cells — flip the yellow tint to deeper warmth */
html.theme-light .cal-day.in { background: rgba(255,255,255,0.6); }
html.theme-light .cal-day.in.has { background: rgba(245, 213, 71, 0.16); }
html.theme-light .cal-day.in.has.high { background: rgba(245, 213, 71, 0.36); }
html.theme-light .cal-day.in .r { color: #a68852; }
html.theme-light .cal-day.in.has.high .r { color: #6b5a14; }
html.theme-light .big-day { background: rgba(255,255,255,0.55); border-color: rgba(26,32,46,0.06); }
html.theme-light .big-day.has-data { background: rgba(245, 213, 71, 0.12); }
html.theme-light .big-day.high { background: rgba(245, 213, 71, 0.32); }

/* Hourly chart — bars stay vivid, but bg stays card */
html.theme-light .hr-bar.low {
  background: linear-gradient(180deg, rgba(155,164,181,0.55) 0%, rgba(107,116,134,0.4) 100%);
}

/* Health chip green text — slightly deeper for cream readability */
html.theme-light .health-text em { color: #2f6b39; }

/* POS chip — the green is fine; just tweak background */
html.theme-light .pos-chip {
  background: rgba(125, 216, 125, 0.16);
  color: #2f6b39;
}

/* Sync chip + recommendation labels — translate */
html.theme-light .sync-chip { background: rgba(125, 216, 125, 0.12); }
html.theme-light .sync-chip b { color: #2f6b39; }

/* Settings switches */
html.theme-light .switch { background: rgba(26,32,46,0.08); border-color: rgba(26,32,46,0.12); }
html.theme-light .switch::after { background: var(--text-dim); }
html.theme-light .switch.on { background: rgba(125, 216, 125, 0.4); border-color: rgba(125, 216, 125, 0.6); }
html.theme-light .switch.on::after { background: #2f6b39; }

/* Field inputs */
html.theme-light .field-input {
  background: rgba(255,255,255,0.7);
  border-color: rgba(26,32,46,0.14);
  color: var(--text);
}
html.theme-light .field-input:focus {
  background: rgba(255,255,255,1);
  border-color: #a68852;
}

/* Theme-toggle button itself */
.theme-toggle {
  width: 34px; height: 34px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  display: grid; place-items: center; cursor: pointer;
  color: var(--text-dim);
  transition: color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
html.theme-light .theme-toggle .sun { display: block; }
html.theme-light .theme-toggle .moon { display: none; }
@media (max-width: 900px) {
  .vera-chip-text { display: none; }
  .vera-strip-hint { display: none; }
  body { padding-bottom: 76px; }
}

/* ═══ Restore circles for avatars / dots / rings ═══
   The flatten removed border-radius everywhere. Squares should stay flat,
   but anything that's logically a circle (avatar, status dot, ring) needs
   border-radius: 50% back. */
.user-avatar,
.vera-avatar,
.vera-chip-av,
.vera-chip-av::after,
.vera-strip-av,
.ask-av,
.rec-avatar,
.head-avatar,
.row-avatar,
.review-avatar,
.health-ring,
.health-ring::before,
.report-arrow,
.src-badge .mini-logo,
.pos-chip::before,
.chat-head-sub::before,
.sync-chip::before,
.rec-group-head::before,
.obs-dot,
.dot,
.finding-head .dot,
.cal-day-dot,
.big-day-dot,
.metric-icon,
.metric-share,
.add-btn,
.icon-btn,
.menu-icon,
.driver-pct-pill,
.note-icon,
.platform-logo,
.conn-logo,
.integ-logo,
.proc-logo,
.hr-bar,
.cat-bar,
.cat-bar-fill,
.proc-bar,
.proc-bar-fill,
.coverage-bar-wrap,
.coverage-bar-fill,
.bar-track,
.bar-fill,
.spark .spark-svg circle,
.cap-card .pattern-value,
.gauge-card .gauge-value { /* leave value text alone; only round graphics */ }

/* Specific rules — circles */
.user-avatar { border-radius: 50%; }
.vera-avatar,
.vera-chip-av,
.vera-strip-av,
.ask-av,
.rec-avatar,
.head-avatar,
.row-avatar,
.review-avatar { border-radius: 50%; }
.vera-chip-av::after { border-radius: 50%; }
.health-ring { border-radius: 50%; }
.health-ring::before { border-radius: 50%; }
.report-arrow { border-radius: 50%; }
.src-badge .mini-logo { border-radius: 50%; }
.pos-chip::before,
.chat-head-sub::before,
.sync-chip::before,
.rec-group-head::before,
.obs-dot,
.finding-head .dot,
.cal-day-dot,
.big-day-dot,
.metric-share { border-radius: 50%; }
.add-btn { border-radius: 50%; }
/* Pills and chips — keep them as pills */
.health-chip,
.pos-chip,
.proc-var,
.fc-chip,
.theme-sentiment,
.class-pill,
.risk-badge,
.rule-status,
.src-badge,
.sync-chip,
.rc-btn,
.action-btn,
.cn-link,
.sn-link,
.metric-tab,
.cal-nav-btn,
.conn-btn,
.integ-btn,
.menu-edit,
.pill,
.chip,
.reply-chip,
.ask-chip { border-radius: 999px; }
.vera-chip { border-radius: 999px; }
/* Bar fills — narrow rounded ends are fine */
.cat-bar,
.cat-bar-fill,
.proc-bar,
.proc-bar-fill,
.coverage-bar-wrap,
.coverage-bar-fill,
.bar-track,
.bar-fill,
.stock-coverage-bar,
.stock-coverage-fill,
.progress-bar,
.progress-fill,
.spark .spark-svg circle { border-radius: 999px; }
.hr-bar { border-radius: 0; }

/* PWA install nudge — bottom-right card on desktop, full-width on mobile */
#wsInstallNudge {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  max-width: 360px; padding: 14px 16px;
  background: rgba(20, 22, 30, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 213, 71, 0.25);
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: wsInstallIn 0.4s ease-out;
}
@keyframes wsInstallIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ws-install-body { flex: 1; min-width: 0; }
.ws-install-title { font-weight: 600; font-size: 13px; color: var(--text, #fff); margin-bottom: 4px; }
.ws-install-text  { font-size: 12px; color: var(--text-dim, rgba(255,255,255,0.7)); line-height: 1.4; }
.ws-install-actions { display: flex; gap: 6px; align-items: center; }
.ws-install-btn {
  background: rgba(245, 213, 71, 0.12);
  border: 1px solid rgba(245, 213, 71, 0.4);
  color: #f5d547; padding: 7px 14px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
}
.ws-install-btn:hover { background: rgba(245, 213, 71, 0.18); }
.ws-install-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.45);
  cursor: pointer; font-size: 18px; padding: 0 6px; line-height: 1;
}
.ws-install-dismiss:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 600px) {
  #wsInstallNudge { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* Stale-data nudge — amber banner above today-card when no recent upload */
.ws-stale-nudge {
  margin: 14px 0;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(245, 213, 71, 0.06);
  border: 1px solid rgba(245, 213, 71, 0.25);
  border-left-width: 3px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--text);
}
.ws-stale-icon { color: #f5d547; font-size: 16px; flex-shrink: 0; }
.ws-stale-text { flex: 1; line-height: 1.4; }
.ws-stale-btn {
  background: rgba(245, 213, 71, 0.1);
  border: 1px solid rgba(245, 213, 71, 0.4);
  color: #f5d547;
  padding: 6px 12px; cursor: pointer; flex-shrink: 0;
  font-family: inherit; font-size: 12px; font-weight: 600;
}
.ws-stale-btn:hover { background: rgba(245, 213, 71, 0.18); }
@media (max-width: 600px) {
  .ws-stale-nudge { flex-wrap: wrap; }
  .ws-stale-text { flex-basis: 100%; }
}

/* Month-to-date chart card — daily revenue vs cash-out, line chart */
.mtd-card {
  margin: 28px 0 16px;
  padding: 22px 26px;
  background: rgba(15, 18, 28, 0.85);
  border: 1px solid var(--glass-border);
}
.mtd-sub {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px; margin-bottom: 18px;
}
.mtd-canvas-wrap {
  position: relative; height: 260px; margin-bottom: 18px;
}
.mtd-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);
}
.mtd-stat { display: flex; flex-direction: column; gap: 4px; }
.mtd-stat-lbl {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.mtd-stat-val {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--text);
}
.mtd-stat-val.good { color: #7dd87d; }
.mtd-stat-val.risk { color: #ff8a65; }
@media (max-width: 600px) {
  .mtd-canvas-wrap { height: 210px; }
  .mtd-stats { grid-template-columns: 1fr; gap: 10px; }
  .mtd-stat-val { font-size: 18px; }
  .mtd-card { padding: 18px 18px; }
}

/* MTD sample tag — small pill on the section title for sample-data consoles */
.mtd-sample-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,213,71,0.85);
  background: rgba(245,213,71,0.1);
  border: 1px solid rgba(245,213,71,0.3);
  padding: 3px 8px;
  margin-left: 10px;
  vertical-align: middle;
  display: inline-block;
}
.mtd-card-sample .mtd-sub { color: rgba(245,213,71,0.7); }

/* Briefing sample tag — small pill on the page-head label */
.brief-sample-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,213,71,0.85);
  background: rgba(245,213,71,0.1);
  border: 1px solid rgba(245,213,71,0.3);
  padding: 2px 7px;
  margin-left: 8px;
  display: inline-block;
}