/* Shared DataCrawl visual primitives. Keep the public product surface and
   authenticated operations console on one accessible, low-contrast system. */
:root {
  color-scheme: light;
  --dc-bg: #edf1ee;
  --dc-bg-raised: #e4ebe6;
  --dc-panel: #ffffff;
  --dc-panel-strong: #ffffff;
  --dc-line: #d8e1da;
  --dc-line-strong: #bcc9c1;
  --dc-ink: #17211c;
  --dc-muted: #57665f;
  --dc-faint: #63726b;
  --dc-accent: #1a7f5f;
  --dc-accent-strong: #14634a;
  --dc-on-accent: #ffffff;
  --dc-deep: #0e211a;
  --dc-deep-ink: #e7f1ec;
  --dc-deep-muted: #9fb5ab;
  --dc-tint: #e2ebe5;
  --dc-ok-bg: #e7f2ed;
  --dc-ok-line: #cfe4da;
  --dc-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --dc-blue: #1d5fa8;
  --dc-amber: #9a6700;
  --dc-red: #b42318;
  --dc-shadow: 0 1px 2px rgba(23, 33, 28, .05), 0 8px 26px rgba(23, 33, 28, .06);
  --dc-radius: 16px;
  --dc-max: 1240px;
}

/* Space Grotesk (SIL Open Font License 1.1), self-hosted so the strict
   style-src/font-src 'self' CSP holds. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+2192, U+2197;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.dc-page {
  margin: 0;
  min-width: 320px;
  background: var(--dc-bg);
  color: var(--dc-ink);
  font: 15px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}
a { color: var(--dc-accent-strong); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--dc-accent); outline-offset: 3px;
}
button, a { -webkit-tap-highlight-color: transparent; }
.dc-container { width: min(var(--dc-max), calc(100% - 44px)); margin-inline: auto; }
.dc-skip-link { position: fixed; top: 10px; left: 10px; z-index: 50; padding: 10px 13px; border-radius: 9px; color: var(--dc-on-accent); background: var(--dc-accent-strong); transform: translateY(-180%); transition: transform .18s ease; }
.dc-skip-link:focus { transform: translateY(0); }
.dc-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--dc-line);
  background: rgba(247, 249, 248, .85);
  backdrop-filter: blur(14px);
}
.dc-header-inner { min-height: 72px; display: flex; align-items: center; gap: 24px; }
.dc-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--dc-ink); text-decoration: none; white-space: nowrap; }
.dc-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--dc-on-accent); background: linear-gradient(145deg, #22946f, #14634a); font-weight: 700; }
.dc-brand-name { display: block; font-family: var(--dc-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.dc-brand-sub { display: block; color: var(--dc-muted); font-size: 11px; line-height: 1.2; }
.dc-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.dc-nav a, .dc-nav button { border: 1px solid transparent; border-radius: 10px; padding: 8px 11px; color: var(--dc-muted); background: transparent; text-decoration: none; font: inherit; cursor: pointer; white-space: nowrap; }
.dc-nav a:hover, .dc-nav a[aria-current="page"], .dc-nav a:focus-visible, .dc-nav button:hover { color: var(--dc-ink); background: rgba(26, 127, 95, .08); border-color: transparent; }
.dc-header-action { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--dc-line-strong); border-radius: 10px; padding: 8px 12px; color: var(--dc-ink); background: var(--dc-panel); text-decoration: none; font-weight: 600; }
.dc-main { padding-block: 46px 90px; }
.dc-eyebrow { margin: 0 0 10px; color: var(--dc-accent-strong); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dc-title { margin: 0; max-width: 760px; font-family: var(--dc-display); font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 550; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.dc-title-sm { font-family: var(--dc-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 550; }
.dc-lede { max-width: 680px; margin: 20px 0 0; color: var(--dc-muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.dc-section { margin-top: 58px; }
.dc-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.dc-section-heading h2, .dc-section-heading h3 { margin: 0; font-family: var(--dc-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 550; letter-spacing: -.015em; text-wrap: balance; }
.dc-section-heading p { margin: 5px 0 0; color: var(--dc-muted); }
.dc-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.dc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid transparent; border-radius: 11px; padding: 10px 18px; color: var(--dc-on-accent); background: var(--dc-accent-strong); text-decoration: none; font-weight: 600; transition: background-color 140ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.dc-button:hover { background: #115740; }
.dc-button:active { transform: scale(0.97); }
.dc-button.secondary { color: var(--dc-ink); background: var(--dc-panel); border-color: var(--dc-line-strong); }
.dc-button.secondary:hover { background: var(--dc-tint); }
.dc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dc-grid > * { min-width: 0; }
.dc-span-4 { grid-column: span 4; }
.dc-span-6 { grid-column: span 6; }
.dc-span-8 { grid-column: span 8; }
.dc-span-12 { grid-column: 1 / -1; }
.dc-card, .dc-page .card { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); box-shadow: var(--dc-shadow); }
.dc-card { padding: 22px; }
a.dc-card, .dc-page a.row, .dc-page a.barcard { color: inherit; text-decoration: none; }
.dc-card-hover, .dc-page .card[href] { transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.dc-card-hover:hover, .dc-card-hover:focus-visible, .dc-page .card[href]:hover, .dc-page .card[href]:focus-visible { border-color: var(--dc-line-strong); background: #fcfdfc; transform: translateY(-2px); }
.dc-card-title { margin: 0; font-family: var(--dc-display); font-size: 1.05rem; font-weight: 550; }
.dc-card-copy { margin: 8px 0 0; color: var(--dc-muted); }
.dc-label, .dc-page .label { color: var(--dc-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.dc-metric, .dc-page .metric { margin-top: 6px; color: var(--dc-ink); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dc-muted, .dc-page .muted, .dc-page .sub { color: var(--dc-muted); font-size: 12px; }
.dc-hero-note { margin-top: 14px; }
.dc-art-mark { display: inline-grid; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.dc-table-caption { padding: 12px 14px; background: transparent; color: var(--dc-faint); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-align: left; }
.dc-good, .dc-page .ok { color: var(--dc-accent); }
.dc-warn, .dc-page .warn { color: var(--dc-amber); }
.dc-bad, .dc-page .bad { color: var(--dc-red); }
.dc-status { display: inline-flex; align-items: center; gap: 7px; color: var(--dc-muted); }
.dc-status::before { width: 8px; height: 8px; content: ""; border-radius: 50%; background: currentColor; }
.dc-panel { border: 1px solid var(--dc-line); border-radius: var(--dc-radius); background: var(--dc-panel); overflow: hidden; box-shadow: var(--dc-shadow); }
.dc-panel-header { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--dc-line); }
.dc-panel-actions { padding: 0 20px 20px; }
.dc-panel-header h2, .dc-panel-header h3 { margin: 0; font-size: 1.05rem; }
.dc-table-wrap { overflow-x: auto; }
.dc-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.dc-table th, .dc-table td { padding: 12px 14px; border-bottom: 1px solid var(--dc-line); text-align: left; }
.dc-table th { color: var(--dc-muted); background: var(--dc-tint); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.dc-table tr:last-child td { border-bottom: 0; }
.dc-table tr:hover td { background: #f6faf8; }
.dc-state { padding: 14px 16px; border: 1px solid var(--dc-line); border-radius: 13px; color: var(--dc-muted); background: var(--dc-panel); }
.dc-state-error { border-color: rgba(255, 139, 132, .4); color: #ffb8b2; background: rgba(87, 27, 29, .46); }
.dc-state-warn { border-color: rgba(241, 195, 106, .4); color: #f7d898; background: rgba(90, 60, 20, .35); }
.dc-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #cfe4da; border-radius: 999px; color: var(--dc-accent-strong); background: #e7f2ed; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dc-code { overflow-x: auto; margin: 0; padding: 18px; border: 1px solid var(--dc-line); border-radius: 14px; color: #d7f8e8; background: #03100c; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dc-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: center; gap: clamp(32px, 7vw, 90px); min-height: 580px; }
.dc-hero-art { position: relative; padding: 14px; border: 1px solid var(--dc-line); border-radius: 20px; background: var(--dc-panel); box-shadow: 0 24px 70px rgba(23, 33, 28, .12); transform: none; }

.dc-art-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 14px; color: var(--dc-muted); font-size: 11px; }
.dc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dc-flow-step { position: relative; padding: 17px; border: 1px solid var(--dc-line); border-radius: 14px; background: var(--dc-panel); box-shadow: var(--dc-shadow); }
.dc-flow-step:not(:last-child)::after { position: absolute; top: 50%; right: -16px; width: 22px; content: "→"; color: var(--dc-accent-strong); text-align: center; }
.dc-flow-step strong { display: block; margin-bottom: 5px; }
.dc-flow-step span { color: var(--dc-muted); font-size: 12px; }
.dc-footer { margin-top: 36px; padding: 28px 0 38px; border-top: 1px solid var(--dc-line); color: var(--dc-muted); font-size: 12px; }
.dc-footer-grid { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.dc-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.dc-footer a { color: var(--dc-muted); }
.dc-auth { min-height: 100vh; display: grid; place-items: center; padding: 30px 0; }
.dc-auth-card { width: min(460px, 100%); padding: clamp(25px, 6vw, 42px); border: 1px solid var(--dc-line); border-radius: 18px; background: var(--dc-panel); box-shadow: 0 10px 44px rgba(23, 33, 28, .1); }
.dc-auth-card h1 { margin: 10px 0 8px; font-family: var(--dc-display); font-size: clamp(1.4rem, 3.2vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.dc-auth-eyebrow { margin-top: 28px; }
.dc-auth-card p { color: var(--dc-muted); }
.dc-auth-card label { display: block; margin: 19px 0 7px; font-size: 13px; font-weight: 600; }
.dc-auth-card input { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--dc-line-strong); border-radius: 10px; color: var(--dc-ink); background: var(--dc-panel); font: inherit; }
.dc-auth-card .dc-field { position: relative; }
.dc-auth-card .dc-field input { padding-right: 64px; }
.dc-auth-card .dc-eye { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); margin: 0; padding: 0 11px; min-width: 56px; height: 30px; border: 1px solid var(--dc-line-strong); border-radius: 999px; color: var(--dc-muted); background: var(--dc-tint); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.dc-auth-card .dc-eye:hover { color: var(--dc-ink); background: var(--dc-bg-raised); }
.dc-password-field { position: relative; }
.dc-password-field input { width: 100%; padding-right: 74px; }
/* The toggle must not inherit the generic portal button chrome
   (.dc-portal-main button adds margin-top/min-height/accent background,
   which pushed the control out of the field). */
.dc-password-field .dc-eye { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); margin: 0; padding: 0 11px; min-width: 56px; min-height: 0; height: 30px; border: 1px solid var(--dc-line-strong); border-radius: 999px; color: var(--dc-muted); background: var(--dc-tint); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.dc-password-field .dc-eye:hover { color: var(--dc-ink); background: var(--dc-bg-raised); }
.dc-auth-card .dc-submit { width: 100%; margin-top: 20px; }
.dc-auth-card .dc-error { color: var(--dc-red); }
.dc-auth-card .dc-notice { color: var(--dc-accent-strong); }
.dc-auth-card .dc-foot { display: flex; justify-content: flex-end; margin-top: 15px; }
.dc-portal-main { min-height: calc(100vh - 210px); max-width: 980px; }
.dc-portal-main > h1 { margin: 0 0 14px; font-family: var(--dc-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 550; line-height: 1.1; letter-spacing: -.015em; }
.dc-portal-main > h2 { margin: 38px 0 12px; font-family: var(--dc-display); font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 550; letter-spacing: -.01em; }
.dc-portal-main > p, .dc-portal-main > ul { max-width: 780px; color: var(--dc-muted); }
.dc-portal-main > p { margin: 12px 0; }
.dc-portal-main li + li { margin-top: 8px; }
.dc-portal-main form:not(.inline) { max-width: 540px; margin: 24px 0; padding: 22px; border: 1px solid var(--dc-line); border-radius: var(--dc-radius); background: var(--dc-panel); box-shadow: var(--dc-shadow); }
.dc-portal-main label { display: grid; gap: 7px; margin-top: 16px; color: var(--dc-ink); font-size: 13px; font-weight: 600; }
.dc-portal-main label:first-child { margin-top: 0; }
.dc-portal-main input, .dc-portal-main select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--dc-line-strong); border-radius: 10px; color: var(--dc-ink); background: var(--dc-panel); font: inherit; }
.dc-portal-main button { min-height: 43px; margin-top: 18px; padding: 10px 16px; border: 1px solid transparent; border-radius: 10px; color: var(--dc-on-accent); background: var(--dc-accent-strong); font: inherit; font-weight: 600; cursor: pointer; }
.dc-portal-main button:hover { background: #115740; }
.dc-portal-main .error, .dc-portal-main .notice { padding: 13px 15px; border: 1px solid; border-radius: 12px; }
.dc-portal-main .error { border-color: #edc7c2; color: #932018; background: #fdf1f0; }
.dc-portal-main .notice { border-color: #cfe4da; color: #14634a; background: #ecf6f1; }
.dc-portal-main table { display: block; width: 100%; margin: 20px 0; overflow-x: auto; border: 1px solid var(--dc-line); border-radius: 14px; border-collapse: collapse; }
.dc-portal-main th, .dc-portal-main td { padding: 12px 14px; border-bottom: 1px solid var(--dc-line); text-align: left; white-space: nowrap; }
.dc-portal-main th { color: var(--dc-muted); background: var(--dc-tint); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.dc-portal-main tr:last-child > * { border-bottom: 0; }
.dc-portal-main pre, .dc-portal-main .key-reveal { overflow-x: auto; padding: 18px; border: 1px solid var(--dc-line); border-radius: 14px; color: #d7f8e8; background: #03100c; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dc-portal-main code { color: #c5f4df; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dc-portal-main .key-reveal { word-break: break-all; white-space: pre-wrap; }
.dc-portal-logout { margin-left: 0; }
.dc-page .top { align-items: end; }
body.dc-admin main { width: min(var(--dc-max), calc(100% - 44px)); margin-inline: auto; }
.dc-page .topline { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.dc-page .topline > * { min-width: 0; max-width: 100%; }
.dc-page .topline h1, .dc-page .topline h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -.04em; }
.dc-page .ref { overflow-wrap: anywhere; }
.dc-page .filters { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
.dc-page .filters label { display: grid; gap: 5px; color: var(--dc-muted); font-size: 11px; }
.dc-page .filters input, .dc-page .filters select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--dc-line-strong); border-radius: 9px; color: var(--dc-ink); background: var(--dc-panel); font: inherit; }
.dc-page .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid transparent; border-radius: 9px; padding: 8px 12px; color: var(--dc-on-accent); background: var(--dc-accent-strong); font-weight: 600; cursor: pointer; text-decoration: none; }
.dc-page .btn.secondary { color: var(--dc-ink); background: var(--dc-panel); border-color: var(--dc-line-strong); }
.dc-page .back { display: inline-block; margin-bottom: 18px; color: var(--dc-accent); text-decoration: none; }
.dc-page .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.dc-page .chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 9px; align-items: end; min-height: 150px; }
.dc-page .barcard { text-align: center; }
.dc-page .bar { display: flex; align-items: end; height: 105px; margin-bottom: 6px; border-radius: 9px; background: var(--dc-tint); }
.dc-page .bar i { display: block; width: 100%; min-height: 2px; border-radius: 8px 8px 0 0; background: var(--dc-accent); }
.dc-page .bar-fill { display: block; width: 100%; min-height: 2px; border-radius: 8px 8px 0 0; background: var(--dc-accent); }
/* Unknown telemetry must not read as a (near-)zero bar: dashed outline, no fill. */
.dc-page .bar.unknown { border: 1px dashed var(--dc-line-strong); background: transparent; }
.dc-page .bar.unknown .bar-fill, .dc-page .bar.unknown i { min-height: 0; background: transparent; }
.dc-page .bar-fill.h0{height:0%}
.dc-page .bar-fill.h1{height:5%}
.dc-page .bar-fill.h2{height:10%}
.dc-page .bar-fill.h3{height:15%}
.dc-page .bar-fill.h4{height:20%}
.dc-page .bar-fill.h5{height:25%}
.dc-page .bar-fill.h6{height:30%}
.dc-page .bar-fill.h7{height:35%}
.dc-page .bar-fill.h8{height:40%}
.dc-page .bar-fill.h9{height:45%}
.dc-page .bar-fill.h10{height:50%}
.dc-page .bar-fill.h11{height:55%}
.dc-page .bar-fill.h12{height:60%}
.dc-page .bar-fill.h13{height:65%}
.dc-page .bar-fill.h14{height:70%}
.dc-page .bar-fill.h15{height:75%}
.dc-page .bar-fill.h16{height:80%}
.dc-page .bar-fill.h17{height:85%}
.dc-page .bar-fill.h18{height:90%}
.dc-page .bar-fill.h19{height:95%}
.dc-page .bar-fill.h20{height:100%}
/* Form controls rendered inside tables (search engines / runtime knobs)
   share the console control system instead of tiny native defaults. */
.dc-page td input:not([type="checkbox"]), .dc-page td select { min-height: 34px; padding: 6px 9px; border: 1px solid var(--dc-line-strong); border-radius: 8px; color: var(--dc-ink); background: rgba(3, 16, 12, .72); font: inherit; }
.dc-page td input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--dc-accent); cursor: pointer; }
.dc-page td input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
.dc-page .btn:disabled { opacity: .5; cursor: not-allowed; }
.dc-page .tablewrap { overflow: auto; border: 1px solid var(--dc-line); border-radius: 14px; }
.dc-page table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.dc-page th, .dc-page td { padding: 12px 14px; border-bottom: 1px solid var(--dc-line); text-align: left; }
.dc-page th { color: var(--dc-muted); background: var(--dc-tint); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
/* Row headers (app ids, target refs) are data, not column chrome — keep them
   at body size and ink color instead of the 10px faint column-header caps. */
.dc-page tbody th { color: var(--dc-ink); background: transparent; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Visible captions (settings/search/incidents/targets/help) previously fell
   back to browser defaults: centered stray text floating above the header. */
.dc-page table caption:not(.sr-only) { padding: 12px 14px; color: var(--dc-faint); background: rgba(3, 16, 12, .3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.dc-page td { font-size: 13px; }
.dc-page tr:last-child td { border-bottom: 0; }
.dc-page tr:hover td { background: #f6faf8; }
.dc-page .pager { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.dc-page .section, .dc-page section { margin-top: 26px; }
.dc-page h3 { margin: 0 0 12px; font-size: 1.1rem; }
.dc-page .global { width: min(var(--dc-max), calc(100% - 44px)); margin: 0 auto 60px; }
/* Inside an already-constrained <main>, .global must not inset a second time
   or drop the section top gap (providers "Global attempt evidence"). */
.dc-page main .global { width: 100%; margin: 26px 0 0; }
/* Section headings on legacy pages otherwise fall back to browser defaults. */
.dc-page main h2 { margin: 26px 0 12px; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.025em; }
/* Console pages with a bare <main> must share the header's container width;
   unconstrained they run edge-to-edge and misalign with the brand/nav gutter. */
body.dc-admin main:not(.dc-container) { width: min(var(--dc-max), calc(100% - 44px)); margin-inline: auto; padding-block: 34px 80px; }
.dc-page .kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(121, 225, 181, .11); }
.dc-page .kv span { color: var(--dc-muted); }
.dc-page .pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: var(--dc-accent-strong); background: #e7f2ed; font-size: 12px; }
.dc-page .pill-bad { color: var(--dc-red); background: rgba(255, 139, 132, .12); }
.dc-page .pill-warn { color: var(--dc-amber); background: rgba(241, 195, 106, .12); }
.dc-page .pill-dim { color: var(--dc-muted); background: rgba(154, 184, 170, .12); }
.dc-refresh { margin-top: 8px; min-height: 34px; padding: 7px 11px; }
.dc-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.dc-page .card { display: block; padding: 18px; color: inherit; text-decoration: none; }
/* List rows only (overview queue list). Never table rows: admin-jobs.js emits
   <tr class="row"> and display:flex there detaches cells from header columns. */
.dc-page :is(a, div).row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(121, 225, 181, .11); }
.dc-page :is(a, div).row:last-child { border-bottom: 0; }
/* Match the overview's .dc-state surface so current / stale / error evidence
   are visually distinct states, not bare text with an inoperative border-color. */
.dc-page .state { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--dc-line); border-radius: 13px; color: var(--dc-muted); background: rgba(7, 27, 22, .7); }
.dc-page .state.stale { border-color: rgba(241, 195, 106, .4); color: #f7d898; background: rgba(90, 60, 20, .35); }
.dc-page .state.error, .dc-page .error { border: 1px solid #edc7c2; background: #fdf1f0; color: #932018; }
/* Inline "restart pending" badge (search runtime table). */
.dc-page td .stale { display: inline-flex; padding: 3px 8px; border-radius: 999px; color: var(--dc-amber); background: rgba(241, 195, 106, .12); font-size: 12px; }
.dc-page .sr-only { position: absolute; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* The twelve-link console nav needs ~1320px on one line; below that it must
   drop to its own scrollable row or "Sign out" leaves the viewport. */
@media (max-width: 1400px) {
  .dc-header-inner { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .dc-header .dc-nav { order: 3; width: 100%; overflow-x: auto; margin: 0; padding-bottom: 2px; }
  .dc-header .dc-nav a, .dc-header .dc-nav button { flex: 0 0 auto; }
  .dc-header .dc-header-action { margin-left: auto; }
}
@media (max-width: 860px) {
  /* Header wrap behavior is inherited from the 1400px block above. */
  .dc-hero { grid-template-columns: 1fr; min-height: auto; padding-block: 32px; }
  .dc-hero-art { max-width: 680px; margin-inline: auto; transform: none; }
  .dc-section-heading { align-items: flex-start; flex-direction: column; }
  .dc-section-heading > * { min-width: 0; max-width: 100%; }
  .dc-span-4, .dc-span-6, .dc-span-8 { grid-column: span 6; }
  .dc-flow { grid-template-columns: repeat(2, 1fr); }
  .dc-flow-step:not(:last-child)::after { display: none; }
}
@media (max-width: 680px) {
  .dc-container { width: min(100% - 30px, var(--dc-max)); }
  .dc-header-inner { min-height: 64px; flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .dc-header .dc-nav { order: 3; width: 100%; overflow-x: auto; margin: 0; padding-bottom: 2px; }
  .dc-header .dc-nav a, .dc-header .dc-nav button { flex: 0 0 auto; }
  .dc-header .dc-header-action { margin-left: auto; }
  .dc-main { padding-block: 32px 64px; }
  .dc-title { font-size: clamp(2.2rem, 13vw, 3.4rem); }
  .dc-span-4, .dc-span-6, .dc-span-8 { grid-column: 1 / -1; }
  .dc-flow { grid-template-columns: 1fr; }
  .dc-art-body { grid-template-columns: 58px 1fr; }
  .dc-art-stat-grid { grid-template-columns: 1fr; }
  .dc-footer-grid { flex-direction: column; }
  body.dc-admin main, .dc-page .global { width: min(100% - 30px, var(--dc-max)); }
  .dc-page .topline { align-items: start; flex-direction: column; }
  .dc-page .filters { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .dc-hero-art { transform: none; }
}

/* ============================================================
   Admin console light theme (body.dc-admin)
   The operator console reads as a ledger: dark evergreen spine
   (sidebar), light paper pages, one deep pine accent, quiet type.
   Scoped so the public product surface keeps the dark brand look.
   ============================================================ */
body.dc-admin {
  --dc-bg: #f6f7f6;
  --dc-panel: #ffffff;
  --dc-line: #e4e8e6;
  --dc-line-strong: #cbd4cf;
  --dc-ink: #1c2622;
  --dc-muted: #5f6f68;
  --dc-faint: #63726b; /* smallest text still ≥4.5:1 on white and paper */
  --dc-accent: #1a7f5f;
  --dc-accent-strong: #14634a;
  --dc-amber: #9a6700;
  --dc-red: #b42318;
  --dc-shadow: 0 1px 2px rgba(28, 38, 34, .06), 0 4px 14px rgba(28, 38, 34, .05);
  --dc-on-accent: #ffffff;
  --dc-surface-2: #f2f4f3;
  --dc-hover: #f7faf8;
  --dc-panel-hover: #fbfcfb;
  --dc-accent-hover: #115740;
  --dc-ok-bg: #e7f2ed;
  --dc-ok-line: #cfe4da;
  --dc-warn-ink: #7a5200;
  --dc-warn-bg: #fdf7e7;
  --dc-warn-line: #ead9ac;
  --dc-bad-ink: #932018;
  --dc-bad-bg: #fdf1f0;
  --dc-bad-line: #edc7c2;
  --dc-dim-bg: #eef1ef;
  --dc-side-bg: #12211b;
  --dc-side-ink: #cfe0d8;
  --dc-side-bright: #ffffff;
  --dc-side-muted: #b7c9c1;
  --dc-side-sub: #8fa79c;
  --dc-side-label: #7d9187;
  --dc-side-hover: rgba(255, 255, 255, .07);
  --dc-side-active: rgba(255, 255, 255, .11);
  --dc-side-line: rgba(255, 255, 255, .16);
  background: var(--dc-bg);
  color: var(--dc-ink);
  font-size: 14px;
  /* The shared :root declares dark; without this, native selects, checkboxes
     and scrollbars render dark widgets on the light console. */
  color-scheme: light;
}
body.dc-admin::before { display: none; }
/* Machine identifiers (provider refs, node refs, audit refs) read as data. */
body.dc-admin .ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
/* Press feedback and eased hovers; motion stays under 150ms for a tool
   used many times a day. */
body.dc-admin .btn, body.dc-admin .dc-button, body.dc-admin .dc-header-action { transition: background-color 120ms ease, color 120ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
body.dc-admin :is(.btn, .dc-button, .dc-header-action):active { transform: scale(0.97); }
body.dc-admin .dc-nav a { transition: background-color 120ms ease, color 120ms ease; }
body.dc-admin tr:hover td { transition: background-color 100ms ease; }

/* Layout: sidebar spine + content page. Auth pages have no sidebar. */
body.dc-admin:has(.dc-side) { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.dc-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 20px; height: 100vh; padding: 20px 14px 16px; overflow-y: auto; background: var(--dc-side-bg); color: var(--dc-side-ink); }
.dc-side .dc-brand { gap: 10px; color: var(--dc-side-bright); }
.dc-side .dc-brand-sub { color: var(--dc-side-sub); }
body.dc-admin .dc-mark { box-shadow: none; border-color: var(--dc-side-line); }
.dc-side .dc-nav { display: flex; flex-direction: column; align-items: stretch; order: 0; width: auto; gap: 18px; margin: 6px 0 0; overflow: visible; }
.dc-nav-group { display: flex; flex-direction: column; gap: 1px; }
.dc-nav-label { margin: 0 0 5px 10px; color: var(--dc-side-label); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dc-side .dc-nav a { padding: 7px 10px; border: 0; border-radius: 7px; color: var(--dc-side-muted); font-size: 13.5px; font-weight: 500; }
.dc-side .dc-nav a:hover, .dc-side .dc-nav a:focus-visible { color: var(--dc-side-bright); background: var(--dc-side-hover); }
.dc-side .dc-nav a[aria-current="page"] { color: var(--dc-side-bright); background: var(--dc-side-active); font-weight: 600; }
.dc-side-foot { margin-top: auto; }
.dc-side .dc-header-action { width: 100%; justify-content: center; border-color: var(--dc-side-line); color: var(--dc-side-ink); background: transparent; font-size: 13px; font-weight: 550; }
.dc-side .dc-header-action:hover { background: var(--dc-side-hover); }
body.dc-admin .dc-skip-link { color: var(--dc-on-accent); background: var(--dc-accent-strong); }

/* Content pages: fill the grid cell, no viewport-centering. */
body.dc-admin main:not(.dc-auth) { width: auto; max-width: 1180px; margin: 0; padding: 26px 34px 64px; }

/* Quiet, professional type scale. */
body.dc-admin .topline h1, body.dc-admin .topline h2, body.dc-admin .dc-title-sm { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
body.dc-admin .dc-eyebrow, body.dc-admin .label, body.dc-admin .dc-nav-label { font-weight: 600; }
body.dc-admin .dc-eyebrow { color: var(--dc-faint); letter-spacing: .09em; }
body.dc-admin .label, body.dc-admin .dc-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
body.dc-admin main h2, body.dc-admin .dc-section-heading h2, body.dc-admin .dc-section-heading h3 { font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
body.dc-admin main h3, body.dc-admin .dc-page h3 { font-size: 14px; font-weight: 650; }
body.dc-admin .dc-metric, body.dc-admin .metric { font-size: 22px; font-weight: 650; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
body.dc-admin .dc-brand-name { font-weight: 650; }
body.dc-admin .dc-section { margin-top: 34px; }
body.dc-admin .dc-lede { font-size: 14px; }
body.dc-admin .muted, body.dc-admin .dc-muted { font-size: 12.5px; }

/* Surfaces. */
body.dc-admin .dc-card, body.dc-admin .card { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 10px; box-shadow: var(--dc-shadow); }
body.dc-admin .dc-card-hover:hover, body.dc-admin .card[href]:hover, body.dc-admin .dc-card-hover:focus-visible { background: var(--dc-panel-hover); border-color: var(--dc-line-strong); transform: none; }
body.dc-admin .tablewrap, body.dc-admin .dc-table-wrap { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 10px; box-shadow: var(--dc-shadow); }
body.dc-admin th { background: var(--dc-surface-2); color: var(--dc-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; }
body.dc-admin tbody th { background: transparent; color: var(--dc-ink); font-weight: 600; }
body.dc-admin th, body.dc-admin td { border-bottom: 1px solid var(--dc-line); }
body.dc-admin tr:hover td { background: var(--dc-hover); }
body.dc-admin table caption:not(.sr-only) { background: transparent; color: var(--dc-faint); font-weight: 600; letter-spacing: .06em; }
body.dc-admin .dc-table th { background: var(--dc-surface-2); color: var(--dc-muted); }
body.dc-admin .dc-table th, body.dc-admin .dc-table td { border-bottom: 1px solid var(--dc-line); }
body.dc-admin .dc-table tr:hover td { background: var(--dc-hover); }

/* Controls. */
body.dc-admin .btn, body.dc-admin .dc-button { color: var(--dc-on-accent); background: var(--dc-accent-strong); box-shadow: none; font-weight: 600; }
body.dc-admin .btn:hover, body.dc-admin .dc-button:hover { background: var(--dc-accent-hover); }
body.dc-admin .btn.secondary, body.dc-admin .dc-button.secondary { color: var(--dc-ink); background: var(--dc-panel); border-color: var(--dc-line-strong); }
body.dc-admin .btn.secondary:hover, body.dc-admin .dc-button.secondary:hover { background: var(--dc-surface-2); }
body.dc-admin .filters input, body.dc-admin .filters select, body.dc-admin td input:not([type="checkbox"]), body.dc-admin td select { color: var(--dc-ink); background: var(--dc-panel); border-color: var(--dc-line-strong); }
body.dc-admin .filters label { font-size: 11px; }
body.dc-admin a { color: var(--dc-accent-strong); }
body.dc-admin :is(a, button, input, select):focus-visible { outline: 2px solid var(--dc-accent-strong); outline-offset: 2px; }

/* Evidence states. */
body.dc-admin .dc-state, body.dc-admin .state { padding: 12px 14px; border: 1px solid var(--dc-line); border-radius: 10px; color: var(--dc-muted); background: var(--dc-panel); font-size: 13px; }
body.dc-admin .state.stale, body.dc-admin .dc-state-warn { border-color: var(--dc-warn-line); color: var(--dc-warn-ink); background: var(--dc-warn-bg); }
body.dc-admin .state.error, body.dc-admin .error, body.dc-admin .dc-state-error { border: 1px solid var(--dc-bad-line); color: var(--dc-bad-ink); background: var(--dc-bad-bg); }
body.dc-admin .dc-good, body.dc-admin .ok { color: var(--dc-accent-strong); }
body.dc-admin .dc-warn, body.dc-admin .warn { color: var(--dc-amber); }
body.dc-admin .dc-bad, body.dc-admin .bad { color: var(--dc-red); }
body.dc-admin .pill { color: var(--dc-accent-strong); background: var(--dc-ok-bg); font-size: 12px; font-weight: 550; }
body.dc-admin .pill-bad { color: var(--dc-red); background: var(--dc-bad-bg); }
body.dc-admin .pill-warn { color: var(--dc-warn-ink); background: var(--dc-warn-bg); }
body.dc-admin .pill-dim { color: var(--dc-muted); background: var(--dc-dim-bg); }
body.dc-admin td .stale { color: var(--dc-warn-ink); background: var(--dc-warn-bg); }
body.dc-admin .dc-badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 550; white-space: nowrap; }
body.dc-admin .dc-badge-healthy { color: var(--dc-accent-strong); background: var(--dc-ok-bg); }
body.dc-admin .dc-badge-degraded { color: var(--dc-warn-ink); background: var(--dc-warn-bg); }
body.dc-admin .dc-badge-down { color: var(--dc-red); background: var(--dc-bad-bg); }
body.dc-admin .dc-badge-unknown { color: var(--dc-muted); background: var(--dc-dim-bg); }

/* Queue chart. */
body.dc-admin .bar { background: var(--dc-dim-bg); border-radius: 7px; }
body.dc-admin .bar-fill, body.dc-admin .bar i { background: var(--dc-accent); border-radius: 6px 6px 0 0; }
body.dc-admin .bar.unknown { border: 1px dashed var(--dc-line-strong); background: transparent; }

/* Auth pages. */
body.dc-admin .dc-auth-card { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 14px; box-shadow: 0 8px 40px rgba(28, 38, 34, .1); }
body.dc-admin .dc-auth-card h1 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
body.dc-admin .dc-auth-card label { font-weight: 600; font-size: 13px; }
body.dc-admin .dc-auth-card input { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--dc-line-strong); border-radius: 8px; color: var(--dc-ink); background: var(--dc-panel); font: inherit; }
body.dc-admin .dc-notice { padding: 12px 14px; border: 1px solid var(--dc-ok-line); border-radius: 10px; color: #14634a; background: var(--dc-ok-bg); }
body.dc-admin .dc-eye { color: var(--dc-muted); }
body.dc-admin .dc-eye:hover { color: var(--dc-ink); }

/* Narrow screens: the spine becomes a top bar with scrollable nav. */
@media (max-width: 980px) {
  body.dc-admin:has(.dc-side) { display: block; }
  .dc-side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px; }
  .dc-side .dc-nav { flex-direction: row; overflow-x: auto; gap: 4px; order: 3; width: 100%; padding-bottom: 4px; }
  .dc-nav-group { flex-direction: row; gap: 2px; }
  .dc-nav-label { display: none; }
  .dc-side-foot { margin: 0 0 0 auto; }
  .dc-side .dc-header-action { width: auto; }
  .dc-side .dc-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 12px; }
  body.dc-admin main:not(.dc-auth) { padding: 18px 16px 48px; }
}
/* Static metric strips (.cards on audit/nodes/providers) are read, not
   clicked: hairline outline, no elevation. Linked cards keep the panel look. */
body.dc-admin .cards .card { background: transparent; border: 1px solid var(--dc-line); border-radius: 8px; box-shadow: none; }
/* Skeleton rows shipped in the templates; page JS replaces the tbody on the
   first render (success, empty, or error), so these only show while loading. */
body.dc-admin .dc-skel td { padding: 15px 14px; }
.dc-skel-bar { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--dc-dim-bg) 25%, var(--dc-surface-2) 50%, var(--dc-dim-bg) 75%); background-size: 200% 100%; animation: dc-shimmer 1.2s linear infinite; }
@keyframes dc-shimmer { to { background-position: -200% 0; } }
/* A chart region with nothing rendered yet is dead space, not evidence. */
body.dc-admin .chart:empty { display: none; }
body.dc-admin .dc-panel { background: var(--dc-panel); border-color: var(--dc-line); }
body.dc-admin .dc-panel-header { border-bottom-color: var(--dc-line); }


/* ============================================================
   Landing sections: full-bleed alternating bands with soft
   scroll-snap. Sections land gently (proximity, not mandatory).
   ============================================================ */
html:has(body.dc-landing) { scroll-padding-top: 72px; }
.dc-band { scroll-margin-top: 72px; display: grid; align-content: center; min-height: 62svh; padding-block: 84px; }
.dc-band-tint { background: var(--dc-tint); }
.dc-band-deep { background: var(--dc-deep); color: var(--dc-deep-ink); }
.dc-band-deep .dc-section-heading p, .dc-band-deep .dc-muted { color: var(--dc-deep-muted); }
.dc-band-deep .dc-eyebrow { color: #6fcfa9; }
.dc-band-deep a { color: #8fd9bc; }
.dc-band-accent { background: linear-gradient(160deg, #14634a, #0e4634); color: #ffffff; }
.dc-band-accent .dc-eyebrow { color: #a9dcc7; }
.dc-band-accent .dc-card-copy, .dc-band-accent p { color: #d3e9df; }
.dc-band-accent .dc-button { color: #14634a; background: #ffffff; }
.dc-band-accent .dc-button:hover { background: #eaf4ef; }
.dc-band-accent .dc-button.secondary { color: #ffffff; background: transparent; border-color: rgba(255, 255, 255, .4); }
.dc-band-accent .dc-button.secondary:hover { background: rgba(255, 255, 255, .1); }
.dc-band .dc-section { margin-top: 0; }
.dc-band-hero { min-height: calc(94svh - 72px); padding-block: 56px 72px; color: #f2f7f4; border-bottom: 1px solid var(--dc-line); background:
  linear-gradient(90deg, rgba(7, 24, 18, .8) 0%, rgba(8, 27, 21, .55) 38%, rgba(9, 30, 23, .28) 64%, rgba(9, 30, 23, .34) 100%),
  linear-gradient(0deg, rgba(7, 24, 18, .35), rgba(7, 24, 18, .35)),
  url("/static/img/hero-forest.jpg") center / cover no-repeat, var(--dc-deep); }
.dc-hero { min-height: 0; }
.dc-band-hero .dc-kicker { border-color: rgba(255, 255, 255, .28); color: #cfe6da; background: rgba(10, 34, 26, .55); backdrop-filter: blur(6px); }
.dc-band-hero .dc-title { color: #ffffff; }
.dc-title-accent { color: #8fd9bc; }
.dc-band-hero .dc-lede { color: #d5e5dc; }
.dc-band-hero .dc-muted { color: #b5cabf; }
.dc-band-hero .dc-muted code { color: #cfe6da; }
.dc-band-hero .dc-button.secondary { color: #ffffff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .38); }
.dc-band-hero .dc-button.secondary:hover { background: rgba(255, 255, 255, .16); }
.dc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.dc-hero-chips li { padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #cfe0d7; background: rgba(9, 30, 23, .45); font-size: 12px; backdrop-filter: blur(4px); }
.dc-band-hero .dc-hero-art { border: 0; box-shadow: 0 34px 90px rgba(4, 14, 10, .5); }
@media (max-width: 860px) {
  .dc-band { min-height: 0; padding-block: 56px; }
  .dc-band-hero { min-height: 0; }
}


/* Character details: eyebrow rule-lines on landing bands, toned footer. */
.dc-band .dc-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.dc-band .dc-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 1px; background: currentColor; opacity: .55; }
.dc-footer { margin-top: 0; padding: 34px 0 44px; background: var(--dc-tint); border-top: 1px solid var(--dc-line); }
.dc-band-deep .dc-code { border-color: rgba(255, 255, 255, .12); box-shadow: none; }

/* Professional footer: brand + three link columns + base line. */
.dc-footer-cols { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr)); gap: 32px; padding-bottom: 30px; border-bottom: 1px solid var(--dc-line); }
.dc-footer-brand p { max-width: 300px; margin: 12px 0 0; color: var(--dc-muted); font-size: 13px; line-height: 1.55; }
.dc-footer-cols nav { display: grid; align-content: start; gap: 9px; }
.dc-footer-cols h3 { margin: 0 0 4px; color: var(--dc-ink); font-family: var(--dc-display); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.dc-footer-cols nav a { color: var(--dc-muted); font-size: 13px; text-decoration: none; }
.dc-footer-cols nav a:hover { color: var(--dc-accent-strong); text-decoration: underline; }
.dc-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; color: var(--dc-faint); font-size: 12px; }
@media (max-width: 860px) {
  .dc-footer-cols { grid-template-columns: 1fr 1fr; }
  .dc-footer-brand { grid-column: 1 / -1; }
}

/* Consent row: the .dc-checkbox class existed in markup with no rule, so the
   checkbox fell into the generic width:100% input styling — a giant centered
   browser-default control. Inline row, native control at control size. */
.dc-portal-main .dc-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13.5px; font-weight: 400; color: var(--dc-muted); line-height: 1.5; }
.dc-portal-main .dc-checkbox input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; flex: none; margin: 2px 0 0; accent-color: var(--dc-accent-strong); cursor: pointer; }
.dc-portal-main input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--dc-accent-strong); }
/* Chrome autofill: keep the light panel surface instead of the yellow wash. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dc-panel) inset;
  -webkit-text-fill-color: var(--dc-ink);
  caret-color: var(--dc-ink);
  transition: background-color 9999s ease-out;
}
/* Legal prose (ToS / privacy): readable measure and rhythm. */
/* Admin: one-line search form (Takedowns). Label above, field and button on
   one row, wrapping to two on narrow screens. */
.dc-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.dc-inline-form label { flex: 1 0 100%; font-size: 0.85rem; font-weight: 600; }
.dc-inline-form input { flex: 1 1 32ch; min-width: 0; }
.dc-inline-form button { flex: 0 0 auto; }

.dc-legal { max-width: 74ch; }
.dc-legal h2 { margin: 30px 0 10px; font-family: var(--dc-display); font-size: 1.15rem; font-weight: 600; }
.dc-legal p, .dc-legal li { color: var(--dc-muted); line-height: 1.65; }

/* Eye toggle: icon pair, one visible per state (aria-pressed is the switch). */
.dc-eye svg { display: block; }
.dc-eye [data-eye-off] { display: none; }
.dc-eye[aria-pressed="true"] [data-eye] { display: none; }
.dc-eye[aria-pressed="true"] [data-eye-off] { display: block; }
.dc-password-field .dc-eye, .dc-auth-card .dc-eye { min-width: 0; width: 34px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Bands are full-bleed slabs: the legacy console section spacing must not
   open white slivers between them or below the sticky header. */
.dc-page section.dc-band, body.dc-page main > .dc-band { margin-top: 0; }


/* Hero response panel: an honest product still life — request, response,
   credit usage (single-hue baseline-anchored micro bars), tier ladder. */
.dc-hero-art { margin: 0; display: grid; gap: 12px; }
.dc-art-req { color: var(--dc-ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.dc-art-req b { color: var(--dc-accent-strong); font-weight: 700; }
.dc-art-json { overflow-x: auto; margin: 0; padding: 14px 16px; border-radius: 12px; color: #cfeee0; background: var(--dc-deep); font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dc-art-meter { padding: 13px 15px 11px; border: 1px solid var(--dc-line); border-radius: 12px; background: var(--dc-bg); }
.dc-art-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dc-art-meter-head span { color: var(--dc-muted); font-size: 11.5px; }
.dc-art-meter-head b { color: var(--dc-ink); font-family: var(--dc-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-art-chart { display: flex; align-items: flex-end; gap: 7px; height: 64px; padding-top: 2px; border-bottom: 1.5px solid var(--dc-line-strong); }
.dc-art-chart i { flex: 1; border-radius: 4px 4px 0 0; background: #7fb8a4; }
/* Bar heights live here, not in style attributes: style-src 'self' blocks
   inline styles, and the CSP stays strict. */
.dc-art-chart i:nth-child(1) { height: 30%; }
.dc-art-chart i:nth-child(2) { height: 52%; }
.dc-art-chart i:nth-child(3) { height: 40%; }
.dc-art-chart i:nth-child(4) { height: 66%; }
.dc-art-chart i:nth-child(5) { height: 48%; }
.dc-art-chart i:nth-child(6) { height: 84%; }
.dc-art-chart i:nth-child(7) { height: 76%; }
.dc-art-chart .dc-art-today { background: var(--dc-accent-strong); }
.dc-art-tiers { display: flex; flex-wrap: wrap; gap: 7px; color: var(--dc-muted); font-size: 11.5px; }
.dc-art-tiers span { padding: 4px 10px; border: 1px solid var(--dc-line); border-radius: 999px; background: var(--dc-bg); }
.dc-art-tiers .dc-art-tier-on { color: var(--dc-accent-strong); border-color: #cfe4da; background: var(--dc-ok-bg); font-weight: 600; }

/* Crawl playground (/portal/crawl): one field, one button, an honest result
   panel. The generic .dc-portal-main form chrome already supplies the card;
   these rules only add the pending/error affordances and the result view. */
.dc-crawl-form { max-width: 640px; }
.dc-crawl-meta { margin: 14px 0 0; color: var(--dc-muted); font-size: 12.5px; line-height: 1.6; }
.dc-field-error { margin: 8px 0 0; color: #932018; font-size: 13px; font-weight: 600; }
.dc-crawl-status { margin: 22px 0 0; padding: 13px 15px; border: 1px solid var(--dc-line); border-radius: 12px; color: var(--dc-muted); background: var(--dc-panel); font-size: 13.5px; }
.dc-crawl-status.notice { border-color: #cfe4da; color: #14634a; background: #ecf6f1; }
.dc-crawl-status.error { border-color: #edc7c2; color: #932018; background: #fdf1f0; }
.dc-crawl-result { margin-top: 26px; }
.dc-crawl-result h2 { margin: 0 0 6px; font-family: var(--dc-display); font-size: 1.3rem; font-weight: 550; overflow-wrap: anywhere; }
.dc-crawl-result h3 { margin: 26px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--dc-muted); }
.dc-crawl-result table { margin-top: 14px; }
.dc-crawl-result td { white-space: normal; overflow-wrap: anywhere; }
.dc-crawl-result pre { max-height: 460px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-crawl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* display:flex beats the hidden attribute's UA display:none — restate it. */
.dc-crawl-actions[hidden] { display: none; }
.dc-portal-main .dc-crawl-secondary { color: var(--dc-ink); background: var(--dc-panel); border-color: var(--dc-line-strong); }
.dc-portal-main .dc-crawl-secondary:hover { background: var(--dc-tint); }
/* Crawl playground option rows: the robots.txt toggle every customer sees,
   and the operator-only fieldset that is only rendered for admins. */
.dc-crawl-check { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; font-size: 13.5px; color: var(--dc-ink); cursor: pointer; }
.dc-crawl-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--dc-ink); cursor: pointer; }
.dc-crawl-check code { font-size: 12.5px; }
.dc-crawl-admin { margin: 22px 0 0; padding: 4px 16px 16px; border: 1px dashed var(--dc-line-strong); border-radius: 12px; background: var(--dc-tint); }
.dc-crawl-admin legend { padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--dc-muted); }

/* Private YouTube utility. */
.dc-youtube-panel { max-width: 720px; }
.dc-youtube-form { display: grid; gap: 14px; padding: 18px; }
.dc-youtube-form > input[type="url"] { width: 100%; }
.dc-youtube-load { display: flex; align-items: stretch; gap: 10px; }
.dc-youtube-load input { flex: 1; min-width: 0; }
.dc-youtube-form fieldset { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 14px; border: 1px solid var(--dc-line); border-radius: 10px; }
.dc-youtube-form fieldset label { display: flex; align-items: center; gap: 7px; }
.dc-youtube-form .dc-youtube-playlists { display: block; max-height: 420px; overflow: auto; }
.dc-youtube-select-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.dc-youtube-playlists #youtube-playlist-list { display: grid; gap: 8px; }
.dc-youtube-playlists #youtube-playlist-list label { align-items: flex-start; font-weight: 400; }
.dc-download-progress { overflow: hidden; width: 100%; max-width: 720px; height: 9px; margin-top: 12px; border: 0; border-radius: 99px; background: var(--dc-dim-bg); accent-color: var(--dc-accent-strong); }
.dc-download-progress::-webkit-progress-bar { background: var(--dc-dim-bg); }
.dc-download-progress::-webkit-progress-value { background: var(--dc-accent-strong); }
.dc-download-progress::-moz-progress-bar { background: var(--dc-accent-strong); }
.dc-pixabay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dc-pixabay-grid label { display: grid; gap: 6px; }
.dc-youtube-form textarea, .dc-youtube-form select { width: 100%; }
.dc-pixabay-results { max-width: 900px; margin-top: 18px; }
.dc-pixabay-results #pixabay-list { display: grid; gap: 8px; max-height: 520px; overflow: auto; padding: 18px; }
.dc-pixabay-results #pixabay-list label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
@media (max-width: 640px) { .dc-pixabay-grid { grid-template-columns: 1fr; } }
.dc-library { margin-top: 22px; }
.dc-library .dc-table-wrap { overflow-x: auto; }
.dc-library-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.dc-library #library-files { border-top: 1px solid var(--dc-line); }
.dc-library #library-player { padding: 16px 18px; background: var(--dc-tint); }
.dc-library audio, .dc-library video { width: 100%; max-width: 760px; }
.dc-library video { max-height: 480px; background: #000; }
.dc-library #library-file-list { display: grid; max-height: 620px; overflow: auto; }
.dc-library-file { display: grid; grid-template-columns: minmax(240px, 1fr) 90px auto auto; gap: 10px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--dc-line); }
.dc-library-file > span:first-child { overflow-wrap: anywhere; }
@media (max-width: 700px) { .dc-library-file { grid-template-columns: 1fr auto; } }