:root {
  --bg: #0b0a13; --card: #161425; --line: #25223a; --text: #ece9f7;
  --muted: #8b86a3; --grad-a: #b8a5ff; --grad-b: #c084fc;
  --hit: #1a3a2a; --fresh: #3a2a1a; --shadow: #1a2a3a; --err: #3a1a1a;
}
* { box-sizing: border-box }
body {
  background: var(--bg); color: var(--text); margin: 0;
  font: 16px/1.5 -apple-system, system-ui, sans-serif;
}
code { font: 13px ui-monospace, monospace; color: var(--text) }
.muted { color: var(--muted) }
h1 { font-weight: 600; font-size: 36px; letter-spacing: -0.02em; margin: 4px 0 8px;
     background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
     -webkit-background-clip: text; background-clip: text; color: transparent }
h2 { font-size: 20px; font-weight: 600; margin: 32px 0 12px; letter-spacing: -0.01em }
.eyebrow { color: var(--grad-a); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 600 }
.subhero { color: var(--muted); margin-bottom: 24px }
.footnote { color: var(--muted); font-size: 13px; margin-top: 28px }

.top { display: flex; justify-content: space-between; align-items: center;
       padding: 16px 28px; border-bottom: 1px solid var(--line); }
.top .brand { font-weight: 600; letter-spacing: 0.08em }
.top-meta { display: flex; align-items: center; gap: 12px; font-size: 13px }
.signout { color: var(--muted); text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px }
.signout:hover { color: var(--text) }
button {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px;
}
button:hover { border-color: var(--grad-a) }

.container { max-width: 1100px; margin: 0 auto; padding: 28px }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px }
.kpi .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em }
.kpi .v { font-size: 22px; font-weight: 600; margin-top: 4px }
.kpi .sub { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.3 }

table { width: 100%; border-collapse: collapse; margin-top: 6px; }
table th, table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px }
table th { color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px }
table.mini { max-width: 540px }

.feed { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
        max-height: 480px; overflow-y: auto }
.feed .entry { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; background: rgba(255,255,255,0.02) }
.feed .entry.hit { background: var(--hit) }
.feed .entry.fresh { background: var(--fresh) }
.feed .entry.shadow { background: var(--shadow) }
.feed .meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap }
.feed .meta .dec { font-weight: 600; color: var(--text) }
.feed .meta .tn { color: var(--grad-a); font-family: ui-monospace, monospace }
.feed .meta .lat { color: var(--text) }
.feed .p { font-size: 13px; margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--grad-a); color: var(--text);
           font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word }
.feed .r { font-size: 13px; margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--grad-b); color: var(--muted);
           font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word }
.feed .err-msg { color: #ff8888; font-family: ui-monospace, monospace; font-size: 13px; margin-top: 4px }

.banner { background: #3a1a1a; border: 1px solid #ff6666; color: #ffcccc;
          padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px }
.feed .entry.fail { background: #2a1010; border-left: 2px solid #ff6666 }

.badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); white-space: nowrap }
.badge.active { color: #7fffaa; border-color: #2d5a3a }
.badge.observing { color: #b8a5ff; border-color: #4a3d6a }
.badge.dormant { color: #ffd966; border-color: #5a4a1a }
.badge.lost { color: #888; border-color: #333 }
.badge.offline { color: #ff8888; border-color: #5a2d2d; background: rgba(255,100,100,0.08) }
.badge.idle { color: var(--muted) }

/* Big prominent system status pill on the customer dashboard. Customers must
   never have to wonder whether Tokani is actually doing anything for them. */
.system-pill {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 0; padding: 14px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  font-size: 14px;
}
.system-pill .pill-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted); box-shadow: 0 0 0 2px rgba(139,134,163,0.15);
}
.system-pill .pill-text { font-weight: 600; color: var(--text) }
.system-pill .pill-hint { color: var(--muted); font-size: 13px; flex: 1 }
.system-pill.active { border-color: #2d5a3a; background: rgba(127,255,170,0.04) }
.system-pill.active .pill-dot { background: #7fffaa; box-shadow: 0 0 0 4px rgba(127,255,170,0.18) }
.system-pill.observing { border-color: #4a3d6a; background: rgba(184,165,255,0.04) }
.system-pill.observing .pill-dot { background: #b8a5ff; box-shadow: 0 0 0 4px rgba(184,165,255,0.18) }
.system-pill.idle .pill-dot { background: var(--muted) }
.system-pill.offline {
  border-color: #5a2d2d; background: rgba(255,100,100,0.06);
}
.system-pill.offline .pill-dot {
  background: #ff8888; box-shadow: 0 0 0 4px rgba(255,100,100,0.20);
}

/* Smart context banner above the hero (welcome / today / new-month). */
.smart-banner {
  margin-bottom: 18px; padding: 12px 18px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.5;
}
.smart-banner.welcome { border-color: rgba(184,165,255,0.4); background: rgba(184,165,255,0.06) }
.smart-banner.today   { border-color: rgba(255,217,102,0.4); background: rgba(255,217,102,0.06); color: #ffe9a8 }
.smart-banner.recap   { border-color: rgba(192,132,252,0.4); background: rgba(192,132,252,0.06) }

@media (max-width: 720px) {
  .system-pill { flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px }
  .system-pill .pill-hint { flex: 1 0 100%; font-size: 12px }
  .top { flex-wrap: wrap; gap: 10px; padding: 12px 16px }
  .top-meta { flex-wrap: wrap; gap: 8px }
  .container { padding: 18px }
  h1 { font-size: 28px }
  h2 { font-size: 18px }
  /* Make chart h2's range selector wrap nicely instead of overflowing. */
  h2 > span[style*="float:right"] { float: none !important; display: flex !important; margin-top: 8px }
}

.econ-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px }
.econ-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px }
.econ-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em }
.econ-card .v { font-size: 24px; font-weight: 600; margin-top: 6px;
                background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
                -webkit-background-clip: text; background-clip: text; color: transparent }
.econ-card .sub { font-size: 12px; color: var(--muted); margin-top: 6px }
.econ-table th, .econ-table td { font-size: 13px }
.econ-table td:nth-child(8) { color: var(--grad-a) }

/* Subtle row tinting — easier eye-tracking across wide tables.
   Three cycling pastels at very low alpha so it's a "highlighter sharpie"
   feel, not a candy-striped party. */
.econ-table tbody tr:nth-child(3n+1) td { background: rgba(184, 165, 255, 0.04) }
.econ-table tbody tr:nth-child(3n+2) td { background: rgba(255, 217, 102, 0.035) }
.econ-table tbody tr:nth-child(3n+3) td { background: rgba(127, 255, 170, 0.035) }
.econ-table tbody tr:hover td { background: rgba(192, 132, 252, 0.10) }

.sig-badge { background: rgba(255,217,102,0.12); color: #ffd966; border: 1px solid rgba(255,217,102,0.3);
             padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600 }
.news-title { color: var(--text); font-weight: 500; text-decoration: none; display: block; margin-top: 4px; line-height: 1.4 }
.news-title:hover { color: var(--grad-a) }

.deepdive-cta {
  display: block; margin: 18px 0 28px; padding: 18px 22px;
  background: linear-gradient(135deg, rgba(184,165,255,0.08), rgba(192,132,252,0.04));
  border: 1px solid rgba(192,132,252,0.3); border-radius: 12px;
  text-decoration: none; color: var(--text); transition: border-color 0.15s;
}
.deepdive-cta:hover { border-color: var(--grad-a) }
.deepdive-eyebrow { color: var(--grad-a); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600 }
.deepdive-title { font-size: 18px; font-weight: 600; margin-top: 4px }
.deepdive-sub { color: var(--muted); font-size: 13px; margin-top: 4px }

.tenant-filter {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; color: var(--text); font: inherit; font-size: 13px;
  font-weight: 400; min-width: 220px;
}
.tenant-filter:focus { border-color: var(--grad-a); outline: none }
.tenant-filter::placeholder { color: var(--muted) }

/* Sortable headers on the per-tenant breakdown */
.econ-table thead th[data-sort] { cursor: pointer; user-select: none; position: relative; padding-right: 18px }
.econ-table thead th[data-sort]:hover { color: var(--text) }
.econ-table thead th.sort-active { color: var(--grad-a) }
.econ-table thead th.sort-active::after { content: '↓'; position: absolute; right: 4px; font-size: 11px }
.econ-table thead th.sort-asc::after { content: '↑' }
.econ-table thead th.sort-desc::after { content: '↓' }

/* Tenant link inside breakdown rows */
.tenant-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line) }
.tenant-link:hover { color: var(--grad-a); border-bottom-color: var(--grad-a) }

/* Activity heatmap */
.heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin-top: 8px }
.heatmap-cell { aspect-ratio: 1; border-radius: 6px; padding: 6px; display: flex; flex-direction: column;
                justify-content: space-between; cursor: default; min-height: 50px; }
.heatmap-date { font-size: 9px; color: var(--muted); font-family: ui-monospace, monospace }
.heatmap-count { font-size: 12px; font-weight: 600; color: var(--text); text-align: center }
@media (max-width: 720px) { .heatmap { grid-template-columns: repeat(7, 1fr) } }

/* Tenant deep-dive 2-column layout: main + feedback sidebar */
.tenant-page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start }
.tenant-main { min-width: 0 }
.tenant-sidebar { position: sticky; top: 20px; align-self: start;
                  max-height: calc(100vh - 40px); overflow-y: auto;
                  background: var(--card); border: 1px solid var(--line);
                  border-radius: 12px; padding: 16px }
.tenant-sidebar h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px;
                     padding-bottom: 8px; border-bottom: 1px solid var(--line) }
.tenant-sidebar .feed { max-height: none; padding: 0; background: none; border: none }
.tenant-sidebar .feed .entry { background: rgba(255,255,255,0.03); margin-bottom: 8px; padding: 10px }
.tenant-sidebar .feed .meta { flex-wrap: wrap; gap: 8px; font-size: 11px }
@media (max-width: 1100px) {
  .tenant-page-grid { grid-template-columns: 1fr }
  .tenant-sidebar { position: static; max-height: none }
}

.chartWrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 6px }
.chartWrap svg { width: 100%; height: auto; max-height: 300px }
.legend { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--muted) }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle }
.legend .dot.grad-a { background: #ff3df0; box-shadow: 0 0 6px rgba(255,61,240,0.6) }
.legend .dot.grad-b { background: #c084fc; box-shadow: 0 0 6px rgba(192,132,252,0.6) }

.download { display: inline-block; padding: 10px 16px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
            color: #1a1325; font-weight: 600; border-radius: 8px; text-decoration: none; font-size: 14px }
.download:hover { filter: brightness(1.08) }
.export-row { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; max-width: 640px }
.export-row label { color: var(--muted); font-size: 13px; flex: 1; min-width: 180px }
.export-row select { width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--card);
                     border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit }
.export-row select:focus { border-color: var(--grad-a); outline: none }
.consent-badge { color: #ffd966; font-weight: 600; padding: 2px 8px; border-radius: 4px;
                 background: rgba(255,217,102,0.1); border: 1px solid rgba(255,217,102,0.3) }

.feedback { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 640px }
.feedback label { display: block; margin-top: 12px; font-size: 13px; color: var(--muted) }
.feedback label:first-of-type { margin-top: 0 }
.feedback select, .feedback input, .feedback textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  font: inherit; resize: vertical;
}
.feedback select:focus, .feedback input:focus, .feedback textarea:focus { border-color: var(--grad-a); outline: none }
.feedback .row-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px }
.feedback button[type=submit] {
  padding: 10px 20px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  color: #1a1325; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px;
}
.feedback button[type=submit]:hover { filter: brightness(1.08) }
.feedback .consent { margin-top: 14px; padding: 14px 16px; background: rgba(192,132,252,0.06);
                     border: 1px solid rgba(192,132,252,0.3); border-radius: 10px }
.feedback .consent .checkbox { display: flex; align-items: flex-start; gap: 10px; margin-top: 0; color: var(--text); font-size: 14px }
.feedback .consent .checkbox input { width: auto; margin: 3px 0 0; padding: 0; flex-shrink: 0 }
.feedback .consent .checkbox span { line-height: 1.4 }
.feedback .consent label:not(.checkbox) { margin-top: 12px }

/* Login page */
body.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px }
.login-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; max-width: 380px; width: 100% }
.login-box .brand { font-size: 28px; font-weight: 600; letter-spacing: 0.08em; text-align: center;
                    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
                    -webkit-background-clip: text; background-clip: text; color: transparent }
.tabs { display: flex; margin: 24px 0 16px; border-bottom: 1px solid var(--line) }
.tab { background: none; border: none; padding: 10px 16px; color: var(--muted); cursor: pointer; flex: 1;
       border-radius: 0; font-size: 14px }
.tab.active { color: var(--text); border-bottom: 2px solid var(--grad-a) }
.login-box label { display: block; margin-top: 12px; font-size: 13px; color: var(--muted) }
.login-box input { width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--bg);
                   border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit }
.login-box input:focus { border-color: var(--grad-a); outline: none }
.login-box button[type=submit] { width: 100%; margin-top: 16px; padding: 12px; font-size: 14px;
                                 background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
                                 color: #1a1325; font-weight: 600 }
.err { color: #ff8888; font-size: 13px; margin-top: 12px }
.foot { color: var(--muted); font-size: 12px; margin-top: 20px; text-align: center; line-height: 1.5 }

/* "Your AI program" section — shape-of-usage signals, not savings. */
.program-h3 { font-size: 15px; font-weight: 600; margin: 24px 0 4px; letter-spacing: -0.01em; color: var(--text) }
.program-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 10px }
@media (max-width: 900px) { .program-summary { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .program-summary { grid-template-columns: 1fr } }
.program-chip { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px }
.program-chip .chip-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em }
.program-chip .chip-value { font-size: 22px; font-weight: 600; margin-top: 4px; color: var(--text) }
.program-chip .chip-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.3 }
.program-chip.up .chip-value { color: #4ade80 }
.program-chip.down .chip-value { color: #ff8888 }
.program-chip.flat .chip-value { color: var(--text) }

.legend .dot.grad-input { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.6) }
.legend .dot.grad-output { background: #c084fc; box-shadow: 0 0 6px rgba(192,132,252,0.6) }

/* Hour-of-week heatmap — 7 weekday rows × 24 UTC hours. */
.heatmap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 6px;
           overflow-x: auto }
.heatmap-grid { display: grid; grid-template-columns: 36px repeat(24, 1fr); gap: 3px; min-width: 600px }
.heatmap-cell { aspect-ratio: 1.6 / 1; border-radius: 3px; background: rgba(192,132,252,0.06); position: relative }
.heatmap-cell[data-count="0"] { background: rgba(255,255,255,0.025) }
.heatmap-row-label, .heatmap-col-label { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.4 }
.heatmap-row-label { text-align: right; padding-right: 6px; align-self: center }
.heatmap-col-label { padding-top: 4px }
.heatmap-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 30px }

/* Founder-features blocks */
.forecast-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px }
@media (max-width: 720px) { .forecast-strip { grid-template-columns: 1fr } }
.forecast-card, .uptime-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px }
.forecast-card .card-label, .uptime-card .card-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em }
.forecast-card .card-value, .uptime-card .card-value { font-size: 24px; font-weight: 600; margin-top: 6px; color: var(--text) }
.forecast-card .card-sub, .uptime-card .card-sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4 }
.forecast-card .card-band { font-size: 12px; color: var(--muted); margin-top: 4px }

.anomaly-list { display: grid; gap: 8px; margin: 10px 0 6px }
.anomaly { background: var(--card); border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
           padding: 10px 14px; font-size: 14px; color: var(--text) }
.anomaly.info  { border-left-color: var(--grad-a) }
.anomaly.warn  { border-left-color: #ffb86b }
.anomaly-empty { color: var(--muted); font-size: 13px; padding: 12px 14px;
                 background: var(--card); border: 1px solid var(--line); border-radius: 8px }

.compliance-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
                   margin-top: 14px }
.compliance-card .compliance-title { font-weight: 600; margin-bottom: 6px }
.compliance-card .compliance-body { color: var(--muted); font-size: 14px; line-height: 1.55 }
.compliance-card .compliance-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center }
.compliance-card .compliance-actions .download { padding: 8px 14px; font-size: 13px }

.feedback-disclosure { margin-top: 32px; max-width: 640px }
.feedback-disclosure > summary { cursor: pointer; color: var(--muted); font-size: 13px;
                                 padding: 6px 0; user-select: none }
.feedback-disclosure > summary:hover { color: var(--text) }
.feedback-disclosure[open] > summary { color: var(--text); margin-bottom: 10px }
.feedback-disclosure .feedback { margin-top: 0 }

/* Billing card — full-width panel under the operational status pill.
   Covers: status, cycle (paid-through / days remaining / lapsed),
   guidance copy, and a "Manage billing" button that opens the Stripe
   Customer Portal. Replaces the older one-line chip. */
.billing-card { background: var(--card); border: 1px solid var(--line);
                border-radius: 12px; padding: 14px 18px; margin-top: 12px }
.billing-card .billing-header { display: flex; align-items: center; gap: 12px }
.billing-card .billing-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ade80 }
.billing-card .billing-label { font-weight: 600; font-size: 15px; color: var(--text) }
.billing-card .billing-portal-btn { margin-left: auto; padding: 6px 14px; border-radius: 8px;
                                    text-decoration: none; font-size: 13px;
                                    color: var(--text); border: 1px solid var(--line);
                                    background: rgba(255,255,255,0.03); cursor: pointer }
.billing-card .billing-portal-btn:hover { border-color: var(--grad-a); color: var(--grad-a) }
.billing-card .billing-cycle { color: var(--text); font-size: 14px; margin-top: 8px }
.billing-card .billing-detail { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.5 }
.billing-card.past_due { border-color: rgba(255,184,107,0.5) }
.billing-card.past_due .billing-dot { background: #ffb86b }
.billing-card.past_due .billing-label { color: #ffb86b }
.billing-card.suspended { border-color: rgba(255,136,136,0.5) }
.billing-card.suspended .billing-dot { background: #ff8888 }
.billing-card.suspended .billing-label { color: #ff8888 }