/* Command Center: Master Control's wall view. Dark only, like the rest of the panel. Sizes are in em off one base that
   grows with the screen, so the same layout reads from across a room at 1080p and at 4K. */
.cc {
  --cc-bg: #02050b; --cc-panel: rgba(9, 17, 31, .86); --cc-panel2: rgba(5, 10, 20, .9); --cc-line: rgba(110, 170, 255, .16); --cc-line2: rgba(110, 170, 255, .3);
  --cc-ink: #eaf3ff; --cc-dim: #93a6c2; --cc-faint: #55667f; --cc-accent: #3ee0ff; --cc-blue: #4c8dff;
  --cc-good: #34d399; --cc-warn: #fbbf24; --cc-serious: #fb923c; --cc-bad: #f87171; --cc-info: #7aa7ff;
  --cc-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --cc-gap: .8em;
  position: relative; isolation: isolate; container: cc / inline-size; display: flex; flex-direction: column; gap: var(--cc-gap);
  min-height: calc(100vh - 32px); padding: var(--cc-gap); border-radius: 22px; overflow: hidden;
  font-size: clamp(12px, .68vw, 28px); color: var(--cc-ink); background: var(--cc-bg); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--cc-line), 0 30px 80px rgba(0, 0, 0, .5);
}
.cc * { min-width: 0; }
.cc [hidden] { display: none !important; }
.cc button { font: inherit; }
.cc button:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.cc-lab { display: block; font-size: .78em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-quiet { color: var(--cc-faint); font-size: .92em; }
.cc code { font: .9em var(--cc-mono); color: var(--cc-dim); word-break: normal; }
.cc em { font-style: normal; font-family: var(--cc-mono); color: var(--cc-ink); }

/* Background: a slow drifting grid, a vignette, scanlines and a sweep. Transforms only, so it costs the GPU almost nothing. */
.cc-bg, .cc-scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cc-bg { background: radial-gradient(60% 50% at 20% 0%, rgba(30, 90, 200, .22), transparent 70%), radial-gradient(50% 45% at 100% 100%, rgba(90, 40, 170, .18), transparent 70%); }
.cc-bg::before { content: ""; position: absolute; inset: -4em; background-image: linear-gradient(rgba(62, 224, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 224, 255, .055) 1px, transparent 1px); background-size: 4em 4em; animation: cc-drift 40s linear infinite; will-change: transform; }
.cc-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .6)); }
.cc-scan::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
.cc-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(62, 224, 255, .045), transparent); animation: cc-sweep 9s linear infinite; will-change: transform; }
@keyframes cc-drift { to { transform: translate(4em, 4em); } }
@keyframes cc-sweep { from { transform: translateY(-100%); } to { transform: translateY(560%); } }

/* Header */
.cc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2em; padding: .7em 1.1em; border: 1px solid var(--cc-line); border-radius: 14px; background: linear-gradient(180deg, rgba(14, 26, 46, .9), rgba(6, 12, 24, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.cc-brand { display: grid; line-height: 1.05; }
.cc-brand b { font-size: 1.55em; font-weight: 800; letter-spacing: .22em; background: linear-gradient(90deg, #fff, var(--cc-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-brand span { font: 600 .74em var(--cc-mono); letter-spacing: .34em; color: var(--cc-accent); text-shadow: 0 0 12px rgba(62, 224, 255, .6); }
.cc-status { display: flex; align-items: center; gap: .9em; flex: 1 1 14em; }
.cc-status > div { display: grid; }
.cc-word { font: 800 1.7em var(--cc-mono); letter-spacing: .14em; color: var(--h, var(--cc-dim)); text-shadow: 0 0 18px var(--h, transparent); transition: color .6s; }
.cc-why { color: var(--cc-dim); font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc[data-health="ok"] { --h: var(--cc-good); } .cc[data-health="warn"] { --h: var(--cc-warn); } .cc[data-health="bad"] { --h: var(--cc-bad); }
.cc-orb { position: relative; flex: none; width: 2.6em; height: 2.6em; }
.cc-orb i { position: absolute; inset: 0; border-radius: 50%; }
.cc-orb i:nth-child(1) { inset: 28%; background: var(--h, var(--cc-faint)); box-shadow: 0 0 1.2em var(--h, transparent), 0 0 .3em var(--h, transparent); transition: background .6s; }
.cc-orb i:nth-child(2) { border: 2px solid var(--h, var(--cc-faint)); opacity: .5; animation: cc-ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.cc-orb i:nth-child(3) { border: 1px dashed var(--h, var(--cc-faint)); opacity: .35; animation: cc-spin 12s linear infinite; }
.cc[data-health="bad"] .cc-orb i:nth-child(2) { animation-duration: 1s; }
@keyframes cc-ping { from { transform: scale(.55); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-lights { display: flex; flex-wrap: wrap; gap: .45em; }
.cc-light { display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em; border: 1px solid var(--cc-line); border-radius: 99px; font-size: .78em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-dim); }
.cc-light i { width: .6em; height: .6em; border-radius: 50%; background: var(--cc-faint); }
.cc-light.ok i { background: var(--cc-good); box-shadow: 0 0 .7em var(--cc-good); } .cc-light.warn i { background: var(--cc-warn); box-shadow: 0 0 .7em var(--cc-warn); } .cc-light.bad i { background: var(--cc-bad); box-shadow: 0 0 .7em var(--cc-bad); animation: cc-blink 1s steps(2) infinite; }
.cc-light.bad { color: var(--cc-bad); border-color: rgba(248, 113, 113, .5); }
@keyframes cc-blink { 50% { opacity: .25; } }
.cc-time { display: grid; grid-template-columns: auto auto; align-items: end; gap: .2em 1.4em; }
.cc-time > div { display: grid; }
.cc-clock { font: 700 1.65em var(--cc-mono); letter-spacing: .04em; color: #fff; text-shadow: 0 0 14px rgba(62, 224, 255, .45); }
.cc-date { grid-column: 1 / -1; font-size: .78em; color: var(--cc-faint); letter-spacing: .06em; }
.cc-ctl { display: grid; gap: .5em; justify-items: end; margin-left: auto; }
.cc-tags, .cc-btns { display: flex; flex-wrap: wrap; gap: .4em; justify-content: flex-end; }
.cc-tag { padding: .2em .6em; border: 1px solid var(--cc-line2); border-radius: 6px; font: 600 .78em var(--cc-mono); letter-spacing: .08em; color: var(--cc-accent); }
.cc-ver { color: var(--cc-dim); border-color: var(--cc-line); }
.cc-awake { color: var(--cc-good); border-color: rgba(52, 211, 153, .4); }
.cc-sync { display: inline-flex; align-items: center; gap: .4em; font: 600 .78em var(--cc-mono); letter-spacing: .08em; color: var(--cc-dim); }
.cc-sync i { width: .55em; height: .55em; border-radius: 50%; background: var(--cc-good); box-shadow: 0 0 .6em var(--cc-good); animation: cc-blink 2s steps(2) infinite; }
.cc-sync.stale { color: var(--cc-warn); } .cc-sync.stale i { background: var(--cc-warn); box-shadow: 0 0 .6em var(--cc-warn); }
.cc-btn { min-height: 2.3em; padding: 0 1em; border: 1px solid var(--cc-line2); border-radius: 8px; background: rgba(62, 224, 255, .06); color: var(--cc-ink); font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background .2s, border-color .2s; }
.cc-btn:hover { background: rgba(62, 224, 255, .14); border-color: var(--cc-accent); }
.cc-btn.cc-primary { background: linear-gradient(180deg, rgba(62, 224, 255, .25), rgba(76, 141, 255, .2)); border-color: rgba(62, 224, 255, .6); box-shadow: 0 0 1.2em rgba(62, 224, 255, .18); }

/* KPI strip */
.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: var(--cc-gap); }
.cc-kpi { position: relative; padding: .7em 1em .75em; border: 1px solid var(--cc-line); border-radius: 12px; background: linear-gradient(180deg, rgba(16, 30, 54, .82), rgba(6, 12, 24, .86)); overflow: hidden; }
.cc-kpi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cc-accent), transparent); opacity: .55; }
.cc-kpi .cc-num { font-size: 2.55em; }

/* Numbers */
.cc-big { display: grid; align-content: start; gap: .1em; }
.cc-big small { color: var(--cc-faint); font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-valrow { display: flex; align-items: baseline; gap: .3em; }
.cc-valrow em { color: var(--cc-dim); font-size: .95em; }
.cc-num { font: 700 1.9em/1.08 var(--cc-mono); letter-spacing: -.02em; color: #fff; text-shadow: 0 0 .5em rgba(62, 224, 255, .35); transition: color .4s, text-shadow .4s; white-space: nowrap; }
.cc-num.cc-warn { color: var(--cc-warn); text-shadow: 0 0 .6em rgba(251, 191, 36, .5); }
.cc-num.cc-bad { color: var(--cc-bad); text-shadow: 0 0 .7em rgba(248, 113, 113, .6); }
.cc-bump { animation: cc-bump .9s ease-out; }
@keyframes cc-bump { from { text-shadow: 0 0 1.2em var(--cc-accent), 0 0 .3em #fff; } }

/* Panels */
.cc-grid { display: grid; gap: var(--cc-gap); grid-template-columns: 1fr; grid-auto-flow: row dense; }
.cc-panel { position: relative; display: flex; flex-direction: column; gap: .7em; min-height: 17em; padding: .85em 1em 1em; border: 1px solid var(--cc-line); border-radius: 14px; background: linear-gradient(180deg, var(--cc-panel), var(--cc-panel2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1em 2.5em rgba(0, 0, 0, .35); overflow: hidden; transition: border-color .5s, box-shadow .5s; }
.cc-panel::before, .cc-panel::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border: 2px solid var(--cc-accent); opacity: .55; pointer-events: none; }
.cc-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cc-panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cc-ph { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.cc-ph h2 { display: flex; align-items: center; gap: .55em; font-size: .86em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cc-dim); white-space: nowrap; }
.cc-pip { width: .5em; height: .5em; border-radius: 2px; background: var(--cc-accent); box-shadow: 0 0 .7em var(--cc-accent); }
.cc-meta { font: .8em var(--cc-mono); color: var(--cc-faint); }
.cc-body { display: flex; flex-direction: column; gap: .8em; flex: 1; min-height: 0; transition: opacity .5s, filter .5s; }
.cc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
.cc-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-col { display: grid; gap: .9em; align-content: start; }
.cc-foot { display: flex; flex-wrap: wrap; gap: .3em 1.2em; margin-top: auto; font-size: .86em; color: var(--cc-dim); }
.cc-chip { display: inline-block; padding: .2em .65em; border: 1px solid var(--cc-line2); border-radius: 6px; font: 700 .76em var(--cc-mono); letter-spacing: .1em; color: var(--cc-dim); white-space: nowrap; }
.cc-chip.cc-good { color: var(--cc-good); border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .08); }
.cc-chip.cc-warn { color: var(--cc-warn); border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); }
.cc-chip.cc-bad { color: var(--cc-bad); border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .1); }
.cc-badtext { color: var(--cc-bad); }

/* No signal and waiting */
.cc-nosig { position: absolute; inset: 2.6em 0 0; display: none; place-content: center; justify-items: center; gap: .5em; padding: 1em; text-align: center; background: repeating-linear-gradient(-45deg, rgba(248, 113, 113, .05) 0 10px, transparent 10px 20px); }
.cc-nosig b { font: 800 1.6em var(--cc-mono); letter-spacing: .3em; color: var(--cc-bad); text-shadow: 0 0 1em rgba(248, 113, 113, .6); animation: cc-blink 1.6s steps(2) infinite; }
.cc-lost-why { max-width: 32em; font: .8em var(--cc-mono); color: var(--cc-dim); }
.cc-lost { border-color: rgba(248, 113, 113, .4); }
.cc-lost .cc-nosig { display: grid; }
.cc-lost .cc-body { opacity: .18; filter: grayscale(1); }
.cc-wait .cc-body { opacity: .45; }
.cc-wait .cc-ph::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 30%; background: linear-gradient(90deg, transparent, var(--cc-accent), transparent); animation: cc-load 1.2s linear infinite; }
@keyframes cc-load { from { transform: translateX(-100%); } to { transform: translateX(430%); } }
.cc-alarm { border-color: rgba(248, 113, 113, .55); animation: cc-alarm 2.4s ease-in-out infinite; }
@keyframes cc-alarm { 50% { box-shadow: inset 0 0 2.2em rgba(248, 113, 113, .16), 0 0 1.6em rgba(248, 113, 113, .22); } }

/* Charts */
.cc-chart { display: flex; flex-direction: column; flex: 1; min-height: 7em; }
.cc-plotwrap { position: relative; flex: 1; min-height: 5em; border-bottom: 1px solid var(--cc-line); cursor: crosshair; touch-action: pan-y; }
.cc-plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cc-gl { stroke: rgba(110, 170, 255, .1); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.cc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px currentColor); }
.cc-area { stroke: none; }
.cc-ylab { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; pointer-events: none; font: .76em var(--cc-mono); color: var(--cc-faint); }
.cc-ylab span:last-child { margin-top: auto; margin-bottom: calc(50% - .6em); }
.cc-ylab span { padding: 0 .3em; background: rgba(5, 10, 20, .6); border-radius: 3px; width: max-content; }
.cc-xlab { display: flex; justify-content: space-between; padding-top: .3em; font: .76em var(--cc-mono); color: var(--cc-faint); }
.cc-legend { display: flex; flex-wrap: wrap; gap: .3em 1em; padding-top: .3em; font-size: .82em; color: var(--cc-dim); }
.cc-legend span { display: inline-flex; align-items: center; gap: .4em; }
.cc-legend i { width: .9em; height: .25em; border-radius: 2px; }
.cc-legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-hover { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s; }
.cc-hover.on { opacity: 1; }
.cc-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--cc-accent), transparent); }
.cc-dot { position: absolute; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border: 2px solid var(--cc-bg); border-radius: 50%; }
.cc-tip { position: absolute; top: 0; display: grid; gap: .15em; margin-left: .8em; padding: .5em .7em; border: 1px solid var(--cc-line2); border-radius: 8px; background: rgba(4, 9, 18, .94); font-size: .82em; white-space: nowrap; box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5); }
.cc-tip.cc-flip { transform: translateX(calc(-100% - 1.6em)); }
.cc-tip b { font: 600 .92em var(--cc-mono); color: var(--cc-dim); }
.cc-tip span { display: flex; align-items: center; gap: .4em; color: var(--cc-dim); }
.cc-tip i { width: .55em; height: .55em; border-radius: 50%; }
.cc-segs { display: inline-flex; padding: 2px; border: 1px solid var(--cc-line2); border-radius: 8px; }
.cc-seg { min-height: 1.9em; padding: 0 .8em; border: 0; border-radius: 6px; background: none; color: var(--cc-dim); font: 700 .8em var(--cc-mono); letter-spacing: .08em; cursor: pointer; }
.cc-seg[aria-pressed="true"] { background: rgba(62, 224, 255, .18); color: #fff; box-shadow: 0 0 .9em rgba(62, 224, 255, .25); }

/* Errors list (shown once /v1/ops/errors exists) */
.cc-eslot { display: grid; gap: .3em; }
.cc-elist { display: grid; gap: .2em; padding: 0; list-style: none; font-size: .86em; }
.cc-elist li { display: grid; grid-template-columns: 3.6em 1fr auto; gap: .6em; }
.cc-elist b { font-family: var(--cc-mono); color: var(--cc-bad); }
.cc-elist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--cc-mono); color: var(--cc-dim); }

/* Servers */
.cc-slist { display: grid; gap: .35em; align-content: start; }
.cc-srow { display: grid; grid-template-columns: 7em minmax(4em, 1fr) 3.2em 4.6em 6.4em minmax(0, 11em); align-items: center; gap: .6em; font: .86em var(--cc-mono); color: var(--cc-dim); }
.cc-srow span { white-space: nowrap; }
.cc-srow span:last-child { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meter { height: .5em; border-radius: 99px; background: rgba(110, 170, 255, .1); overflow: hidden; }
.cc-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cc-blue), var(--cc-accent)); box-shadow: 0 0 .7em var(--cc-accent); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.cc-meter.cc-warn i { background: var(--cc-warn); box-shadow: 0 0 .7em var(--cc-warn); } .cc-meter.cc-bad i { background: var(--cc-bad); box-shadow: 0 0 .7em var(--cc-bad); }
.cc-watch { margin-top: auto; font-size: .86em; color: var(--cc-dim); }

/* AI */
.cc-stack { display: flex; gap: 2px; height: 1.1em; border-radius: 5px; overflow: hidden; background: rgba(110, 170, 255, .08); }
.cc-stack i { display: block; min-width: 3px; transition: flex-grow .9s; }
.cc-stack .cc-quiet { padding: 0 .5em; font-size: .8em; line-height: 1.4em; }

/* Encryption */
.cc-encrow { display: grid; grid-template-columns: auto 1fr; gap: 1.2em; align-items: center; flex: 1; }
.cc-ringbox { position: relative; width: 8.5em; aspect-ratio: 1; }
.cc-ringbox > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cc-ringbox .cc-num { font-size: 1.7em; }
.cc-ringbox .cc-lab { font-size: .62em; letter-spacing: .12em; }
.cc-ringbox small { font: .66em var(--cc-mono); color: var(--cc-faint); }
.cc-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-ring-track { fill: none; stroke: rgba(110, 170, 255, .1); stroke-width: 7; }
.cc-ring-arc { fill: none; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 4px #34d399); transition: stroke-dasharray 1.2s cubic-bezier(.2, .7, .2, 1); }

/* Security */
.cc-secbars { display: grid; gap: .28em; }
.cc-sb { display: grid; grid-template-columns: 9.5em 1fr 4em; align-items: center; gap: .6em; font-size: .84em; color: var(--cc-dim); }
.cc-sb em { text-align: right; }
.cc-sbar { height: .45em; border-radius: 99px; background: rgba(110, 170, 255, .08); overflow: hidden; }
.cc-sbar i { display: block; height: 100%; border-radius: 99px; background: var(--sev); box-shadow: 0 0 .6em var(--sev); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.cc-sev-info { --sev: var(--cc-info); } .cc-sev-warn { --sev: var(--cc-warn); } .cc-sev-serious { --sev: var(--cc-serious); } .cc-sev-critical { --sev: var(--cc-bad); }
.cc-feed { flex: 1; min-height: 6em; max-height: 24em; display: flex; flex-direction: column; gap: .25em; margin: 0; padding: 0; list-style: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
.cc-feed li { display: grid; grid-template-columns: 6.2em 6.4em 1fr auto; align-items: center; gap: .6em; padding: .3em .6em; border-left: 3px solid var(--sev, var(--cc-faint)); border-radius: 0 6px 6px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sev, #fff) 12%, transparent), transparent 70%); font-size: .86em; }
.cc-feed li.cc-quiet { display: block; border-left-color: var(--cc-good); background: rgba(52, 211, 153, .06); color: var(--cc-dim); }
.cc-feed time { font-family: var(--cc-mono); color: var(--cc-faint); }
.cc-feed b { font: 700 .82em var(--cc-mono); letter-spacing: .12em; color: var(--sev); }
.cc-feed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-feed .cc-new { animation: cc-in .8s cubic-bezier(.2, .7, .2, 1); }
@keyframes cc-in { from { transform: translateX(-1.5em); opacity: 0; background-color: color-mix(in srgb, var(--sev, #fff) 40%, transparent); } }
.cc-routes { display: grid; gap: .2em; font-size: .84em; }
.cc-routes div { display: flex; justify-content: space-between; gap: 1em; }
.cc-routes code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Funnel */
.cc-funnel { display: grid; gap: .22em; align-content: start; }
.cc-funnel .cc-lab:not(:first-child) { margin-top: .4em; }
.cc-frow { display: grid; grid-template-columns: 7.5em 1fr 4.6em; align-items: center; gap: .6em; font-size: .9em; color: var(--cc-dim); }
.cc-frow .cc-num { font-size: 1.15em; text-align: right; }
.cc-fbar { height: .62em; border-radius: 3px; background: rgba(110, 170, 255, .07); overflow: hidden; }
.cc-fbar i { display: block; height: 100%; border-radius: 3px; transition: width 1s cubic-bezier(.2, .7, .2, 1); }

/* Lawyers */
.cc-checks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .4em; flex: 1; min-height: 4em; }
.cc-chk { display: grid; grid-template-rows: 1fr auto; gap: .25em; text-align: center; }
.cc-chk small { font-size: .66em; letter-spacing: .04em; color: var(--cc-faint); overflow: hidden; text-overflow: ellipsis; }
.cc-cbar { position: relative; border-radius: 4px; background: rgba(110, 170, 255, .07); overflow: hidden; }
.cc-cbar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px; background: linear-gradient(0deg, rgba(52, 211, 153, .35), var(--cc-good)); box-shadow: 0 0 .8em rgba(52, 211, 153, .4); transition: height 1s cubic-bezier(.2, .7, .2, 1); }

/* Support */
.cc-next { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: .5em .7em; border: 1px dashed var(--cc-line2); border-radius: 8px; }
.cc-next .cc-num { font-size: 1.5em; }

/* Launch gate: a tile map of the US */
.cc-gatehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; }
.cc-gatehead .cc-num { font-size: 1.6em; }
.cc-gatehead .cc-maplegend { margin-left: auto; }
.cc-mapbox { display: grid; place-items: center; overflow: hidden; }
.cc-map { max-width: 36em; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 3px; width: 100%; aspect-ratio: 11 / 7; }
.cc-tile { position: relative; display: grid; place-content: center; border-radius: 4px; background: rgba(110, 170, 255, .05); border: 1px solid rgba(110, 170, 255, .1); font: 700 .7em/1 var(--cc-mono); color: var(--cc-faint); transition: background .6s, color .6s, box-shadow .6s; }
.cc-tile span { position: absolute; right: 2px; bottom: 1px; font-size: .78em; color: var(--cc-accent); }
.cc-t-closed { background: rgba(110, 170, 255, .1); color: var(--cc-dim); }
.cc-t-lapsed { background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .5); color: var(--cc-warn); }
.cc-t-open { background: rgba(52, 211, 153, .22); border-color: rgba(52, 211, 153, .7); color: #eafff6; box-shadow: 0 0 .9em rgba(52, 211, 153, .45), inset 0 0 .6em rgba(52, 211, 153, .3); }
.cc-maplegend { display: flex; flex-wrap: wrap; gap: .3em 1em; font-size: .76em; color: var(--cc-faint); }
.cc-maplegend span::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; border-radius: 2px; vertical-align: -.1em; }
.cc-k-open::before { background: rgba(52, 211, 153, .6); } .cc-k-lapsed::before { background: rgba(251, 191, 36, .5); } .cc-k-closed::before { background: rgba(110, 170, 255, .2); } .cc-k-n::before { display: none !important; }
.cc-flags { display: flex; gap: .3em; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cc-flag { flex: none; display: inline-flex; align-items: center; gap: .35em; padding: .15em .5em; border: 1px solid var(--cc-line); border-radius: 5px; font: 600 .72em var(--cc-mono); letter-spacing: .04em; color: var(--cc-faint); white-space: nowrap; }
.cc-flag i { width: .5em; height: .5em; border-radius: 50%; background: var(--cc-faint); }
.cc-flag.on { color: var(--cc-ink); border-color: rgba(52, 211, 153, .4); } .cc-flag.on i { background: var(--cc-good); box-shadow: 0 0 .5em var(--cc-good); }

/* Audit ticker */
.cc-ticker { display: flex; align-items: stretch; border: 1px solid var(--cc-line); border-radius: 12px; background: rgba(4, 9, 18, .9); overflow: hidden; }
.cc-ticker.cc-lost { border-color: rgba(248, 113, 113, .4); } .cc-ticker.cc-lost .cc-tickview { opacity: .25; }
.cc-tickhead { display: flex; align-items: center; gap: .8em; padding: .55em 1em; border-right: 1px solid var(--cc-line); background: rgba(62, 224, 255, .06); }
.cc-tickhead b { font: 800 .86em var(--cc-mono); letter-spacing: .3em; color: var(--cc-accent); }
.cc-tickview { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.cc-track { display: flex; width: max-content; height: 100%; align-items: center; animation: cc-marquee 90s linear infinite; }
.cc-ticker:hover .cc-track { animation-play-state: paused; }
@keyframes cc-marquee { to { transform: translateX(-50%); } }
.cc-ti { display: inline-flex; align-items: baseline; gap: .55em; padding: 0 1.6em; border-right: 1px solid var(--cc-line); white-space: nowrap; font-size: .9em; }
.cc-ti time { font-family: var(--cc-mono); color: var(--cc-faint); }
.cc-ti b { font: 600 1em var(--cc-mono); color: var(--cc-ink); }
.cc-ti em { color: var(--cc-dim); font-size: .85em; text-transform: uppercase; letter-spacing: .1em; }

/* Kiosk: the menu and the panel's own header go, and the Command Center takes the screen. */
body.cc-on main { padding: 0; }
body.cc-on .top { display: none; }
body.cc-kiosk .shell { display: block; padding: 0; }
body.cc-kiosk .side { display: none; }
body.cc-kiosk .cc { min-height: 100vh; border-radius: 0; box-shadow: none; }
body.cc-idle, body.cc-idle * { cursor: none !important; }
.cc-exit { position: fixed; bottom: 4.2em; right: 1.2em; z-index: 5; display: none; padding: .4em .9em; border: 1px solid var(--cc-line2); border-radius: 8px; background: rgba(4, 9, 18, .9); color: var(--cc-dim); cursor: pointer; opacity: 0; transition: opacity .3s; }
body.cc-kiosk .cc-exit { display: block; }
body.cc-kiosk:not(.cc-idle) .cc:hover .cc-exit { opacity: 1; }
body.cc-kiosk .cc-btns { display: none; }

/* Layouts by the Command Center's own width: one column on a phone, two on a laptop, the full wall above. */
@container cc (min-width: 760px) {
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cc (min-width: 760px) and (max-width: 1399px) {
  .cc-a-traffic { grid-column: span 2; }
  .cc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-grid { align-items: start; }
}
@container cc (min-width: 1400px) {
  .cc-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "traffic traffic traffic traffic latency latency errors errors security security security security"
      "servers servers servers servers ai ai ai ai security security security security"
      "enc enc funnel funnel funnel lawyers lawyers support support launch launch launch";
  }
  .cc-a-traffic { grid-area: traffic; } .cc-a-latency { grid-area: latency; } .cc-a-errors { grid-area: errors; } .cc-a-security { grid-area: security; }
  .cc-a-servers { grid-area: servers; } .cc-a-ai { grid-area: ai; } .cc-a-enc { grid-area: enc; } .cc-a-funnel { grid-area: funnel; }
  .cc-a-lawyers { grid-area: lawyers; } .cc-a-support { grid-area: support; } .cc-a-launch { grid-area: launch; }
  .cc-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cc-a-latency .cc-row, .cc-a-errors .cc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-a-enc .cc-encrow { grid-template-columns: 1fr; justify-items: center; }
  .cc-a-enc .cc-col { width: 100%; grid-template-columns: 1fr 1fr; }
  .cc-a-lawyers .cc-stats3, .cc-a-support .cc-stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* On a screen tall enough, the wall fits exactly, with no scrolling. */
  @media (min-height: 760px) {
    .cc-grid { flex: 1; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
    .cc-panel { min-height: 0; }
    /* The map takes whatever room the panel has left, at its own shape. */
    .cc-mapbox { flex: 1 1 0; min-height: 0; container-type: size; }
    .cc-map { width: min(100cqw, 157cqh); }
    .cc-tile { min-height: 0; overflow: hidden; font-size: min(.7em, 5cqh); }
    .cc-a-enc .cc-ringbox { width: 6.2em; }
  }
}
/* The same width as the 1400px layout above, from the viewport: the menu and gaps take 288px when it shows. */
@media (min-width: 1688px) and (min-height: 760px) { body.cc-on .cc { height: calc(100vh - 32px); min-height: 0; } }
@media (min-width: 1400px) and (min-height: 760px) { body.cc-kiosk .cc { height: 100vh; min-height: 0; } }
@container cc (max-width: 759px) {
  .cc-head { gap: .8em; }
  .cc-ctl { justify-items: start; margin-left: 0; }
  .cc-tags, .cc-btns { justify-content: flex-start; }
  .cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-kpi .cc-num { font-size: 2em; }
  .cc-srow { grid-template-columns: 6em 1fr 3em 4.4em; }
  .cc-srow span:nth-child(5), .cc-srow span:nth-child(6) { display: none; }
  .cc-feed { flex: none; max-height: 21em; }
  .cc-feed li { grid-template-columns: 5.4em 1fr auto; }
  .cc-feed li b { display: none; }
  .cc-legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-sb { grid-template-columns: 8em 1fr 3em; }
}
@media (max-width: 820px) { .cc { min-height: 0; border-radius: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .cc *, .cc *::before, .cc *::after { animation: none !important; transition: none !important; }
  .cc-track { flex-wrap: wrap; width: auto; }
  .cc-track [aria-hidden="true"] { display: none; }
}
.cc-aifeed li { grid-template-columns: 6.2em 9.5em 1fr auto; }
.cc-aifeed b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container cc (max-width: 759px) { .cc-aifeed li { grid-template-columns: 5.4em 1fr auto; } }
body.cc-kiosk .mbar, body.cc-kiosk .scrim { display: none; }