:root {
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-blue: #f0f6ff;
  --border: #e4e8ef;
  --border-strong: #d7dce5;
  --ink: #101828;
  --ink-soft: #344054;
  --muted: #667085;
  --quiet: #98a2b3;
  --blue: #0866ff;
  --blue-dark: #0757d9;
  --blue-soft: #eaf2ff;
  --red: #d92d20;
  --red-soft: #fef3f2;
  --amber: #b54708;
  --amber-soft: #fff7ed;
  --green: #067647;
  --green-soft: #ecfdf3;
  --violet: #6938ef;
  --violet-soft: #f4f3ff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .035), 0 1px 4px rgba(16, 24, 40, .025);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .07), 0 2px 6px rgba(16, 24, 40, .03);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--canvas); }
body { color: var(--ink); font-family: var(--font); font-size: 14px; letter-spacing: -.008em; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

.loading-page { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); transition: opacity .3s ease, visibility .3s ease; }
.loading-page.leaving { opacity: 0; visibility: hidden; }
.loading-mark { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #dbe7fb; border-radius: 22px; color: var(--blue); background: linear-gradient(145deg, #fff, #f0f6ff); box-shadow: 0 14px 40px rgba(8, 102, 255, .12); animation: mark-breathe 2.8s ease-in-out infinite; }
.loading-mark span { font-size: 31px; font-weight: 680; letter-spacing: -.12em; transform: translateX(-2px); }
.loading-mark i { position: absolute; width: 8px; height: 8px; right: 12px; top: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(8,102,255,.1); }
.loading-copy { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 20px 0 22px; }
.loading-copy strong { font-size: 12px; letter-spacing: .17em; }
.loading-copy span { color: var(--muted); font-size: 13px; }
.loading-spinner { position: relative; width: 28px; height: 28px; }
.loading-spinner i { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--blue); border-radius: 50%; animation: spin 1.7s cubic-bezier(.45,.1,.55,.9) infinite; }
.loading-spinner i + i { inset: 7px; border-top-color: #9cc0ff; animation-duration: 2.4s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes mark-breathe { 50% { transform: scale(1.035); box-shadow: 0 18px 48px rgba(8,102,255,.16); } }

.auth-screen { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.auth-card { max-width: 450px; padding: 42px; text-align: center; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-md); }
.auth-card h1 { margin: 8px 0 12px; font-size: 32px; line-height: 1.1; letter-spacing: -.04em; }
.auth-card > p:not(.eyebrow) { margin: 0 0 28px; color: var(--muted); line-height: 1.6; }

.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #1681ff, #0866ff); box-shadow: 0 3px 10px rgba(8,102,255,.22); font-size: 16px; font-weight: 720; letter-spacing: -.12em; }
.brand-mark span { font-size: .65em; margin-left: 1px; }.brand-mark.large { width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 18px; font-size: 26px; }
.app { height: 100dvh; display: grid; grid-template-rows: 68px minmax(0, 1fr); background: var(--canvas); }
.topbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); box-shadow: 0 1px 0 rgba(16,24,40,.01); }
.brand-group { display: flex; align-items: center; gap: 12px; min-width: 0; }.brand-group > div:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-group strong { font-size: 14px; font-weight: 650; white-space: nowrap; }.brand-group span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.live-state { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 500; }
.live-state i, .chat-heading > div:nth-child(2) span i { width: 7px; height: 7px; border-radius: 50%; background: #f79009; }
.live-state.ready i, .chat-heading > div:nth-child(2) span i { background: #12b76a; box-shadow: 0 0 0 3px rgba(18,183,106,.1); }.live-state.busy i { background: var(--blue); animation: pulse 1.4s ease-in-out infinite; }.live-state.error i { background: var(--red); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.78); } }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #cddfff; border-radius: 50%; color: var(--blue-dark); background: var(--blue-soft); font-size: 12px; font-weight: 700; }
.ghost-button, .icon-button, .secondary-button, .danger-button, .primary-button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 9px; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.ghost-button { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: var(--ink-soft); font-size: 12px; font-weight: 560; }
.ghost-button svg, .icon-button svg, .search-field svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.ghost-button:hover, .icon-button:hover, .secondary-button:hover { border-color: #b9c1ce; background: var(--surface-subtle); box-shadow: var(--shadow-sm); }

.workspace { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(680px, 1fr) 400px; }
.dashboard-scroll { min-width: 0; min-height: 0; overflow: auto; scrollbar-color: #c9ced8 transparent; }
.dashboard-inner { width: min(1320px, 100%); margin: 0 auto; padding: 30px 30px 54px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.page-heading h1 { margin: 0; font-size: clamp(29px, 3vw, 42px); font-weight: 660; line-height: 1.08; letter-spacing: -.045em; }.page-heading > div:first-child > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.snapshot-chip { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }.snapshot-chip span { color: var(--quiet); font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }.snapshot-chip strong { max-width: 150px; overflow: hidden; color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; }

.insight-grid { position: relative; margin-bottom: 12px; }.panel { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: none; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 21px 8px; }.panel-heading.compact { padding-bottom: 16px; }.panel-heading h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.02em; }.panel-heading .eyebrow { color: var(--muted); margin-bottom: 5px; font-size: 9px; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); }.segmented button { height: 27px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 560; }.segmented button.active { color: var(--blue-dark); background: var(--surface); box-shadow: 0 1px 3px rgba(16,24,40,.1); }
.chart-stage { position: relative; min-width: 0; }
.chart-wrap { position: relative; height: clamp(380px, 36vw, 440px); padding: 0 13px; }.chart-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }.chart-empty { position: absolute; inset: 110px 0 0; display: grid; place-items: center; color: var(--quiet); font-size: 12px; }.chart-grid { stroke: #edf0f4; stroke-width: 1; }.chart-axis { fill: #98a2b3; font: 10px var(--font); }.chart-selected { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }.chart-portfolio { fill: none; stroke: #98a2b3; stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linejoin: round; }.chart-area { fill: url(#area-gradient); }.chart-dot { fill: #fff; stroke: var(--blue); stroke-width: 1.8; }
.portfolio-summary { position: absolute; z-index: 2; top: 18px; left: 62px; display: flex; align-items: stretch; }
.risk-summary { min-width: 158px; display: grid; grid-template-columns: auto auto; align-content: center; column-gap: 9px; padding-right: 18px; border-right: 1px solid var(--border); }.risk-summary > span { grid-column: 1 / -1; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }.risk-summary strong { color: var(--ink); font-size: 28px; font-weight: 660; line-height: 1; letter-spacing: -.045em; }.risk-summary small { align-self: end; padding-bottom: 2px; color: var(--quiet); font-size: 8px; }
.status-summary { display: grid; grid-template-columns: repeat(3, auto); align-content: center; column-gap: 17px; row-gap: 5px; padding-left: 18px; }.status-summary > small { grid-column: 1 / -1; color: var(--quiet); font-size: 8px; }.status-count { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 5px; }.status-count i { width: 6px; height: 6px; border-radius: 50%; }.status-count strong { font-size: 13px; font-weight: 680; }.status-count span { grid-column: 1 / -1; padding-left: 11px; color: var(--muted); font-size: 8px; }.status-count.critical i { background: #f04438; }.status-count.warning i { background: #f79009; }.status-count.healthy i { background: #12b76a; }
.chart-legend { display: flex; gap: 20px; padding: 0 21px 18px; color: var(--muted); font-size: 10px; }.chart-legend span { display: flex; align-items: center; gap: 7px; }.chart-legend i { width: 17px; height: 0; border-top: 2px solid var(--blue); }.chart-legend .portfolio-line { border-color: #98a2b3; border-top-style: dashed; }.chart-legend b { max-width: 150px; overflow: hidden; color: inherit; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.focus-panel { position: absolute; z-index: 3; top: 102px; right: 22px; width: 270px; display: flex; flex-direction: column; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: linear-gradient(90deg, rgba(255,255,255,.84), #fff 18%); box-shadow: none; }.status-badge { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); background: var(--surface-subtle); font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.status-badge.critical { color: var(--red); border-color: #fecdca; background: var(--red-soft); }.status-badge.warning { color: var(--amber); border-color: #fedf89; background: var(--amber-soft); }.status-badge.healthy { color: var(--green); border-color: #abefc6; background: var(--green-soft); }.status-badge.learning { color: var(--violet); border-color: #d9d6fe; background: var(--violet-soft); }
.focus-panel .panel-heading { padding: 0 0 12px; }.focus-panel .panel-heading h2 { max-width: 168px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.score-row { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 11px; padding: 0 0 12px; }.score-ring { --score: 0deg; width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; border-radius: 0; background: none; }.score-ring strong { font-size: 25px; font-weight: 660; line-height: 1; }.score-ring span { margin-top: 3px; color: var(--quiet); font-size: 7px; white-space: nowrap; }.score-row p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.focus-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 11px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.focus-metrics div { padding: 0 7px; border-right: 1px solid var(--border); }.focus-metrics div:first-child { padding-left: 0; }.focus-metrics div:last-child { padding-right: 0; border: 0; }.focus-metrics span, .recommendation span { display: block; margin-bottom: 5px; color: var(--quiet); font-size: 8px; }.focus-metrics strong { font-size: 11px; font-weight: 650; }.positive { color: var(--green) !important; }.negative { color: var(--red) !important; }
.recommendation { margin: 0 0 11px; }.recommendation strong { display: block; color: var(--ink-soft); font-size: 10px; font-weight: 560; line-height: 1.4; text-transform: capitalize; }.focus-actions { display: flex; gap: 8px; margin: 0; padding: 0; }
.secondary-button, .danger-button, .primary-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; font-size: 11px; font-weight: 650; }.secondary-button { color: var(--ink-soft); }.danger-button { border-color: #fecdca; color: var(--red); background: var(--red-soft); }.danger-button:hover { background: #fee4e2; }.primary-button { color: #fff; border-color: var(--blue); background: var(--blue); }.primary-button:hover { background: var(--blue-dark); }

.table-panel { min-width: 0; overflow: hidden; }.table-heading { padding-bottom: 16px; }.table-controls { display: flex; gap: 8px; }.search-field { height: 35px; width: min(260px, 25vw); display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--quiet); background: var(--surface); }.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }.search-field input::placeholder { color: var(--quiet); }.table-controls select { height: 35px; padding: 0 28px 0 10px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--ink-soft); background: var(--surface); font-size: 10px; }.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; } th { padding: 11px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); background: var(--surface-subtle); font-size: 9px; font-weight: 650; letter-spacing: .045em; text-align: right; text-transform: uppercase; } th:first-child, th:nth-child(2), th:nth-child(7) { text-align: left; }
td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--ink-soft); font-size: 10px; text-align: right; } tbody tr:last-child td { border-bottom: 0; } tbody tr:not(.skeleton-row) { cursor: pointer; transition: background .14s; } tbody tr:not(.skeleton-row):hover { background: #f8fbff; } tbody tr.selected { background: var(--surface-blue); box-shadow: inset 3px 0 var(--blue); } td:first-child, td:nth-child(2), td:nth-child(7) { text-align: left; }
.creative-cell { display: flex; flex-direction: column; gap: 3px; }.creative-cell strong { color: var(--ink); font-size: 11px; font-weight: 630; }.creative-cell span, .dimension-cell { color: var(--muted); }.mini-status { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; }.mini-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); }.mini-status.critical i { background: #f04438; }.mini-status.warning i { background: #f79009; }.mini-status.healthy i { background: #12b76a; }.mini-status.learning i { background: #7f56d9; }.row-arrow { color: var(--quiet); font-size: 16px; }.skeleton-row i { display: block; height: 18px; border-radius: 5px; background: linear-gradient(90deg, #f1f3f6, #e7ebf0, #f1f3f6); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } }.empty-row td { padding: 30px; color: var(--quiet); text-align: center !important; }

.chat-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -8px 0 24px rgba(16,24,40,.025); }.chat-heading { min-height: 70px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 0 17px; border-bottom: 1px solid var(--border); }.agent-orb { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2286ff, #0866ff); box-shadow: 0 4px 12px rgba(8,102,255,.22); font-size: 15px; }.agent-orb i { position: absolute; right: -1px; bottom: 1px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #12b76a; }.chat-heading > div:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }.chat-heading strong { font-size: 13px; font-weight: 650; }.chat-heading > div:nth-child(2) span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }.chat-heading > div:nth-child(2) span i { width: 5px; height: 5px; box-shadow: none; }
.icon-button { width: 31px; height: 31px; display: grid; place-items: center; color: var(--muted); }.context-strip { display: flex; align-items: center; gap: 8px; padding: 9px 15px 0; color: var(--muted); font-size: 9px; }.context-strip button { min-width: 0; overflow: hidden; padding: 5px 9px; border: 1px solid #c6d9fb; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.context-strip b { margin-left: 5px; font-weight: 400; }
.messages { min-height: 0; overflow: auto; padding: 20px 16px 16px; scroll-behavior: smooth; scrollbar-color: #c9ced8 transparent; }.message { max-width: 92%; margin-bottom: 18px; }.message.user { margin-left: auto; }.message-label { margin: 0 0 6px 3px; color: var(--quiet); font-size: 8px; font-weight: 700; letter-spacing: .11em; }.message.user .message-label { text-align: right; }.message-body { padding: 11px 13px; border: 1px solid var(--border); border-radius: 5px 14px 14px 14px; color: var(--ink-soft); background: var(--surface-subtle); font-size: 11px; line-height: 1.6; }.message.user .message-body { border-color: var(--blue); border-radius: 14px 5px 14px 14px; color: #fff; background: var(--blue); box-shadow: 0 4px 12px rgba(8,102,255,.12); }.message.error .message-body { border-color: #fecdca; color: var(--red); background: var(--red-soft); }.message-body p { margin: 0 0 9px; }.message-body p:last-child { margin-bottom: 0; }.message-body ul { margin: 7px 0; padding-left: 17px; }.message-body li { margin: 3px 0; }.message-body strong { color: var(--ink); font-weight: 650; }.message.user .message-body strong { color: #fff; }.message-body code { padding: 2px 4px; border-radius: 4px; color: var(--blue-dark); background: #e9eff8; font: 10px ui-monospace, monospace; }.message.user .message-body code { color: #fff; background: rgba(255,255,255,.16); }
.thinking .message-body { color: var(--muted); background: var(--surface); }.thinking-line { display: flex; align-items: center; gap: 8px; }.thinking-dots { display: inline-flex; gap: 3px; }.thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); animation: thinking 1.5s ease-in-out infinite; }.thinking-dots i:nth-child(2) { animation-delay: .18s; }.thinking-dots i:nth-child(3) { animation-delay: .36s; } @keyframes thinking { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }.thinking-detail { display: block; margin-top: 7px; color: var(--quiet); font-size: 9px; }
.prompt-dock { min-height: 0; max-height: 48px; display: flex; align-items: center; gap: 7px; overflow: auto; padding: 4px 15px 11px; scrollbar-width: none; }.prompt-dock::-webkit-scrollbar { display: none; }.prompt-dock button { height: 30px; flex: 0 0 auto; max-width: 230px; padding: 0 10px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink-soft); background: var(--surface); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.prompt-dock button:hover { color: var(--blue-dark); border-color: #b8cff6; background: var(--blue-soft); }
.composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin: 0 15px; padding: 9px 9px 9px 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 2px 8px rgba(16,24,40,.04); transition: border-color .15s, box-shadow .15s; }.composer:focus-within { border-color: #84adf4; box-shadow: 0 0 0 3px rgba(8,102,255,.08); }.composer textarea { max-height: 120px; resize: none; overflow: auto; padding: 3px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; line-height: 1.45; }.composer textarea::placeholder { color: var(--quiet); }.composer button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #fff; background: var(--blue); transition: background .15s, transform .15s; }.composer button:hover { background: var(--blue-dark); transform: translateY(-1px); }.composer button:disabled { cursor: default; opacity: .4; transform: none; }.composer svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }.chat-footnote { margin: 8px 15px 11px; color: var(--quiet); font-size: 8px; text-align: center; }

.approval-modal { width: min(430px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--border); border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: 0 32px 100px rgba(16,24,40,.24); }.approval-modal::backdrop { background: rgba(16,24,40,.38); backdrop-filter: blur(4px); }.approval-modal form { padding: 28px; }.modal-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid #fecdca; border-radius: 12px; color: var(--red); background: var(--red-soft); font-weight: 700; }.approval-modal h2 { margin: 0 0 10px; font-size: 22px; }.approval-modal > form > p:not(.eyebrow) { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }.approval-modal label { display: block; color: var(--muted); font-size: 10px; }.approval-modal textarea { width: 100%; resize: vertical; margin-top: 7px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 10px; outline: 0; color: var(--ink); background: var(--surface); font-size: 11px; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: grid; gap: 8px; pointer-events: none; }.toast { max-width: 330px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-md); font-size: 11px; animation: toast-in .22s ease; }.toast.error { border-color: #fecdca; color: var(--red); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1280px) { .focus-panel { position: relative; inset: auto; width: auto; min-height: 0; margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.focus-panel .panel-heading h2 { max-width: none; } }
@media (max-width: 1120px) { .workspace { grid-template-columns: minmax(570px, 1fr) 380px; }.dashboard-inner { padding-inline: 20px; }.chart-wrap { height: 430px; } }
@media (max-width: 820px) { .app { grid-template-rows: 58px minmax(0, 1fr); }.topbar { padding-inline: 13px; }.brand-group span, .live-state span, .ghost-button { display: none; }.live-state { width: 31px; padding: 0; justify-content: center; }.workspace { grid-template-columns: 1fr; grid-template-rows: minmax(0, 56%) minmax(330px, 44%); }.dashboard-inner { padding: 23px 13px 32px; }.chat-panel { border-top: 1px solid var(--border); border-left: 0; box-shadow: 0 -6px 20px rgba(16,24,40,.03); }.snapshot-chip { display: none; } }
@media (max-width: 520px) { .page-heading h1 { font-size: 28px; }.page-heading > div:first-child > p:last-child { line-height: 1.5; }.panel-heading { align-items: flex-start; flex-direction: column; }.panel-heading.compact { flex-direction: row; }.segmented { align-self: stretch; }.segmented button { flex: 1; }.portfolio-summary { right: 17px; left: 17px; }.risk-summary { min-width: 145px; padding-right: 12px; }.risk-summary small { display: none; }.status-summary { flex: 1; column-gap: 9px; padding-left: 12px; }.chart-wrap { height: 390px; }.table-controls { width: 100%; }.search-field { width: 100%; }.table-controls select { max-width: 126px; }.topbar-actions { gap: 6px; }.avatar { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }