/* TTA Command Center: visual system. Every colour, space, radius and type
   size is a token on .cc; components use only the tokens. */
#dash-root { --dash-gutter: 0; }

.cc {
  --bg: #14141F; --side: #1D1D2B; --card: #20202E; --raise: #282838; --line: #323241;
  --fg: #E7E7EF; --fg2: #A3A3B4; --mute: #858599;
  --blue: #48A6DF; --green: #4DB58B; --red: #E06B72; --amber: #D5AF4B; --violet: #B968DC;
  --blue-bg: rgba(72, 166, 223, .14); --green-bg: rgba(77, 181, 139, .14); --red-bg: rgba(224, 107, 114, .14); --amber-bg: rgba(213, 175, 75, .15); --grey-bg: rgba(163, 163, 180, .12);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --r: 8px; --r-sm: 6px; --r-xs: 4px;
  --f-title: 22px; --f-card: 14px; --f-metric: 28px; --f-body: 13px; --f-small: 12px; --f-label: 11px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fast: 140ms;
  container-type: inline-size;
  position: relative;
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: var(--f-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.cc *, .cc *::before, .cc *::after { box-sizing: border-box; }
.cc :is(h1, h2, h3, p) { margin: 0; }
.cc button { font: inherit; color: inherit; }
.cc :is(button, input, select, a):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-xs); }
.cc .num, .cc td, .cc .cc-val, .cc .cc-badge, .cc .cc-small { font-variant-numeric: tabular-nums; }
.cc svg { display: block; overflow: visible; }

/* ------------------------------------------------------------ top bar */
.cc-top { height: 58px; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5); background: var(--side); border-bottom: 1px solid var(--line); }
.cc-brand { display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: var(--f-card); white-space: nowrap; }
.cc-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--blue); color: #0E1A24; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.cc-brand small { color: var(--mute); font-weight: 400; font-size: var(--f-small); margin-left: var(--s1); }
.cc-top-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.cc-fresh { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-small); color: var(--fg2); white-space: nowrap; }
.cc-fresh i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.cc-fresh.live i { background: var(--green); }
.cc-fresh.partial i { background: var(--amber); }
.cc-fresh.bad i { background: var(--red); }
.cc-menu { display: none; }

/* ------------------------------------------------------------ buttons, inputs */
.cc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s3); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: var(--f-small); cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.cc-btn:hover { background: var(--raise); }
.cc-btn.primary { background: var(--blue); border-color: var(--blue); color: #0E1A24; font-weight: 600; }
.cc-btn.primary:hover { filter: brightness(1.08); }
.cc-btn.ghost { background: transparent; }
.cc-btn svg { width: 15px; height: 15px; }
.cc-btn[disabled] { opacity: .5; cursor: default; }
.cc-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; cursor: pointer; }
.cc-icon-btn:hover { background: var(--raise); }
.cc-icon-btn svg { width: 18px; height: 18px; }
.cc-input, .cc-date, .cc-num-in { height: 32px; padding: 0 var(--s2); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: var(--f-small); color-scheme: dark; transition: border-color var(--fast); }
.cc-input:hover, .cc-date:hover, .cc-num-in:hover { border-color: #44445A; }
.cc-input:focus, .cc-date:focus, .cc-num-in:focus { border-color: var(--blue); outline: none; }
.cc-num-in { width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.cc-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.cc-seg button { height: 26px; padding: 0 var(--s2); border: 0; border-radius: var(--r-xs); background: transparent; color: var(--fg2); font-size: var(--f-small); cursor: pointer; white-space: nowrap; transition: background var(--fast), color var(--fast); }
.cc-seg button:hover { color: var(--fg); background: var(--raise); }
.cc-seg button[aria-pressed="true"] { background: var(--blue-bg); color: var(--blue); }
.cc-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-small); color: var(--fg2); cursor: pointer; }
.cc-check input { accent-color: var(--blue); }

/* ------------------------------------------------------------ shell */
.cc-body { position: relative; display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: calc(100vh - 58px); background: linear-gradient(to right, var(--side) 227px, var(--line) 227px, var(--line) 228px, transparent 228px); }
.cc-side { position: sticky; top: 0; align-self: start; height: calc(100vh - 58px); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: 2px; }
.cc-nav-label { font-size: var(--f-label); color: var(--mute); padding: var(--s3) var(--s3) var(--s1); }
.cc-nav-label:first-child { padding-top: 0; }
.cc-nav { display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg2); font-size: var(--f-body); text-align: left; cursor: pointer; transition: background var(--fast), color var(--fast); }
.cc-nav svg { width: 18px; height: 18px; flex: none; color: var(--mute); transition: color var(--fast); }
.cc-nav:hover { background: var(--raise); color: var(--fg); }
.cc-nav[aria-current="page"] { background: var(--blue-bg); color: var(--blue); }
.cc-nav[aria-current="page"] svg { color: var(--blue); }
.cc-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red-bg); color: var(--red); font-size: var(--f-label); font-weight: 600; display: inline-grid; place-items: center; }
.cc-count:empty { display: none; }
.cc-side-foot { margin-top: auto; padding: var(--s3); font-size: var(--f-label); color: var(--mute); line-height: 1.5; }
.cc-scrim { display: none; }
.cc-main { min-width: 0; padding: var(--s6); }

/* ------------------------------------------------------------ page head */
.cc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s5); }
.cc-head h1 { font-size: var(--f-title); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.cc-context { margin-top: var(--s1); font-size: var(--f-small); color: var(--fg2); }
.cc-context b { color: var(--fg); font-weight: 500; }
.cc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cc-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-size: var(--f-small); }
.cc-banner { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); margin-bottom: var(--s4); border-radius: var(--r-sm); background: var(--amber-bg); color: var(--amber); font-size: var(--f-small); }
.cc-banner[hidden] { display: none; }

/* ------------------------------------------------------------ grid, cards */
.cc-page[hidden] { display: none; }
.cc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.cc-grid > * { min-width: 0; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }
.stretch { align-self: stretch; }
.cc-card { background: var(--card); border-radius: var(--r); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.cc-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s4); }
.cc-card h2 { font-size: var(--f-card); font-weight: 600; }
.cc-note { margin-top: 2px; font-size: var(--f-small); color: var(--mute); }
.cc-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0 calc(var(--s1) * -1); }
.cc-section-title h2 { font-size: var(--f-card); font-weight: 600; }
.cc-section-title p { font-size: var(--f-small); color: var(--mute); }

/* ------------------------------------------------------------ metric cards */
.cc-metrics { display: grid; gap: var(--s4); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.cc-metrics.c2 { --cols: 2; } .cc-metrics.c4 { --cols: 4; } .cc-metrics.c5 { --cols: 5; }
.cc-metric { position: relative; background: var(--card); border-radius: var(--r); padding: var(--s4) var(--s5) var(--s3); display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: background var(--fast); }
.cc-metric:hover { background: #232333; }
.cc-metric-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 38px; }
.cc-val { font-size: var(--f-metric); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-metrics.compact .cc-val { font-size: 22px; }
.cc-metric-head { display: flex; align-items: center; gap: 6px; color: var(--fg2); font-size: var(--f-small); }
.cc-info { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--mute); font-size: 10px; font-weight: 600; cursor: pointer; transition: color var(--fast), border-color var(--fast); flex: none; }
.cc-info:hover { color: var(--fg); border-color: var(--fg2); }
.cc-metric-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto; font-size: var(--f-label); color: var(--mute); }
.cc-go { border: 0; background: none; padding: 2px 0; color: var(--blue); font-size: var(--f-label); cursor: pointer; white-space: nowrap; }
.cc-go:hover { text-decoration: underline; }
.cc-spark { height: 30px; }
.cc-badge { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px; border-radius: var(--r-xs); background: var(--grey-bg); color: var(--fg2); font-size: var(--f-label); font-weight: 600; white-space: nowrap; flex: none; }
.cc-badge.good { background: var(--green-bg); color: var(--green); }
.cc-badge.bad { background: var(--red-bg); color: var(--red); }
.cc-badge:empty { visibility: hidden; }
.cc-small { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

/* ------------------------------------------------------------ status pills */
.cc-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--f-label); font-weight: 600; background: var(--grey-bg); color: var(--fg2); white-space: nowrap; }
.cc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cc-pill.green { background: var(--green-bg); color: var(--green); }
.cc-pill.red { background: var(--red-bg); color: var(--red); }
.cc-pill.amber { background: var(--amber-bg); color: var(--amber); }
.cc-pill.blue { background: var(--blue-bg); color: var(--blue); }

/* ------------------------------------------------------------ charts */
.cc-chart { position: relative; min-height: 240px; }
.cc-chart.tall { min-height: 280px; }
.cc-chart.short { min-height: 200px; }
.cc-chart .grid line { stroke: var(--line); stroke-dasharray: 3 4; }
.cc-chart .axis text, .cc-chart text.axis { fill: var(--mute); font-size: 11px; }
.cc-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--f-small); color: var(--fg2); }
.cc-legend span { display: inline-flex; align-items: center; gap: 6px; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.cc-legend i.line { height: 2px; border-radius: 1px; }
.cc-legend i.dash { height: 0; border-top: 2px dashed currentColor; background: none !important; }
.cc-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 9rem; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: #2B2B3C; border: 1px solid #3C3C4E; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: var(--f-small); opacity: 0; transform: translateY(2px); transition: opacity var(--fast), transform var(--fast); }
.cc-tip.on { opacity: 1; transform: none; }
.cc-tip .t { color: var(--fg2); margin-bottom: 4px; }
.cc-tip .v { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.cc-tip .v i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cc-tip .v b { margin-left: auto; padding-left: var(--s3); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-fail, .cc-empty { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: inherit; height: 100%; padding: var(--s4); color: var(--mute); font-size: var(--f-small); text-align: center; }
.cc-fail::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* ------------------------------------------------------------ tables */
.cc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cc-tablebox { overflow: auto; max-height: 30rem; margin: 0 calc(var(--s5) * -1) calc(var(--s3) * -1); padding: 0 var(--s5); }
.cc-tablebox.short { max-height: 23rem; }
.cc-table td.trunc { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-table { width: 100%; border-collapse: collapse; font-size: var(--f-small); }
.cc-table th { position: sticky; top: 0; z-index: 1; background: var(--card); height: 36px; padding: 0 var(--s3); text-align: right; font-weight: 500; color: var(--mute); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cc-table th:first-child, .cc-table td:first-child { padding-left: 0; text-align: left; }
.cc-table th:last-child, .cc-table td:last-child { padding-right: 0; }
.cc-table th.l, .cc-table td.l { text-align: left; }
.cc-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cc-table th button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.cc-table th[aria-sort="ascending"] button::after { content: "↑"; color: var(--blue); }
.cc-table th[aria-sort="descending"] button::after { content: "↓"; color: var(--blue); }
.cc-table td { height: 46px; padding: 0 var(--s3); text-align: right; border-bottom: 1px solid rgba(50, 50, 65, .7); white-space: nowrap; color: var(--fg); }
.cc-table tbody tr { transition: background var(--fast); }
.cc-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.cc-table td .sub { display: block; font-size: var(--f-label); color: var(--mute); line-height: 1.3; }
.cc-table td.name { white-space: normal; min-width: 11rem; max-width: 20rem; }
.cc-table td.name b { font-weight: 500; display: block; line-height: 1.3; }
.cc-table td.muted { color: var(--fg2); }
#fc-table th:not(.l), #fc-scenario th:not(.l) { width: 30%; }
/* Wide breakdown tables: headers may take two lines so the numbers fit without scrolling on desktop. */
.cc-table.tight th { white-space: normal; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; vertical-align: bottom; }
.cc-table.tight th button { display: inline; }
.cc-table.tight td.name { min-width: 8.5rem; }
.cc-table.tight td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 8px 0 8px -8px rgba(0, 0, 0, .5); }
.cc-table.tight th:first-child { left: 0; z-index: 2; }
.cc-table.tight tbody tr:hover td:first-child { background: #262633; }
.cc-table td.wrap { white-space: normal; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
.cc-good { color: var(--green) !important; }
.cc-bad { color: var(--red) !important; }
.cc-cellbar { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.cc-cellbar i { display: block; height: 5px; border-radius: 3px; background: var(--blue); opacity: .7; }

/* ------------------------------------------------------------ funnel */
.cc-funnel { display: grid; gap: var(--s3); min-height: 180px; align-content: start; }
.cc-step { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: var(--s3); align-items: center; font-size: var(--f-small); }
.cc-step .name { color: var(--fg2); }
.cc-step .bar { position: relative; height: 28px; border-radius: var(--r-xs); background: var(--bg); overflow: hidden; }
.cc-step .fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-xs); background: rgba(72, 166, 223, .32); }
.cc-step .fill.last { background: var(--blue); }
.cc-step .lab { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s2); font-variant-numeric: tabular-nums; }
.cc-step .rate { color: var(--fg2); }
.cc-step .rate.worst { color: var(--red); font-weight: 600; }

/* ------------------------------------------------------------ alerts */
.cc-alerts { display: flex; flex-direction: column; gap: var(--s2); }
.cc-alert { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) 0; border-radius: var(--r-sm); background: var(--bg); }
.cc-alert .rail { border-radius: 4px 0 0 4px; background: var(--mute); }
.cc-alert.critical .rail { background: var(--red); }
.cc-alert.warn .rail { background: var(--amber); }
.cc-alert.info .rail { background: var(--blue); }
.cc-alert.ok .rail { background: var(--green); }
.cc-alert-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cc-alert h3 { font-size: var(--f-body); font-weight: 600; }
.cc-alert p { margin-top: 4px; font-size: var(--f-small); color: var(--fg2); }
.cc-alert p.act { color: var(--fg); }
.cc-alert p.act::before { content: "Suggested: "; color: var(--mute); }
.cc-alert .cc-go { margin-top: 4px; }

/* ------------------------------------------------------------ forecast */
.cc-form { display: grid; gap: var(--s3); }
.cc-field { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid rgba(50, 50, 65, .7); }
.cc-field:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-field label, .cc-field .k { font-size: var(--f-small); color: var(--fg2); }
.cc-field .k small, .cc-field label small { display: block; color: var(--mute); font-size: var(--f-label); }
.cc-field .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-field .edited { color: var(--amber); }
.cc-prefix { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); }
.cc-table tr.total td { font-weight: 600; border-top: 1px solid var(--line); }
.cc-table tr.after td { color: var(--fg); }
.cc-table td .diff { display: block; font-size: var(--f-label); font-weight: 500; }

/* ------------------------------------------------------------ definitions, quality */
.cc-defs td { white-space: normal; vertical-align: top; padding-top: var(--s3); padding-bottom: var(--s3); height: auto; text-align: left; line-height: 1.5; }
.cc-defs td:first-child { font-weight: 600; min-width: 9rem; }
.cc-defs td.f { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--f-label); color: var(--fg2); min-width: 14rem; }
.cc-defs th { text-align: left; }
.cc-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; font-size: var(--f-small); color: var(--fg2); }
.cc-list b { color: var(--fg); font-weight: 600; }
.cc-sources { display: grid; gap: var(--s2); }
.cc-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid rgba(50, 50, 65, .7); font-size: var(--f-small); }
.cc-source:last-child { border-bottom: 0; }
.cc-source span { color: var(--fg2); }

/* ------------------------------------------------------------ popover */
.cc-pop { position: absolute; top: 0; left: 0; visibility: hidden; z-index: 20; width: min(22rem, calc(100% - 24px)); padding: var(--s4); border-radius: var(--r); background: #2B2B3C; border: 1px solid #3C3C4E; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); font-size: var(--f-small); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--fast), transform var(--fast), visibility 0s linear var(--fast); }
.cc-pop.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity var(--fast), transform var(--fast); }
.cc-pop h3 { font-size: var(--f-body); font-weight: 600; margin-bottom: 6px; }
.cc-pop p { color: var(--fg2); margin-top: 6px; }
.cc-pop dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s3); margin: var(--s3) 0 0; }
.cc-pop dt { color: var(--mute); }
.cc-pop dd { margin: 0; color: var(--fg); }
.cc-pop code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--f-label); color: var(--fg); }

/* ------------------------------------------------------------ states */
.cc [data-dash-source-state=empty] { color: transparent; }
.cc [data-dash-source-state=refreshing] { opacity: .55; transition: opacity var(--fast); }
.cc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ responsive: by the
   width the dashboard actually has, since Sources or a chat can sit beside it */
@container (max-width: 1180px) {
  .cc-grid > .span-5, .cc-grid > .span-7, .cc-grid > .span-4, .cc-grid > .span-8 { grid-column: 1 / -1; }
  .cc-metrics.ov { --cols: 3; }
  .cc-metrics.c5 { --cols: 3; }
}
@container (max-width: 940px) {
  .cc-body { grid-template-columns: minmax(0, 1fr); background: none; }
  .cc-menu { display: grid; }
  .cc-side { position: absolute; z-index: 30; top: 0; left: 0; bottom: 0; height: auto; min-height: 100%; width: 248px; transform: translateX(-102%); transition: transform 180ms ease; box-shadow: 12px 0 32px rgba(0, 0, 0, .4); }
  .cc-side.open { transform: none; }
  .cc-scrim.on { display: block; position: absolute; inset: 0; z-index: 25; background: rgba(8, 8, 14, .55); }
  .cc-grid > .span-6, .cc-grid > .span-3 { grid-column: 1 / -1; }
  .cc-metrics.ov, .cc-metrics.c4, .cc-metrics.c5 { --cols: 2; }
}
@container (max-width: 560px) {
  .cc-main { padding: var(--s4); }
  .cc-top { padding: 0 var(--s4); }
  .cc-brand small { display: none; }
  .cc-fresh span { display: none; }
  .cc-head { margin-bottom: var(--s4); }
  .cc-card { padding: var(--s4); }
  .cc-tablebox { margin: 0 calc(var(--s4) * -1) calc(var(--s3) * -1); padding: 0 var(--s4); }
  .cc-metric { padding: var(--s3) var(--s4); }
  .cc-metric-row { flex-wrap: wrap; align-items: flex-start; gap: 4px var(--s2); min-height: 0; }
  .cc-val, .cc-metrics.compact .cc-val { font-size: 22px; overflow: visible; text-overflow: clip; }
  .cc-metric-foot { flex-wrap: wrap; gap: 2px var(--s2); }
  .cc-step { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@container (max-width: 380px) {
  .cc-metrics.ov, .cc-metrics.c5, .cc-metrics.video { --cols: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cc *, .cc *::before, .cc *::after { transition: none !important; animation: none !important; }
}

/* ===================================================== hosted version (27 Oct 2026) */
html, body { margin: 0; background: #14141F; }
.cc-tablebox.free { max-height: none; }
.cc-pill.violet { background: rgba(185, 104, 220, .15); color: var(--violet); }
.cc-settings { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: end; column-gap: var(--s6); }
.cc-settings .cc-tools { grid-column: 1 / -1; }

.cc-signin, .cc-signin * { box-sizing: border-box; }
.cc-signin { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: #14141F;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #E7E7EF; }
.cc-signin[hidden] { display: none; }
.cc-signin-card { width: min(100%, 360px); display: grid; gap: 10px; padding: 28px 24px; border-radius: 10px; background: #20202E; border: 1px solid #323241; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.cc-signin-card .cc-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.cc-signin-card .cc-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #48A6DF; color: #0E1A24; font-size: 11px; font-weight: 700; }
.cc-signin-card h1 { margin: 0; font-size: 20px; font-weight: 600; }
.cc-signin-card .cc-note { margin: 0 0 8px; color: #A3A3B4; font-size: 13px; }
.cc-signin-card label { font-size: 12px; color: #A3A3B4; }
.cc-signin-card .cc-input { height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid #323241; background: #14141F; color: #E7E7EF; font-size: 14px; color-scheme: dark; }
.cc-signin-card .cc-input:focus { border-color: #48A6DF; outline: 2px solid rgba(72, 166, 223, .35); outline-offset: 1px; }
.cc-signin-card .cc-btn { height: 40px; justify-content: center; margin-top: 6px; border-radius: 6px; border: 1px solid #48A6DF; background: #48A6DF; color: #0E1A24; font-weight: 600; font-size: 14px; cursor: pointer; }
.cc-signin-card .cc-btn:focus-visible { outline: 2px solid #E7E7EF; outline-offset: 2px; }
.cc-signin-card .cc-btn[disabled] { opacity: .6; cursor: default; }
.cc-signin-error { min-height: 1.4em; margin: 2px 0 0; font-size: 13px; color: #E06B72; }

/* Narrow screens: the top bar's buttons keep their icons; the words stay for
   screen readers. */
@container (max-width: 560px) {
  .cc-top .cc-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cc-top .cc-btn { padding: 0 var(--s2); }
  .cc-top-right { gap: var(--s2); }
}