[hidden]{display:none!important}

/* Production shell synchronized with the approved design preview. */
:root {
  --header-h: 62px;
  --sidebar-w: 220px;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --faint: #9aa6b6;
  --primary: #356fe8;
  --primary-soft: #eaf1ff;
  --green: #178c64;
  --green-soft: #e6f6ef;
  --red: #d0545b;
  --red-soft: #fdebed;
  --amber: #bc7b13;
  --amber-soft: #fff3dc;
  --violet: #7b61d1;
  --sidebar-line: #e2e8f0;
  --sidebar-label: #8290a2;
  --sidebar-soft: #edf3ff;
  --sidebar-text: #526174;
  --bg: #f4f7fb;
  --panel: var(--surface);
  --panel-strong: var(--surface);
  --panel-soft: var(--surface-2);
  --line: #e1e7ef;
  --line-strong: #cfd9e5;
  --text: #172235;
  --muted: #718096;
  --accent: var(--primary);
  --accent-hover: #245ed6;
  --accent-soft: var(--primary-soft);
  --positive: var(--green);
  --positive-soft: var(--green-soft);
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --warning: var(--amber);
  --warning-soft: var(--amber-soft);
  --sidebar: #f8faff;
  --sidebar-panel: var(--sidebar-soft);
  --shadow: 0 8px 24px rgba(27, 46, 74, .055);
  --topbar-height: var(--header-h);
  --sidebar-width: var(--sidebar-w);
}

:root[data-theme="dark"] {
  --surface: #141b26;
  --surface-2: #101722;
  --surface-3: #202b3a;
  --faint: #718096;
  --primary: #71a4ff;
  --primary-soft: #1b3157;
  --green: #55d6a4;
  --green-soft: #14372d;
  --red: #fb7e84;
  --red-soft: #47262c;
  --amber: #f2bd62;
  --amber-soft: #42351e;
  --violet: #b9a6ff;
  --sidebar-line: #263447;
  --sidebar-label: #7d8da1;
  --sidebar-soft: #1d2b40;
  --sidebar-text: #aebcd0;
  --bg: #0d131c;
  --panel: var(--surface);
  --panel-strong: var(--surface);
  --panel-soft: var(--surface-2);
  --line: #263447;
  --line-strong: #3a4a60;
  --text: #edf3fb;
  --muted: #9aa9bc;
  --accent: var(--primary);
  --accent-hover: #96bbff;
  --accent-soft: var(--primary-soft);
  --positive: var(--green);
  --positive-soft: var(--green-soft);
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --warning: var(--amber);
  --warning-soft: var(--amber-soft);
  --sidebar: #101823;
  --sidebar-panel: var(--sidebar-soft);
  --shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.user-announcement-banner { position: fixed; z-index: 48; top: var(--header-h); right: 0; left: var(--sidebar-w); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 10px; min-height: 48px; padding: 9px 16px; border-bottom: 1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); background: color-mix(in srgb,var(--accent-soft) 88%,var(--surface)); color: var(--text); }
.user-announcement-banner > svg { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }.user-announcement-banner strong,.user-announcement-banner p { display: block; margin: 0; }.user-announcement-banner strong { font-size: 11px; }.user-announcement-banner p { margin-top: 2px; color: var(--muted); font-size: 10px; white-space: pre-wrap; }.user-announcement-banner button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); }.user-announcement-banner button svg { width: 14px; height: 14px; }
.user-announcement-visible .sidebar { top: calc(var(--header-h) + 48px); }.user-announcement-visible .content { padding-top: calc(var(--header-h) + 76px); }.user-announcement-visible .content:has(.monitor-dashboard) { padding-top: calc(var(--header-h) + 60px); }.sidebar-collapsed .user-announcement-banner { left: 68px; }
@media(max-width:760px){.user-announcement-banner { left: 0; }.user-announcement-visible .sidebar { top: var(--header-h); }.user-announcement-visible .content { padding-top: calc(var(--header-h) + 68px); }}

/* Local AI strategy planner. */
.ai-page-head { align-items: center; }
.ai-local-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--positive) 30%, var(--line)); border-radius: 5px; background: var(--positive-soft); color: var(--positive); font-size: 11px; font-weight: 800; white-space: nowrap; }
.ai-local-badge svg { width: 15px; height: 15px; }
.ai-adaptive-badge { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); }
.ai-strategy-block-reason { display: flex; align-items: flex-start; gap: 7px; margin: -3px 0 13px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--danger); font-size: 10px; line-height: 1.55; }
.ai-strategy-block-reason svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.ai-planner-layout { display: grid; grid-template-columns: minmax(310px, 360px) minmax(0, 1fr); align-items: start; gap: 16px; }
.ai-planner-form { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; padding: 18px; }
.ai-planner-form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ai-planner-form > header h2, .ai-planner-form > header p { margin: 0; }
.ai-planner-form > header h2 { font-size: 16px; }
.ai-planner-form > header p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ai-planner-form > header > svg { width: 19px; height: 19px; color: var(--accent); }
.ai-planner-form > label, .ai-form-pair label { display: grid; gap: 6px; color: var(--text); font-size: 12px; font-weight: 750; }
.ai-planner-form select, .ai-planner-form input[type="number"], .ai-planner-form .strategy-symbol-search { width: 100%; min-width: 0; height: 40px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 12px; }
.ai-planner-form .field-note { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.5; }
.ai-live-quote { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 70px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.ai-live-quote > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai-live-quote > span > span { display: grid; gap: 2px; }
.ai-live-quote small, .ai-live-quote em { color: var(--muted); font-size: 10px; font-style: normal; }
.ai-live-quote strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.ai-live-quote em { max-width: 132px; text-align: right; line-height: 1.45; }
.ai-live-quote em[data-state="ready"] { color: var(--positive); }
.ai-live-quote em[data-state="error"] { color: var(--danger); }
.ai-risk-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ai-risk-selector legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--text); font-size: 12px; font-weight: 750; }
.ai-risk-selector label { position: relative; min-width: 0; cursor: pointer; }
.ai-risk-selector input { position: absolute; opacity: 0; pointer-events: none; }
.ai-risk-selector span { display: grid; align-content: center; min-height: 62px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); text-align: center; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.ai-risk-selector b { font-size: 11px; }
.ai-risk-selector small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.ai-risk-selector input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ai-risk-selector input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-analyze-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; }
.ai-analyze-button svg { width: 16px; height: 16px; }
.ai-form-foot { margin: -2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.ai-plan-result { min-width: 0; min-height: 620px; padding: 0; overflow: hidden; }
.ai-plan-empty { display: grid; place-items: center; align-content: center; min-height: 620px; padding: 40px; text-align: center; }
.ai-plan-empty > svg { width: 36px; height: 36px; margin-bottom: 14px; color: var(--accent); }
.ai-plan-empty > .page-loading-spinner { margin-bottom: 16px; }
.ai-plan-empty strong { font-size: 16px; }
.ai-plan-empty p { max-width: 470px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.ai-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px 17px; border-bottom: 1px solid var(--line); }
.ai-result-header h2, .ai-result-header p { margin: 0; }
.ai-result-header h2 { margin-top: 8px; font-size: 18px; }
.ai-result-header p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.ai-result-state { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border-radius: 4px; background: var(--surface-3); color: var(--muted); font-size: 10px; font-weight: 850; }
.ai-result-state.positive { background: var(--positive-soft); color: var(--positive); }
.ai-result-state.danger { background: var(--danger-soft); color: var(--danger); }
.ai-result-state.warning { background: var(--warning-soft); color: var(--warning); }
.ai-score { display: flex; gap: 8px; flex-shrink: 0; }
.ai-score span { display: grid; gap: 2px; min-width: 76px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: 9px; }
.ai-score b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.ai-plan-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ai-plan-metrics > div { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line); }
.ai-plan-metrics > div:last-child { border-right: 0; }
.ai-plan-metrics span, .ai-plan-metrics strong, .ai-plan-metrics small { display: block; }
.ai-plan-metrics span { color: var(--muted); font-size: 10px; }
.ai-plan-metrics strong { margin-top: 5px; font-size: 18px; font-variant-numeric: tabular-nums; }
.ai-plan-metrics small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.ai-indicators { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ai-indicators span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.ai-indicators b { margin-left: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
.ai-tier-table { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.ai-tier-table table { width: 100%; min-width: 970px; border-collapse: collapse; }
.ai-tier-table th, .ai-tier-table td { height: 42px; padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; }
.ai-tier-table th { background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 800; }
.ai-tier-table td:first-child b { color: var(--text); }
.ai-plan-explain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 18px 22px; }
.ai-plan-explain h3 { margin: 0 0 8px; font-size: 12px; }
.ai-plan-explain ol, .ai-plan-explain ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.ai-result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.ai-result-actions > span { margin-right: auto; color: var(--muted); font-size: 10px; }
.ai-result-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ai-result-actions svg { width: 15px; height: 15px; }
.ai-no-account { display: grid; place-items: center; min-height: 360px; text-align: center; }
.ai-no-account > svg { width: 34px; height: 34px; color: var(--accent); }
.ai-no-account h2 { margin: 12px 0 0; }
.ai-no-account p { max-width: 480px; margin: 6px 0 18px; color: var(--muted); }

@media (max-width: 1100px) {
  .ai-planner-layout { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  .ai-plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-plan-metrics > div:nth-child(2) { border-right: 0; }
  .ai-plan-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 820px) {
  .ai-page-head { display: flex; align-items: flex-start; }
  .ai-planner-layout { grid-template-columns: minmax(0, 1fr); }
  .ai-planner-form { position: static; }
  .ai-plan-result, .ai-plan-empty { min-height: 420px; }
  .ai-plan-explain { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .ai-page-head { display: block; }
  .ai-local-badge { margin-top: 10px; }
  .ai-planner-form { padding: 15px; }
  .ai-risk-selector { grid-template-columns: 1fr; }
  .ai-risk-selector span { min-height: 52px; text-align: left; }
  .ai-risk-selector small { font-size: 10px; }
  .ai-form-pair { grid-template-columns: 1fr; }
  .ai-live-quote { align-items: flex-start; }
  .ai-result-header { display: grid; padding: 17px 15px 14px; }
  .ai-score { width: 100%; }
  .ai-score span { flex: 1; }
  .ai-plan-metrics { grid-template-columns: 1fr; }
  .ai-plan-metrics > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-plan-metrics > div:last-child { border-bottom: 0; }
  .ai-indicators { padding-inline: 15px; }
  .ai-plan-explain { padding: 16px 15px; }
  .ai-result-actions { align-items: stretch; flex-direction: column; padding: 14px 15px 16px; }
  .ai-result-actions > span { margin-right: 0; }
  .ai-result-actions button { width: 100%; min-height: 42px; }
}

body { background: var(--bg); }
.topbar { height: var(--header-h); justify-content: flex-start; padding: 0; border-color: var(--line); background: var(--surface); backdrop-filter: none; }
.topbar .brand { width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100%; gap: 11px; padding: 0 18px; border-right: 1px solid var(--line); }
.brand-mark { width: 32px; height: 32px; border: 0; border-radius: 5px; background: var(--primary); color: #fff; font-size: 10px; overflow: hidden; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-name { font-size: 14px; }.brand-name small { margin-top: 2px; color: var(--faint); font-size: 7px; letter-spacing: 1.2px; }
.dashboard-top-context { min-width: 0; flex: 1 1 auto; height: 100%; display: none; align-items: center; justify-content: space-between; gap: 18px; padding: 0 14px; }
body.dashboard-page .dashboard-top-context { display: flex; }
.dashboard-top-title { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.dashboard-top-title strong { flex: 0 0 auto; color: var(--text); font-size: 14px; font-weight: 820; }
.dashboard-top-title small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-top-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.dashboard-top-meta time { color: var(--muted); font: 10px Consolas, monospace; white-space: nowrap; }
.dashboard-top-status, .dashboard-top-fullscreen { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: 10px; white-space: nowrap; }
.dashboard-top-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }
.dashboard-top-status.offline i { background: var(--warning); }
.dashboard-top-fullscreen { color: var(--text); font-weight: 760; cursor: pointer; }
.dashboard-top-fullscreen:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
body.dashboard-page #connection { display: none; }
.market-strip { height: 100%; display: flex; align-items: center; margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.market-strip::-webkit-scrollbar { display: none; }
.market-strip > span { min-width: 132px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 0 17px; border-right: 1px solid var(--line); }
.market-strip b { color: var(--muted); font-size: 9px; }.market-strip strong { grid-row: 2; font-size: 12px; }.market-strip small { grid-row: 2; color: var(--positive); font-size: 9px; }
.topbar-actions, .top-actions { height: 100%; display: flex; align-items: center; gap: 8px; margin-left: auto; padding-right: 16px; }
.connection { margin-right: 6px; color: var(--muted); font-size: 10px; }.connection i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 4px var(--positive-soft); }
.status-dot { margin: 0; color: var(--muted); font-size: 10px; }.status-dot::before { width: 7px; height: 7px; margin-right: 7px; box-shadow: 0 0 0 4px var(--positive-soft); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--text); }
.profile-button { height: 36px; max-width: 270px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 10px; }.profile-button b { max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }.profile-button i { color: var(--muted); font-style: normal; }

.sidebar { top: var(--header-h); width: var(--sidebar-w); padding: 16px 10px 12px; border-right-color: var(--sidebar-line); background: var(--sidebar); }
.sidebar-collapse-button { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; margin: 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted); }
.sidebar-collapse-button:hover { border-color: var(--line-strong); background: var(--surface-3); color: var(--text); }
.sidebar-collapse-button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sidebar-collapse-button span { display: none; }
.sidebar nav { gap: 3px; }.sidebar nav p { margin: 15px 10px 5px; color: var(--sidebar-label); font-size: 9px; font-weight: 800; letter-spacing: 1px; }.sidebar nav p:first-child { margin-top: 0; }
.sidebar nav button { position: relative; width: 100%; height: 38px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--sidebar-text); text-align: left; }
.sidebar nav button span { font-size: 12px; }.sidebar nav button:hover, .sidebar nav button.active { border-color: var(--line); background: var(--sidebar-soft); color: var(--text); }.sidebar nav button.active::before { content: ""; position: absolute; left: -10px; width: 2px; height: 20px; background: var(--primary); }
.sidebar nav button .nav-unread-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; display: block; border: 2px solid var(--sidebar); border-radius: 50%; background: var(--accent); box-sizing: content-box; opacity: 0; pointer-events: none; transform: scale(.65); transition: opacity .16s ease, transform .16s ease; }
.sidebar nav button .nav-unread-dot.error { background: var(--danger); }
.sidebar nav button .nav-unread-dot.visible { opacity: 1; transform: scale(1); }
.sidebar nav button.active .nav-unread-dot { border-color: var(--sidebar-soft); }
.side-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 0; border-top: 1px solid var(--sidebar-line); }.side-foot span, .side-foot strong { display: block; }.side-foot span { color: var(--sidebar-label); font-size: 8px; }.side-foot strong { margin-top: 3px; color: var(--sidebar-text); font-size: 10px; }.side-foot button { width: 30px; height: 30px; border: 1px solid var(--sidebar-line); border-radius: 5px; background: transparent; color: var(--sidebar-text); }

.content { max-width: none; min-height: 100vh; margin: 0 0 0 var(--sidebar-w); padding: calc(var(--header-h) + 28px) 28px 42px; }.content > * { max-width: 1540px; margin-left: auto; margin-right: auto; }
.topbar .brand, .sidebar, .content { transition: width .18s ease, min-width .18s ease, margin-left .18s ease, padding .18s ease; }

@media (min-width: 761px) {
  body.sidebar-collapsed { --sidebar-w: 72px; --sidebar-width: 72px; }
  body.sidebar-collapsed .topbar .brand { width: 72px; min-width: 72px; justify-content: center; gap: 0; padding-inline: 10px; }
  body.sidebar-collapsed .topbar .brand-name { display: none; }
  body.sidebar-collapsed .sidebar { width: 72px; padding-inline: 9px; }
  body.sidebar-collapsed .sidebar nav p { height: 9px; margin-inline: 0; overflow: hidden; font-size: 0; }
  body.sidebar-collapsed .sidebar nav button { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  body.sidebar-collapsed .sidebar nav button span { display: none; }
  body.sidebar-collapsed .sidebar nav button i,
  body.sidebar-collapsed .sidebar nav button svg { width: 17px; height: 17px; }
  body.sidebar-collapsed .sidebar nav button .nav-unread-dot { top: 7px; right: 7px; width: 6px; height: 6px; }
  body.sidebar-collapsed .side-foot { justify-content: center; padding-inline: 0; }
  body.sidebar-collapsed .side-foot > div { display: none; }
}
.page-head { min-height: 62px; align-items: flex-start; margin-bottom: 22px; }.page-head h1 { font-size: 22px; line-height: 1.3; }.page-head p { margin-top: 5px; font-size: 11px; }.page-head > strong { font-size: 20px; }.page-head > .button-row, .page-head > button { margin-top: 8px; }
.primary, .secondary, .button-row button { min-height: 34px; padding: 7px 12px; border-radius: 5px; font-size: 12px; }.primary { border: 1px solid var(--primary); background: var(--primary); }.secondary, .button-row button { border-color: var(--line); background: var(--surface); }.secondary:hover, .button-row button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.metrics { gap: 12px; margin-bottom: 14px; }.metric, .panel, .strategy-card { border-color: var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); }.metric { min-height: 116px; padding: 16px; }.metric::after { width: 7px; height: 7px; top: 17px; right: 17px; border-radius: 50%; background: var(--faint); }.metric span { font-size: 10px; }.metric strong { margin-top: 11px; font-size: 21px; }.metric strong::first-letter { font-variant-numeric: tabular-nums; }
.metric-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.metric-head i { width: 7px; height: 7px; border-radius: 50%; }.neutral-dot { background: var(--faint); }.positive-dot { background: var(--positive); }.warning-dot { background: var(--warning); }.blue-dot { background: var(--primary); }.metric footer { display: flex; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 9px; }.metric footer b { color: var(--text); }
.layout-two { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .68fr); gap: 14px; }.panel { padding: 17px; }.panel h2 { font-size: 13px; }.panel p { font-size: 10px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.panel-header h2 { margin: 0; }.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.period-tabs { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }.period-tabs button { min-width: 36px; height: 25px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 9px; }.period-tabs button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(20,31,44,.08); }.chart-summary { display: flex; align-items: baseline; gap: 10px; margin-top: 15px; }.chart-summary strong { font-size: 23px; }.chart-summary span { font-size: 10px; }
.risk-score { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }.risk-score span { display: block; color: var(--muted); font-size: 9px; }.risk-score strong { display: block; margin-top: 5px; font-size: 27px; }.risk-score strong small { color: var(--faint); font-size: 9px; }.risk-ring { width: 72px; height: 72px; display: grid; place-items: center; border: 8px solid var(--positive-soft); border-top-color: var(--positive); border-right-color: var(--positive); border-radius: 50%; transform: rotate(25deg); }.risk-ring b { color: var(--positive); font-size: 12px; transform: rotate(-25deg); }.risk-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 15px; color: var(--muted); font-size: 9px; }.risk-row strong { color: var(--text); }.risk-row > div { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }.risk-row > div i { display: block; height: 100%; background: var(--positive); }.risk-row > div i.amber { background: var(--warning); }.risk-foot { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.risk-foot span i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--positive); }
.table-wrap { margin-top: 14px; border-color: var(--line); border-radius: 0; } th { height: 37px; background: var(--surface-2); color: var(--muted); font-size: 9px; } th, td { padding: 9px 12px; border-bottom-color: var(--line); } td { font-size: 10px; }.badge { min-height: 22px; padding: 3px 7px; border-radius: 4px; font-size: 9px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 7px; border-radius: 4px; font-size: 8px; font-weight: 800; white-space: nowrap; }.status-badge.safe, .status-badge.running { background: var(--positive-soft); color: var(--positive); }.status-badge.watching, .status-badge.demo { background: var(--accent-soft); color: var(--accent); }.status-badge.stopped { background: var(--surface-3); color: var(--muted); }.status-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.strategy-table-panel { padding-bottom: 6px; }.strategy-name { display: flex; align-items: center; gap: 9px; }.strategy-name > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 5px; font-style: normal; font-weight: 800; background: var(--amber-soft); color: var(--amber); }.strategy-name strong, .strategy-name small { display: block; }.strategy-name small { margin-top: 2px; color: var(--muted); font-size: 8px; }.side-badge { padding: 3px 7px; border-radius: 3px; font-size: 8px; font-weight: 800; }.side-badge.long { background: var(--positive-soft); color: var(--positive); }.side-badge.short { background: var(--danger-soft); color: var(--danger); }.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 700; }
.dashboard-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr); gap: 14px; margin-bottom: 14px; }
.dashboard-main-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--accent) 2%), var(--surface)); }
.dashboard-main-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%), linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--line) 22%, transparent) 1px, transparent 1px); background-size: 100% 100%, 100% 18px; opacity: .6; }
.dashboard-main-panel > *, .dashboard-side-panel > * { position: relative; z-index: 1; }
.dashboard-chart { height: 332px; margin-top: 8px; }
.dashboard-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 6px; }
.dashboard-summary-strip > div, .dashboard-side-grid > div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.dashboard-summary-strip span, .dashboard-side-grid span { display: block; color: var(--muted); font-size: 10px; }
.dashboard-summary-strip strong, .dashboard-side-grid strong { display: block; margin-top: 5px; font-size: 18px; font-variant-numeric: tabular-nums; }
.dashboard-side-panel { display: grid; gap: 12px; align-content: start; }
.dashboard-side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dashboard-exchange-stack, .dashboard-feed { display: grid; gap: 10px; }
.realtime-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.realtime-line div { min-width: 0; }
.realtime-line span, .event-card time { display: block; font-size: 11px; font-weight: 700; }
.realtime-line small, .event-card p { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.realtime-line strong { font-size: 12px; }
.realtime-line i { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.realtime-line b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.event-card { padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.event-card time { color: var(--muted); }
.event-card p { margin: 4px 0 0; }
.up { color: var(--positive) !important; }
.down { color: var(--danger) !important; }
.chart { height: 280px; }.calendar { gap: 6px; }.day { min-height: 64px; border-radius: 5px; background: var(--surface-2); font-size: 10px; }
.strategy-grid { gap: 12px; }.strategy-card { padding: 16px; }.strategy-card h3 { font-size: 13px; }.strategy-meta, .strategy-card dt { font-size: 9px; }.strategy-card dd { font-size: 10px; }
.account-card { grid-template-columns: minmax(230px, 1.25fr) minmax(170px, .8fr) minmax(120px, .55fr) auto; border-color: var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); }.account-identity h3 { font-size: 13px; }.account-identity p, .account-stat span { font-size: 9px; }.account-stat strong { font-size: 12px; font-variant-numeric: tabular-nums; }.account-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.account-balance-stat strong { color: var(--positive); }
.account-setup-head, .account-form { background: var(--surface); }.exchange-option > span, .credential-hint, .switch-line { background: var(--surface-2); border-color: var(--line); }
.mobile-nav-button, .sidebar-scrim { display: none; }.tier-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 0; padding: 12px 0; border-top: 1px solid var(--line); }.tier-toolbar strong, .tier-toolbar small { display: block; }.tier-toolbar strong { font-size: 12px; }.tier-toolbar small { margin-top: 3px; color: var(--muted); font-size: 10px; }.tier-bulk-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 10px 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }.tier-bulk-copy strong, .tier-bulk-copy small { display: block; }.tier-bulk-copy strong { color: var(--text); font-size: 12px; }.tier-bulk-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }.tier-bulk-controls { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.tier-bulk-controls label, .tier-bulk-select-label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }.tier-bulk-controls select, .tier-bulk-controls input { min-width: 132px; height: 32px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; }.tier-bulk-controls button { min-height: 32px; white-space: nowrap; }.professional-tier-table { overflow-x: auto; }.professional-tier-table table { min-width: 1500px; }.professional-tier-table th { min-width: 120px; text-align: center; white-space: normal; line-height: 1.35; }.professional-tier-table th:first-child { min-width: 92px; }.professional-tier-table input:not([type="hidden"]) { min-width: 82px; text-align: center; font-variant-numeric: tabular-nums; }.professional-tier-table td { text-align: center; }.tier-name-input { width: 78px; min-width: 78px !important; }.tier-remove { display: block; min-height: 24px; margin: 5px auto 0; padding: 2px 7px; border: 0; border-radius: 4px; background: transparent; color: var(--danger); font-size: 9px; }.tier-remove:hover { background: var(--danger-soft); }.table-check { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; }.table-switch { position: relative; display: inline-flex; width: 30px; height: 18px; cursor: pointer; }.table-switch input { position: absolute; opacity: 0; pointer-events: none; }.table-switch span { width: 30px; height: 18px; border-radius: 9px; background: var(--surface-3); transition: background .16s ease; }.table-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,24,38,.25); transition: transform .16s ease; }.table-switch input:checked + span { background: var(--positive); }.table-switch input:checked + span::after { transform: translateX(12px); }.tier-status { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 4px; font-size: 9px; font-weight: 750; white-space: nowrap; }.tier-status.pending { background: var(--surface-3); color: var(--muted); }.tier-status.filled { background: var(--positive-soft); color: var(--positive); }.locked-tier { background: color-mix(in srgb, var(--surface-2) 75%, var(--positive-soft)); }.locked-tier input:not([type="hidden"]) { color: var(--muted); }.strategy-pnl-cell strong, .strategy-pnl-cell small { display: block; }.strategy-pnl-cell strong { font-size: 11px; }.strategy-pnl-cell small { margin-top: 3px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.help-tip { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 4px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1; cursor: help; background: var(--surface); vertical-align: middle; }
.help-tip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Advanced risk workspace: group each control with its consequence and keep
   dependent values visually close to the switch that enables them. */
.advanced-settings { padding-top: 0; border-top: 0; }
.advanced-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); list-style-position: inside; }
.advanced-settings > summary > span { display: grid; gap: 4px; }
.advanced-settings > summary strong { font-size: 14px; }
.advanced-settings > summary small { color: var(--muted); font-size: 10px; font-weight: 500; }
.advanced-settings > summary > b { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 750; }
.advanced-settings[open] > summary { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.advanced-workspace { display: grid; gap: 14px; margin-top: 12px; }
.risk-foundation, .risk-section { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.risk-foundation { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; }
.risk-foundation > div, .risk-section header div { display: grid; gap: 4px; min-width: 0; }
.risk-foundation strong, .risk-section h3 { margin: 0; color: var(--text); font-size: 13px; }
.risk-foundation small, .risk-section header p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.risk-foundation > label { position: relative; display: grid; grid-template-columns: minmax(100px, 140px) 18px; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.risk-foundation > label input { grid-column: 1; }
.risk-foundation > label em, .risk-fields em { color: var(--muted); font-size: 10px; font-style: normal; }
.risk-section > header { padding: 14px 16px 11px; border-bottom: 1px solid var(--line); }
.risk-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.risk-feature { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); transition: border-color .16s ease, background-color .16s ease; }
.risk-feature-wide { grid-column: 1 / -1; }
.risk-feature-compact { align-self: start; }
.risk-feature.is-enabled { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent) 3%, var(--surface-2)); }
.risk-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text); }
.risk-toggle > span { display: grid; gap: 3px; min-width: 0; }
.risk-toggle strong { font-size: 12px; font-weight: 780; }
.risk-toggle small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.risk-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.risk-toggle > i { position: relative; flex: 0 0 34px; width: 34px; height: 20px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .16s ease; }
.risk-toggle > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,24,38,.2); transition: transform .16s ease; }
.risk-toggle > input:checked + i { background: var(--accent); box-shadow: none; }
.risk-toggle > input:checked + i::after { transform: translateX(14px); }
.risk-toggle > input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.risk-toggle:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.risk-toggle:has(input:disabled) > i { cursor: not-allowed; }
.risk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.risk-fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.risk-fields label { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 10px; }
.risk-fields label > input, .risk-fields label > select { grid-column: 1 / -1; width: 100%; min-width: 0; }
.risk-fields label > em { grid-column: 2; grid-row: 2; margin-top: -27px; pointer-events: none; }
.risk-fields label > input { padding-right: 35px; }
.risk-impact { margin: 9px 0 0; padding: 7px 9px; border-radius: 4px; background: var(--warning-soft); color: var(--warning); font-size: 10px; line-height: 1.45; }
.risk-nested { margin-top: 10px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 5px; background: var(--surface); }
.risk-nested .risk-toggle strong { font-size: 11px; }
.risk-feature:not(.is-enabled) > .risk-fields,
.risk-feature:not(.is-enabled) > .risk-nested,
.risk-feature:not(.is-enabled) > .risk-impact,
.risk-nested:not(.is-enabled) > .risk-fields,
.risk-nested:not(.is-enabled) > .risk-nested,
.risk-nested:not(.is-enabled) > .decay-table { display: none; }
.decay-table { display: grid; grid-template-columns: 90px repeat(2, minmax(120px, 1fr)); gap: 7px 9px; align-items: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.decay-table > span { font-weight: 750; }.decay-table > b { color: var(--text); font-size: 10px; }.decay-table label { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px; align-items: center; }.decay-table label input { grid-column: 1 / -1; width: 100%; padding-right: 38px; }.decay-table label em { grid-column: 2; grid-row: 1; margin-left: -38px; pointer-events: none; font-style: normal; }
.risk-feature .is-inactive { opacity: .48; }
.risk-feature .is-inactive input, .risk-feature .is-inactive select { cursor: not-allowed; }
@media (max-width: 760px) {
  .risk-foundation { align-items: stretch; flex-direction: column; }
  .risk-foundation > label { width: 100%; grid-template-columns: minmax(0, 1fr) 18px; }
  .risk-feature-grid { grid-template-columns: 1fr; }
  .risk-feature-wide { grid-column: auto; }
  .risk-fields-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decay-table { grid-template-columns: 72px repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .advanced-settings > summary { align-items: flex-start; flex-direction: column; gap: 9px; }
  .risk-feature-grid { padding: 9px; }
  .risk-fields, .risk-fields-4 { grid-template-columns: 1fr; }
  .decay-table { grid-template-columns: 68px minmax(0, 1fr); }
  .decay-table > span:nth-child(3) { display: none; }
  .decay-table > b { grid-column: 1; }
  .decay-table > label { grid-column: 2; }
}
.profit-workspace { padding: 0; overflow: hidden; }.profit-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 18px 14px; border-bottom: 1px solid var(--line); }.profit-panel-header h2 { margin: 0; font-size: 14px; }.profit-panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.profit-header-actions { display: flex; align-items: center; gap: 10px; }.profit-total { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 9px; border-radius: 12px; background: var(--positive-soft); font-size: 10px; font-weight: 800; }.profit-view-switch { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }.profit-view-switch button { min-width: 54px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 10px; }.profit-view-switch button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(20,31,44,.08); font-weight: 800; }.profit-view { padding: 0 18px 18px; }.profit-filter-bar { display: flex; align-items: end; gap: 10px; padding: 14px 0 4px; }.profit-filter-bar label { min-width: 160px; }.profit-filter-bar input { height: 34px; min-height: 34px; margin-top: 4px; padding: 6px 8px; font-size: 11px; }.profit-filter-bar > button { height: 34px; }.profit-quick-ranges { display: flex; gap: 4px; margin-left: auto; }.profit-quick-ranges button { height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: 10px; }.profit-quick-ranges button:hover { border-color: var(--accent); color: var(--accent); }.profit-chart { display: block; width: 100%; height: 330px; margin-top: 8px; }.profit-month-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; }.profit-month-toolbar strong { min-width: 92px; text-align: center; font-size: 13px; }.profit-month-toolbar .icon-button { width: 30px; height: 30px; font-size: 20px; }.profit-month-toolbar .secondary { margin-left: 4px; height: 30px; min-height: 30px; padding: 4px 11px; font-size: 10px; }.profit-calendar-summary { display: flex; justify-content: flex-end; gap: 14px; margin: 0 0 10px; color: var(--muted); font-size: 10px; }.profit-weekdays, .profit-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.profit-weekdays { border: 1px solid var(--line); border-bottom: 0; background: var(--surface-2); }.profit-weekdays span { padding: 9px 10px; border-right: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 10px; font-weight: 700; }.profit-weekdays span:last-child { border-right: 0; }.profit-month-grid { border-left: 1px solid var(--line); }.profit-calendar-day { min-height: 92px; padding: 9px 10px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }.profit-calendar-day > span, .profit-calendar-day > strong, .profit-calendar-day > small { display: block; }.profit-calendar-day > span { color: var(--text); font-size: 10px; }.profit-calendar-day > strong { min-height: 24px; margin-top: 11px; font-size: 11px; }.profit-calendar-day > small { margin-top: 9px; color: var(--muted); font-size: 9px; }.profit-calendar-day.positive { background: color-mix(in srgb, var(--positive-soft) 46%, var(--surface)); }.profit-calendar-day.negative { background: color-mix(in srgb, var(--danger-soft) 42%, var(--surface)); }.profit-calendar-day.outside { background: var(--surface-2); }.profit-calendar-day.outside > span, .profit-calendar-day.outside > strong, .profit-calendar-day.outside > small { color: var(--faint); }.profit-calendar-day.today { box-shadow: inset 0 0 0 2px var(--warning); }
.profit-exchange-style { max-width: 1100px; margin-inline: auto; }.profit-trend-shell { padding: 0 18px 18px; }.profit-hero-summary { padding: 22px 0 4px; }.profit-hero-summary > span { display: block; color: var(--muted); font-size: 12px; }.profit-hero-summary > strong { display: block; margin-top: 6px; color: var(--text); font-size: 32px; line-height: 1.12; font-variant-numeric: tabular-nums; letter-spacing: 0; }.profit-hero-summary > strong.up { color: var(--positive); }.profit-hero-summary > strong.down { color: var(--danger); }.profit-hero-summary > strong small { font-size: 14px; font-weight: 700; }.profit-hero-summary p { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 8px 0 0; color: var(--muted); font-size: 11px; }.profit-hero-summary p b { font-variant-numeric: tabular-nums; }.profit-chart { height: 350px; margin-top: 2px; }.profit-range-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 4px; padding: 8px 0 4px; border-top: 1px solid var(--line); }.profit-range-tabs button { height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }.profit-range-tabs button:hover { background: var(--surface-2); color: var(--text); }.profit-range-tabs button.active { background: var(--surface-3); color: var(--text); }.profit-custom-filter { margin-top: 10px; border-top: 1px solid var(--line); }.profit-custom-filter summary { padding: 13px 0 4px; color: var(--muted); font-size: 11px; cursor: pointer; list-style-position: inside; }.profit-custom-filter[open] summary { color: var(--text); }.profit-custom-filter .profit-filter-bar { padding-top: 10px; }

.strategy-market-info { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr); gap: 12px; grid-column: 1 / -1; margin: 14px 0 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.strategy-market-info > div { display: grid; gap: 3px; }
.strategy-market-info > .strategy-current-market { display: flex; align-items: center; gap: 11px; }
.strategy-current-price { display: grid; gap: 3px; min-width: 0; }
.strategy-market-info span { color: var(--muted); font-size: 10px; }
.strategy-market-info strong { color: var(--text); font-size: 19px; font-variant-numeric: tabular-nums; }
.strategy-market-info small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.strategy-estimate-panel { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.strategy-estimate-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.strategy-estimate-panel header strong { font-size: 13px; }
.strategy-estimate-panel header small { color: var(--muted); font-size: 10px; }
.strategy-estimate-panel .table-wrap { margin-top: 0; }
.strategy-estimate-panel td:last-child, .professional-tier-table td[data-expected-entry] { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.professional-tier-table td[data-expected-entry].actual-entry { color: var(--positive); }
.professional-tier-table td[data-tier-pnl] { min-width: 118px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.professional-tier-table th[data-expected-header] { min-width: 112px; }
.tier-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tier-toolbar-actions button { min-height: 32px; white-space: nowrap; }
.entry-preview-panel { margin: 14px 0 16px; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 6px; background: var(--surface); }
.entry-preview-panel[hidden] { display: none; }
.entry-preview-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 4%, var(--surface-2)); }
.entry-preview-panel > header strong, .entry-preview-panel > header small { display: block; }
.entry-preview-panel > header strong { color: var(--text); font-size: 13px; }
.entry-preview-panel > header small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.entry-preview-panel > header > span { color: var(--accent); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry-preview-panel .table-wrap { margin: 0; border: 0; border-radius: 0; }
.entry-preview-panel table { min-width: 900px; }
.entry-preview-panel th, .entry-preview-panel td { text-align: center; white-space: nowrap; }
.entry-preview-panel td { font-variant-numeric: tabular-nums; }
.entry-preview-panel td:first-child { text-align: left; }
.entry-preview-panel td strong, .entry-preview-panel td small { display: block; }
.entry-preview-panel td small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.entry-preview-panel td.actual { color: var(--positive); font-weight: 800; }
.entry-preview-panel > p { margin: 0; padding: 11px 14px 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.55; }
.entry-path-status { display: inline-flex; align-items: center; justify-content: center; min-height: 23px; padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.entry-path-status.pending { background: var(--surface-3); color: var(--muted); }
.entry-path-status.filled { background: var(--positive-soft); color: var(--positive); }
.entry-path-status.tracking { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning); }
.tier-status.tracking { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: var(--warning); }
.entry-path-scrim { position: fixed; z-index: 120; inset: 0; border: 0; border-radius: 0; background: rgba(9, 18, 29, .46); }
.entry-path-drawer { position: fixed; z-index: 121; top: 12px; right: 12px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(960px, calc(100vw - 32px)); height: min(760px, calc(100vh - 24px)); overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); box-shadow: -18px 0 54px rgba(10, 23, 38, .2); }
.entry-path-open { overflow: hidden; }
.entry-path-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--line); background: var(--surface); }
.entry-path-drawer > header > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.entry-path-drawer > header span { min-width: 0; }
.entry-path-drawer > header strong, .entry-path-drawer > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-path-drawer > header strong { font-size: 15px; }
.entry-path-drawer > header small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.entry-path-drawer > header button { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--muted); line-height: 1; }
.entry-path-drawer > header button svg { width: 16px; height: 16px; }
.entry-path-drawer > header button:hover { border-color: var(--line-strong); color: var(--text); }
.entry-path-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.entry-path-summary > span { padding: 12px 14px; background: var(--surface-2); color: var(--muted); font-size: 10px; }
.entry-path-summary strong { display: block; margin-top: 5px; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.entry-path-table { min-height: 0; margin: 0; overflow: auto; border: 0; border-radius: 0; overscroll-behavior: contain; }
.entry-path-table table { min-width: 900px; }
.entry-path-table th { position: sticky; z-index: 1; top: 0; background: var(--surface-2); text-align: center; white-space: nowrap; }
.entry-path-table td { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry-path-table td:first-child { text-align: left; }
.entry-path-table td strong, .entry-path-table td small { display: block; }
.entry-path-table td small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.entry-path-table td.actual { color: var(--positive); font-weight: 800; }
.entry-path-note { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 10px; line-height: 1.55; }
.risk-row progress, .realtime-line progress { width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-3); appearance: none; }
.risk-row progress { grid-column: 1 / -1; }
.realtime-line progress { grid-column: 1 / -1; }
.risk-row progress::-webkit-progress-bar, .realtime-line progress::-webkit-progress-bar { background: var(--surface-3); }
.risk-row progress::-webkit-progress-value { background: var(--positive); }
.risk-row progress::-moz-progress-bar { background: var(--positive); }
.risk-row progress.amber::-webkit-progress-value { background: var(--warning); }
.risk-row progress.amber::-moz-progress-bar { background: var(--warning); }
.realtime-line progress::-webkit-progress-value { background: var(--accent); }
.realtime-line progress::-moz-progress-bar { background: var(--accent); }
.depth-market-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.depth-market-title > small { color: var(--positive); font-size: 10px; }

@media (max-width: 1040px) { .market-strip { flex: 1 1 auto; margin-right: 8px; } .market-strip > span { min-width: 118px; padding-inline: 12px; } .content { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 760px) {
  :root { --header-h: 58px; --topbar-height: 58px; --sidebar-w: 280px; --sidebar-width: 0px; }
  .topbar { height: auto; min-height: 58px; flex-wrap: wrap; align-content: flex-start; padding: 8px 10px 7px; row-gap: 5px; }.topbar .brand { width: auto; min-width: 0; height: 36px; padding: 0 8px 0 2px; border-right: 0; }.brand-name { display: flex; }.brand-name small { display: none; }.market-strip { order: 3; flex: 1 1 100%; width: 100%; height: 28px; margin: 0; border-top: 1px solid var(--line); }.market-strip > span { min-width: 108px; padding-inline: 10px; }.top-actions { height: 36px; margin-left: auto; padding-right: 0; gap: 6px; }.mobile-nav-button { display: grid; order: -1; }.connection, #lang-btn { display: none; }.profile-button { max-width: 132px; }.profile-button b { max-width: 74px; }
  .sidebar-collapse-button { display: none; }
  .sidebar { top: var(--header-h); right: auto; bottom: 0; left: 0; width: min(86vw, 300px); min-width: min(86vw, 300px); height: auto; padding: 16px 10px 12px; border-top: 0; border-right: 1px solid var(--sidebar-line); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s ease; box-shadow: 12px 0 32px rgba(16, 31, 51, .16); }
  body.nav-open .sidebar { transform: translateX(0); visibility: visible; }.sidebar nav { display: grid; width: auto; }.sidebar nav p { display: block; }.sidebar nav button { display: grid; justify-content: stretch; height: 42px; }.sidebar nav button span { display: block; }.side-foot { display: flex; }.sidebar-scrim { position: fixed; z-index: 6; inset: var(--header-h) 0 0; border: 0; background: rgba(18, 30, 48, .34); }.nav-open .sidebar-scrim { display: block; }
  .content { margin-left: 0; padding: calc(var(--header-h) + 18px) 14px 30px; }.content > * { max-width: none; }.metrics, .exchange-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.layout-two, .dashboard-stage { grid-template-columns: 1fr; }.dashboard-summary-strip { grid-template-columns: 1fr; }.page-head { display: block; }.page-head > .button-row { margin-top: 13px; }.page-head > .button-row button { flex: 1; }.metric { min-height: 102px; padding: 14px; }.metric strong { font-size: 18px; }.panel { padding: 14px; }.panel-header { align-items: flex-start; }.period-tabs { flex-shrink: 0; }.table-wrap { overflow-x: auto; }.table-wrap table { min-width: 680px; }.strategy-grid { grid-template-columns: 1fr; }.new-strategy, .account-form { grid-template-columns: 1fr; }.new-strategy .wide, .account-form .wide { grid-column: 1; }.advanced-grid { grid-template-columns: 1fr; }.account-card { display: grid; grid-template-columns: 1fr; gap: 12px; }.account-identity, .account-actions, .test-result { grid-column: 1; }.account-actions { min-width: 0; justify-content: flex-start; flex-wrap: wrap; }.account-stat { padding-top: 8px; border-top: 1px solid var(--line); }.setting-row { align-items: flex-start; flex-direction: column; }.setting-row .button-row { width: 100%; }.setting-row .button-row input { min-width: 0; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 170px; justify-content: flex-start; padding: 80px 22px 20px; }
  .auth-intro .auth-mark, .auth-intro .eyebrow, .auth-status, .auth-box > .brand { display: none; }
  .auth-intro h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.12; }
  .auth-intro > div > p:last-child { max-width: 340px; font-size: 12px; line-height: 1.55; }
  .auth-main { place-items: start center; padding: 20px 22px max(24px, env(safe-area-inset-bottom)); }
  .auth-box h2 { margin: 0 0 5px; font-size: 26px; }
  .auth-box form { gap: 12px; margin: 18px 0 8px; }
  .auth-box input, .auth-box form > button { min-height: 44px; }
  .auth-box > .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 4px; }
  .auth-box > .button-row .link-button { min-height: 44px; padding: 8px 10px; }
  .public-topbar { left: 0; height: 58px; padding: 0 18px; }.public-topbar .brand { flex: 0 0 auto; white-space: nowrap; }.public-topbar .button-row { flex: 1; justify-content: flex-end; flex-wrap: nowrap; }.public-topbar .button-row button { min-width: 0; padding-inline: 11px; }
}

/* Keep strategy forms inside narrow viewports even when a preset summary or
   market selector contains a long, non-breaking value. */
.new-strategy > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.smart-preset-summary { min-width: 0; max-width: 100%; overflow: hidden; }
.smart-preset-summary strong,
.smart-preset-summary span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .topbar .brand { padding-right: 2px; }
  .topbar .brand-name { display: flex; font-size: 12px; line-height: 1.15; }
  .topbar .brand-name small { display: block; margin-top: 2px; font-size: 6px; letter-spacing: .5px; }
  .profile-button { max-width: 100px; padding: 0 7px; }.profile-button b { max-width: 50px; }.metrics, .exchange-summary { grid-template-columns: 1fr; }.metric { min-height: 94px; }.page-head h1 { font-size: 20px; }.chart { height: 230px; }.calendar { grid-template-columns: repeat(4, 1fr); }.tier-toolbar { align-items: flex-start; flex-direction: column; }.tier-toolbar button { width: 100%; }.button-row { width: 100%; }.button-row button { flex: 1; }
}

@media (max-width: 760px) {
  .profit-panel-header { display: flex; }.profit-header-actions { margin-top: 0; }.profit-view { padding-inline: 14px; }.profit-filter-bar { align-items: stretch; flex-wrap: wrap; }.profit-filter-bar label { flex: 1 1 140px; min-width: 0; }.profit-filter-bar > button { flex: 1 1 100px; }.profit-custom-filter .profit-filter-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }.profit-custom-filter .profit-filter-bar label, .profit-custom-filter .profit-filter-bar input, .profit-custom-filter .profit-filter-bar > button { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; }.profit-custom-filter .profit-filter-bar label { display: grid; gap: 5px; }.profit-custom-filter .profit-filter-bar input { margin-top: 0; }.profit-custom-filter .profit-filter-bar > button { height: 40px; min-height: 40px; margin: 0; }.profit-chart { height: 270px; }.profit-hero-summary > strong { font-size: 28px; }.profit-range-tabs { gap: 2px; }.profit-range-tabs button { padding-inline: 2px; font-size: 11px; }.profit-calendar-summary { justify-content: flex-start; flex-wrap: wrap; }.profit-calendar-day { min-height: 76px; padding: 7px; }.profit-calendar-day > strong { margin-top: 7px; font-size: 10px; }.profit-calendar-day > small { margin-top: 6px; font-size: 8px; }
}

@media (max-width: 420px) {
  .profit-view-switch button { min-width: 48px; }.profit-month-toolbar { justify-content: center; }.profit-calendar-day { min-height: 68px; padding: 6px 5px; }.profit-calendar-day > strong { font-size: 9px; }.profit-calendar-day > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 760px) {
  .strategy-market-info { grid-template-columns: 1fr; }
  .strategy-estimate-panel { padding: 10px; }
  .strategy-estimate-panel header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .professional-tier-table table { min-width: 1480px; }
  .tier-toolbar-actions { width: 100%; justify-content: stretch; }
  .tier-toolbar-actions button { flex: 1 1 0; width: auto; }
  .entry-preview-panel > header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .entry-preview-panel .table-wrap { overflow-x: auto; }
  .entry-path-drawer { inset: 0; width: 100%; height: auto; max-height: none; border: 0; border-radius: 0; }
  .entry-path-summary { grid-template-columns: repeat(3, minmax(118px, 1fr)); overflow-x: auto; }
  .entry-path-summary > span { min-width: 118px; }
  .entry-path-note { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

#feedback-layer { position: relative; z-index: 100; }
.toast-stack { position: fixed; top: 76px; right: 18px; display: grid; gap: 10px; width: min(360px, calc(100vw - 28px)); pointer-events: none; z-index: 100; }

/* Unified exchange and asset identity. */
.asset-icon, .exchange-logo { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; vertical-align: middle; }
.asset-icon { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); }
.asset-icon img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; }
.asset-icon .asset-icon-fallback { display: none; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 0; }
.asset-icon.icon-fallback .asset-icon-fallback { display: block; }
.asset-icon.icon-fallback img { display: none; }
.asset-icon.xs { width: 16px; height: 16px; }.asset-icon.sm { width: 22px; height: 22px; }.asset-icon.lg { width: 36px; height: 36px; }
.exchange-logo { width: 28px; height: 28px; padding: 4px; border: 1px solid #dfe5eb; border-radius: 5px; background: #fff; }
.exchange-logo img { width: 100%; height: 100%; object-fit: contain; }
.exchange-logo b { color: #273142; font-size: 8px; font-weight: 850; }
.exchange-logo.xs { width: 16px; height: 16px; padding: 2px; border-radius: 3px; }.exchange-logo.sm { width: 22px; height: 22px; padding: 3px; }.exchange-logo.lg { width: 38px; height: 38px; padding: 6px; }
.exchange-inline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.market-identity { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.market-identity > span:last-child, .market-identity strong, .market-identity small { display: block; min-width: 0; }
.market-identity strong { color: var(--text); font-size: 10px; }.market-identity small { margin-top: 2px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.market-identity small .exchange-logo { margin-right: 4px; }
.strategy-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.strategy-card-title > div:last-child { min-width: 0; }
.strategy-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.strategy-symbol-options button { grid-template-columns: 24px minmax(0,1fr); }
.strategy-symbol-options .symbol-option-copy, .strategy-symbol-options .symbol-option-copy strong, .strategy-symbol-options .symbol-option-copy span { display: block; min-width: 0; text-align: left; }
.exchange-option > span::before { content: none; display: none; }
.exchange-option > span > b { font-size: 11px; letter-spacing: 0; }
.exchange-mark { border: 0; background: transparent; }
.credential-hint { display: flex; align-items: center; gap: 12px; }
.credential-exchange { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.market-strip > span { grid-template-columns: 20px 1fr auto; column-gap: 8px; }
.market-strip > span > img { grid-row: 1 / 3; align-self: center; width: 20px; height: 20px; border-radius: 50%; }
.market-strip > span > b { grid-column: 2 / 4; }.market-strip > span > strong { grid-column: 2; }.market-strip > span > small { grid-column: 3; }

/* Transaction dashboard: light operations monitor. */
body:has(.monitor-dashboard) { background: #edf3f6; }
.content:has(.monitor-dashboard) { max-width: none; padding: calc(var(--header-h) + 12px) 14px 22px; }
.content:has(.monitor-dashboard) > * { max-width: none; }
.monitor-dashboard { --surface: #fff; --surface-2: #f7fafb; --line: #d7e2e7; --muted: #657780; --primary: #075ee8; --primary-soft: #e6efff; --primary-strong: #075ee8; --positive: #009b86; --positive-soft: #e3f6f1; --danger: #d94458; --danger-soft: #ffeaee; --warning: #ca7b00; --warning-soft: #fff3dc; --monitor-line: #d7e2e7; --monitor-strong: #c3d2d9; --monitor-ink: #10232d; --monitor-muted: #657780; color: var(--monitor-ink); color-scheme: light; }
.monitor-header { min-height: 54px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 0 2px 12px; border-bottom: 1px solid var(--monitor-strong); }
.monitor-dashboard > .monitor-header { display: none; }
.monitor-fullscreen-brand { display: none; align-items: center; gap: 9px; }
.monitor-fullscreen-brand .brand-mark { width: 34px; height: 34px; overflow: hidden; border-radius: 6px; }
.monitor-fullscreen-brand .brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.monitor-fullscreen-brand b { display: block; color: var(--monitor-ink); font-size: 14px; font-weight: 850; }
.monitor-fullscreen-brand small { display: block; margin-top: 1px; color: var(--monitor-muted); font-size: 8px; }
.monitor-brand { display: flex; align-items: center; gap: 10px; }
.monitor-brand .brand-mark { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; }
.monitor-brand .brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.monitor-brand b { display: block; color: #163443; font-size: 14px; font-weight: 850; }
.monitor-brand small { display: block; margin-top: 1px; color: var(--monitor-muted); font-size: 8px; letter-spacing: .12em; }
.monitor-title { text-align: center; }
.monitor-title h1 { margin: 0; font-size: 19px; font-weight: 820; }
.monitor-title p { margin: 2px 0 0; color: var(--monitor-muted); font-size: 10px; }
.monitor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.monitor-actions > time { color: var(--monitor-muted); font: 10px Consolas,monospace; white-space: nowrap; }
.monitor-status, .monitor-button { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--monitor-strong); border-radius: 4px; background: #fff; color: var(--monitor-muted); font-size: 10px; }
.monitor-status i, .monitor-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }
.monitor-status i { animation: monitor-pulse 1.8s ease-in-out infinite; }
.monitor-status.offline i { background: var(--warning); }
.monitor-button { color: #163443; font-weight: 780; cursor: pointer; }
.monitor-button:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.monitor-kpis { display: grid; grid-template-columns: minmax(230px,1.7fr) repeat(7,minmax(108px,1fr)); margin-top: 12px; border: 1px solid var(--monitor-strong); background: #fff; }
.monitor-kpi { min-width: 0; min-height: 104px; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; border-right: 1px solid var(--monitor-line); }
.monitor-kpi:last-child { border-right: 0; }
.monitor-kpi > span { display: flex; justify-content: space-between; gap: 8px; color: var(--monitor-muted); font-size: 10px; font-weight: 720; }
.monitor-kpi > span small { color: #9aabb2; font-size: 8px; }
.monitor-kpi > strong { display: block; margin-top: 10px; color: var(--monitor-ink); font: 800 24px/1 Consolas,monospace; font-variant-numeric: tabular-nums; }
.monitor-kpi > strong.monitor-money { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.monitor-kpi > strong.monitor-money small { flex: 0 0 auto; font-size: 9px; font-weight: 700; }
.monitor-kpi-main > strong { font-size: clamp(28px,2vw,38px); }
.monitor-kpi > strong small { color: var(--monitor-muted); font-size: 10px; }
.monitor-kpi em { margin-top: 8px; color: var(--monitor-muted); font-size: 9px; font-style: normal; }
.monitor-grid { display: grid; grid-template-columns: 270px minmax(520px,1fr) 340px; gap: 12px; margin-top: 12px; }
.monitor-column { min-width: 0; display: grid; gap: 12px; align-content: start; }
.monitor-panel { min-width: 0; border: 1px solid var(--monitor-strong); background: rgba(255,255,255,.94); }
.monitor-panel > header { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 13px 10px; border-bottom: 1px solid var(--monitor-line); }
.monitor-panel > header h2 { margin: 0; font-size: 13px; font-weight: 820; }
.monitor-panel > header p { margin: 3px 0 0; color: var(--monitor-muted); font-size: 9px; }
.monitor-panel > header > b { color: var(--primary); font: 760 8px Consolas,monospace; letter-spacing: .1em; }
.monitor-accounts, .monitor-allocation, .monitor-alerts { padding: 12px 13px; }
.monitor-health-list { padding: 4px 13px 8px; }
.monitor-health-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--monitor-line); }
.monitor-health-row:last-child { border-bottom: 0; }
.monitor-health-row strong, .monitor-health-row small { display: block; }
.monitor-health-row strong { font-size: 9px; }
.monitor-health-row small { min-height: 12px; margin-top: 2px; overflow: hidden; color: var(--monitor-muted); font-size: 8px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.monitor-health-row progress { width: 100%; height: 4px; margin-top: 6px; border: 0; border-radius: 0; accent-color: var(--positive); }
.monitor-health-row[data-state="warn"] progress { accent-color: var(--warning); }
.monitor-health-value { color: var(--positive); font: 760 9px Consolas,monospace; white-space: nowrap; }
.monitor-health-row[data-state="warn"] .monitor-health-value { color: var(--warning); }
.monitor-account { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--monitor-line); }
.monitor-account:last-child { border-bottom: 0; }
.monitor-exchange { width: 25px; height: 25px; display: grid; place-items: center; }
.monitor-exchange .exchange-logo { width: 25px; height: 25px; }
.monitor-account b { display: block; font-size: 10px; }.monitor-account small { display: block; margin-top: 2px; color: var(--monitor-muted); font-size: 8px; }
.monitor-account > strong { text-align: right; font: 760 10px Consolas,monospace; }.monitor-account > strong small { color: var(--monitor-muted); font-size: 8px; }
.monitor-account > progress { grid-column: 2 / -1; width: 100%; height: 4px; margin-top: -3px; border: 0; border-radius: 0; accent-color: var(--primary); }
.monitor-allocation-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; margin-bottom: 12px; font-size: 10px; }
.monitor-allocation-row span { display: flex; align-items: center; gap: 6px; }.monitor-allocation-row span .exchange-logo { width: 16px; height: 16px; }
.monitor-allocation-row b { font: 760 10px Consolas,monospace; }.monitor-allocation-row progress { grid-column: 1 / -1; width: 100%; height: 5px; border: 0; border-radius: 0; accent-color: var(--primary); }.monitor-allocation-row > small { grid-column: 1 / -1; color: var(--monitor-muted); font: 8px Consolas,monospace; }
.monitor-chart-panel { min-height: 430px; }
.monitor-periods { display: flex; gap: 4px; }
.monitor-periods button { min-width: 36px; height: 27px; border: 1px solid var(--monitor-line); border-radius: 3px; background: var(--surface-2); color: var(--monitor-muted); font-size: 9px; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.monitor-periods button:hover { border-color: var(--monitor-strong); color: var(--monitor-ink); }
.monitor-periods button.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.monitor-chart-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; padding: 14px 18px 0; }
.monitor-chart-summary strong { font: 800 23px Consolas,monospace; }.monitor-chart-summary strong small { color: var(--monitor-muted); font-size: 11px; font-weight: 700; }.monitor-chart-summary span { color: var(--monitor-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.monitor-chart { height: 276px; margin-top: 0; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.monitor-chart-panel .monitor-chart-summary,
.monitor-chart-panel .monitor-chart-stats { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.monitor-chart:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.monitor-chart-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 18px 14px; border-top: 1px solid var(--monitor-line); }
.monitor-chart-stats span { display: grid; gap: 3px; padding: 10px 12px 0; color: var(--monitor-muted); font-size: 9px; }
.monitor-chart-stats span:first-child { padding-left: 0; }.monitor-chart-stats span:last-child { padding-right: 0; text-align: right; }.monitor-chart-stats span:nth-child(2) { text-align: center; }
.monitor-chart-stats b { color: var(--monitor-ink); font: 760 10px Consolas,monospace; }
.monitor-strategy-list { display: grid; }
.monitor-strategy-head, .monitor-strategy-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; align-items: center; }
.monitor-strategy-head { padding: 7px 12px; border-bottom: 1px solid var(--monitor-line); background: var(--surface-2); color: var(--monitor-muted); font-size: 8px; }
.monitor-strategy-head > :nth-child(3), .monitor-strategy-head > :nth-child(4), .monitor-strategy-head > :nth-child(6) { justify-self: stretch; text-align: center; }
.monitor-strategy-row { padding: 9px 12px; border-bottom: 1px solid var(--monitor-line); }
.monitor-strategy-row:last-child { border-bottom: 0; }
.monitor-strategy-name { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }.monitor-strategy-name > span { min-width: 0; }.monitor-market-label { display: block; overflow: hidden; color: var(--monitor-ink); font-size: 12px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }.monitor-strategy-name b { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.monitor-strategy-name small { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; min-width: 0; color: var(--monitor-muted); font-size: 8px; line-height: 1.35; }.monitor-strategy-name small > span { min-width: 0; overflow-wrap: anywhere; }.monitor-strategy-name .asset-icon { flex: 0 0 auto; }.monitor-strategy-name .exchange-logo { flex: 0 0 auto; width: 13px; height: 13px; }
.monitor-side { justify-self: center; display: inline-flex; justify-content: center; padding: 3px 5px; border: 1px solid var(--positive); border-radius: 3px; color: var(--positive); font-size: 8px; font-weight: 760; }.monitor-side.short { border-color: var(--danger); color: var(--danger); }
.monitor-position { display: grid; justify-items: center; gap: 4px; font: 760 9px Consolas,monospace; }.monitor-position progress { width: min(100%, 88px); height: 4px; border: 0; border-radius: 0; accent-color: var(--positive); }
.monitor-strategy-row > strong { text-align: center; font: 760 9px Consolas,monospace; }.monitor-live-price { color: var(--monitor-ink); }.monitor-state { justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; color: var(--positive); font-size: 8px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }.monitor-state.stopped { color: var(--monitor-muted); }.monitor-state.stopped i { background: #9aabb2; }
.monitor-event-list { max-height: 286px; overflow: hidden; }
.monitor-event-row { position: relative; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--monitor-line); }
.monitor-event-row > i { position: relative; z-index: 1; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--positive); }.monitor-event-row > i.warn { background: var(--warning); }.monitor-event-row > i.error { background: var(--danger); }
.monitor-event-row b { display: block; font-size: 9px; }.monitor-event-row p { margin: 2px 0 0; color: var(--monitor-muted); font-size: 9px; }.monitor-event-row time { color: #9aabb2; font: 9px Consolas,monospace; white-space: nowrap; }
.monitor-alert { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; padding: 9px; border: 1px solid var(--monitor-line); background: #f7fafb; }.monitor-alert + .monitor-alert { margin-top: 8px; }
.monitor-alert > i { width: 24px; height: 24px; display: grid; place-items: center; background: var(--positive-soft); color: var(--positive); font-style: normal; font-weight: 850; }.monitor-alert.warn > i { background: var(--warning-soft); color: var(--warning); }.monitor-alert.error > i { background: var(--danger-soft); color: var(--danger); }
.monitor-alert b { font-size: 9px; }.monitor-alert p { margin: 2px 0 0; color: var(--monitor-muted); font-size: 8px; }
.monitor-summary { padding: 4px 13px 8px; }
.monitor-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--monitor-line); }
.monitor-summary > div:last-child { border-bottom: 0; }
.monitor-summary span { min-width: 0; font-size: 9px; font-weight: 720; }.monitor-summary small { display: block; margin-top: 2px; overflow: hidden; color: var(--monitor-muted); font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }.monitor-summary strong { flex: 0 0 auto; font: 760 9px Consolas,monospace; }
.monitor-empty { padding: 22px 12px; color: var(--monitor-muted); text-align: center; font-size: 10px; }

/* Dashboard readability: raise every information role by two pixels without scaling the layout. */
.monitor-fullscreen-brand b, .monitor-brand b { font-size: 16px; }
.monitor-fullscreen-brand small, .monitor-brand small { font-size: 10px; }
.monitor-title h1 { font-size: 21px; }
.monitor-title p { font-size: 12px; }
.monitor-actions > time, .monitor-status, .monitor-button { font-size: 12px; }
.monitor-kpi > span { font-size: 12px; }
.monitor-kpi > span small { font-size: 10px; }
.monitor-kpi > strong { font-size: 26px; }
.monitor-kpi-main > strong { font-size: clamp(30px,2vw,40px); }
.monitor-kpi > strong small { font-size: 12px; }
.monitor-kpi em { font-size: 11px; }
.monitor-panel > header h2 { font-size: 15px; }
.monitor-panel > header p { font-size: 11px; }
.monitor-panel > header > b { font-size: 10px; }
.monitor-health-row strong { font-size: 11px; }
.monitor-health-row small { font-size: 10px; }
.monitor-health-value { font-size: 11px; }
.monitor-account b { font-size: 12px; }
.monitor-account small, .monitor-account > strong small { font-size: 10px; }
.monitor-account > strong { font-size: 12px; }
.monitor-allocation-row { font-size: 12px; }
.monitor-allocation-row b { font-size: 12px; }
.monitor-allocation-row > small { font-size: 10px; }
.monitor-periods button { font-size: 11px; }
.monitor-chart-summary strong { font-size: 25px; }
.monitor-chart-summary span { font-size: 11px; }
.monitor-chart-stats span { font-size: 10px; }
.monitor-chart-stats b { font-size: 11px; }
.monitor-strategy-head { font-size: 10px; }
.monitor-strategy-name b { font-size: 12px; }
.monitor-strategy-name small { font-size: 10px; }
.monitor-side { font-size: 10px; }
.monitor-position, .monitor-strategy-row > strong { font-size: 11px; }
.monitor-state { font-size: 10px; }
.monitor-event-row b { font-size: 11px; }
.monitor-event-row p, .monitor-event-row time { font-size: 11px; }
.monitor-alert b { font-size: 11px; }
.monitor-alert p { font-size: 10px; }
.monitor-summary span, .monitor-summary strong { font-size: 11px; }
.monitor-summary small { font-size: 10px; }
.monitor-empty { font-size: 12px; }
@keyframes monitor-pulse { 0%,100% { transform: scale(.85); opacity: .65; } 50% { transform: scale(1.2); opacity: 1; } }
body.monitor-fullscreen .topbar, body.monitor-fullscreen .sidebar, body.monitor-fullscreen .sidebar-scrim { display: none !important; }
body.monitor-fullscreen { overflow: hidden; background: #edf3f6 !important; }
body.monitor-fullscreen .content { margin-left: 0 !important; padding: 0 !important; }
.monitor-dashboard:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; margin: 0; padding: 14px 18px 18px; overflow: auto; box-sizing: border-box; background: #edf3f6; color: #10232d; }
.monitor-dashboard:fullscreen::backdrop { background: #edf3f6; }
.monitor-dashboard:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 100vh; margin: 0; padding: 14px 18px 18px; overflow: auto; box-sizing: border-box; background: #edf3f6; color: #10232d; }
.monitor-dashboard:fullscreen .monitor-header,
.monitor-dashboard:-webkit-full-screen .monitor-header { display: grid; grid-template-columns: minmax(200px,1fr) auto minmax(280px,1fr); }
.monitor-dashboard:fullscreen .monitor-fullscreen-brand,
.monitor-dashboard:-webkit-full-screen .monitor-fullscreen-brand,
.monitor-dashboard.is-fullscreen .monitor-fullscreen-brand { display: flex; }

@media (max-width: 1280px) {
  .monitor-grid { grid-template-columns: 240px minmax(460px,1fr) 300px; }
  .monitor-kpis { grid-template-columns: minmax(210px,1.5fr) repeat(7,minmax(88px,1fr)); }
  .monitor-strategy-head, .monitor-strategy-row { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
}
@media (max-width: 1180px) {
  .dashboard-top-title small { display: none; }
  .dashboard-top-context { gap: 10px; padding-inline: 10px; }
  .dashboard-top-meta time { display: none; }
}
@media (max-width: 1040px) {
  .monitor-header { grid-template-columns: 1fr auto; }.monitor-title { display: none; }
  .monitor-dashboard:fullscreen .monitor-header, .monitor-dashboard:-webkit-full-screen .monitor-header { grid-template-columns: 1fr auto; }
  .monitor-kpis { grid-template-columns: repeat(3,1fr); }.monitor-kpi { border-bottom: 1px solid var(--monitor-line); }.monitor-kpi-main { grid-column: 1 / -1; }.monitor-kpi:nth-child(3n + 1) { border-right: 0; }
  .monitor-grid { grid-template-columns: 1fr 1fr; }.monitor-center { grid-column: 1 / -1; grid-row: 1; }.monitor-left { grid-column: 1; grid-row: 2; }.monitor-right { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  .sidebar-collapse-button, .dashboard-top-context { display: none !important; }
  .content:has(.monitor-dashboard) { padding: calc(var(--header-h) + 8px) 10px 22px; }
  /* The app topbar already provides the mobile context and brand. Keep the
     dashboard header compact instead of reserving an empty desktop toolbar. */
  .monitor-header { min-height: 0; display: block; padding: 0; border-bottom: 0; }
  .monitor-title, .monitor-actions { display: none; }
  .monitor-button[data-dashboard-fullscreen] { display: none !important; }
  .monitor-kpis { grid-template-columns: repeat(2,1fr); }
  .monitor-kpi, .monitor-kpi:nth-child(3n + 1) { border-right: 1px solid var(--monitor-line); }
  .monitor-kpi-main { grid-column: 1 / -1; border-right: 0; }
  .monitor-kpi:nth-child(2n + 1) { border-right: 0; }
  .monitor-grid { display: flex; flex-direction: column; }
  .monitor-column { display: contents; }
  .monitor-chart-panel { order: 1; }
  .monitor-strategy-panel { order: 2; }
  .monitor-left > .monitor-panel:nth-child(1) { order: 3; }
  .monitor-left > .monitor-panel:nth-child(2) { order: 4; }
  .monitor-left > .monitor-panel:nth-child(3) { order: 5; }
  .monitor-right > .monitor-panel:nth-child(1) { order: 6; }
  .monitor-right > .monitor-panel:nth-child(2) { order: 7; }
  .monitor-right > .monitor-panel:nth-child(3) { order: 8; }
  .monitor-strategy-head { display: none; }
  .monitor-strategy-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name pnl" "position state"; gap: 9px 12px; align-items: center; }
  .monitor-strategy-row > .monitor-strategy-name { grid-area: name; }
  .monitor-strategy-row > .monitor-side, .monitor-strategy-row > .monitor-live-price, .monitor-strategy-row > .monitor-entry-price { display: none; }
  .monitor-strategy-row > .monitor-position { grid-area: position; display: grid; grid-template-columns: auto minmax(68px, 110px); align-items: center; gap: 8px; min-width: 0; }
  .monitor-strategy-row > .monitor-position span::before { content: "持仓 "; color: var(--monitor-muted); font-family: Inter, "Microsoft YaHei", sans-serif; font-weight: 650; }
  .monitor-strategy-row > strong[data-strategy-pnl] { grid-area: pnl; align-self: start; text-align: right; }
  .monitor-state { grid-area: state; justify-self: end; }
  .monitor-strategy-name { min-width: 0; align-items: flex-start; gap: 8px; }
  .monitor-strategy-name > span { min-width: 0; max-width: 100%; overflow: hidden; }
  .monitor-strategy-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .monitor-strategy-name small { display: flex; align-items: center; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.3; }
  .monitor-strategy-name small > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .monitor-chart-panel > header { align-items: flex-start; flex-direction: column; }
  .monitor-periods { width: 100%; }
  .monitor-periods button { flex: 1 1 0; min-width: 0; }
  .monitor-chart-summary { display: grid; align-items: start; gap: 5px; padding-inline: 14px; }
  .monitor-chart { height: 250px; }
  .monitor-chart-stats { margin-inline: 14px; }
  .monitor-chart-stats span { padding-inline: 6px; }
}
@media (max-width: 420px) {
  .monitor-chart-stats { grid-template-columns: 1fr; gap: 0; }
  .monitor-chart-stats span, .monitor-chart-stats span:first-child, .monitor-chart-stats span:nth-child(2), .monitor-chart-stats span:last-child { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--monitor-line); text-align: left; }
  .monitor-chart-stats span:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  .topbar .brand-name { display: flex; min-width: 0; }
  .topbar .brand-name small { display: block; margin-top: 2px; font-size: 7px; letter-spacing: .8px; }
  .asset-icon.md { width: 24px; height: 24px; }.asset-icon.lg { width: 32px; height: 32px; }
  .exchange-logo.md { width: 25px; height: 25px; }
  .credential-hint { align-items: flex-start; flex-direction: column; }
  .market-strip > span { min-width: 124px; }
}

/* Dashboard theme follows the global theme switch instead of staying light. */
:root[data-theme="dark"] body:has(.monitor-dashboard) { background: var(--bg) !important; }
:root[data-theme="dark"] .monitor-dashboard {
  --surface: #17191d;
  --surface-2: #202329;
  --line: #30343b;
  --muted: #a9afba;
  --primary: #86a5ff;
  --primary-soft: #26365f;
  --primary-strong: #b7c4ff;
  --positive: #50c993;
  --positive-soft: #17392d;
  --danger: #ff7c88;
  --danger-soft: #472329;
  --warning: #f2b94b;
  --warning-soft: #40331a;
  --monitor-line: #30343b;
  --monitor-strong: #464b55;
  --monitor-ink: #f1f3f6;
  --monitor-muted: #a9afba;
  color-scheme: dark;
}
:root[data-theme="dark"] .monitor-dashboard .monitor-panel,
:root[data-theme="dark"] .monitor-dashboard .monitor-kpis,
:root[data-theme="dark"] .monitor-dashboard .monitor-status,
:root[data-theme="dark"] .monitor-dashboard .monitor-button { background: var(--surface); color: var(--monitor-ink); }
:root[data-theme="dark"] .monitor-dashboard .monitor-strategy-head { background: var(--surface-2); }
:root[data-theme="dark"] .monitor-dashboard .monitor-alert { background: var(--surface-2); }
:root[data-theme="dark"] .monitor-dashboard .monitor-periods button { border-color: #3a4049; background: #202329; color: #aeb5c0; }
:root[data-theme="dark"] .monitor-dashboard .monitor-periods button:hover { border-color: #59616e; background: #292d34; color: #f1f3f6; }
:root[data-theme="dark"] .monitor-dashboard .monitor-periods button.active { border-color: #7898f0; background: #26365f; color: #d8e0ff; }
:root[data-theme="dark"] .monitor-dashboard:fullscreen,
:root[data-theme="dark"] .monitor-dashboard:-webkit-full-screen { background: var(--bg); color: var(--monitor-ink); }
:root[data-theme="dark"] .monitor-dashboard:fullscreen::backdrop { background: var(--bg); }

/* Keep the strategy grid readable on desktop and scrollable on narrow screens. */
.monitor-strategy-panel { min-width: 0; overflow-x: auto; }
.monitor-strategy-panel > .monitor-strategy-head,
.monitor-strategy-panel > .monitor-strategy-list { min-width: 980px; }
.monitor-strategy-head, .monitor-strategy-row { min-width: 980px; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 10px; }
.monitor-strategy-head > * { text-align: center !important; }
@media (min-width: 761px) {
  .monitor-strategy-row > strong[data-strategy-pnl],
  .monitor-strategy-row > .monitor-state { justify-self: stretch; text-align: center !important; }
  .monitor-strategy-row > .monitor-state { justify-content: center; }
}
@media (max-width: 1280px) {
  .monitor-strategy-head, .monitor-strategy-row { min-width: 980px; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 10px; }
}
@media (max-width: 760px) {
  .monitor-strategy-panel { overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .monitor-strategy-panel > header { position: sticky; left: 0; z-index: 2; width: calc(100vw - 20px); box-sizing: border-box; background: var(--surface); }
  .monitor-strategy-panel > .monitor-strategy-head,
  .monitor-strategy-panel > .monitor-strategy-list { min-width: 980px; }
  .monitor-strategy-head { display: grid; }
  .monitor-strategy-head, .monitor-strategy-row {
    min-width: 980px;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    grid-template-areas: none;
    gap: 10px;
  }
  .monitor-strategy-row > .monitor-strategy-name,
  .monitor-strategy-row > .monitor-position,
  .monitor-strategy-row > strong[data-strategy-pnl],
  .monitor-strategy-row > .monitor-state { grid-area: auto; align-self: center; }
  .monitor-strategy-row > .monitor-side { display: inline-flex; }
  .monitor-strategy-row > .monitor-live-price { display: block; }
  .monitor-strategy-row > .monitor-entry-price { display: block; }
  .monitor-strategy-row > .monitor-position { display: grid; grid-template-columns: 1fr; width: auto; gap: 4px; }
  .monitor-strategy-row > .monitor-position span::before { content: none; }
  .monitor-strategy-row > strong[data-strategy-pnl] { justify-self: stretch; text-align: center !important; }
  .monitor-state { justify-self: stretch; justify-content: center; }
  .monitor-side { justify-self: stretch; }
  .monitor-position { justify-items: center; }
  .monitor-strategy-name { align-items: center; justify-content: center; gap: 7px; }
  .monitor-strategy-name > span { overflow: hidden; }
  .monitor-strategy-name small { align-items: flex-start; overflow: hidden; white-space: nowrap; }
}
.app-toast { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: start; padding: 13px 14px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: 0 16px 34px rgba(16, 31, 51, .14); pointer-events: auto; transform: translateY(-8px); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
.app-toast.visible { transform: translateY(0); opacity: 1; }
.app-toast.leaving { transform: translateY(-8px); opacity: 0; }
.app-toast.success { border-color: var(--positive); }
.app-toast.warning { border-color: var(--warning); }
.app-toast.error { border-color: var(--danger); }
.app-toast strong { font-size: 12px; }
.app-toast p { grid-column: 1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.app-toast button { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }
.app-toast button:hover { background: var(--surface-2); color: var(--text); }
.app-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); box-shadow: 0 28px 70px rgba(14, 23, 35, .28); }
.app-dialog::backdrop { background: rgba(13, 20, 30, .46); backdrop-filter: blur(2px); }
.app-dialog form { display: grid; gap: 0; margin: 0; }
.app-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.app-dialog header strong { font-size: 14px; }
.app-dialog header button { width: 28px; height: 28px; border: 0; border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: 18px; }
.app-dialog p { margin: 0; padding: 16px 16px 0; color: var(--muted); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.dialog-input-wrap { padding: 13px 16px 0; }
.dialog-input-wrap:empty { display: none; }
.app-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px; }

/* Professional grid editing follows the table: each editable header owns its
   bulk action, while the toolbar is reserved for row-level operations. */
.tier-toolbar { display: grid; gap: 8px; }
.tier-toolbar-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.tier-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tier-toolbar-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; white-space: nowrap; }
.tier-toolbar-actions button svg { width: 15px; height: 15px; }
.tier-grid-summary { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 30px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--positive) 42%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--positive) 6%, var(--surface)); font-variant-numeric: tabular-nums; }
.tier-grid-summary strong, .tier-grid-summary span { margin: 0; font-size: 10px; line-height: 1.2; }
.tier-grid-summary strong { color: var(--text); }
.tier-grid-summary span { color: var(--muted); }
.tier-column-header { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.tier-column-edit { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px; padding: 2px 5px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.tier-column-edit svg { width: 11px; height: 11px; }
.tier-column-edit:hover { background: var(--accent-soft); color: var(--accent); }
.tier-column-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.professional-tier-table thead th { vertical-align: top; }
.tier-column-dialog .dialog-input-wrap { padding-top: 16px; }
.tier-column-value { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.tier-column-value > div { position: relative; }
.tier-column-value input { width: 100%; min-height: 40px; padding-right: 54px; font-variant-numeric: tabular-nums; }
.tier-column-value em { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--muted); font-size: 11px; font-style: normal; pointer-events: none; }
.tier-bulk-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; border: 0; }
.tier-bulk-toggle legend { grid-column: 1 / -1; margin-bottom: 1px; color: var(--muted); font-size: 11px; }
.tier-bulk-toggle label { position: relative; min-width: 0; }
.tier-bulk-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tier-bulk-toggle span { display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.tier-bulk-toggle input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 750; }
.tier-bulk-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .tier-toolbar-main { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
  .tier-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tier-toolbar-actions [data-entry-preview-toggle] { grid-column: 1 / -1; }
  .tier-grid-summary { justify-content: space-between; width: 100%; }
  .professional-tier-table { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .professional-tier-table th { min-width: 126px; }
  .tier-column-edit { min-height: 30px; padding-inline: 8px; font-size: 10px; }
}

@media (max-width: 760px) {
  .toast-stack { top: calc(var(--header-h) + 10px); right: 14px; }
}

.orders-workspace { padding: 0; overflow: hidden; }
.orders-filter-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 16px 18px 2px; }
.orders-filter-bar label { min-width: 150px; flex: 1 1 150px; }
.orders-filter-bar input, .orders-filter-bar select { width: 100%; height: 34px; min-height: 34px; margin-top: 4px; padding: 6px 8px; font-size: 11px; }
.orders-filter-bar > button { height: 34px; min-height: 34px; }
.orders-workspace .table-wrap { margin: 14px 18px 0; }
.orders-workspace table { min-width: 1180px; }
.orders-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 18px; color: var(--muted); font-size: 10px; }
.orders-pagination .button-row { width: auto; }
.orders-pagination button { min-height: 30px; }
.event-workspace > .table-wrap { border-bottom: 0; }
.event-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.event-pagination .button-row { width: auto; }
.event-pagination button { min-height: 32px; }
.orders-stats { margin-bottom: 14px; }
@media (max-width: 720px) {
  .orders-filter-bar { align-items: stretch; padding-inline: 14px; }
  .orders-filter-bar label { min-width: 0; flex: 1 1 140px; }
  .orders-filter-bar > button { flex: 1 1 100px; }
  .orders-workspace .table-wrap { margin-inline: 14px; }
  .orders-pagination { align-items: flex-start; flex-direction: column; padding-inline: 14px; }
  .orders-pagination .button-row { width: 100%; }
  .orders-pagination button { flex: 1; }
  .event-pagination { align-items: flex-start; flex-direction: column; padding-inline: 14px; }
  .event-pagination .button-row { width: 100%; }
  .event-pagination button { flex: 1; }
}
@media (max-width: 760px) {
  .tier-bulk-toolbar { align-items: stretch; flex-direction: column; }
  .tier-bulk-controls { align-items: stretch; justify-content: stretch; }
  .tier-bulk-controls label, .tier-bulk-controls button { flex: 1 1 100%; }
  .tier-bulk-controls select, .tier-bulk-controls input, .tier-bulk-controls button { width: 100%; }
}
/* Immediate navigation feedback while page data is loading. */
.page-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text);
}
.page-loading > div { display: grid; gap: 3px; }
.page-loading strong { font-size: 15px; font-weight: 700; }
.page-loading small { color: var(--muted); font-size: 12px; }
.page-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: page-loading-spin .7s linear infinite;
}
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-loading-spinner { animation: none; } }

/* Strategy-scoped AI decision history. */
.ai-decision-dialog {
  width: min(1040px, calc(100vw - 40px));
  max-height: min(860px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(15, 28, 45, .24);
}
.ai-decision-dialog::backdrop { background: rgba(10, 18, 29, .48); }
.ai-decision-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.ai-decision-dialog > header small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.ai-decision-dialog > header h2 { margin: 0; font-size: 18px; }
.ai-decision-dialog > header button { width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.ai-decision-dialog > header button:hover { border-color: var(--accent); color: var(--text); }
.ai-decision-dialog-body { max-height: calc(100vh - 126px); overflow: auto; overscroll-behavior: contain; }
.ai-decision-loading, .ai-decision-empty { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 32px; color: var(--muted); text-align: center; }
.ai-decision-loading svg { animation: page-loading-spin .8s linear infinite; }
.ai-decision-empty svg { width: 30px; height: 30px; color: var(--accent); }
.ai-decision-empty b { color: var(--text); font-size: 15px; }
.ai-decision-empty p { max-width: 460px; margin: 0; line-height: 1.6; }
.ai-decision-empty button { margin-top: 8px; }
.ai-decision-list { padding: 8px 22px 0; }
.ai-decision-record { border-bottom: 1px solid var(--line); }
.ai-decision-record:last-child { border-bottom: 0; }
.ai-decision-record > summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 2px; cursor: pointer; list-style: none; }
.ai-decision-record > summary::-webkit-details-marker { display: none; }
.ai-decision-record > summary > span:first-child { min-width: 0; display: grid; gap: 4px; }
.ai-decision-record summary time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ai-decision-record summary b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ai-decision-summary-meta { flex: 0 0 auto; display: grid; grid-template-columns: auto auto 18px; align-items: center; gap: 10px; }
.ai-decision-summary-meta em { padding: 4px 7px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 11px; font-style: normal; }
.ai-decision-summary-meta em.positive { background: var(--positive-soft); color: var(--positive); }
.ai-decision-summary-meta em.danger { background: var(--danger-soft); color: var(--danger); }
.ai-decision-summary-meta em.warning { background: var(--warning-soft); color: var(--warning); }
.ai-decision-summary-meta small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ai-decision-summary-meta svg { width: 16px; height: 16px; transition: transform .18s ease; }
.ai-decision-record[open] .ai-decision-summary-meta svg { transform: rotate(180deg); }
.ai-decision-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); background: var(--surface-2); }
.ai-decision-flow section { min-width: 0; padding: 14px; border-inline-end: 1px solid var(--line); }
.ai-decision-flow section:last-child { border-inline-end: 0; }
.ai-decision-flow span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.ai-decision-flow b { display: block; margin-bottom: 5px; font-size: 12px; overflow-wrap: anywhere; }
.ai-decision-flow p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-decision-reason { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 14px 2px; }
.ai-decision-reason b { font-size: 12px; }
.ai-decision-reason p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.ai-decision-executions { margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ai-decision-executions li { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .8fr) minmax(200px, 1fr); gap: 16px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.ai-decision-executions span { min-width: 0; }
.ai-decision-executions b, .ai-decision-executions small { display: block; }
.ai-decision-executions b { font-size: 12px; }
.ai-decision-executions small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ai-decision-executions strong { font-size: 11px; text-align: right; }
.ai-decision-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.ai-decision-pagination > div { display: flex; gap: 8px; }
.ai-decision-pagination button { min-height: 32px; }

@media (max-width: 760px) {
  .ai-decision-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .ai-decision-dialog > header { padding: 14px 16px; }
  .ai-decision-dialog > header h2 { max-width: calc(100vw - 82px); overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .ai-decision-dialog-body { max-height: calc(100dvh - 64px); }
  .ai-decision-list { padding-inline: 16px; }
  .ai-decision-record > summary { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 14px; }
  .ai-decision-summary-meta { width: 100%; grid-template-columns: auto 1fr 18px; }
  .ai-decision-summary-meta small { overflow: hidden; text-align: right; text-overflow: ellipsis; }
  .ai-decision-flow { grid-template-columns: 1fr; }
  .ai-decision-flow section { padding: 12px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .ai-decision-flow section:last-child { border-bottom: 0; }
  .ai-decision-reason { grid-template-columns: 1fr; gap: 5px; }
  .ai-decision-executions li { grid-template-columns: 1fr; gap: 7px; }
  .ai-decision-executions strong { text-align: left; }
  .ai-decision-pagination { align-items: stretch; flex-direction: column; padding-inline: 16px; }
  .ai-decision-pagination > div, .ai-decision-pagination button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-decision-loading svg { animation: none; }
  .ai-decision-summary-meta svg { transition: none; }
}