/* LagrangeCloud console. Warm TensorBlock neutrals, a copper accent and local
   type, with the existing console layout, responsive rules and interaction states. */

@font-face {
  font-family: "TensorBlock Instrument";
  src: url("../fonts/tb-instrument-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  size-adjust: 101.2%;
  font-display: swap;
}
@font-face {
  font-family: "TensorBlock Instrument";
  src: url("../fonts/tb-instrument-sans-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  size-adjust: 101.2%;
  font-display: swap;
}
@font-face {
  font-family: "TensorBlock Instrument";
  src: url("../fonts/tb-instrument-sans-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  size-adjust: 101.2%;
  font-display: swap;
}
@font-face {
  font-family: "TensorBlock Plex";
  src: url("../fonts/tb-ibm-plex-mono.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #eaeae5;
  --surface: #f5f5f4;
  --surface-2: #eaeae5;
  --surface-3: #e7e5e4;
  --border: #d6d3d1;
  --border-strong: #a8a29e;
  --fg: #1c1c1c;
  --fg-2: #6f6863;
  --fg-3: #6f6863;
  --accent: #CA7752;
  --accent-hover: #bb6847;
  --accent-fg: #1c1917;
  --accent-soft: #f3e5dc;
  --accent-line: #d7ad96;
  --accent-ink: #974f32;
  --accent-fill: var(--accent);
  --accent-fill-hover: #c06e4c;
  --accent-fill-fg: var(--accent-fg);
  --info: #53697c;
  --info-soft: #e9eef2;
  --info-line: #c2cdd5;
  --chart-primary: #4f7565;
  --chart-neutral: var(--info);
  --selection-bg: #e2ded7;
  --good: #23764b;
  --good-soft: #e9efe8;
  --warn: #826d46;
  --warn-soft: #efebe2;
  --bad: #b4483d;
  --bad-soft: #f5e9e5;
  --violet: #89738d;
  --teal: #657e77;
  --k-model: #6f6863;
  --k-tool: #a89b85;
  --k-sub: #99918a;
  --k-harness: #7d8379;
  --shadow: none;
  --shadow-lg: none;
  --backdrop: rgba(28, 25, 23, .4);
  --code-bg: #1c1917;
  --code-surface: #292524;
  --code-border: #44403c;
  --code-fg: #eaeae5;
  --code-dim: #a8a29e;
  --font-ui: "TensorBlock Instrument", Helvetica, sans-serif;
  --font-mono: "TensorBlock Plex", "Courier New", monospace;
  --radius: 10px;
  --radius-sm: 6px;
  --side-w: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1917;
    --surface: #24211f;
    --surface-2: #292524;
    --surface-3: #34302c;
    --border: #44403c;
    --border-strong: #78716c;
    --fg: #eaeae5;
    --fg-2: #bcb6af;
    --fg-3: #a8a29e;
    --accent: #E0905F;
    --accent-hover: #e8a479;
    --accent-fg: #1c1917;
    --accent-soft: #3a2b22;
    --accent-line: #7d5640;
    --accent-ink: var(--accent);
    --accent-fill: var(--accent);
    --accent-fill-hover: var(--accent-hover);
    --accent-fill-fg: var(--accent-fg);
    --info: #a6bacb;
    --info-soft: #283139;
    --info-line: #495b6b;
    --chart-primary: #92b5a3;
    --selection-bg: #35312d;
    --good: #86c7a0;
    --good-soft: #233329;
    --warn: #cbb48a;
    --warn-soft: #393124;
    --bad: #e49a8e;
    --bad-soft: #3b2825;
    --violet: #b9a4bd;
    --teal: #99b6ac;
    --k-model: #bcb6af;
    --k-tool: #c9b89b;
    --k-sub: #aaa09a;
    --k-harness: #a4b09e;
    --shadow: none;
    --shadow-lg: none;
    --backdrop: rgba(12, 10, 9, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1917;
  --surface: #24211f;
  --surface-2: #292524;
  --surface-3: #34302c;
  --border: #44403c;
  --border-strong: #78716c;
  --fg: #eaeae5;
  --fg-2: #bcb6af;
  --fg-3: #a8a29e;
  --accent: #E0905F;
  --accent-hover: #e8a479;
  --accent-fg: #1c1917;
  --accent-soft: #3a2b22;
  --accent-line: #7d5640;
  --accent-ink: var(--accent);
  --accent-fill: var(--accent);
  --accent-fill-hover: var(--accent-hover);
  --accent-fill-fg: var(--accent-fg);
  --info: #a6bacb;
  --info-soft: #283139;
  --info-line: #495b6b;
  --chart-primary: #92b5a3;
  --selection-bg: #35312d;
  --good: #86c7a0;
  --good-soft: #233329;
  --warn: #cbb48a;
  --warn-soft: #393124;
  --bad: #e49a8e;
  --bad-soft: #3b2825;
  --violet: #b9a4bd;
  --teal: #99b6ac;
  --k-model: #bcb6af;
  --k-tool: #c9b89b;
  --k-sub: #aaa09a;
  --k-harness: #a4b09e;
  --shadow: none;
  --shadow-lg: none;
  --backdrop: rgba(12, 10, 9, .6);
  color-scheme: dark;
}

/* Visual overrides only. App structure, sizing rules and behavior stay in app.css. */
.side-top .brand { padding: 10px 14px; }
.side-top .brand-logo { height: 18px; }
.switcher .org-badge { background: var(--accent); color: var(--accent-fg); }
.switcher .org-badge .ico { color: inherit; }
a { color: var(--accent-ink); }
.nav a[aria-current="page"] { color: var(--accent-ink); }
.nav .count { border-radius: 4px; }
.side > .nav { flex: 1 0 auto; gap: 12px; }
.nav-main, .nav-secondary { display: flex; flex-direction: column; gap: 1px; }
.nav-secondary { margin-top: auto; margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.top {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.page-head h1 { font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.04em; }
.seg { background: var(--surface-2); }
.seg [aria-pressed="true"], .seg [aria-current="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.btn { border-color: var(--border); }
.btn:hover { border-color: var(--border-strong); }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-fill-fg); }
.btn.primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); filter: none; }
.btn.danger:hover { border-color: color-mix(in srgb, var(--bad) 40%, var(--border-strong)); }
.btn.danger-solid { border-color: var(--bad); }
.btn.ghost { border-color: transparent; }
.btn.primary.busy::after { color: var(--accent-fill-fg); }
/* Selection uses the same accent as primary actions; the card border stays 1px. */
.way-card[aria-selected="true"], .way-card[aria-selected="true"]:hover { border-color: var(--accent-line); }
.way-card[aria-selected="true"] .start-ico, .way-check { background: var(--accent-soft); color: var(--accent-ink); }
.seg [aria-pressed="true"], .seg [aria-current="true"] { color: var(--accent-ink); }
.link-btn, .pill.accent, .tag.accent, .chip[aria-pressed="true"] { color: var(--accent-ink); }
.chip { border-radius: var(--radius-sm); }
.input, .select, .textarea { border-color: var(--border); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a8a29e' stroke-width='1.5'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5'/%3E%3C/svg%3E");
}
.panel-head h2 { font-size: 16px; font-weight: 400; letter-spacing: -0.025em; }
.kpi-val { font-size: 28px; font-weight: 400; letter-spacing: -0.04em; }
.pill, .tabs .n { border-radius: 4px; }
.empty-title { font-weight: 500; font-size: 15px; }
.codeblock pre { background: var(--code-bg); color: var(--code-fg); border-color: var(--code-border); border-radius: var(--radius); }
.copy-btn { border-radius: var(--radius-sm); border-color: var(--code-border); background: var(--code-surface); color: var(--code-dim); }
.copy-btn:hover { color: var(--code-fg); }
/* The landing page's warm halftone background, limited to sign-in screens. */
.auth-screen { --page: var(--bg); background: var(--bg); isolation: isolate; }
.auth-screen::before { content: none; }
.signin-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
  background: radial-gradient(ellipse at 55% 95%, #e1dacf, var(--bg) 65%);
}
.signin-dot-field { display: block; width: 100%; height: 100%; }
.signin-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media print { .signin-backdrop { display: none; } }
.dlg { border-radius: var(--radius); }
/* Login surfaces and controls follow the landing page's quiet, warm panels.
   Keep these rules local so dashboard forms retain their existing density. */
.auth-wrap { max-width: 440px; }
.auth-card {
  max-width: none;
  padding: 36px;
  gap: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 92%, transparent),
    color-mix(in srgb, var(--surface-2) 88%, transparent));
  box-shadow: none;
}
.auth-card .brand { gap: 10px; }
.auth-card .brand-logo { height: 24px; }
.auth-card h1 { font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.04em; }
.auth-card .lead { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.auth-card #signin-messages { display: contents; }
.auth-card form { gap: 18px; }
.auth-card .field { gap: 8px; }
.auth-card .field > label { color: var(--fg-2); font-size: 12px; font-weight: 500; }
.auth-card .input {
  min-height: 44px;
  padding: 11px 14px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.auth-card .input-wrap .input { padding-right: 44px; }
.auth-card .input:not(:disabled):not([aria-invalid="true"]):hover { border-color: var(--border-strong); }
.auth-card .input:focus { border-color: var(--border-strong); box-shadow: none; }
.auth-card :is(.input, .btn, .link-btn, .icon-btn, .advanced summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.auth-card .input[aria-invalid="true"] { border-color: var(--bad); box-shadow: none; }
.auth-card .input[aria-invalid="true"]:focus-visible { outline-color: var(--bad); }
.auth-card .input:disabled { background: var(--surface-2); }
.auth-card .btn {
  min-height: 44px;
  padding: 12px 18px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: 14px;
  line-height: 1.25;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.auth-card .btn.lg { min-height: 48px; }
.auth-card .btn.primary { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-fill-fg); }
.auth-card .btn.primary:not(:disabled):hover { border-color: var(--accent-fill-hover); background: var(--accent-fill-hover); }
.auth-card .link-btn { font-size: 13px; line-height: 1.5; text-underline-offset: 3px; }
.auth-card .divider { color: var(--fg-3); font-size: 12px; }
.auth-card .divider::before, .auth-card .divider::after { background: var(--border); }
@media (prefers-reduced-motion: no-preference) {
  .auth-card .btn:not(:disabled):not(.busy):hover { transform: translateY(-2px); }
  .auth-card .btn:not(:disabled):not(.busy):active { transform: scale(.98); }
}
.onboard { background: var(--surface); }
.onboard-intro h2 { font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.035em; }
.start-way:hover, .start-way:focus-visible { border-color: var(--border-strong); background: var(--surface-2); box-shadow: none; }
.start-way b { font-weight: 500; }
.start-ico, .pg-text { border-radius: var(--radius-sm); }
.dlg::backdrop { background: var(--backdrop); }
.dlg-head h2 { font-size: 20px; font-weight: 400; letter-spacing: -0.03em; }
.dlg-foot, .palette-foot { border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 860px) {
  .app.nav-open .scrim { background: var(--backdrop); }
}

/* Detail views use the same light display type as the landing page.
   These two properties override existing inline title styles without editing templates. */
.run-head .title-row > h1:not(.mono) {
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.2;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.run-head .title-row > h1.mono { font-size: 18px; font-weight: 400; letter-spacing: -0.025em; }
.report-head h2 { font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -0.035em; }
:is(.panel-body, .section) h3:not(.model-provider) { font-size: 16px; font-weight: 400; letter-spacing: -0.02em; }
.span-detail h3 { font-weight: 400; }
.outcome h3, .earlier summary, .model-tile-head > b, .model-provider { font-weight: 500; }
.dcell .from-to b { font-weight: 400; letter-spacing: -0.035em; }
.score b, .rank { font-weight: 500; }
#settings-body .panel-body:has(> #topup-notice) .stat b { font-size: 32px; font-weight: 400; line-height: 1.15; letter-spacing: -0.04em; }

/* Small controls and menus share the site's compact corner and border treatment. */
.badge { border-radius: 4px; }
.badge.placeholder { color: var(--warn); background: var(--warn-soft); }
.menu, .model-tile, .change, .ch-tip, .skel-block { border-radius: var(--radius); }
.menu-item, .imp-item, .empty-icon, .result-icon, .callout, .device-code, .toast { border-radius: var(--radius-sm); }
.model-tile { background: var(--surface); }
.callout.tone-info, .secret-key { border-color: var(--border); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.input:disabled, .select:disabled, .textarea:disabled { background-color: var(--surface-2); color: var(--fg-3); }
.size-opt label { border-color: var(--border); }
.size-opt input:checked + label { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }

/* Match the landing page's trace legend and neutral dark technical surfaces. */
.k-model { background: var(--k-model); }
.k-tool { background: var(--k-tool); }
.k-subagent { background: var(--k-sub); }
.k-harness { background: var(--k-harness); }
#tab-body pre.code { background: var(--code-bg); color: var(--code-fg); border-color: var(--code-border); border-radius: var(--radius); }

/* Overview uses the landing page's warm panels, light display numbers and
   restrained technical detail. Data, chart geometry and table columns stay in JS. */
#ov-body .panel {
  border-color: var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}
#ov-body .kpis { gap: 14px; }
#ov-body .kpi {
  min-height: 164px;
  padding: 20px;
  gap: 12px;
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent));
}
#ov-body .kpi-label { color: var(--fg-2); font-size: 12px; line-height: 1.5; }
#ov-body .kpi-val { font-size: 32px; font-weight: 400; line-height: 1.15; letter-spacing: -0.045em; }
#ov-body .kpi-val small { margin-left: 3px; font-size: 14px; font-weight: 400; letter-spacing: 0; }
#ov-body .kpi-foot { margin-top: auto; min-height: 36px; gap: 8px 10px; flex-wrap: wrap; }
#ov-body .kpi-foot .note { line-height: 1.5; }
#ov-body .spark-line { stroke-width: 1.5; }
#ov-body .spark-area { fill-opacity: .07; }
#ov-body .spark.empty { display: block; padding: 0; }
#ov-body .split-bar { height: 5px; border-radius: 2px; }
#ov-body .panel-head { padding: 20px 24px 0; gap: 10px 16px; }
#ov-body .panel-head h2 { font-size: 18px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.35; }
#ov-body .panel-head .sub { margin-top: 4px; font-size: 12px; line-height: 1.6; }
#ov-body .panel-body { padding: 18px 24px 24px; }
#ov-body .panel-body.tight { padding: 0 0 4px; }
#ov-body > .panel > .panel-head { padding-bottom: 18px; }
/* Center the attention empty state in the space below its heading. */
#ov-body .grid-main > .panel:has(> .panel-body > .empty.compact) { display: flex; flex-direction: column; }
#ov-body .grid-main > .panel > .panel-body:has(> .empty.compact) { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }

/* Preserve the current/baseline distinction and all promotion marker colors. */
#ov-body .legend { gap: 8px 18px; font-size: 11.5px; line-height: 1.6; }
#ov-body .legend span { gap: 7px; }
#ov-body .legend i { width: 18px; }
#ov-body .legend i.box { width: 9px; }
#ov-body .ch-grid { stroke: color-mix(in srgb, var(--border) 72%, transparent); stroke-dasharray: 3 5; }
#ov-body .ch-grad-top { stop-opacity: .12; }
#ov-body .ch-grad-bottom { stop-opacity: 0; }
#ov-body .ch-cur { stroke-width: 2.25; }
#ov-body .ch-base { stroke-width: 1.5; stroke-dasharray: 4 5; }
#ov-body .chart .ch-axis { font-size: 10.5px; }
#ov-body .chart .ch-end-label { font-weight: 500; }
#ov-body .ch-tip { padding: 12px 14px; border-color: var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: none; }
#ov-body .ch-tip-date { margin-bottom: 6px; font-size: 11px; }
#ov-body .ch-tip-row { gap: 8px; line-height: 1.8; }
#ov-body .ch-tip-row b { font-weight: 500; }

/* The agent table keeps every existing column and its responsive behavior. */
#ov-body .table-scroll { border-radius: 0 0 var(--radius) var(--radius); }
#ov-body th { padding: 12px; background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
#ov-body td { padding: 14px 12px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 13px; }
#ov-body :is(th, td):first-child { padding-left: 24px; }
#ov-body :is(th, td):last-child { padding-right: 24px; }
#ov-body td.mono { font-size: 11.5px; }
#ov-body td .sub { margin-top: 3px; font-size: 10.5px; }
#ov-body .cell-main { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
#ov-body .pill { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 18px; }
#ov-body .pill::before { width: 5px; height: 5px; }
#ov-body .tag { border-radius: 4px; font-size: 10.5px; }
#ov-body tbody tr.clickable:hover td { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
#ov-body .row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 640px) {
  #ov-body .kpis { gap: 10px; }
  #ov-body .kpi { min-height: 154px; padding: 16px; gap: 10px; }
  #ov-body .kpi-val { font-size: 28px; }
  #ov-body .panel-head { padding: 18px 16px 0; }
  #ov-body .panel-body { padding: 16px; }
  #ov-body .panel-body.tight { padding: 0 0 4px; }
  #ov-body .legend { gap: 7px 12px; font-size: 11px; }
  #ov-body th { padding: 10px 8px; }
  #ov-body td { padding: 13px 8px; }
  #ov-body :is(th, td):first-child { padding-left: 16px; }
  #ov-body :is(th, td):last-child { padding-right: 16px; }
  #ov-body .pill { padding-inline: 6px; }
  .auth-card { padding: 28px 24px; }
  .page-head h1 { font-size: 24px; }
  .run-head .title-row > h1:not(.mono) { font-size: 22px !important; }
  .report-head h2, .auth-card h1 { font-size: 22px; }
}

/* Agents list and detail only. The page-tabs marker belongs to Agent detail;
   deploy, adjust, playground and other Console views retain their own styling. */
#agents-body, .view:has(> .page-tabs) .panel {
  border-color: var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}
#agents-body .table-scroll { border-radius: inherit; }
.view:has(> .page-tabs) .table-scroll { border-radius: 0 0 var(--radius) var(--radius); }
:is(#agents-body, .view:has(> .page-tabs)) th {
  padding: 12px;
  background: color-mix(in srgb, var(--surface-2) 65%, var(--surface));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}
:is(#agents-body, .view:has(> .page-tabs)) td { padding: 14px 12px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 13px; }
:is(#agents-body, .view:has(> .page-tabs)) :is(th, td):first-child { padding-left: 24px; }
:is(#agents-body, .view:has(> .page-tabs)) :is(th, td):last-child { padding-right: 24px; }
:is(#agents-body, .view:has(> .page-tabs)) td.mono { font-size: 11.5px; }
:is(#agents-body, .view:has(> .page-tabs)) td .sub { margin-top: 3px; font-size: 10.5px; }
:is(#agents-body, .view:has(> .page-tabs)) .cell-main { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
:is(#agents-body, .view:has(> .page-tabs)) .spark-area { fill-opacity: .07; }
:is(#agents-body, .view:has(> .page-tabs)) .spark.empty { display: block; padding: 0; }
:is(#agents-body, .view:has(> .page-tabs)) tbody tr.clickable:hover td { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
:is(#agents-body, .view:has(> .page-tabs)) .row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
:is(#agents-body, .view:has(> .page-tabs)) .pill { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 18px; }
:is(#agents-body, .view:has(> .page-tabs)) .pill::before { width: 5px; height: 5px; }
:is(#agents-body, .view:has(> .page-tabs)) .tag { border-radius: 4px; font-size: 10.5px; }

.view:has(> .page-tabs) .panel-head { padding: 20px 24px 0; gap: 10px 16px; }
.view:has(> .page-tabs) .panel-head.ruled { padding-bottom: 16px; }
.view:has(> .page-tabs) .panel-head h2 { font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.03em; }
.view:has(> .page-tabs) .panel-head .sub { font-size: 12px; line-height: 1.6; }
.view:has(> .page-tabs) .panel-body { padding: 18px 24px 24px; }
.view:has(> .page-tabs) > .run-head {
  padding: 24px;
  gap: 20px;
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent));
}
.view:has(> .page-tabs) .run-head-top { gap: 18px 24px; align-items: center; }
.view:has(> .page-tabs) .run-head .stats { padding-top: 20px; gap: 16px 32px; }
.view:has(> .page-tabs) .stat { gap: 6px; }
.view:has(> .page-tabs) .stat small { font-size: 11.5px; line-height: 1.5; }
.view:has(> .page-tabs) .stat b:not(.mono) { font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.04em; }
.view:has(> .page-tabs) .stat b.mono { font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.view:has(> .page-tabs) .btn, .view:has(> #agents-body) > .page-head .btn { min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: none; }
.view:has(> .page-tabs) .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.view:has(> .page-tabs) .btn:focus-visible, .view:has(> #agents-body) > .page-head .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The existing tab roles and horizontal scrolling are preserved. */
.view:has(> .page-tabs) > .page-tabs {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}
.view:has(> .page-tabs) > .page-tabs button { margin: 0; padding: 8px 14px; border: 0; border-radius: 4px; font-size: 13px; font-weight: 400; line-height: 1.4; }
.view:has(> .page-tabs) > .page-tabs button:hover { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.view:has(> .page-tabs) > .page-tabs [aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--border); font-weight: 500; }
.view:has(> .page-tabs) > .page-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.view:has(> .page-tabs) .tabs .n { border-radius: 4px; font-size: 10.5px; }
.view:has(> .page-tabs) .imp-item { padding: 16px 24px; }
.view:has(> .page-tabs) .imp-item b { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.view:has(> .page-tabs) .imp-item .meta { font-size: 11.5px; line-height: 1.6; }
.view:has(> .page-tabs) .kv { gap: 12px 20px; font-size: 13px; line-height: 1.6; }
.view:has(> .page-tabs) .kv dt { font-size: 12px; }
.view:has(> .page-tabs) .kv dd.mono { font-size: 11.5px; }
.view:has(> .page-tabs) pre.code { padding: 16px 18px; border-color: var(--code-border); border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-fg); font-size: 12px; line-height: 1.8; }

@media (max-width: 640px) {
  :is(#agents-body, .view:has(> .page-tabs)) th { padding: 10px 8px; }
  :is(#agents-body, .view:has(> .page-tabs)) td { padding: 13px 8px; }
  :is(#agents-body, .view:has(> .page-tabs)) :is(th, td):first-child { padding-left: 16px; }
  :is(#agents-body, .view:has(> .page-tabs)) :is(th, td):last-child { padding-right: 16px; }
  :is(#agents-body, .view:has(> .page-tabs)) .pill { padding-inline: 6px; }
  .view:has(> .page-tabs) > .run-head { padding: 20px 16px; }
  .view:has(> .page-tabs) .run-head-top .actions > .btn { padding-inline: 10px; }
  .view:has(> .page-tabs) .run-head .stats { gap: 18px 20px; }
  .view:has(> .page-tabs) .stat b:not(.mono) { font-size: 24px; }
  .view:has(> .page-tabs) .stat { max-width: 100%; }
  .view:has(> .page-tabs) .panel-head { padding: 18px 16px 0; }
  .view:has(> .page-tabs) .panel-head.ruled { padding-bottom: 14px; }
  .view:has(> .page-tabs) .panel-body { padding: 16px; }
  .view:has(> .page-tabs) .imp-item { padding: 16px; }
  .view:has(> .page-tabs) .kv { gap: 10px 14px; }
}

/* Runs list and run detail. Existing event data, waterfall geometry, filters,
   live streaming and tab behavior remain in their original modules. */
#runs-panel, .view:has(> :where(#run-head)) .panel {
  border-color: var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}
:is(#runs-panel, .view:has(> #run-head)) th { padding: 12px; background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
:is(#runs-panel, .view:has(> #run-head)) td { padding: 14px 12px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 13px; }
:is(#runs-panel, .view:has(> #run-head)) :is(th, td):first-child { padding-left: 24px; }
:is(#runs-panel, .view:has(> #run-head)) :is(th, td):last-child { padding-right: 24px; }
:is(#runs-panel, .view:has(> #run-head)) .cell-main { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
:is(#runs-panel, .view:has(> #run-head)) .cell-sub { margin-top: 4px; font-size: 11px; }
:is(#runs-panel, .view:has(> #run-head)) .cell-sub .mono { font-size: 10.5px; }
:is(#runs-panel, .view:has(> #run-head)) .pill { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 18px; }
:is(#runs-panel, .view:has(> #run-head)) .pill::before { width: 5px; height: 5px; }
:is(#runs-panel, .view:has(> #run-head)) .tag { border-radius: 4px; font-size: 10.5px; }
#runs-panel tbody tr.clickable:hover td { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
#runs-panel .row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
#runs-panel .panel-foot { padding: 14px 24px; background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); font-size: 12px; }
.view:has(> #runs-panel) > .toolbar { gap: 12px; }
.view:has(> #runs-panel) #agent-filter { min-height: 36px; padding-block: 7px; font-size: 12px; }
.view:has(> #runs-panel) [data-action="refresh"] { width: 36px; height: 36px; border-color: var(--border); }
:is(.view:has(> #runs-panel), .view:has(> #run-head)) .chips { gap: 8px; }
:is(.view:has(> #runs-panel), .view:has(> #run-head)) .chip { min-height: 34px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; }
:is(.view:has(> #runs-panel), .view:has(> #run-head)) .chip[aria-pressed="true"] { color: var(--fg); border-color: var(--border-strong); background: var(--surface-2); }
:is(.view:has(> #runs-panel), .view:has(> #run-head)) .btn { min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: none; }
:is(.view:has(> #runs-panel), .view:has(> #run-head)) .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
:is(.view:has(> #runs-panel), .view:has(> #run-head)) :is(.btn, .chip, .select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#run-head {
  padding: 24px;
  gap: 20px;
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent));
}
#run-head .run-head-top { gap: 18px 24px; }
#run-head .task-text { font-size: 13px; line-height: 1.7; }
#run-head .stats { padding-top: 20px; gap: 16px 28px; }
#run-head .stat { gap: 6px; max-width: 100%; }
#run-head .stat small { font-size: 11.5px; line-height: 1.5; }
#run-head .stat:nth-child(-n+3) > b { font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.04em; }
#run-head .stat b.mono { font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.view:has(> #run-head) .outcome { padding: 20px 24px; gap: 14px; }
.view:has(> #run-head) .outcome h3 { font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
.view:has(> #run-head) .outcome .text { font-size: 13px; line-height: 1.7; }
.view:has(> #run-head) .outcome.err .text { font-size: 12px; }
#run-tabs-panel > .tabs { padding: 8px 16px; gap: 4px; background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
#run-tabs button { margin: 0; padding: 8px 14px; border: 0; border-radius: 4px; font-size: 13px; font-weight: 400; line-height: 1.4; }
#run-tabs button:hover { background: color-mix(in srgb, var(--surface) 65%, transparent); }
#run-tabs [aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--border); font-weight: 500; }
#run-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#run-tabs .n { border-radius: 4px; font-size: 10.5px; }

/* Keep duration bars, error stripes and category colors semantically intact. */
#run-tabs-panel .trace-legend { padding: 18px 24px 10px; font-size: 11.5px; gap: 8px 18px; line-height: 1.6; }
#run-tabs-panel .wf { padding-block: 4px 16px; }
#run-tabs-panel .wf-axis { padding: 12px 24px 10px; font-size: 10.5px; }
#run-tabs-panel .wf-row { min-height: 38px; padding: 8px 24px; }
#run-tabs-panel .wf-row:hover { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
#run-tabs-panel .wf-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-left-color: var(--accent); }
#run-tabs-panel .wf-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#run-tabs-panel .wf-name .label { font-size: 11.5px; }
#run-tabs-panel .wf-name .label.root { font-size: 13px; font-weight: 500; }
#run-tabs-panel .wf-track { background-image: linear-gradient(to right, color-mix(in srgb, var(--border) 65%, transparent) 1px, transparent 1px); }
#run-tabs-panel .wf-bar { border-radius: 2px; }
#run-tabs-panel .wf-bar.instant { border-radius: 1px; }
#run-tabs-panel .wf-dur { font-size: 11px; }
#run-tabs-panel .trace-side { background: color-mix(in srgb, var(--surface-2) 32%, var(--surface)); }
#run-tabs-panel .span-detail { padding: 20px 24px 24px; gap: 18px; }
#run-tabs-panel .span-detail h3 { font-size: 14px; font-weight: 400; line-height: 1.5; }
#run-tabs-panel .kv { gap: 12px 16px; font-size: 12px; line-height: 1.6; }
#run-tabs-panel .kv dd.mono { font-size: 11.5px; }
#run-tabs-panel .io-label { font-size: 11px; line-height: 1.5; }
#run-tabs-panel pre.code { padding: 14px 16px; border-color: var(--code-border); border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-fg); font-size: 11.5px; line-height: 1.8; }

/* Only the existing inline visual padding needs precedence over the template. */
#run-tabs-panel #tab-body > .toolbar { padding: 18px 24px 10px !important; gap: 12px; }
#run-tabs-panel .logs { padding-block: 4px 8px; }
#run-tabs-panel .log-row { grid-template-columns: 72px 184px minmax(0, 1fr); padding: 12px 24px; gap: 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
#run-tabs-panel .log-row:last-child { border-bottom: 0; }
#run-tabs-panel .log-row:hover { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
#run-tabs-panel .log-row.cat-error, #run-tabs-panel .log-row.lvl-error { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
#run-tabs-panel .log-row.lvl-warn { border-left-color: var(--warn); }
#run-tabs-panel .log-t, #run-tabs-panel .log-type { font-size: 11px; line-height: 1.7; }
#run-tabs-panel .log-msg { font-size: 13px; line-height: 1.7; }
#run-tabs-panel .log-msg summary { padding-block: 2px; font-size: 11px; }

@media (max-width: 640px) {
  :is(#runs-panel, .view:has(> #run-head)) th { padding: 10px 8px; }
  :is(#runs-panel, .view:has(> #run-head)) td { padding: 13px 8px; }
  :is(#runs-panel, .view:has(> #run-head)) :is(th, td):first-child { padding-left: 16px; }
  :is(#runs-panel, .view:has(> #run-head)) :is(th, td):last-child { padding-right: 16px; }
  :is(#runs-panel, .view:has(> #run-head)) .pill { padding-inline: 6px; }
  #runs-panel .cell-title { max-width: clamp(160px, 52vw, 240px); }
  #runs-panel .panel-foot { padding: 14px 16px; }
  #run-head { padding: 20px 16px; }
  #run-head .stats { gap: 18px 20px; }
  #run-head .stat { width: calc(50% - 10px); }
  #run-head .stat:nth-child(-n+3) > b { font-size: 24px; }
  .view:has(> #run-head) .outcome { padding: 18px 16px; }
  #run-tabs-panel > .tabs { padding: 8px; }
  #run-tabs button { padding-inline: 12px; }
  #run-tabs-panel .trace-legend { padding: 16px 16px 8px; font-size: 11px; }
  #run-tabs-panel .wf-axis, #run-tabs-panel .wf-row { padding-inline: 14px; }
  #run-tabs-panel .span-detail { padding: 18px 16px; }
  #run-tabs-panel #tab-body > .toolbar { padding: 16px 16px 10px !important; }
  #run-tabs-panel .log-row { grid-template-columns: 60px minmax(0, 1fr); padding: 12px 16px; gap: 6px 12px; }
}

/* Compute lists and details. Scope the shared instance table, composer and
   configuration styles here so Agent pages and other forms keep their skin. */
.view:has(> .panel > :where(#list-body)) > .panel, #detail .panel {
  border-color: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
.view:has(> .panel > :where(#list-body)) > .panel > .tabs {
  padding: 8px 16px;
  gap: 4px;
  align-items: center;
  background: color-mix(in srgb, var(--surface-2) 65%, var(--surface));
}
.view:has(> .panel > :where(#list-body)) .tabs > a {
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.view:has(> .panel > :where(#list-body)) .tabs > a:hover { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.view:has(> .panel > :where(#list-body)) .tabs > [aria-selected="true"] { color: var(--fg); background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-weight: 500; }
.view:has(> .panel > :where(#list-body)) .tabs .toggle { font-size: 12px; line-height: 1.6; }
:is(.view:has(> .panel > :where(#list-body)), #detail) .btn { min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: none; }
#detail .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
:is(.view:has(> .panel > :where(#list-body)), #detail) :is(.btn, .tabs > a, .toggle input, .textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:is(#list-body, #detail) th { padding: 12px; color: var(--fg-2); background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
:is(#list-body, #detail) td { padding: 14px 12px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 13px; }
:is(#list-body, #detail) :is(th, td):first-child { padding-left: 24px; }
:is(#list-body, #detail) :is(th, td):last-child { padding-right: 24px; }
:is(#list-body, #detail) .cell-main { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
:is(#list-body, #detail) td .sub { margin-top: 4px; font-size: 10.5px; line-height: 1.5; }
:is(#list-body, #detail) .cell-task { margin-top: 4px; font-size: 11.5px; }
:is(#list-body, #detail) tbody tr.clickable:hover td { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
:is(#list-body, #detail) .row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
:is(#list-body, #detail) .pill { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 18px; }
:is(#list-body, #detail) .pill::before { width: 5px; height: 5px; }
:is(#list-body, #detail) .tag { min-height: 22px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; line-height: 18px; }
:is(#list-body, #detail) .capacity { gap: 12px; }
:is(#list-body, #detail) .capacity .meter { height: 5px; border-radius: 2px; background: var(--surface-3); }
:is(#list-body, #detail) .capacity .meter i { border-radius: 2px; }
:is(#list-body, #detail) .capacity .num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; }
:is(#list-body, #detail) .state-reason { margin-top: 6px; font-size: 10.5px; line-height: 1.65; }

#detail > .stack { gap: 20px; }
#detail .panel.run-head {
  padding: 24px;
  gap: 20px;
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent));
}
#detail .run-head-top { gap: 18px 24px; align-items: center; }
#detail .run-head .stats { padding-top: 20px; gap: 18px 32px; }
#detail .stat { gap: 6px; max-width: 100%; }
#detail .stat small { font-size: 11.5px; line-height: 1.5; }
#detail .stat > b { font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; }
#detail .stat > b.mono { font-size: 12px; line-height: 1.6; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
#detail .stat .capacity { min-height: 28px; }
#detail .stat .capacity .num { font-size: 16px; letter-spacing: -.025em; }
#detail .panel-head { padding: 20px 24px 0; gap: 10px 16px; }
#detail .panel-head.ruled { padding-bottom: 16px; }
#detail .panel-head h2 { font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.03em; }
#detail .panel-head .sub { margin-top: 4px; font-size: 12px; line-height: 1.6; }
#detail .panel-body { padding: 18px 24px 24px; }
#detail .composer { padding: 20px 24px; gap: 14px; }
#detail .composer .textarea { padding: 12px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 30%, var(--surface)); font-size: 13px; line-height: 1.7; box-shadow: none; }
#detail .composer .textarea:disabled { background: var(--surface-2); }
#detail .composer-foot { gap: 10px 16px; }
#detail .composer :is(.toggle, .composer-note) { font-size: 12px; line-height: 1.6; }
#detail .callout { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.7; }
#detail .callout pre.code { font-size: 11.5px; line-height: 1.8; }
#detail .io-label { margin-bottom: 8px; font-size: 11px; line-height: 1.5; }
#detail .kv { gap: 12px 18px; font-size: 12px; line-height: 1.6; }
#detail .kv dt { font-size: 11.5px; }
#detail .kv dd.mono { font-size: 11.5px; }
#detail .codeblock pre { padding: 14px 42px 14px 16px; border-radius: var(--radius-sm); border-color: var(--code-border); background: var(--code-bg); color: var(--code-fg); font-size: 11.5px; line-height: 1.8; }
#detail .empty.compact { padding: 28px 24px; }

@media (max-width: 640px) {
  .view:has(> .panel > :where(#list-body)) > .panel > .tabs { padding: 8px; flex-wrap: wrap; }
  .view:has(> .panel > :where(#list-body)) .tabs > a { padding-inline: 12px; }
  .view:has(> .panel > :where(#list-body)) .tabs > span { display: none; }
  .view:has(> .panel > :where(#list-body)) .tabs .toggle { min-height: 32px; flex-basis: 100%; }
  :is(#list-body, #detail) th { padding: 10px 8px; }
  :is(#list-body, #detail) td { padding: 13px 8px; }
  :is(#list-body, #detail) :is(th, td):first-child { padding-left: 16px; }
  :is(#list-body, #detail) :is(th, td):last-child { padding-right: 16px; }
  :is(#list-body, #detail) .pill { padding-inline: 6px; }
  #detail .panel.run-head { padding: 20px 16px; }
  #detail .run-head-top .actions > .btn { padding-inline: 10px; }
  #detail .run-head .stats { gap: 18px 20px; }
  #detail .stat > b { font-size: 20px; }
  #detail .panel-head { padding: 18px 16px 0; }
  #detail .panel-head.ruled { padding-bottom: 14px; }
  #detail .panel-body, #detail .composer { padding: 16px; }
  #detail .kv { gap: 10px 14px; }
  #detail .empty.compact { padding: 24px 16px; }
}

/* Improvements keeps its existing split view, state filters and review flow.
   Only the candidate list and report surfaces use these presentation rules. */
#imp-states { gap: 8px; }
#imp-states .chip { min-height: 34px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; }
#imp-states .chip[aria-pressed="true"] { color: var(--fg); border-color: var(--border-strong); background: var(--surface-2); }
#imp-list, #imp-report { border-color: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
#imp-report { scroll-margin-top: 72px; }
#imp-list { padding: 8px; gap: 4px; }
#imp-list .imp-item { padding: 14px; gap: 8px; border-radius: var(--radius-sm); }
#imp-list .imp-item:hover { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
#imp-list .imp-item[aria-current="true"] { background: var(--surface-2); border-color: var(--border-strong); }
#imp-list .imp-item > b { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
#imp-list .imp-item .row > .mono { font-size: 10.5px; line-height: 1.6; }
#imp-list .imp-item .row > .pill { flex-shrink: 0; }
#imp-list .imp-item .meta { gap: 4px 12px; font-size: 11px; line-height: 1.6; }
#imp-list .imp-item .meta .mono { font-size: 10.5px; }
:is(#imp-list, #imp-report) .pill { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 18px; }
:is(#imp-list, #imp-report) .pill::before { width: 5px; height: 5px; }
#imp-report .tag { min-height: 22px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; line-height: 18px; }
:is(#imp-states, #imp-list, #imp-report) :is(a, button, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#imp-report .report-head {
  padding: 24px;
  gap: 16px;
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent));
}
#imp-report .report-head h2 { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; }
#imp-report .report-head > .title-row { line-height: 1.6; }
#imp-report .report-head > .title-row > .mono { font-size: 10.5px; overflow-wrap: anywhere; }
#imp-report .report-meta { gap: 8px 18px; font-size: 12px; line-height: 1.65; align-items: center; }
#imp-report .report-actions { padding-top: 2px; gap: 10px; }
#imp-report .btn { min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: none; }
#imp-report .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#imp-report .traffic { border-radius: var(--radius-sm); }
#imp-report .traffic .select { min-height: 36px; padding: 8px 30px 8px 12px; font-size: 12px; line-height: 1.4; background-color: var(--surface-2); color: var(--fg); }
#imp-report .traffic .btn { min-height: 36px; padding: 8px 12px; border-radius: 0; }
#imp-report .traffic:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
#imp-report .callout { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.7; }
#imp-report .callout b { font-weight: 500; }
#imp-report .deltas { background: color-mix(in srgb, var(--surface-2) 32%, var(--surface)); }
#imp-report .dcell { padding: 20px 24px; gap: 8px; }
#imp-report .dcell small { font-size: 11px; line-height: 1.5; }
#imp-report .dcell .from-to { font-size: 12px; line-height: 1.6; }
#imp-report .dcell .from-to b { font-size: 24px; font-weight: 400; letter-spacing: -.035em; }
#imp-report .section { padding: 24px; gap: 16px; }
#imp-report .section h3 { font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.03em; }
#imp-report .section h3 small { display: block; margin: 6px 0 0; font-size: 12px; line-height: 1.6; letter-spacing: 0; }
#imp-report .section > p { font-size: 12px; line-height: 1.7; }
#imp-report .replays li { padding: 16px 0; gap: 16px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 12px; line-height: 1.65; }
#imp-report .replays li b { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
#imp-report .replays li .small { font-size: 11px; }
#imp-report .replays li .report-meta { gap: 6px 14px; font-size: 11px; }
#imp-report .changes { gap: 16px; }
#imp-report .change { border-radius: var(--radius-sm); border-color: var(--border); }
#imp-report .change-head { padding: 14px 16px; gap: 6px 10px; background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
#imp-report .change-head b { font-size: 13px; font-weight: 500; line-height: 1.5; }
#imp-report .change-head p { margin-top: 4px; font-size: 12px; line-height: 1.7; }
#imp-report .diff { padding-block: 10px; font-size: 11.5px; line-height: 1.8; }
#imp-report .diff > div { padding: 2px 16px; }
#imp-report > .empty { padding: 44px 24px; }
#imp-list > .empty { padding: 28px 16px; }

@media (max-width: 640px) {
  #imp-list .imp-item { padding: 12px; }
  #imp-report .report-head { padding: 20px 16px; }
  #imp-report .report-head h2 { font-size: 22px; }
  #imp-report .report-meta { gap: 8px 14px; }
  #imp-report .report-actions > .btn { padding-inline: 12px; }
  #imp-report .dcell { padding: 18px 16px; }
  #imp-report .section { padding: 20px 16px; }
  #imp-report .replays li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Override only this inline alignment so replay results fit below each task. */
  #imp-report .replays li > .stack:last-child { align-items: flex-start !important; }
  #imp-report .change-head { padding: 12px 14px; }
  #imp-report .diff > div { padding-inline: 14px; }
  #imp-report > .empty { padding: 32px 16px; }
}

/* The report is narrower while the candidate rail is still beside it. */
@media (min-width: 981px) and (max-width: 1360px) {
  #imp-report .deltas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #imp-report .dcell:nth-child(2) { border-right: 0; }
  #imp-report .dcell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  #imp-report .replays li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #imp-report .replays li > .stack:last-child { align-items: flex-start !important; }
}

/* Settings surfaces, forms and dialogs follow the landing page's warm panels.
   All section routes, form markup and settings actions remain in their modules. */
.settings-layout > .settings-nav {
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 65%, var(--surface));
}
.settings-layout > .settings-nav a { flex-shrink: 0; min-height: 38px; margin: 0; padding: 8px 12px; gap: 10px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.settings-layout > .settings-nav a:hover { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.settings-layout > .settings-nav a[aria-current="page"] { border-color: var(--border); background: var(--surface); color: var(--fg); font-weight: 500; box-shadow: none; }
.settings-layout > .settings-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#settings-body { gap: 20px; }
#settings-body .panel { border-color: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
#settings-body > .panel:first-child {
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--surface) 94%, transparent),
    color-mix(in srgb, var(--surface-2) 84%, transparent));
}
#settings-body .panel-head { padding: 20px 24px 0; gap: 10px 16px; }
#settings-body .panel-head.ruled { padding-bottom: 16px; }
#settings-body .panel-head h2 { font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.03em; }
#settings-body .panel-head .sub { margin-top: 4px; font-size: 12px; line-height: 1.6; }
#settings-body .panel-body { padding: 20px 24px 24px; }
#settings-body .setting-row { padding: 20px 24px; gap: 16px 24px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 13px; line-height: 1.6; }
#settings-body .setting-row > :last-child { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#settings-body .setting-row > span { flex-wrap: wrap; }
#settings-body .setting-row b { font-size: 13px; font-weight: 500; }
#settings-body .setting-row .mono { font-size: 11.5px; }
#settings-body .help, #settings-body p.small { font-size: 12px; line-height: 1.7; }
#settings-body .setting-row .help { margin-top: 4px; }
#settings-body .field { gap: 8px; }
#settings-body .field > label { color: var(--fg-2); font-size: 12px; font-weight: 500; line-height: 1.5; }
#settings-body :is(.input, .select, .textarea) { min-height: 40px; padding: 10px 12px; border-color: var(--border); border-radius: var(--radius-sm); background-color: var(--surface); font-size: 13px; line-height: 1.4; box-shadow: none; }
#settings-body .select { padding-right: 32px; }
#settings-body :is(.input.mono, .textarea.mono) { font-size: 12px; }
#settings-body :is(.input.sm, .select.sm) { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#settings-body .select.sm { padding-right: 28px; }
#settings-body :is(.input, .select, .textarea):focus { border-color: var(--accent); box-shadow: none; }
#settings-body :is(.input, .select, .textarea):disabled { background-color: var(--surface-2); color: var(--fg-3); }
#settings-body :is(.input, .textarea)[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
#settings-body .btn { min-height: 40px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; box-shadow: none; }
#settings-body .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#settings-body :is(.btn, .input, .select, .textarea, .seg button, .chip, .icon-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#settings-body .inline-form { gap: 12px; }
#settings-body .seg { padding: 4px; gap: 4px; border-radius: var(--radius-sm); }
#settings-body .seg button { min-height: 32px; padding: 6px 12px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
#settings-body th { padding: 12px; color: var(--fg-2); background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
#settings-body td { padding: 14px 12px; border-color: color-mix(in srgb, var(--border) 78%, transparent); font-size: 13px; }
#settings-body :is(th, td):first-child { padding-left: 24px; }
#settings-body :is(th, td):last-child { padding-right: 24px; }
#settings-body td.mono, #settings-body td > a.mono { font-size: 11.5px; }
#settings-body .cell-main { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
#settings-body .cell-main.mono { font-size: 12px; letter-spacing: 0; }
#settings-body :is(.cell-sub, td .sub) { margin-top: 4px; font-size: 11px; line-height: 1.6; }
#settings-body .cell-sub.mono { font-size: 10.5px; }
#settings-body .pill { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 18px; }
#settings-body .pill::before { width: 5px; height: 5px; }
#settings-body .badge.role { padding: 3px 7px; border-radius: 4px; font-size: 11px; }
#settings-body .callout { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.7; }
#settings-body .callout b { font-weight: 500; }
#settings-body .model-provider { margin-bottom: 12px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; }
#settings-body .model-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
#settings-body .model-tile { padding: 18px; gap: 8px; border-color: var(--border); border-radius: var(--radius-sm); background: var(--surface); }
#settings-body .model-tile-head > b { font-size: 16px; font-weight: 400; line-height: 1.35; letter-spacing: -.025em; }
#settings-body .model-tile-id { font-size: 11.5px; line-height: 1.6; overflow-wrap: anywhere; }
#settings-body .model-tile .help { font-size: 11.5px; }
#settings-body .model-tile-older { margin-top: 4px; gap: 8px; }
#settings-body .model-tile-older .chip { min-height: 24px; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 1.5; }
#settings-body .notification-setup { padding: 20px; border-color: var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
#settings-body .notification-form { gap: 12px; }
#settings-body .notification-code-form .input { font-size: 14px; }
#settings-body .secret-key { padding: 16px; gap: 12px; border-color: var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; line-height: 1.7; }
#settings-body .codeblock-label { margin-bottom: 8px; font-size: 11px; line-height: 1.5; }
#settings-body .codeblock pre { padding: 14px 42px 14px 16px; border-color: var(--code-border); border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-fg); font-size: 11.5px; line-height: 1.8; }
#settings-body .empty { padding: 44px 24px; }
#settings-body .empty.compact { padding: 28px 24px; }

/* Dialogs are attached to body by the existing form helper. */
body:has(#settings-body) > .dlg { border-color: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
body:has(#settings-body) > .dlg .dlg-head { padding: 24px 24px 0; }
body:has(#settings-body) > .dlg .dlg-head h2 { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -.035em; }
body:has(#settings-body) > .dlg .dlg-head p { margin-top: 8px; font-size: 12px; line-height: 1.7; }
body:has(#settings-body) > .dlg .dlg-body { padding: 20px 24px 24px; }
body:has(#settings-body) > .dlg .dlg-foot { padding: 16px 24px; gap: 10px; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
body:has(#settings-body) > .dlg .field { gap: 8px; }
body:has(#settings-body) > .dlg .field > label { color: var(--fg-2); font-size: 12px; line-height: 1.5; }
body:has(#settings-body) > .dlg :is(.input, .select, .textarea) { min-height: 40px; padding: 10px 12px; border-color: var(--border); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; box-shadow: none; }
body:has(#settings-body) > .dlg .select { padding-right: 32px; }
body:has(#settings-body) > .dlg .help { font-size: 12px; line-height: 1.7; }
body:has(#settings-body) > .dlg .btn { min-height: 40px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; box-shadow: none; }
body:has(#settings-body) > .dlg :is(.input, .select, .textarea):focus { border-color: var(--accent); }
body:has(#settings-body) > .dlg :is(.input, .textarea)[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
body:has(#settings-body) > .dlg :is(.input, .select, .textarea, .btn, .icon-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 640px) {
  #settings-body .panel-head { padding: 18px 16px 0; }
  #settings-body .panel-head.ruled { padding-bottom: 14px; }
  #settings-body .panel-body { padding: 16px; }
  #settings-body .setting-row { padding: 18px 16px; gap: 12px; }
  #settings-body .setting-row .seg { justify-self: start; }
  #settings-body .notification-setup { padding: 16px; }
  #settings-body .notification-form .input { font-size: 16px; }
  #settings-body .notification-code-form .input { font-size: 16px; }
  #settings-body .model-tile { padding: 16px; }
  #settings-body th { padding: 10px 8px; }
  #settings-body td { padding: 13px 8px; }
  #settings-body :is(th, td):first-child { padding-left: 16px; }
  #settings-body :is(th, td):last-child { padding-right: 16px; }
  #settings-body .empty { padding: 32px 16px; }
  #settings-body .empty.compact { padding: 24px 16px; }
  body:has(#settings-body) > .dlg .dlg-head { padding: 20px 16px 0; }
  body:has(#settings-body) > .dlg .dlg-body { padding: 18px 16px; }
  body:has(#settings-body) > .dlg .dlg-foot { padding: 14px 16px; }
}

/* Shared dialogs and feedback. Keep the native dialog, form validation,
   dismissal, search navigation and retry handlers in their original modules. */
.dlg { border-color: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.dlg::backdrop { background: var(--backdrop); }
.dlg:not(.palette) .dlg-head { padding: 24px 24px 0; }
.dlg:not(.palette) .dlg-head > div { min-width: 0; }
.dlg:not(.palette) .dlg-head h2 { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -.035em; overflow-wrap: anywhere; }
.dlg:not(.palette) .dlg-head p { margin-top: 8px; font-size: 12px; line-height: 1.7; }
.dlg:not(.palette) .dlg-body { padding: 20px 24px 24px; gap: 16px; }
.dlg:not(.palette) .dlg-text { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.dlg:not(.palette) .dlg-foot { padding: 16px 24px; gap: 10px; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); border-radius: 0 0 var(--radius) var(--radius); }
.dlg:not(.palette) .field { gap: 8px; }
.dlg:not(.palette) :is(.field > label, .field-label) { color: var(--fg-2); font-size: 12px; font-weight: 500; line-height: 1.5; }
.dlg:not(.palette) :is(.input, .select, .textarea) { padding: 10px 12px; border-color: var(--border); border-radius: var(--radius-sm); background-color: var(--surface); font-size: 13px; line-height: 1.4; box-shadow: none; }
.dlg:not(.palette) :is(.input, .select) { min-height: 40px; }
.dlg:not(.palette) .select { padding-right: 32px; }
.dlg:not(.palette) :is(.input.mono, .textarea.mono) { font-size: 12px; }
.dlg:not(.palette) :is(.input.sm, .select.sm) { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.dlg:not(.palette) .select.sm { padding-right: 28px; }
.dlg:not(.palette) :is(.input, .select, .textarea):not(:disabled):not([aria-invalid="true"]):hover { border-color: var(--border-strong); }
.dlg:not(.palette) :is(.input, .select, .textarea):focus { border-color: var(--accent); box-shadow: none; }
.dlg:not(.palette) :is(.input, .select, .textarea):disabled { background-color: var(--surface-2); color: var(--fg-3); }
.dlg:not(.palette) :is(.input, .textarea)[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.dlg:not(.palette) .help { font-size: 12px; line-height: 1.7; }
.dlg:not(.palette) .btn { min-height: 40px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; box-shadow: none; }
.dlg:not(.palette) .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.dlg:not(.palette) :is(.input, .select, .textarea, .btn, .icon-btn, .check-row input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dlg:not(.palette) :is(.input, .textarea)[aria-invalid="true"]:focus-visible { outline-color: var(--bad); }
.dlg:not(.palette) .form-grid { gap: 16px; }
.dlg:not(.palette) .check-row { gap: 10px; line-height: 1.65; }
.dlg:not(.palette) .check-row b { font-size: 13px; font-weight: 500; line-height: 1.5; }
.dlg:not(.palette) .check-row span { font-size: 12px; line-height: 1.65; }
.dlg:not(.palette) .size-grid { gap: 10px; }
.dlg:not(.palette) .size-opt label { min-height: 84px; padding: 12px; gap: 4px; border-color: var(--border); background: var(--surface); }
.dlg:not(.palette) .size-opt label b { font-size: 12px; font-weight: 400; }
.dlg:not(.palette) .size-opt label span { font-size: 11px; line-height: 1.6; }
.dlg:not(.palette) .size-opt input:checked + label { border-color: var(--accent); background: var(--surface-2); box-shadow: none; }
.dlg:not(.palette) .kv-editor { gap: 8px; }
.dlg:not(.palette) [data-config-fields]:not([hidden]) { display: grid; gap: 16px; }
.dlg:not(.palette) .kv-row { gap: 8px; }
.dlg:not(.palette) .kv-row > .icon-btn { width: 32px; height: 32px; align-self: center; }
.dlg-error { margin: 0 24px 12px; padding: 12px 14px; gap: 10px; border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.dlg-error > .ico { flex: none; margin-top: 3px; }

/* The search palette uses the same surfaces without inheriting form spacing. */
.palette-input { padding: 16px 20px; gap: 12px; }
.palette-input:focus-within { border-bottom-color: var(--border-strong); }
.palette-input input { font-size: 15px; line-height: 1.6; }
.palette-input input::placeholder { color: var(--fg-3); opacity: 1; }
.palette-list { padding: 8px; }
.palette-list li button { min-height: 38px; padding: 10px 12px; gap: 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.palette-list li button:hover { background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)); }
.palette-list li button[aria-selected="true"] { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); }
.palette-list li button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.palette-list li button span.hint { font-family: var(--font-mono); font-size: 10.5px; }
.palette-group { padding: 10px 12px 6px; font-size: 10.5px; line-height: 1.5; }
.palette-foot { padding: 12px 20px; gap: 10px 16px; flex-wrap: wrap; border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); font-size: 11px; line-height: 1.6; }

/* A chart can carry .empty too; retain its existing geometry and padding. */
.empty:not(.spark), .state-error { gap: 10px; padding: 44px 24px; }
.empty.compact:not(.spark), .state-error.compact { padding: 28px 24px; }
.empty-icon { width: 40px; height: 40px; flex: none; margin-bottom: 4px; border-color: var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.empty-icon.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, var(--border)); background: var(--bad-soft); }
.empty-title { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.empty-body { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.state-error .empty-body .mono { font-size: 11px; line-height: 1.7; }
:is(.empty:not(.spark), .state-error) .btn { min-height: 36px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; box-shadow: none; }
:is(.empty:not(.spark), .state-error) .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.callout { padding: 14px 16px; gap: 10px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.7; }
.callout > .ico { flex: none; margin-top: 3px; }
.callout b { font-weight: 500; }
.banner { padding: 14px 16px; font-size: 13px; line-height: 1.6; }
.banner > .ico { flex: none; margin-top: 3px; }
.banner b { font-weight: 500; }
.banner span { font-size: 12px; line-height: 1.7; }

@media (max-width: 640px) {
  .dlg:not(.palette) .dlg-head { padding: 20px 16px 0; }
  .dlg:not(.palette) .dlg-head h2 { font-size: 20px; }
  .dlg:not(.palette) .dlg-body { padding: 18px 16px; }
  .dlg:not(.palette) .dlg-foot { padding: 14px 16px; }
  .dlg-error { margin: 0 16px 10px; }
  .palette-input { padding: 14px 16px; }
  .palette-list li button { padding: 10px; gap: 10px; }
  .palette-foot { padding: 12px 16px; }
  .empty:not(.spark), .state-error { padding: 32px 16px; }
  .empty.compact:not(.spark), .state-error.compact { padding: 24px 16px; }
}

/* Playground: keep the message stream, composition and version actions intact. */
.panel:has(> .pg-log) > .panel-head { padding: 24px; gap: 16px 24px; align-items: flex-start; }
.panel:has(> .pg-log) > .panel-head h2 { font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -.035em; }
.panel:has(> .pg-log) > .panel-head .sub { max-width: 660px; margin-top: 8px; font-size: 12px; line-height: 1.7; }
.panel:has(> .pg-log) .btn { min-height: 40px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.4; box-shadow: none; }
.panel:has(> .pg-log) .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.panel:has(> .pg-log) :is(.btn, .textarea, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pg-version:not(:empty) { padding: 20px 24px 0; }
.pg-log { padding: 24px; gap: 20px; background: color-mix(in srgb, var(--surface-2) 28%, var(--surface)); scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
.pg-log:has(> .pg-empty) { align-items: center; justify-content: center; }
.pg-empty { max-width: 360px; margin: 0; text-align: center; font-size: 13px; line-height: 1.75; }
.pg-msg { max-width: min(680px, 88%); gap: 8px; min-width: 0; }
.pg-text { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; line-height: 1.75; }
.pg-user .pg-text { border-color: var(--accent); border-bottom-right-radius: 4px; background: var(--accent); color: var(--accent-fg); }
.pg-agent .pg-text { border-bottom-left-radius: 4px; }
.pg-msg.pending .pg-text { border-style: dashed; background: var(--surface); color: var(--fg-3); }
.pg-msg.error .pg-text { border-color: color-mix(in srgb, var(--bad) 28%, var(--border)); background: var(--bad-soft); color: var(--bad); }
.pg-meta { padding-inline: 4px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; }
.pg-meta a { font-family: var(--font-ui); font-size: 11.5px; text-underline-offset: 3px; }
.pg-form { padding: 20px 24px; gap: 12px; background: var(--surface); }
.pg-form .textarea { min-width: 0; min-height: 60px; padding: 12px 14px; border-color: var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; line-height: 1.6; box-shadow: none; }
.pg-form .textarea:hover { border-color: var(--border-strong); }
.pg-form .textarea:focus { border-color: var(--accent); box-shadow: none; }
.pg-form .textarea::placeholder { color: var(--fg-3); opacity: 1; }
.pg-form > .btn { min-width: 88px; }

/* Agent creation and deployment. Scope to the existing creation form attributes
   so the rest of the console retains its page-specific spacing. */
.view:has([data-way-panel]) > .panel,
.view:has([data-way-panel]) [data-review] > .panel { border-color: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.view:has([data-way-panel]) > .panel > .tabs { padding: 8px; gap: 4px; border-radius: var(--radius) var(--radius) 0 0; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.view:has([data-way-panel]) .tabs > [data-way] { min-height: 38px; margin: 0; padding: 9px 14px; border: 0; border-radius: var(--radius-sm); font-size: 13px; font-weight: 400; line-height: 1.5; }
.view:has([data-way-panel]) .tabs > [data-way]:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.view:has([data-way-panel]) .tabs > [data-way][aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--border); font-weight: 500; }
.view:has([data-way-panel]) .panel-head { padding: 20px 24px; gap: 10px 20px; }
.view:has([data-way-panel]) .panel-head h2 { font-size: 20px; font-weight: 400; line-height: 1.35; letter-spacing: -.03em; }
.view:has([data-way-panel]) .panel-head .sub { font-size: 12px; line-height: 1.7; }
.view:has([data-way-panel]) .panel-body { padding: 24px; gap: 20px; }
.view:has([data-way-panel]) .panel-body > p { font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.view:has([data-way-panel]) .panel-body > p.small { font-size: 12px; }
.view:has([data-way-panel]) .panel-foot { padding: 16px 24px; gap: 12px; border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.view:has([data-way-panel]) .field { gap: 8px; }
.view:has([data-way-panel]) :is(.field > label, .field-label) { color: var(--fg-2); font-size: 12px; font-weight: 500; line-height: 1.5; }
.view:has([data-way-panel]) :is(.input, .select, .textarea) { padding: 10px 12px; border-color: var(--border); border-radius: var(--radius-sm); background-color: var(--surface); font-size: 13px; line-height: 1.6; box-shadow: none; }
.view:has([data-way-panel]) :is(input.input, .select) { min-height: 42px; }
.view:has([data-way-panel]) .select { padding-right: 32px; }
.view:has([data-way-panel]) :is(.input.mono, .textarea.mono) { font-size: 12px; line-height: 1.8; }
.view:has([data-way-panel]) :is(.input, .select, .textarea):not(:disabled):not([aria-invalid="true"]):hover { border-color: var(--border-strong); }
.view:has([data-way-panel]) :is(.input, .select, .textarea):focus { border-color: var(--accent); box-shadow: none; }
.view:has([data-way-panel]) :is(.input, .select, .textarea):disabled { background-color: var(--surface-2); color: var(--fg-3); }
.view:has([data-way-panel]) :is(.input, .textarea)[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.view:has([data-way-panel]) :is(.input, .textarea)::placeholder { color: var(--fg-3); opacity: 1; }
.view:has([data-way-panel]) .help { font-size: 12px; line-height: 1.7; }
.view:has([data-way-panel]) .btn { min-height: 42px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; box-shadow: none; }
.view:has([data-way-panel]) .btn.sm { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.view:has([data-way-panel]) :is(.btn, .input, .select, .textarea, .tabs > [data-way], .seg > button, .copy-btn, .check-row input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.view:has([data-way-panel]) :is(.input, .textarea)[aria-invalid="true"]:focus-visible { outline-color: var(--bad); }
.view:has([data-way-panel]) .actions { gap: 10px; }
[data-way-panel="plugin"] > .seg { align-self: flex-start; max-width: 100%; padding: 4px; gap: 4px; }
[data-way-panel="plugin"] .seg > button { min-height: 34px; padding: 7px 12px; font-size: 12px; line-height: 1.5; }
[data-way-panel="plugin"] .seg > button:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
[data-way-panel="plugin"] .seg > button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
[data-way-panel="plugin"] [data-tool-panel] { gap: 20px; }
[data-way-panel="plugin"] .codeblock-label { margin-bottom: 8px; font-size: 11px; line-height: 1.5; letter-spacing: .025em; }
[data-way-panel="plugin"] .codeblock pre { padding: 16px 52px 16px 18px; font-size: 12px; line-height: 1.8; scrollbar-color: var(--code-border) transparent; scrollbar-width: thin; }
[data-way-panel="plugin"] .copy-btn { right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: var(--radius-sm); }
[data-way-panel] .dropzone { padding: 40px 24px; gap: 16px; border-width: 1px; border-color: var(--border-strong); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
[data-way-panel] .dropzone > b { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; }
[data-way-panel] .dropzone > .small { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
[data-way-panel] .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
[data-way-panel="describe"] textarea { padding: 14px 16px; line-height: 1.8; resize: vertical; }
[data-way-panel="describe"] .chips { align-items: center; }
[data-draft-form] :is([data-skill], [data-secret]) { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); }
[data-draft-form] :is([data-skill], [data-secret]) .actions { gap: 10px; }
[data-draft-form] :is([data-skill], [data-secret]) .input { min-width: 0; max-width: 100%; }
[data-review] .kv { gap: 12px 24px; font-size: 13px; line-height: 1.7; }
[data-review] .kv dt { font-size: 12px; }
[data-review] .kv dd.mono { font-size: 11.5px; }
[data-review] pre.code { padding: 14px 16px; border-color: var(--code-border); border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-fg); font-size: 12px; line-height: 1.8; scrollbar-color: var(--code-border) transparent; scrollbar-width: thin; }
[data-review] .tags { gap: 6px; }
[data-review] .pill { border-radius: 4px; font-size: 11px; }
[data-review] .check-row { gap: 10px; font-size: 12px; line-height: 1.7; }
[data-review] [data-preview] .check-row { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
[data-review] .check-row b { font-weight: 500; }
[data-review] [data-advanced] { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
[data-review] [data-advanced] summary { color: var(--fg); font-size: 12px; line-height: 1.6; }
[data-review] [data-advanced] > .help { margin-top: 10px; }

@media (max-width: 640px) {
  .panel:has(> .pg-log) > .panel-head { padding: 20px 16px; gap: 16px; }
  .panel:has(> .pg-log) > .panel-head h2 { font-size: 20px; }
  .pg-version:not(:empty) { padding: 16px 16px 0; }
  .pg-log { padding: 20px 16px; gap: 16px; }
  .pg-msg { max-width: 94%; }
  .pg-text { padding: 12px 14px; font-size: 13px; }
  .pg-form { flex-wrap: wrap; padding: 16px; }
  .pg-form .textarea { flex-basis: 100%; font-size: 14px; }
  .pg-form > .btn { margin-left: auto; }
  .view:has([data-way-panel]) > .panel > .tabs { display: grid; grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 4px; }
  .view:has([data-way-panel]) .tabs > [data-way] { white-space: normal; text-align: left; }
  .view:has([data-way-panel]) .panel-head { padding: 18px 16px; }
  .view:has([data-way-panel]) .panel-body { padding: 20px 16px; gap: 18px; }
  .view:has([data-way-panel]) .panel-foot { padding: 16px; }
  [data-way-panel="plugin"] > .seg { align-self: stretch; flex-wrap: wrap; }
  [data-way-panel="plugin"] .seg > button { flex: 1; padding-inline: 8px; }
  [data-way-panel="plugin"] .codeblock pre { padding-left: 14px; font-size: 11px; }
  [data-way-panel] .dropzone { padding: 28px 16px; }
  [data-way-panel] .dropzone > b { font-size: 15px; }
  [data-way-panel="describe"] textarea { padding: 12px; }
  [data-draft-form] :is([data-skill], [data-secret]) { padding: 12px; }
  [data-draft-form] :is([data-skill], [data-secret]) .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-draft-form] :is([name="skill-name"], [name="secret-name"]) { width: 100% !important; }
  [data-draft-form] :is([data-skill], [data-secret]) .btn { justify-self: start; }
  [data-review] .kv { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  [data-review] .kv dt { white-space: normal; overflow-wrap: anywhere; }
  [data-review] .kv dd:not(:last-child) { margin-bottom: 10px; }
  [data-review] :is([data-advanced], [data-preview] .check-row) { padding: 12px; }
}

/* Reserve copper for branding and primary actions. Ordinary information uses
   slate blue; selection stays neutral and data has its own chart colors. */
a, .link-btn { color: var(--info); }
.nav a[aria-current="page"] { background: var(--selection-bg); color: var(--fg); }
.nav .count { background: var(--info-soft); color: var(--info); }
.chip[aria-pressed="true"] { background: var(--selection-bg); border-color: var(--border-strong); color: var(--fg); }
.seg [aria-pressed="true"], .seg [aria-current="true"] { color: var(--fg); }
.imp-item[aria-current="true"] { background: var(--selection-bg); border-color: var(--border-strong); }
#imp-list .imp-item[aria-current="true"] { background: var(--selection-bg); }
#run-tabs-panel .wf-row[aria-selected="true"] { background: var(--selection-bg); border-left-color: var(--border-strong); }
.pill.accent, .tag.accent, .result-icon.accent { background: var(--info-soft); color: var(--info); }
.tag.accent { border-color: var(--info-line); }
.dot.accent, .attn .stripe.info { background: var(--info); }
.callout.tone-info { background: var(--info-soft); border-color: var(--info-line); }
.callout.tone-info > .ico { color: var(--info); }

/* Keep the success series, its legend and hover indicators in sync. Semantic
   success, warning, regression and rollback colors retain their existing roles. */
.ch-grad-top, .ch-grad-bottom { stop-color: var(--chart-primary); }
.ch-cur { stroke: var(--chart-primary); }
.ch-cur-dot, .ch-end, .ch-hover-cur { fill: var(--chart-primary); }
.ch-tip-row .key.cur { border-color: var(--chart-primary); }
.spark.tone-accent { --spark: var(--chart-neutral); }
.split-bar i:first-child { background: var(--chart-neutral); }

.agent-api-title { display: flex; align-items: center; gap: 8px; }
.agent-api-title > .pill { flex: none; letter-spacing: normal; }

/* Agent API examples share one local tab strip across all integration methods. */
.call-examples > summary { cursor: pointer; }
.call-examples-body { margin-top: 16px; gap: 20px; }
.call-example-tabs {
  max-width: 100%;
  flex-shrink: 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.call-example-tabs > button { flex-shrink: 0; min-height: 36px; margin: 0; padding: 8px 12px; border: 0; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.call-example-tabs > button:hover { background: var(--surface); }
.call-example-tabs > [aria-selected="true"] { background: var(--selection-bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border-strong); }
.call-examples :is([role="tab"], [role="tabpanel"]):focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
/* REST stays in flow as the height reference; other examples use that space. */
.call-example-panels { position: relative; min-width: 0; }
.call-examples [data-call-example-panel] { min-width: 0; visibility: hidden; pointer-events: none; }
.call-examples [data-call-example-panel].is-active { visibility: visible; pointer-events: auto; }
.call-examples [data-call-example-panel]:not([data-call-example-panel="rest"]) { position: absolute; inset: 0; overflow: auto; }
.call-examples [data-call-example-panel="rest"] > .stack { gap: 28px; }
.call-examples [data-call-example-panel] h3 { color: var(--fg); font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.call-examples [data-call-example-panel] .help { max-width: 88ch; color: var(--fg-2); font-size: 12px; line-height: 1.7; }
.call-examples [data-call-example-panel] h3 + .help { margin-top: 6px; }
.call-examples [data-call-example-panel] :is(h3, .help) + .codeblock { margin-top: 12px; }
.call-examples .codeblock { border: 1px solid var(--code-border); border-radius: var(--radius-sm); background: var(--code-bg); }
.call-examples .codeblock pre { margin: 0 48px 0 0; padding: 16px 12px 16px 18px; border: 0; border-radius: 0; background: transparent; font-size: 12px; line-height: 1.8; scrollbar-color: var(--code-border) transparent; scrollbar-width: thin; }
.call-examples .copy-btn { top: 12px; right: 12px; bottom: auto; width: 30px; height: 30px; }

@media (max-width: 640px) {
  .call-examples-body { gap: 16px; }
  .call-examples [data-call-example-panel="rest"] > .stack { gap: 24px; }
  .call-examples .codeblock pre { margin-right: 44px; padding: 14px 12px 14px 14px; font-size: 11.5px; }
  .call-examples .copy-btn { top: 10px; right: 10px; width: 28px; height: 28px; }
}

/* ---------- Claim offer: an agent built on the user's MCP server ---------- */
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px rgba(60, 196, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 196, 138, 0); } }
.live-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #3cc48a; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3cc48a; box-shadow: 0 0 0 0 rgba(60, 196, 138, .7); animation: live-pulse 1.6s infinite; }
.claim-banner { margin: 20px 28px 0; max-width: 1504px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; padding: 20px 24px; border-radius: 14px; background: #1c1c1c; color: #f5f5f4; border: 1px solid #333; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .55); }
.claim-banner[hidden], .claim-offer:not([open]) { display: none; }
.claim-banner > div { flex: 1; min-width: min(260px, 100%); }
.claim-banner h3 { font-size: 19px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -.015em; }
.claim-banner p { margin: 0; font-size: 13.5px; color: #bdbdb8; }
.claim-banner .mono { color: #f0c3ad; }
.claim-banner > .btn { margin-left: auto; flex: none; padding: 10px 18px; font-size: 14px; font-weight: 600; }
.claim-offer { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--surface); color: var(--fg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.claim-offer[open] { animation: pop-in .16s ease-out; }
.claim-offer::backdrop { background: rgba(28, 28, 28, .5); backdrop-filter: blur(3px); }
.claim-offer-top { padding: 28px 28px 24px; background: #1c1c1c; color: #f5f5f4; }
.claim-offer-top h2 { font-size: 24px; font-weight: 600; margin: 12px 0 8px; letter-spacing: -.02em; }
.claim-offer-top p { margin: 0; color: #bdbdb8; font-size: 14px; line-height: 1.5; }
.claim-offer-body { padding: 18px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.claim-offer dl { margin: 0; }
.claim-offer dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.claim-offer dt { color: var(--fg-3); flex: none; }
.claim-offer dd { margin: 0; text-align: right; }
.claim-offer-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 6px; }
.claim-offer-btns .btn { justify-content: center; padding: 11px; font-size: 14px; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .claim-banner { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } }
:root[data-theme="dark"] .claim-banner { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 860px) { .claim-banner { margin: 16px 16px 0; } }