:root {
  color-scheme: dark;
  --ink: #eff8f2;
  --muted: #a6beb3;
  --faint: #8aa699;
  --canvas: #04190f;
  --sidebar: #051d15;
  --panel: #0a271e;
  --panel-soft: #0d2f25;
  --line: #1f4436;
  --line-strong: #31584a;
  --lime: #b7f43d;
  --coral: #ff9987;
  --amber: #ffd787;
  --good: #8ce0ae;
  --blue: #6fb6e8;
  --dormant: #3d5d52;
  --sans: "Manrope", Avenir, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--sans);
}

* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--lime); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid #c9ff63; outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sign-in */
.loading, .auth-card { max-width: 620px; margin: 15vh auto; padding: 44px; border: 1px solid var(--line-strong); border-radius: 22px; background: #0a281f; box-shadow: 0 30px 100px #0009; }
.loading { color: var(--muted); }
.eyebrow { margin: 0 0 12px; color: var(--lime); font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.auth-card h1 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.lede { color: var(--muted); line-height: 1.5; }
.notice { margin: 24px 0; padding: 14px 16px; border: 1px solid #57682d; border-radius: 12px; color: #ddf7a6; background: #24351a; line-height: 1.45; }
.notice.standing { margin: 0 0 20px; }
.error { margin: 18px 0 0; padding: 12px 14px; border: 1px solid #8e4437; border-radius: 10px; color: #ffc2b8; background: #341f1a; line-height: 1.4; }
.field { display: grid; gap: 8px; margin: 16px 0; color: var(--muted); font-size: 14px; }
input, select { width: 100%; padding: 12px 14px; color: var(--ink); border: 1px solid #3f6254; border-radius: 10px; background: #071e16; }
.primary, .secondary, .danger, .compact { border-radius: 10px; padding: 11px 16px; border: 1px solid transparent; font-weight: 700; }
.primary { color: #10200b; background: var(--lime); }
.secondary, .compact { color: var(--ink); border-color: #3f6254; background: transparent; }
.danger { color: #ffc2b8; border-color: #8e4437; background: transparent; }
.compact { padding: 7px 10px; font-size: 13px; }
.primary[disabled], .secondary[disabled], .compact[disabled] { cursor: wait; opacity: .6; }
.wide { width: 100%; margin-top: 8px; }
.alternate { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.alternate .notice { margin-top: 0; }
.linklike { margin: 12px auto 0; padding: 0; display: block; border: 0; color: var(--muted); background: none; font-size: 14px; text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--ink); }

/* The console: a sidebar of sections beside the one on screen. */
.console { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 26px; height: 100vh; padding: 26px 14px; border-right: 1px solid var(--line); background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.brand-logo { display: block; flex-shrink: 0; border-radius: 8px; }
.brand strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.brand-sub { display: block; color: var(--lime); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nav-group { display: grid; gap: 3px; }
.nav-head { padding: 0 10px 6px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav:hover { background: #0b2c22; color: var(--ink); }
.nav.on { background: #0f3a2c; color: var(--ink); box-shadow: inset 0 0 0 1px #2c5a48; }
.nav .count { margin-left: auto; color: var(--faint); font: 500 12px var(--mono); }
.nav .badge { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: #12382b; color: var(--lime); font: 500 11px var(--mono); }
.nav .badge.warn { background: #3d1a15; color: var(--coral); }
.sidebar-foot { display: grid; gap: 8px; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.sidebar-foot > * { min-width: 0; }
.operator-email { overflow-wrap: anywhere; }
.foot-actions { display: flex; gap: 8px; }
.content { min-width: 0; padding: 30px clamp(18px, 3vw, 36px) 64px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head h1 { margin: 4px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kicker { margin: 0; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.page-head .kicker { color: var(--lime); }
.segmented { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #062219; }
.segmented button { padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.segmented button.on { background: var(--lime); color: #062219; }

/* Headline numbers. Each opens the accounts or events it counts. */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.warn-text { color: var(--amber); }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); text-decoration: none; }
a.tile:hover { border-color: #3c6e5a; }
.tile strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.tile-note { color: var(--muted); font-size: 13px; }
.tile-note.good { color: var(--good); }
.tile-note.warn { color: var(--amber); }

.panel { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-width: 0; }
.panel h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.panel h3 { margin: 0; font-size: 14px; font-weight: 700; }
.panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-head p { margin: 6px 0 0; }
.sub-block { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #173a2e; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; margin-bottom: 20px; }
.grid-half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.empty { margin: 0; padding: 20px 0; color: var(--muted); text-align: center; }

/* Charts are drawn as SVG by the console itself: no chart library. */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: #1b3d31; stroke-width: 1; }
.chart-axis { fill: var(--faint); font: 400 11px var(--mono); }
.chart-hover { fill: transparent; }
.chart-hover:hover { fill: rgba(239, 248, 242, .05); }
.line-total { fill: none; stroke: var(--lime); stroke-width: 2.25; stroke-linejoin: round; }
.line-total-area { fill: var(--lime); fill-opacity: .07; }
.bar-new { fill: #4f7d35; }
.line-active { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.line-active-area { fill: var(--blue); fill-opacity: .1; }
.line-average { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.legend .swatch:first-child { margin-left: 0; }
.swatch.active-line { height: 3px; background: var(--blue); }
.swatch.average { height: 0; border-top: 2px dashed var(--ink); border-radius: 0; }
.swatch.pro { background: var(--lime); }
.swatch.trial { background: var(--amber); }
.swatch.active { background: var(--blue); }
.swatch.dormant { background: var(--dormant); }

.stack { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: #123429; }
.stack span { display: block; }
.seg-pro { background: var(--lime); }
.seg-trial { background: var(--amber); }
.seg-active { background: var(--blue); }
.seg-dormant { background: var(--dormant); }
.stack-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13px; }
.stack-legend a { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.stack-legend a:hover { color: var(--lime); }
.stack-legend .swatch { margin: 0; }
.stack-legend strong { margin-left: auto; font-family: var(--mono); }
.meter-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 13px; }
.meter-row.wide-label { grid-template-columns: 120px minmax(0, 1fr) 36px; }
.meter-row strong { text-align: right; }
.meter { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #123429; }
.meter span { display: block; border-radius: 999px; }
.fill-warn { background: var(--amber); }
.fill-soft { background: #8ca99c; }
.fill-blue { background: var(--blue); }
.channel-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 36px 48px; align-items: center; gap: 12px; font-size: 13px; }
.channel-row strong { text-align: right; }
.channel-row > span:last-child { text-align: right; }
.channel-name { display: grid; gap: 1px; min-width: 0; }
.channel-name strong { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-name .mono { font-size: 11px; }
.attention { display: grid; }
.attention-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #173a2e; color: var(--ink); text-decoration: none; }
.attention-row:first-child { border-top: 0; }
.attention-row > span:first-child { display: grid; gap: 2px; }
.attention-row:hover { color: var(--ink); background: var(--panel-soft); }
.open-link { color: var(--amber); font-size: 12px; white-space: nowrap; }

/* Users */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-note { margin: -6px 0 16px; }
.chip-clear { font-size: 15px; line-height: 1; opacity: .75; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #24483a; border-radius: 999px; background: var(--panel); color: #cfe2d8; font-size: 13px; font-weight: 600; }
.chip.on { border-color: var(--ink); background: var(--ink); color: #062219; }
.chip .n { font: 500 12px var(--mono); opacity: .8; }
.channel-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.channel-filter select { width: auto; padding: 7px 10px; font-size: 13px; }
.search-box input { width: 300px; padding: 9px 12px; font-size: 13px; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.table-panel { gap: 0; padding: 0; overflow: hidden; }
.user-line { display: grid; grid-template-columns: minmax(0, 1.1fr) 158px minmax(0, 1fr) minmax(0, .7fr) 86px 56px 48px; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid #173a2e; background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.user-line.head { border-top: 0; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
button.user-line:hover { background: var(--panel-soft); }
.user-line.on { background: #123a2d; box-shadow: inset 3px 0 0 var(--lime); }
.user-line .who { display: grid; gap: 2px; min-width: 0; }
.user-line .who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-line .who .mono { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-line .status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.user-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.num { text-align: right; }
.bad { color: var(--coral); }
.pill { display: inline-flex; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.pro { background: var(--lime); color: #062219; }
.pill.trial { background: #3b2c10; color: var(--amber); }
.pill.ending { background: var(--amber); color: #2a1c00; }
.pill.active { background: #153a52; color: #a9dcff; }
.pill.dormant { background: #1d3a31; color: var(--muted); }
.pill.due { background: #3d1a15; color: var(--coral); }
.pill.promo { background: #1d3a31; color: var(--lime); }
.promo-terms { display: block; margin-top: 2px; }
.progress { display: flex; width: 120px; height: 4px; border-radius: 999px; overflow: hidden; background: #1d3f33; }
.progress span { display: block; background: var(--amber); }
.table-foot { margin: 0; padding: 12px 16px; border-top: 1px solid #173a2e; }
/* A panel taller than the window would hide its end while it sticks, so it scrolls on its own. */
.detail-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.history-line { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.detail-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detail-connections { min-width: 0; }
.detail-panel.inline { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 28px; align-items: start; max-height: none; overflow: visible; padding: 18px 20px 22px 19px; border-top: 1px solid #173a2e; background: #0b291f; box-shadow: inset 3px 0 0 var(--lime); }
.detail-panel.inline .detail-connections { padding-top: 0; border-top: 0; }
.detail-head { display: grid; gap: 4px; }
.detail-head h2 { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.detail-head .mono { margin: 0; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.spark-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.spark-bars span { flex: 1; border-radius: 3px 3px 1px 1px; background: #1d3f33; }
.spark-bars span.on { background: var(--blue); }

/* A connection's diagnostics, inside the selected account. */
.connection { margin-top: 4px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09231b; }
.connection-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.connection-head h3 { font-size: 14px; }
.connection-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.micro { color: var(--muted); font: 11px var(--mono); }
.tag { display: inline-flex; align-items: center; border: 1px solid #54722e; border-radius: 99px; padding: 3px 8px; color: #d9ff88; background: #1d351b; font: 500 11px var(--mono); }
.tag.muted { border-color: #3f6254; color: #cadbd3; background: #163429; }
.diag { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.diag div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: #102e24; }
.diag span { color: var(--muted); font-size: 12px; }
.diag strong { font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.interaction-list { display: grid; gap: 4px; margin: 12px 0 0; max-height: 320px; overflow: auto; }
.interaction { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 8px 0; border-top: 1px solid #27463b; }
.interaction:first-child { border-top: 0; }
.status-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--good); }
.interaction.error .status-dot { background: var(--coral); }
.interaction.pick .status-dot { background: var(--blue); }
.interaction strong { display: block; font-size: 12px; font-family: var(--mono); }
.interaction p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
/* In the narrow account panel the time goes under the call, so the tool name keeps its width. */
.detail-panel .interaction { grid-template-columns: 9px minmax(0, 1fr); }
.detail-panel .interaction time { grid-column: 2; }

/* Activity window: the day's calls by hour, the week's tools, and the calls themselves. */
.bar-answered { fill: var(--blue); }
.bar-limit { fill: var(--amber); }
.bar-error { fill: var(--coral); }
.line-rate { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.swatch.answered { background: var(--blue); }
.swatch.limit { background: var(--amber); }
.swatch.error { background: var(--coral); }
.swatch.rate { height: 0; border-top: 2px dashed var(--ink); border-radius: 0; }
.tool-row { grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 44px; }
.tool-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfe2d8; font-size: 12px; }
.prompt-panels { margin-bottom: 20px; }
.prompt-row { grid-template-columns: minmax(0, 210px) minmax(48px, 1fr) 44px; }
.prompt-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 16px 10px; }
.feed-panel .filter-note { margin: 0; padding: 0 16px 12px; }
.feed-line { display: grid; grid-template-columns: 96px minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.7fr) 104px; align-items: start; gap: 14px; padding: 10px 16px; border-top: 1px solid #173a2e; font-size: 13px; }
.feed-line.head { padding-top: 8px; padding-bottom: 8px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.feed-line > * { min-width: 0; }
.feed-account { overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.feed-account:hover { color: var(--lime); }
.feed-tool { color: #cfe2d8; font-size: 12px; overflow-wrap: anywhere; }
.feed-query { color: var(--muted); overflow-wrap: anywhere; }
.feed-query .failure { margin-top: 6px; font-size: 12px; }
.outcome { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.outcome.ok { background: #12382b; color: var(--good); }
.outcome.limit { background: #3b2c10; color: var(--amber); }
.outcome.err { background: #3d1a15; color: var(--coral); }
.calendar-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 20px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 13px; }
.feed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid #173a2e; }

/* Errors: failures grouped by cause, tool and upstream status. */
.section-chart { margin-bottom: 20px; }
.group-line { display: grid; grid-template-columns: minmax(0, 1fr) 48px 56px 64px 84px 84px 100px; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid #173a2e; background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.group-line.head { border-top: 0; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
button.group-line:hover { background: var(--panel-soft); }
.group-line.on { background: #123a2d; box-shadow: inset 3px 0 0 var(--lime); }
.group-line > * { min-width: 0; }
.group-cause { display: grid; gap: 3px; }
.group-cause strong, .group-cause .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-cause strong { font-size: 12px; }
.spark path { fill: none; stroke: var(--coral); stroke-width: 1.5; stroke-linejoin: round; }
.pill.new { background: var(--coral); color: #2a0d08; }
.pill.recovered { background: #1d3a31; color: var(--lime); }
.error-status { display: flex; flex-wrap: wrap; gap: 4px; }
.error-status .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cause-title { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.reason { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #062219; color: #cfe2d8; font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.copy-cause { align-self: flex-start; }
.occurrence { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid #1d4034; font-size: 13px; }
.detail-connections h3 + .occurrence { padding-top: 0; border-top: 0; }
.occurrence-head { display: flex; justify-content: space-between; gap: 10px; }
.occurrence-head a { color: var(--ink); font-weight: 700; text-decoration: none; }
.occurrence-head a:hover { color: var(--lime); }
.occurrence p { margin: 0; overflow-wrap: anywhere; }
.failure { margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid var(--coral); border-radius: 0 7px 7px 0; background: rgba(0,0,0,.22); color: #ffcabf; font-size: 13px; line-height: 1.45; }
.failure.muted { border-left-color: #57682d; color: var(--muted); }
.failure-kind { display: block; margin-bottom: 3px; color: #ffb4a3; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* Feedback arrives as text written by someone else's assistant. It renders
   escaped, and reads as a report rather than a command. */
.section-note { margin: -8px 0 18px; font-size: 13px; }
.feedback-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.tabs { display: flex; gap: 18px; padding: 10px 16px 0; border-bottom: 1px solid #173a2e; }
.tab { display: flex; align-items: center; gap: 7px; padding: 8px 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.tab.on { border-bottom-color: var(--lime); color: var(--ink); }
.tab .n { font: 500 12px var(--mono); opacity: .8; }
.thread-line { display: grid; gap: 6px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid #173a2e; background: transparent; color: var(--ink); text-align: left; }
.tabs + .thread-line { border-top: 0; }
button.thread-line:hover { background: var(--panel-soft); }
.thread-line.on { background: #123a2d; box-shadow: inset 3px 0 0 var(--lime); }
.thread-top { display: flex; justify-content: space-between; gap: 10px; }
.thread-top strong { font-size: 14px; overflow-wrap: anywhere; }
.thread-top time { white-space: nowrap; }
.thread-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.detail-panel.inline.thread-detail { grid-template-columns: minmax(0, 1fr); }
.detail-head a { color: var(--lime); }
.untrusted-note { margin: 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: #062219; color: var(--muted); font-size: 12px; }
.feedback-reply .field { margin: 0; }
.feedback-messages { display: grid; gap: 9px; margin: 0; }
.feedback-message { padding: 11px 13px; border-radius: 10px; background: rgba(4,14,11,.34); }
.feedback-message.ours { background: rgba(183, 244, 61, .07); border: 1px solid rgba(183, 244, 61, .2); }
.feedback-message-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.feedback-message-head strong { color: var(--ink); font-size: .85rem; }
.feedback-message-head time { color: var(--muted); font-size: .75rem; }
.feedback-message p { margin: 0; color: #cfe0da; font-size: .87rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-reply { display: grid; gap: 9px; }
.feedback-reply textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: rgba(4,14,11,.4); font-size: .87rem; resize: vertical; }
.feedback-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.feedback-reply-actions label { display: flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.feedback-reply-actions input[type=checkbox] { width: auto; flex-shrink: 0; margin: 0; }
.feedback-closed { margin: 0; font-size: .84rem; }

/* Tools: promo codes and passkeys */
.promo-panel { margin-bottom: 20px; }
.promo-form { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(150px, .7fr) minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09231b; }
.promo-form .field { margin: 0; }
.promo-form .field .muted { font-weight: 400; }
.promo-notice { margin-bottom: 0; }
.promo-list { display: grid; gap: 12px; }
.promo-code { padding: 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09231b; }
.promo-code-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.promo-code-head > div:first-child { display: grid; gap: 5px; }
.promo-code-head code { color: #d9ff88; font: 500 16px var(--mono); letter-spacing: .04em; }
.promo-code-head strong { font-size: 14px; }
.promo-code-head span:not(.tag) { color: var(--muted); font-size: 12px; }
.promo-code-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.promo-redemptions { display: grid; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #27463b; }
.promo-redemption { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.promo-redemption > div { display: grid; gap: 3px; min-width: 0; }
.promo-redemption strong { font-size: 13px; }
.promo-redemption span, .promo-redemption time { color: var(--muted); font-size: 12px; }
.promo-redemption time { white-space: nowrap; font-family: var(--mono); }
.promo-empty { margin: 0; font-size: 13px; }

@media (max-width: 1280px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-layout, .feedback-layout { grid-template-columns: minmax(0, 1fr); }
  .tiles.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-form button { justify-self: start; }
}
@media (max-width: 1000px) {
  .grid-main, .grid-half { grid-template-columns: minmax(0, 1fr); }
  .tiles.four, .tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-line { grid-template-columns: minmax(0, 1fr) 150px 70px; }
  .user-line > :nth-child(3), .user-line > :nth-child(4), .user-line > :nth-child(5), .user-line > :nth-child(7) { display: none; }
}
@media (max-width: 860px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-group { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-head { display: none; }
  .sidebar-foot { margin: 0; padding: 0; border: 0; width: 100%; grid-template-columns: 1fr auto; align-items: center; }
  .content { padding: 22px 16px 48px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-box, .search-box input { width: 100%; }
  .promo-form { grid-template-columns: 1fr; }
  .promo-code-head, .promo-redemption { flex-direction: column; align-items: flex-start; }
  .promo-code-actions { justify-content: flex-start; }
}
@media (max-width: 860px) {
  .feed-line { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .feed-line.head { display: none; }
  .feed-line > .outcome { grid-column: 2; grid-row: 1; justify-self: end; }
  .feed-line > .feed-account, .feed-line > .feed-tool, .feed-line > .feed-query { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .group-line { grid-template-columns: minmax(0, 1fr) 44px 100px; }
  /* The cause is the one thing a row must show whole, so on a phone it wraps. */
  .group-cause strong { white-space: normal; overflow-wrap: anywhere; }
  .group-line > :nth-child(2), .group-line > :nth-child(4), .group-line > :nth-child(5), .group-line > :nth-child(6) { display: none; }
  .detail-panel.inline { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 18px 19px; }
  .detail-panel.inline .detail-connections { padding-top: 14px; border-top: 1px solid #173a2e; }
}
.pill.suspended { background: var(--coral); color: #2a0d08; }
/* Outlined, not filled: it says the console leaves the account out, not anything about the account. */
.pill.uncounted { padding: 2px 8px; border: 1px dashed var(--muted); color: var(--muted); }
.account-notice { margin: 0 0 16px; }
/* The head is a grid, which would stretch each pill across it. */
.detail-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-switches { display: grid; gap: 12px; margin-top: 16px; }
.feature-switch { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: #09231b; }
.feature-switch p { margin: 0; }
.feature-switch-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.feature-switch-head > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feature-switch-unavailable { color: var(--amber); }
.feature-switch-changes { display: grid; gap: 10px; }
.feature-switch button[disabled] { cursor: not-allowed; }