:root {
  --bg: #09101f;
  --surface: #111b2f;
  --surface-2: #17243b;
  --line: #2a3c5c;
  --text: #edf3ff;
  --muted: #92a3c2;
  --cyan: #4ed9ff;
  --green: #4ad99b;
  --red: #ff7483;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: radial-gradient(circle at 82% -30%, #193d60 0, transparent 33%), var(--bg); color: var(--text); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft Yahei", sans-serif; }
.shell { max-width: 1760px; margin: 0 auto; padding: 26px 26px 48px; }
.topbar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.eyebrow, .strategy-code { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { font-size: 34px; letter-spacing: -.04em; margin: 4px 0; }
.subtitle, .strategy-head p { margin: 0; color: var(--muted); }
.top-actions { display: flex; gap: 12px; align-items: center; }
.refresh { border: 1px solid #35749b; background: #123a54; color: #dcf7ff; border-radius: 9px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.refresh:disabled { opacity: .6; }
.pill { border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; white-space: nowrap; font-weight: 750; font-size: 12px; }
.pill.running { background: #0a3629; color: #75f1b3; border-color: #1c7453; }
.pill.blocked { background: #45202a; color: #ffabb5; border-color: #843745; }
.pill.neutral { background: #202a3c; color: #b8c5df; }
.notice { margin: 22px 0 16px; border: 1px solid #2f4e6c; background: #10243a; border-radius: 12px; padding: 11px 14px; color: #c8e1f6; }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.metric { min-height: 82px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, #162239, #101827); }
.metric span { display: block; color: var(--muted); font-size: 12px; }
.metric strong { display: block; margin-top: 7px; font-size: 19px; letter-spacing: -.03em; }
.metric.positive strong, .positive { color: var(--green); }
.metric.negative strong, .negative { color: var(--red); }
.neutral { color: var(--muted); }

.strategy-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; align-items: start; }
.strategy-card { border: 1px solid var(--line); background: rgba(17, 26, 44, .94); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 38px rgba(0, 0, 0, .18); }
.strategy-head { padding: 19px 20px 14px; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
h2 { font-size: 20px; letter-spacing: -.03em; margin: 4px 0; }
.state { max-width: 44%; text-align: right; }
.state small { display: block; margin-top: 7px; color: var(--muted); overflow-wrap: anywhere; }
.strategy-metrics { padding: 13px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strategy-metrics .metric { min-height: 70px; background: var(--surface-2); }
.strategy-metrics .metric strong { font-size: 16px; }
.daily { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 13px; }
.daily-line { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 7px 9px; color: var(--muted); font-size: 12px; border: 1px solid #263451; border-radius: 9px; background: #0d1525; }
.daily-line b { color: var(--text); }
.daily-line em { font-style: normal; font-weight: 750; }

.tables { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.tables article { min-width: 0; padding: 14px 16px; }
.tables article + article { border-top: 1px solid var(--line); }
.table-title { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 9px; }
.table-title h3 { margin: 0; font-size: 15px; }
.table-title span { color: var(--muted); text-align: right; font-size: 11px; }
.scroll { overflow: visible; border: 1px solid #263451; border-radius: 10px; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; white-space: normal; }
th { padding: 7px 3px; background: #0e1727; color: #90a1bd; text-align: right; font-size: 10px; font-weight: 700; line-height: 1.25; }
td { padding: 7px 3px; border-top: 1px solid #24314b; text-align: right; vertical-align: top; overflow-wrap: anywhere; line-height: 1.3; }
td:first-child, th:first-child { text-align: left; }
td:not(:first-child) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td b { display: block; color: #e9f2ff; }
td small { display: block; margin-top: 2px; color: #7e90ad; font-size: 10px; white-space: normal; }
.timestamp { display: block; font-variant-numeric: tabular-nums; white-space: normal; }
.timestamp span { display: block; color: #dce9fb; font-size: 11px; }
.timestamp small { margin-top: 1px; font-size: 10px; }
.tables article:first-child th:nth-child(1) { width: 14%; }
.tables article:first-child th:nth-child(2) { width: 15%; }
.tables article:first-child th:nth-child(3) { width: 14%; }
.tables article:first-child th:nth-child(4) { width: 15%; }
.tables article:first-child th:nth-child(5) { width: 14%; }
.tables article:first-child th:nth-child(6) { width: 13%; }
.tables article:first-child th:nth-child(7) { width: 15%; }
.tables article:last-child th:nth-child(1) { width: 16%; }
.tables article:last-child th:nth-child(2), .tables article:last-child th:nth-child(3) { width: 14%; }
.tables article:last-child th:nth-child(4) { width: 19%; }
.tables article:last-child th:nth-child(5) { width: 16%; }
.tables article:last-child th:nth-child(6) { width: 21%; }
.empty, .empty-cell { padding: 26px; color: var(--muted); text-align: center; }
.error { color: #ffc0c8; }
.spinner { display: inline-block; width: 16px; height: 16px; margin-right: 8px; border: 2px solid #31506a; border-top-color: var(--cyan); border-radius: 50%; vertical-align: -3px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 960px) { body { min-width: 0; } .strategy-list { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .shell { padding: 22px 15px; } .topbar { display: block; } .top-actions { margin-top: 14px; } .metrics, .strategy-metrics { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 28px; } .strategy-head { display: block; } .state { max-width: none; margin-top: 14px; text-align: left; } .daily { grid-template-columns: 1fr; } .scroll { overflow-x: auto; } table { min-width: 600px; } }