:root {
  --bg: #070b18;
  --panel: #0b1121;
  --panel-2: #10182a;
  --panel-3: #151f34;
  --line: #27324a;
  --line-soft: #1b253a;
  --text: #f4f7ff;
  --muted: #9aa7be;
  --blue: #6d9dff;
  --blue-2: #4f80ed;
  --cyan: #56d4ff;
  --green: #73d7ad;
  --amber: #f2b84b;
  --red: #ff846e;
  --purple: #9f86ff;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
button, textarea, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.app-shell { display: grid; grid-template-columns: 236px minmax(540px, 1fr) 356px; height: 100vh; min-height: 0; overflow: hidden; }
.app-shell.trace-closed { grid-template-columns: 236px minmax(540px, 1fr) 0; }
.app-shell.trace-closed .trace-panel { border: 0; overflow: hidden; }
.app-shell.utility-open { grid-template-columns: 236px minmax(640px, 1fr) 0; }
.app-shell.utility-open .trace-panel { border: 0; overflow: hidden; }
.sidebar { height: 100vh; min-height: 0; background: #080d1a; border-right: 1px solid var(--line-soft); padding: 18px 14px 14px; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.brand { height: 39px; display: flex; align-items: center; gap: 10px; padding: 0 8px; color: white; text-decoration: none; font-size: 15px; font-weight: 700; }
.brand b { color: var(--blue); }
.brand em { display: inline-block; margin-left: 4px; padding: 3px 5px; border: 1px solid #465b84; border-radius: 4px; color: #a9c4ff; background: #111a2d; font: 500 7px var(--mono); letter-spacing: .1em; vertical-align: 2px; }
.brand-mark { position: relative; display: block; width: 27px; height: 27px; border: 1px solid var(--blue); transform: rotate(30deg); border-radius: 4px; }
.brand-mark::before, .brand-mark::after, .brand-mark i { content: ""; position: absolute; width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 10px var(--blue); }
.brand-mark::before { left: -3px; top: 9px; }.brand-mark::after { right: -3px; bottom: 4px; }.brand-mark i { left: 10px; top: -3px; }
.new-thread { width: 100%; border: 1px solid #34415d; background: #10182a; border-radius: 9px; padding: 10px 12px; margin: 19px 0 20px; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; }
.new-thread:hover { border-color: var(--blue); background: #14203a; }
.new-thread span { color: var(--blue); font-size: 18px; margin-right: 7px; }
.nav-label { margin: 0 9px 8px; font: 500 9px var(--mono); letter-spacing: .16em; color: #65738e; text-transform: uppercase; }
.nav-item, .history-item { width: 100%; background: transparent; border: 0; border-radius: 7px; text-align: left; cursor: pointer; }
.nav-item { padding: 9px 10px; color: #9da9bd; font-size: 12px; margin-bottom: 2px; }
.nav-item span { display: inline-block; width: 24px; color: #71819d; }.nav-item em { float: right; font-style: normal; color: #65738e; }
.nav-item.active, .nav-item:hover { color: #edf3ff; background: #121b2d; }.nav-item.active span { color: var(--blue); }
.history { margin-top: 25px; flex: 1; min-height: 0; }
.history-item { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 3px; }
.history-item span { color: #a8b3c6; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item small { color: #586780; font-size: 9px; }.history-item.active { background: #10192b; border-left: 2px solid var(--blue); }
.user-card { border-top: 1px solid var(--line-soft); padding: 14px 4px 0; display: grid; grid-template-columns: 31px 1fr 24px; gap: 9px; align-items: center; }
.avatar { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #285dc7, #7b65db); font-size: 10px; font-weight: 700; }
.user-card strong, .user-card small { display: block; }.user-card strong { font-size: 10px; }.user-card small { color: #66758e; font-size: 8px; margin-top: 3px; }
.user-card button { border: 0; background: transparent; color: #66758e; cursor: pointer; }

.workspace { height: 100vh; min-height: 0; min-width: 0; overflow: hidden; background: radial-gradient(circle at 45% 0, rgba(53,92,180,.09), transparent 38%), var(--bg); display: grid; grid-template-rows: 57px minmax(0, 1fr) auto; }
.topbar { border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 11px; }
.topbar > div { display: flex; align-items: center; gap: 9px; }.domain-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.preview-pill { font: 500 8px var(--mono); letter-spacing: .12em; color: #d0a85b; border: 1px solid #594728; border-radius: 20px; padding: 4px 7px; }
.top-actions button { border: 1px solid #2d3850; background: #0c1323; border-radius: 6px; padding: 6px 10px; font-size: 10px; cursor: pointer; }.top-actions button:last-child { padding-inline: 8px; color: #8794ab; }
.status { color: var(--green); margin-right: 4px; }.status i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 5px; }
.conversation { min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px clamp(22px, 5vw, 70px) 44px; scrollbar-color: #40506c #0a1020; }
.welcome { max-width: 770px; margin: clamp(40px, 9vh, 112px) auto 0; text-align: center; }
.orbit-mark { width: 48px; height: 48px; border: 1px solid #3e5b92; border-radius: 14px; transform: rotate(45deg); margin: 0 auto 24px; position: relative; box-shadow: 0 0 32px rgba(79,128,237,.12) inset; }
.orbit-mark::before, .orbit-mark span, .orbit-mark i, .orbit-mark b { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.orbit-mark::before { left: -4px; top: 20px; }.orbit-mark span { right: -4px; top: 20px; }.orbit-mark i { left: 20px; top: -4px; }.orbit-mark b { left: 20px; bottom: -4px; }
.eyebrow { color: var(--blue); font: 500 9px var(--mono); letter-spacing: .22em; }
.welcome h1 { font: 600 clamp(30px, 4.2vw, 46px)/1.05 var(--serif); margin: 12px 0 12px; letter-spacing: -.025em; }
.welcome > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 610px; margin: 0 auto; }
.suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 38px; text-align: left; }
.suggestions button { min-height: 124px; border: 1px solid #26344e; background: linear-gradient(145deg, rgba(20,30,52,.92), rgba(11,17,33,.96)); border-radius: 10px; padding: 15px; cursor: pointer; transition: .18s ease; }
.suggestions button:hover { transform: translateY(-2px); border-color: #4b6ba6; background: #141f36; }
.suggestions span { color: var(--cyan); font: 500 8px var(--mono); text-transform: uppercase; letter-spacing: .12em; }.suggestions strong { display: block; margin: 14px 0 7px; font-size: 12px; line-height: 1.4; }.suggestions small { color: #73819a; font-size: 9px; line-height: 1.45; }
.composer { margin: 0 clamp(22px, 5vw, 70px) 18px; border: 1px solid #35435e; background: rgba(14,21,38,.98); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.context-chips { padding: 9px 12px 0; display: flex; gap: 6px; }.context-chips span { font: 500 7px var(--mono); color: #8493ad; background: #111c31; border: 1px solid #25344f; border-radius: 20px; padding: 4px 7px; }
.composer-row { display: grid; grid-template-columns: 31px 1fr auto; gap: 7px; align-items: end; padding: 8px 9px 7px; }
.composer textarea { resize: none; max-height: 120px; border: 0; outline: 0; background: transparent; color: white; line-height: 1.5; font-size: 12px; padding: 8px 3px; }
.composer textarea::placeholder { color: #69768c; }.attach { width: 29px; height: 29px; border-radius: 7px; border: 1px solid #2e3b55; background: transparent; color: #8b99b1; cursor: pointer; }
.run-button { border: 0; border-radius: 8px; background: var(--blue-2); padding: 9px 12px; font-size: 10px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 16px rgba(79,128,237,.25); }.run-button:hover { background: #6794f4; }.run-button:disabled { opacity: .55; cursor: wait; }.run-button span { margin-right: 7px; }
.composer > p { margin: 0 0 8px; text-align: center; font-size: 7px; color: #536078; }

.trace-panel { height: 100vh; min-height: 0; border-left: 1px solid var(--line-soft); background: #090e1b; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: #40506c #0a1020; transition: .18s ease; }
.trace-panel > header { position: sticky; top: 0; z-index: 3; height: 57px; border-bottom: 1px solid var(--line-soft); padding: 0 14px 0 17px; display: flex; justify-content: space-between; align-items: center; background: #090e1b; }
.trace-panel header p { font: 500 8px var(--mono); color: #66758e; margin: 0 0 4px; letter-spacing: .13em; }.trace-panel header strong { font-size: 10px; }.trace-panel header button { background: transparent; border: 0; color: #71809a; font-size: 18px; cursor: pointer; }
.trace-empty { padding: 72px 32px; text-align: center; color: #69778f; font-size: 10px; line-height: 1.7; }
.mini-graph { width: 90px; height: 64px; position: relative; margin: 0 auto 25px; background: linear-gradient(30deg, transparent 48%, #253652 49%, #253652 51%, transparent 52%); }
.mini-graph i { position: absolute; width: 10px; height: 10px; border: 2px solid #4669ac; background: #0b1120; border-radius: 50%; }.mini-graph i:nth-child(1){left:4px;top:42px}.mini-graph i:nth-child(2){left:35px;top:8px}.mini-graph i:nth-child(3){right:5px;top:39px}.mini-graph i:nth-child(4){left:40px;bottom:0}
.trace-content { padding: 13px; }.trace-meta { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }.trace-meta span { border: 1px solid #26344e; background: #10192b; border-radius: 20px; padding: 5px 7px; font: 500 7px var(--mono); color: #8e9bb1; }.trace-meta span:first-child { color: var(--green); }.trace-meta i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 4px; }
.trace-step { position: relative; margin: 0 0 0 10px; padding: 15px 0 0 23px; border-left: 1px solid #2c3a55; }.trace-step:last-child { padding-bottom: 12px; }.trace-step::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: #111a2c; border: 1px solid #4d6289; }.trace-step.complete::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 9px rgba(115,215,173,.35); }
.trace-step.running::before { background: var(--blue); border-color: var(--blue); animation: pulse 1s infinite; }.trace-step strong { display: block; font-size: 10px; }.trace-step > span { color: #6e7d96; font: 400 8px var(--mono); }.trace-step p { color: #a5b0c3; font-size: 9px; line-height: 1.55; margin: 8px 0 0; }
.trace-step details { margin-top: 8px; border: 1px solid #202c42; background: #090f1c; border-radius: 7px; overflow: hidden; }.trace-step summary { cursor: pointer; padding: 7px 9px; color: #7e8ba1; font: 500 8px var(--mono); }.trace-step pre { white-space: pre-wrap; margin: 0; border-top: 1px solid #202c42; padding: 9px; color: #9bc4ff; font: 400 7.5px/1.55 var(--mono); max-height: 180px; overflow: auto; }
.lineage-card { margin-top: 14px; border: 1px solid #26334b; background: #0d1526; border-radius: 8px; overflow: hidden; }.lineage-toggle { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px; text-align: left; font-size: 9px; cursor: pointer; }.lineage-toggle em { font: normal 7px var(--mono); color: #71809a; }.lineage-list { border-top: 1px solid #26334b; padding: 6px 9px; max-height: 184px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #40506c #111a2b; scrollbar-width: thin; }.source-row { padding: 9px 0; border-bottom: 1px solid #1c273b; }.source-row:last-child { border: 0; }.source-row strong { display: block; font-size: 8px; }.source-row span { color: #64738c; font: 400 7px var(--mono); }
.sidebar:focus-visible, .conversation:focus-visible, .trace-panel:focus-visible { outline: 1px solid #4a6fae; outline-offset: -2px; }
.sidebar::-webkit-scrollbar, .conversation::-webkit-scrollbar, .trace-panel::-webkit-scrollbar, .lineage-list::-webkit-scrollbar, .trace-step pre::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-track, .conversation::-webkit-scrollbar-track, .trace-panel::-webkit-scrollbar-track, .lineage-list::-webkit-scrollbar-track, .trace-step pre::-webkit-scrollbar-track { background: #0a1020; }
.sidebar::-webkit-scrollbar-thumb, .conversation::-webkit-scrollbar-thumb, .trace-panel::-webkit-scrollbar-thumb, .lineage-list::-webkit-scrollbar-thumb, .trace-step pre::-webkit-scrollbar-thumb { background: #40506c; border: 2px solid #0a1020; border-radius: 8px; }
.sidebar::-webkit-scrollbar-thumb:hover, .conversation::-webkit-scrollbar-thumb:hover, .trace-panel::-webkit-scrollbar-thumb:hover, .lineage-list::-webkit-scrollbar-thumb:hover, .trace-step pre::-webkit-scrollbar-thumb:hover { background: #617494; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(109,157,255,.08); } }

.message { max-width: 850px; margin: 0 auto 26px; }.user-message { display: flex; justify-content: flex-end; }.user-bubble { max-width: 80%; background: #17223a; border: 1px solid #2d3c59; border-radius: 12px 12px 3px 12px; padding: 12px 15px; font-size: 12px; line-height: 1.55; }
.assistant-message { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }.message-avatar { width: 31px; height: 31px; border-radius: 9px; border: 1px solid #3c5f9c; background: #101a30; display: grid; place-items: center; color: var(--blue); font: 500 8px var(--mono); }
.message-body > .thinking { color: #91a0b8; font-size: 11px; margin-top: 8px; }.thinking i { display: inline-block; width: 5px; height: 5px; background: var(--blue); border-radius: 50%; margin-right: 4px; animation: pulse 1s infinite; }
.answer-header .answer-kicker { color: var(--green); font: 500 8px var(--mono); letter-spacing: .11em; }.answer-header h2 { font: 600 24px/1.2 var(--serif); margin: 8px 0; max-width: 720px; }.answer-header > p { color: #a8b4c7; font-size: 11px; line-height: 1.65; margin: 0 0 15px; }
.metric-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border: 1px solid #2a3853; border-radius: 9px; overflow: hidden; margin: 16px 0; background: #2a3853; }.metric { background: #10192b; padding: 12px; }.metric span { display: block; color: #73819a; font: 500 7px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.metric strong { display: block; font: 600 20px var(--serif); margin-top: 4px; }.metric strong.bad { color: var(--red); }.metric small { color: #63718a; font-size: 7px; }
.report-card { border: 1px solid #2b3954; background: #0c1425; border-radius: 10px; overflow: hidden; margin: 13px 0; }.report-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-bottom: 1px solid #243149; }.report-head div strong { display: block; font-size: 10px; }.report-head div small { color: #6e7b91; font-size: 7px; }.report-tabs { display: flex; background: #09101d; border: 1px solid #25324a; border-radius: 6px; padding: 2px; }.report-tabs button { border: 0; background: transparent; color: #718099; font-size: 7px; padding: 5px 8px; border-radius: 4px; cursor: pointer; }.report-tabs button.active { background: #19243a; color: white; }
.chart-area { padding: 14px 13px 10px; min-height: 215px; }.chart-area svg { width: 100%; height: 180px; overflow: visible; }.chart-grid { stroke: #243149; stroke-width: 1; }.chart-label { fill: #6f7e95; font: 9px var(--mono); }.chart-value { fill: #dce6f8; font: 10px var(--mono); }.chart-line { stroke: var(--blue); stroke-width: 2.5; fill: none; }.chart-area circle { fill: #0d1526; stroke: var(--blue); stroke-width: 2; cursor: pointer; }.chart-area circle:hover { fill: var(--blue); }.target-line { stroke: #52607a; stroke-width: 1; stroke-dasharray: 4 4; }.target-label { fill: #7a879d; font: 8px var(--mono); }
.driver-list { padding: 7px 13px 15px; }.driver-row { display: grid; grid-template-columns: 120px 1fr 47px; gap: 10px; align-items: center; margin: 10px 0; }.driver-row span { font-size: 9px; }.driver-bar { height: 7px; background: #202b41; border-radius: 8px; overflow: hidden; }.driver-bar i { display: block; height: 100%; border-radius: 8px; }.driver-row strong { text-align: right; font: 500 9px var(--mono); }
.insight-callout { display: grid; grid-template-columns: 3px 1fr; gap: 11px; margin: 13px 0 17px; background: #111b2e; border: 1px solid #263651; border-radius: 8px; padding: 12px; }.insight-callout i { background: var(--cyan); border-radius: 3px; }.insight-callout strong { display: block; font-size: 10px; margin-bottom: 4px; }.insight-callout p { margin: 0; color: #8f9cb2; font-size: 9px; line-height: 1.55; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }.section-title span { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: #18325e; color: var(--blue); font: 500 8px var(--mono); }.section-title h3 { margin: 0; font-size: 12px; }
.actions-list { display: grid; gap: 8px; }.action-card { display: grid; grid-template-columns: 44px 1fr 72px; gap: 11px; border: 1px solid #273650; background: #0e1728; border-radius: 8px; padding: 11px; }.action-card > span { color: var(--cyan); font: 500 8px var(--mono); }.action-card strong { display: block; font-size: 10px; }.action-card p { color: #8290a6; font-size: 8px; line-height: 1.5; margin: 4px 0 7px; }.action-card small { color: #697890; font-size: 7px; }.action-impact { text-align: right; }.action-impact b { display: block; color: var(--green); font: 500 10px var(--mono); }.action-impact small { display: block; margin-top: 4px; }
.answer-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: #65738b; font-size: 8px; }.answer-footer div { display: flex; gap: 6px; }.answer-footer button { border: 1px solid #26344d; background: transparent; color: #8795aa; border-radius: 6px; padding: 6px 8px; cursor: pointer; }

.view-loading, .view-error { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 10px; color: #78869e; font-size: 11px; }.view-loading i { width: 18px; height: 18px; border: 2px solid #283752; border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }.view-error strong { color: white; }.view-error p { margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.utility-view { max-width: 1050px; margin: 10px auto 40px; }.view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 10px 0 22px; border-bottom: 1px solid var(--line-soft); }.view-header p { margin: 0 0 8px; color: var(--blue); font: 500 8px var(--mono); letter-spacing: .16em; }.view-header h1 { margin: 0 0 7px; font: 600 32px var(--serif); }.view-header span { color: #8e9bb0; font-size: 11px; }.view-badge { flex: none; border: 1px solid #2d3d59; background: #10192b; border-radius: 20px; padding: 7px 10px; color: #94a1b5; font: 500 8px var(--mono); }.view-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; box-shadow: 0 0 8px rgba(115,215,173,.45); }.view-action { border: 1px solid #4568a8; background: #14213b; color: #bcd1ff; border-radius: 7px; padding: 9px 12px; font-size: 9px; cursor: pointer; }
.view-stats { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #273650; border-radius: 9px; overflow: hidden; background: #273650; gap: 1px; margin: 18px 0; }.view-stats div { background: #10192b; padding: 13px 15px; }.view-stats strong { display: block; font: 600 20px var(--serif); }.view-stats span { color: #718099; font: 500 7px var(--mono); text-transform: uppercase; }
.graph-layout { display: grid; grid-template-columns: minmax(480px,1fr) 250px; border: 1px solid #273650; border-radius: 10px; overflow: hidden; min-height: 475px; background: #0c1424; }.graph-canvas { position: relative; padding: 36px 15px 8px; background: radial-gradient(circle at 50% 45%, rgba(69,109,192,.12), transparent 44%); }.graph-canvas svg { width: 100%; height: 395px; }.graph-legend { position: absolute; top: 13px; left: 15px; display: flex; gap: 13px; color: #6d7b92; font: 500 7px var(--mono); }.graph-legend span { display: flex; gap: 4px; align-items: center; }.graph-legend i { width: 6px; height: 6px; border-radius: 50%; }.graph-legend .metric { background: var(--cyan); }.graph-legend .entity { background: var(--blue); }.graph-legend .dimension { background: var(--purple); }.graph-legend .evidence { background: var(--amber); }.kg-edges line { stroke: #30405e; stroke-width: 1.2; }.kg-edges text { fill: #53627a; font: 6px var(--mono); text-anchor: middle; }.kg-node { cursor: pointer; outline: none; }.kg-node rect { fill: #111b2e; stroke: #34496d; stroke-width: 1; transition: .15s ease; }.kg-node circle { fill: var(--blue); }.kg-node.metric rect { stroke: var(--cyan); }.kg-node.metric circle { fill: var(--cyan); }.kg-node.dimension circle { fill: var(--purple); }.kg-node.evidence circle { fill: var(--amber); }.kg-node:hover rect, .kg-node.selected rect { fill: #192943; stroke: #75a2ff; stroke-width: 1.8; }.kg-node .node-label { fill: #dce5f5; font: 8px var(--sans); }.graph-inspector { border-left: 1px solid #273650; background: #0e1728; padding: 22px 18px; }.graph-inspector > p:first-child { margin: 0 0 18px; color: #61708a; font: 500 7px var(--mono); letter-spacing: .14em; }.graph-inspector h2 { margin: 0 0 7px; font: 600 24px var(--serif); }.node-type { display: inline-block; color: var(--cyan); border: 1px solid #284b68; background: #102032; border-radius: 20px; padding: 4px 7px; font: 500 6px var(--mono); }.graph-inspector > p:not(:first-child) { color: #8e9cb1; font-size: 9px; line-height: 1.7; margin: 17px 0 20px; }.graph-inspector dl { margin: 0; }.graph-inspector dl div { padding: 10px 0; border-top: 1px solid #202c41; }.graph-inspector dt { color: #60708a; font: 500 7px var(--mono); text-transform: uppercase; }.graph-inspector dd { margin: 4px 0 0; color: #c5cede; font-size: 9px; }
.source-table { border: 1px solid #273650; border-radius: 9px; overflow: hidden; background: #0d1525; }.source-table-head, .source-table-row { display: grid; grid-template-columns: minmax(240px,1.6fr) 150px 80px 95px 78px; align-items: center; gap: 12px; }.source-table-head { background: #111b2e; padding: 9px 14px; color: #64738c; font: 500 7px var(--mono); text-transform: uppercase; }.source-table-row { padding: 12px 14px; border-top: 1px solid #202d43; color: #8f9cb0; font-size: 9px; }.source-name { display: flex; align-items: center; gap: 11px; min-width: 0; }.source-name > i { width: 31px; height: 31px; border-radius: 7px; display: grid; place-items: center; flex: none; background: #16233b; border: 1px solid #2a3e62; color: var(--blue); font: normal 11px var(--mono); }.source-name strong, .source-name small { display: block; }.source-name strong { color: #e5ebf6; font-size: 10px; }.source-name small { color: #65738a; font-size: 7px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.source-table-row code { color: #96b8f6; font: 400 7px var(--mono); }.source-health { color: var(--green); }.source-health i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: 5px; }.source-footnote { display: flex; gap: 11px; margin-top: 14px; border: 1px solid #284157; background: #0e1a28; border-radius: 8px; padding: 12px 14px; color: #75849c; font-size: 8px; line-height: 1.55; }.source-footnote > i { color: var(--green); font-style: normal; }.source-footnote strong { color: #b9c4d6; }
.eval-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }.eval-grid article { border: 1px solid #283750; background: #0f1829; border-radius: 9px; padding: 17px; }.eval-score { color: var(--green); font: 600 24px var(--serif); }.eval-grid h2 { font-size: 11px; margin: 13px 0 7px; }.eval-grid p { color: #77859b; font-size: 8px; line-height: 1.5; min-height: 36px; }.eval-grid article > div { height: 5px; background: #202c40; border-radius: 5px; margin: 14px 0 8px; overflow: hidden; }.eval-grid article > div i { display: block; height: 100%; background: var(--green); }.eval-grid small { color: #64738c; font: 500 7px var(--mono); }

@media (max-width: 1100px) { .app-shell { grid-template-columns: 210px 1fr 310px; }.app-shell.utility-open { grid-template-columns: 210px minmax(600px,1fr) 0; }.suggestions { grid-template-columns: 1fr; }.suggestions button { min-height: 88px; }.welcome { margin-top: 35px; }.graph-layout { grid-template-columns: 1fr; }.graph-inspector { border-left: 0; border-top: 1px solid #273650; }.source-table-head, .source-table-row { grid-template-columns: minmax(210px,1.5fr) 120px 70px 80px 70px; } }
@media (max-width: 820px) { body { overflow: auto; }.app-shell { display: block; height: auto; overflow: visible; }.sidebar { display: none; }.workspace { height: auto; min-height: 100vh; overflow: visible; }.trace-panel { display: none; }.conversation { height: auto; min-height: calc(100vh - 210px); overflow: visible; }.suggestions { grid-template-columns: 1fr; }.composer { position: sticky; bottom: 10px; }.metric-strip { grid-template-columns: repeat(2,1fr); }.action-card { grid-template-columns: 38px 1fr; }.action-impact { grid-column: 2; text-align: left; } }

.graph-legend i { padding: 0 !important; }
.view-action:disabled { opacity: .45; cursor: not-allowed; }