/* ── Base ── */
:root {
  color-scheme: light dark;
  --bg: #f5f7f6;
  --bg-end: #ebf0ee;
  --bg-surface: #ffffff;
  --bg-surface2: #edf2f0;
  --bg-code: #eef2f6;
  --text: #18201e;
  --text-muted: #5f6d68;
  --text-faint: #86928e;
  --text-placeholder: #9ba7a3;
  --accent: #12847d;
  --accent-strong: #0f6d68;
  --accent-blue: #2563eb;
  --accent-amber: #a75d00;
  --accent-bg: rgba(18,132,125,0.10);
  --accent-bg-hover: rgba(18,132,125,0.16);
  --accent-subtle: rgba(18,132,125,0.035);
  --accent-subtle2: rgba(37,99,235,0.045);
  --accent-ring: rgba(18,132,125,0.14);
  --accent-gradient: rgba(18,132,125,0.08);
  --border: rgba(20,31,28,0.10);
  --border-med: rgba(20,31,28,0.12);
  --border-heavy: rgba(20,31,28,0.22);
  --border-faint: rgba(20,31,28,0.06);
  --border-row: rgba(20,31,28,0.08);
  --border-hover: rgba(20,31,28,0.20);
  --bg-hover: rgba(20,31,28,0.04);
  --bg-alt: rgba(20,31,28,0.012);
  --shadow1: rgba(20,31,28,0.04);
  --btn-bg: #17211f;
  --btn-bg-hover: #293734;
  --btn-text: #ffffff;
  --separator: #d0d5d3;
  --hero-tint: color-mix(in srgb, #ffffff 94%, #0f766e 6%);
  --hero-border: color-mix(in srgb, rgba(20,31,28,0.10) 50%, #0f766e 50%);
  --empty-icon: #c5ccc9;
  --status-default-bg: #edf2f1;
  --status-default-text: #263633;
  --status-ok-bg: rgba(21,128,61,0.10);
  --status-ok-text: #166534;
  --status-error-bg: rgba(185,28,28,0.10);
  --status-error-text: #991b1b;
  --status-active-bg: rgba(3,105,161,0.10);
  --status-active-text: #075985;
  --status-waiting-bg: rgba(180,83,9,0.10);
  --status-waiting-text: #92400e;
  --status-stopped-bg: rgba(71,85,105,0.12);
  --status-stopped-text: #475569;
  --border-error: #dc2626;
  --border-ok: #16a34a;
  --border-active: #0284c7;
  --border-waiting: #d97706;
  --border-stopped: #64748b;
  --trace-error: #b91c1c;
  --trace-reasoning: #b45309;
  --trace-finish: #15803d;
  --error-color: #9b1c1c;
  --warn-color: #b45309;
  --success-color: #166534;
  --shadow-pop: 0 1px 2px rgba(20,31,28,0.06), 0 14px 34px rgba(20,31,28,0.10);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111716;
    --bg-end: #151d1b;
    --bg-surface: #1b2422;
    --bg-surface2: #161f1d;
    --bg-code: #101817;
    --text: #e0e5e3;
    --text-muted: #9ca8a4;
    --text-faint: #6f7c78;
    --text-placeholder: #5a6662;
    --accent: #35d0bd;
    --accent-strong: #68eadc;
    --accent-blue: #7aa7ff;
    --accent-amber: #f4b45f;
    --accent-bg: rgba(53,208,189,0.12);
    --accent-bg-hover: rgba(53,208,189,0.18);
    --accent-subtle: rgba(53,208,189,0.045);
    --accent-subtle2: rgba(122,167,255,0.06);
    --accent-ring: rgba(53,208,189,0.15);
    --accent-gradient: rgba(53,208,189,0.06);
    --border: rgba(200,220,215,0.10);
    --border-med: rgba(200,220,215,0.14);
    --border-heavy: rgba(200,220,215,0.22);
    --border-faint: rgba(200,220,215,0.06);
    --border-row: rgba(200,220,215,0.08);
    --border-hover: rgba(200,220,215,0.20);
    --bg-hover: rgba(200,220,215,0.04);
    --bg-alt: rgba(200,220,215,0.03);
    --shadow1: rgba(0,0,0,0.2);
    --btn-bg: #e0e5e3;
    --btn-bg-hover: #c5ccc9;
    --btn-text: #0f1514;
    --separator: #2a3634;
    --hero-tint: color-mix(in srgb, #1a2320 94%, #2dd4bf 6%);
    --hero-border: color-mix(in srgb, rgba(200,220,215,0.10) 50%, #2dd4bf 50%);
    --empty-icon: #3a4844;
    --status-default-bg: rgba(200,220,215,0.08);
    --status-default-text: #9ca8a4;
    --status-ok-bg: rgba(34,197,94,0.15);
    --status-ok-text: #4ade80;
    --status-error-bg: rgba(239,68,68,0.15);
    --status-error-text: #f87171;
    --status-active-bg: rgba(56,189,248,0.15);
    --status-active-text: #38bdf8;
    --status-waiting-bg: rgba(251,191,36,0.15);
    --status-waiting-text: #fbbf24;
    --status-stopped-bg: rgba(148,163,184,0.14);
    --status-stopped-text: #cbd5e1;
    --border-error: #f87171;
    --border-ok: #4ade80;
    --border-active: #38bdf8;
    --border-waiting: #fbbf24;
    --border-stopped: #94a3b8;
    --trace-error: #f87171;
    --trace-reasoning: #fbbf24;
    --trace-finish: #4ade80;
    --error-color: #f87171;
    --warn-color: #fbbf24;
    --success-color: #4ade80;
    --shadow-pop: 0 1px 2px rgba(0,0,0,0.28), 0 18px 40px rgba(0,0,0,0.30);
  }
  .search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7c78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7f6;
  --bg-end: #ebf0ee;
  --bg-surface: #ffffff;
  --bg-surface2: #edf2f0;
  --bg-code: #eef2f6;
  --text: #18201e;
  --text-muted: #5f6d68;
  --text-faint: #86928e;
  --text-placeholder: #9ba7a3;
  --accent: #12847d;
  --accent-strong: #0f6d68;
  --accent-blue: #2563eb;
  --accent-amber: #a75d00;
  --accent-bg: rgba(18,132,125,0.10);
  --accent-bg-hover: rgba(18,132,125,0.16);
  --accent-subtle: rgba(18,132,125,0.035);
  --accent-subtle2: rgba(37,99,235,0.045);
  --accent-ring: rgba(18,132,125,0.14);
  --accent-gradient: rgba(18,132,125,0.08);
  --border: rgba(20,31,28,0.10);
  --border-med: rgba(20,31,28,0.12);
  --border-heavy: rgba(20,31,28,0.22);
  --border-faint: rgba(20,31,28,0.06);
  --border-row: rgba(20,31,28,0.08);
  --border-hover: rgba(20,31,28,0.20);
  --bg-hover: rgba(20,31,28,0.04);
  --bg-alt: rgba(20,31,28,0.012);
  --shadow1: rgba(20,31,28,0.04);
  --btn-bg: #17211f;
  --btn-bg-hover: #293734;
  --btn-text: #ffffff;
  --separator: #d0d5d3;
  --hero-tint: color-mix(in srgb, #ffffff 94%, #0f766e 6%);
  --hero-border: color-mix(in srgb, rgba(20,31,28,0.10) 50%, #0f766e 50%);
  --empty-icon: #c5ccc9;
  --status-default-bg: #edf2f1;
  --status-default-text: #263633;
  --status-ok-bg: rgba(21,128,61,0.10);
  --status-ok-text: #166534;
  --status-error-bg: rgba(185,28,28,0.10);
  --status-error-text: #991b1b;
  --status-active-bg: rgba(3,105,161,0.10);
  --status-active-text: #075985;
  --status-waiting-bg: rgba(180,83,9,0.10);
  --status-waiting-text: #92400e;
  --status-stopped-bg: rgba(71,85,105,0.12);
  --status-stopped-text: #475569;
  --border-error: #dc2626;
  --border-ok: #16a34a;
  --border-active: #0284c7;
  --border-waiting: #d97706;
  --border-stopped: #64748b;
  --trace-error: #b91c1c;
  --trace-reasoning: #b45309;
  --trace-finish: #15803d;
  --error-color: #9b1c1c;
  --warn-color: #b45309;
  --success-color: #166534;
  --shadow-pop: 0 1px 2px rgba(20,31,28,0.06), 0 14px 34px rgba(20,31,28,0.10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111716;
  --bg-end: #151d1b;
  --bg-surface: #1b2422;
  --bg-surface2: #161f1d;
  --bg-code: #101817;
  --text: #e0e5e3;
  --text-muted: #9ca8a4;
  --text-faint: #6f7c78;
  --text-placeholder: #5a6662;
  --accent: #35d0bd;
  --accent-strong: #68eadc;
  --accent-blue: #7aa7ff;
  --accent-amber: #f4b45f;
  --accent-bg: rgba(53,208,189,0.12);
  --accent-bg-hover: rgba(53,208,189,0.18);
  --accent-subtle: rgba(53,208,189,0.045);
  --accent-subtle2: rgba(122,167,255,0.06);
  --accent-ring: rgba(53,208,189,0.15);
  --accent-gradient: rgba(53,208,189,0.06);
  --border: rgba(200,220,215,0.10);
  --border-med: rgba(200,220,215,0.14);
  --border-heavy: rgba(200,220,215,0.22);
  --border-faint: rgba(200,220,215,0.06);
  --border-row: rgba(200,220,215,0.08);
  --border-hover: rgba(200,220,215,0.20);
  --bg-hover: rgba(200,220,215,0.04);
  --bg-alt: rgba(200,220,215,0.03);
  --shadow1: rgba(0,0,0,0.2);
  --btn-bg: #e0e5e3;
  --btn-bg-hover: #c5ccc9;
  --btn-text: #0f1514;
  --separator: #2a3634;
  --hero-tint: color-mix(in srgb, #1a2320 94%, #2dd4bf 6%);
  --hero-border: color-mix(in srgb, rgba(200,220,215,0.10) 50%, #2dd4bf 50%);
  --empty-icon: #3a4844;
  --status-default-bg: rgba(200,220,215,0.08);
  --status-default-text: #9ca8a4;
  --status-ok-bg: rgba(34,197,94,0.15);
  --status-ok-text: #4ade80;
  --status-error-bg: rgba(239,68,68,0.15);
  --status-error-text: #f87171;
  --status-active-bg: rgba(56,189,248,0.15);
  --status-active-text: #38bdf8;
  --status-waiting-bg: rgba(251,191,36,0.15);
  --status-waiting-text: #fbbf24;
  --status-stopped-bg: rgba(148,163,184,0.14);
  --status-stopped-text: #cbd5e1;
  --border-error: #f87171;
  --border-ok: #4ade80;
  --border-active: #38bdf8;
  --border-waiting: #fbbf24;
  --border-stopped: #94a3b8;
  --trace-error: #f87171;
  --trace-reasoning: #fbbf24;
  --trace-finish: #4ade80;
  --error-color: #f87171;
  --warn-color: #fbbf24;
  --success-color: #4ade80;
  --shadow-pop: 0 1px 2px rgba(0,0,0,0.28), 0 18px 40px rgba(0,0,0,0.30);
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, var(--bg), var(--bg-end)); min-height: 100dvh; }
main { width: min(1360px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 48px; }

/* ── Nav ── */
nav { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.nav-left { display: flex; align-items: center; gap: 12px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.console-title { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0; }
.console-title::before { content: "Q"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 800; }
.env-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent-bg); color: var(--accent); }
.nav-user { color: var(--text-faint); font-size: 13px; font-weight: 500; }

/* ── Sections ── */
section { margin: 0 0 16px; padding: 18px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-pop); }
.login { min-height: 100dvh; display: grid; place-items: center; }
.login section { width: min(420px, 100%); }

/* ── Typography ── */
h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.12; overflow-wrap: anywhere; font-weight: 800; letter-spacing: 0; }
h2 { margin: 0 0 12px; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.25; }
p { margin: 0 0 12px; line-height: 1.48; text-wrap: pretty; }
.eyebrow { margin: 0 0 8px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.muted, .lede { color: var(--text-muted); }

/* ── Links & Buttons ── */
a { color: var(--accent); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
button, .button-link { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: var(--btn-bg); color: var(--btn-text); padding: 0 13px; font-weight: 800; font-family: inherit; font-size: inherit; cursor: pointer; touch-action: manipulation; }
.copy-button { min-width: 72px; align-self: stretch; }
.button-link.secondary { background: var(--accent-bg); color: var(--accent); }
button:hover, .button-link:hover { background: var(--btn-bg-hover); text-decoration: none; }
.button-link.secondary:hover { background: var(--accent-bg-hover); }

/* ── Forms ── */
label { display: block; margin-bottom: 8px; font-weight: 700; }
input, textarea { width: 100%; min-height: 40px; border: 1px solid var(--border-heavy); border-radius: 7px; padding: 8px 10px; margin-bottom: 12px; font: inherit; background: var(--bg-surface); color: var(--text); }
textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
button:disabled { opacity: 0.48; cursor: not-allowed; }

/* ── Tables (base) ── */
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--border-row); padding: 10px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }

/* ── Code ── */
pre { max-width: 100%; overflow: auto; margin: 10px 0 0; padding: 12px; background: var(--bg-surface2); border: 1px solid var(--border); border-radius: 7px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.command { margin: 0; font-weight: 700; }
.command-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; margin: 10px 0 10px; }
code, pre, .trace-time, .trace-tool, .artifact-row code { font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }

/* ── Grid layout (dl) ── */
.grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 14px; }
dt { color: var(--text-muted); font-weight: 800; font-size: 12px; }
dd { margin: 0; overflow-wrap: anywhere; }

/* ── Session detail hero ── */
.session-hero { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; background: linear-gradient(180deg, var(--bg-surface), var(--hero-tint)); border-color: var(--hero-border); }
.hero-side { display: grid; gap: 8px; justify-items: end; min-width: 180px; }

/* ── Tabs ── */
.tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 0 0; background: transparent; box-shadow: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.tab { display: inline-flex; min-height: 42px; align-items: center; color: var(--text-muted); border-bottom: 2px solid transparent; padding: 0 13px; white-space: nowrap; }
.tab.current { color: var(--text); border-bottom-color: var(--accent); }

/* ── Metrics ── */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.metric { border: 1px solid var(--border); background: var(--bg-surface2); border-radius: 7px; padding: 12px; }
.metric strong { display: block; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric span { color: var(--text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }

/* ── Overview ── */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 14px; }
.outcome { background: var(--bg-surface2); border: 1px solid var(--border); border-radius: 7px; padding: 14px; }
.notice { margin: 10px 0 14px; background: var(--bg-surface2); border: 1px solid var(--border); border-radius: 7px; padding: 12px; }
.notice p { margin-bottom: 0; color: var(--text-muted); }

/* ── Status badges ── */
.status { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 9px; background: var(--status-default-bg); color: var(--status-default-text); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.status-ok { background: var(--status-ok-bg); color: var(--status-ok-text); }
.status-error { background: var(--status-error-bg); color: var(--status-error-text); }
.status-active { background: var(--status-active-bg); color: var(--status-active-text); }
.status-waiting { background: var(--status-waiting-bg); color: var(--status-waiting-text); }
.status-stopped { background: var(--status-stopped-bg); color: var(--status-stopped-text); }

/* ── Actions ── */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.inline-form { margin: 0; }
button.danger { background: var(--status-error-bg); color: var(--status-error-text); border: 1px solid color-mix(in srgb, var(--status-error-text) 35%, transparent); }
button.danger:hover { background: color-mix(in srgb, var(--status-error-bg) 82%, var(--status-error-text) 18%); }

/* ── Headlines ── */
.section-headline, .event-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }

/* ── Filter row (agent history) ── */
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.filter-row span { border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; }

/* ── Trace items ── */
.trace-list, .event-list, .artifact-list { display: grid; gap: 0; }
.trace-item { display: grid; grid-template-columns: 76px 108px minmax(0, 1fr) 90px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-row); align-items: start; }
.trace-item:last-child, .artifact-row:last-child { border-bottom: 0; }
.trace-time, .trace-tool { color: var(--text-faint); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trace-kind { color: var(--text-muted); font-size: 12px; font-weight: 800; }
.trace-body p { color: var(--text-muted); margin-bottom: 0; }
.trace-tool_error .trace-kind, .trace-tool_error h3 { color: var(--trace-error); }
.trace-reasoning .trace-kind { color: var(--trace-reasoning); }
.trace-finish .trace-kind, .trace-finish h3 { color: var(--trace-finish); }

/* ── Events ── */
.event { padding: 12px 0; border-bottom: 1px solid var(--border-row); }
.event:last-child { border-bottom: 0; }
.event-head span { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── Artifacts ── */
.artifact-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 98px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-row); }
.artifact-row p { color: var(--text-muted); margin: 0; font-size: 12px; }
.artifact-row code { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-width: 520px; }
.artifact-chip { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--border-row); border-radius: 6px; padding: 3px 6px; color: var(--text-muted); background: var(--panel-bg); text-decoration: none; font-size: 12px; }
.artifact-chip:hover { color: var(--text-main); border-color: var(--text-faint); }

/* ── Error ── */
.error { color: var(--error-color); font-weight: 800; }

/* ══════════════════════════════════════════════
   Sessions list page
   ══════════════════════════════════════════════ */

/* ── Summary bar ── */
.summary-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.summary-total { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.summary-total strong { font-size: 28px; font-weight: 800; color: var(--text); margin-right: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.summary-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-med); background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s ease; }
.filter-pill:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hover); }
.filter-pill.active { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.pill-count { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Search ── */
.search-bar { padding: 0 18px 14px; }
.search-input { width: 100%; min-height: 40px; border: 1px solid var(--border-med); border-radius: 7px; padding: 8px 12px 8px 36px; font: inherit; font-size: 14px; color: var(--text); margin: 0; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2387928f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 12px center no-repeat; transition: border-color 0.15s, background-color 0.15s; outline: none; }
.search-input::placeholder { color: var(--text-placeholder); }
.search-input:focus { border-color: var(--accent); background-color: var(--bg-surface); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ── Sessions section ── */
.sessions-section { padding: 0; overflow: hidden; }

/* ── Date groups ── */
.date-group { padding: 10px 18px 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); background: var(--bg); border-bottom: 1px solid var(--border-faint); }

/* ── Session cards ── */
.session-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 14px 18px 14px 21px; border-bottom: 1px solid var(--border-faint); border-left: 3px solid transparent; cursor: pointer; transition: background 0.1s ease; text-decoration: none; color: inherit; }
.session-card:hover { background: var(--accent-subtle); text-decoration: none; }
.session-card:nth-child(even of .session-card) { background: var(--bg-alt); }
.session-card:nth-child(even of .session-card):hover { background: var(--accent-subtle2); }
.session-card:last-child { border-bottom: none; }
.session-card.hidden { display: none; }
.show-more-wrap { text-align: center; padding: 16px 0 24px; }
.show-more-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 24px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.show-more-btn:hover { background: var(--bg-hover, #f5f5f5); border-color: var(--text-faint); }
.sessions-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 18px 0 24px; }
.session-card.border-error { border-left-color: var(--border-error); }
.session-card.border-ok { border-left-color: var(--border-ok); }
.session-card.border-active { border-left-color: var(--border-active); }
.session-card.border-waiting { border-left-color: var(--border-waiting); }
.session-card.border-stopped { border-left-color: var(--border-stopped); }

/* Card layout */
.card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card-time { color: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; align-self: start; padding-top: 2px; }
.card-extref { font-size: 14px; font-weight: 700; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.card-session-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--text-faint); line-height: 1.4; grid-column: 1 / -1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-placeholder); grid-column: 1 / -1; margin-top: 1px; }
.meta-sep { color: var(--separator); }
.meta-source { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px; color: var(--text-faint); }
.meta-inputs { font-variant-numeric: tabular-nums; }
.meta-inputs.zero { color: var(--warn-color); font-weight: 700; }
.meta-inputs.done { color: var(--success-color); }
.meta-hint { color: var(--warn-color); font-weight: 600; font-style: italic; }

/* ── Empty state ── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; }
.empty-state .empty-icon { font-size: 48px; color: var(--empty-icon); margin-bottom: 16px; line-height: 1; }
.empty-state h2 { color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
.empty-state p { color: var(--text-faint); max-width: 360px; }

/* ── Responsive ── */
@media (max-width: 820px) {
  main { width: min(100% - 20px, 1280px); padding-top: 16px; }
  section { padding: 14px; }
  nav, .session-hero, .section-headline { align-items: flex-start; flex-direction: column; }
  .hero-side { justify-items: start; }
  .command-tools { grid-template-columns: 1fr; }
  .grid, .overview-grid, .trace-item, .artifact-row { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table { display: block; overflow-x: auto; }
  .summary-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .session-card { padding: 12px 14px 12px 17px; }
}

@media (max-width: 520px) {
  .codex-toolbar { grid-template-columns: 1fr; }
}