:root {
  color-scheme: dark;
  --background: #0f1720;
  --surface: #131c25;
  --inner: #151f29;
  --line: #3b4b5c;
  --soft-line: #2c3b4a;
  --ink: #eff3f7;
  --muted: #abb9c7;
  --accent: #65e3c2;
  --down: #ff8278;
  --amber: #ffd16a;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); font: 15px/1.5 var(--font); }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: progress; opacity: .55; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 57px; padding: 8px 25px; border-bottom: 1px solid var(--line); background: #121b24;
}
.brand, .connection, .quote { display: flex; align-items: center; gap: 15px; }
.brand { white-space: nowrap; }
.brand strong { font-size: 23px; letter-spacing: .015em; }
.connection { flex-wrap: wrap; justify-content: flex-end; font-size: 14px; }
.source { padding-right: 15px; border-right: 1px solid var(--line); }
#sync { color: var(--muted); }
#sync.healthy { color: var(--ink); }
#refresh, .segments button {
  min-height: 36px; border: 1px solid #607386; border-radius: 7px; background: transparent; padding: 3px 14px;
}
#refresh:hover, .segments button:hover { background: #1b2a35; }
.segments { display: flex; gap: 10px; }
.segments button { flex: 1; font-size: 14px; white-space: nowrap; }
.segments button[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: #173438; }
main { max-width: 1700px; margin-inline: auto; padding: 14px 17px 0; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10px; gap: 14px; margin: 0 0 18px; }
h1 { font-size: clamp(29px, 3.4vw, 42px); line-height: 1.16; letter-spacing: .022em; }
.intro p { color: #d6dee5; margin-top: 6px; font-size: clamp(13px, 1.45vw, 19px); }
#coverage { color: var(--muted); font-size: 12px; white-space: nowrap; }
.frame { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); min-width: 0; }
.workspace { display: grid; grid-template-columns: minmax(280px, 25.4%) minmax(0, 1fr); gap: 15px; }
.watch-header { padding: 9px 16px 12px; }
.watch-header h2 { font-size: 24px; margin: 0 0 10px; }
.watch-labels, .watch-row {
  display: grid; align-items: center; gap: 7px;
  grid-template-columns: minmax(66px, 1.16fr) minmax(52px, 1fr) minmax(44px, .72fr) minmax(67px, .85fr);
  padding-inline: clamp(8px, 1.1vw, 17px);
}
.watch-labels { min-height: 39px; color: #ced8e3; font-size: 13px; }
.watch-labels span:nth-child(n+2), .watch-row span:nth-child(n+2) { text-align: right; }
.watch-row { min-height: 49px; width: 100%; border: 0; border-top: 1px solid var(--soft-line); background: transparent; text-align: left; font: 13px var(--mono); }
.watch-row:last-child { border-bottom: 1px solid var(--soft-line); }
.watch-row:hover { background: #1c2a36; }
.watch-row[aria-current="true"] { background: #123539; box-shadow: inset 2px 0 var(--accent); }
.symbol { font-weight: 700; overflow-wrap: anywhere; }
.num, .quote { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.positive { color: var(--accent); }
.negative { color: var(--down); }
.badge {
  display: inline-block; justify-self: end; max-width: 100%; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 6px; color: var(--muted); font: 12px/1.45 var(--font); white-space: nowrap;
}
.badge.wait { color: var(--amber); border-color: #665125; background: #3a3021; }
.watch-row .badge { font-size: 11px; padding-inline: 4px; }
.badge.triggered { color: var(--accent); border-color: #3b9b87; background: #173a37; }
.badge.expired, .badge.stale { color: #bac5d1; border-color: #485867; background: #23303c; }
.empty-list { padding: 19px 16px; color: var(--muted); }
.detail { padding: 11px; }
.instrument { display: flex; justify-content: space-between; align-items: center; gap: 13px; padding: 0 11px 12px; min-height: 87px; }
.instrument h2 { font: 700 clamp(21px, 2.55vw, 32px)/1.18 var(--font); letter-spacing: .01em; }
.quote { margin-top: 5px; gap: 15px; flex-wrap: wrap; }
#pair-price { font-size: clamp(22px, 2.35vw, 32px); font-weight: 700; line-height: 1.1; }
#pair-change { font-size: 17px; }
.quote .badge { padding: 4px 10px; font-size: 13px; }
#periods button { min-width: 90px; }
.plot { position: relative; height: clamp(300px, 42vh, 445px); border: 1px solid var(--soft-line); border-radius: 7px; overflow: hidden; background: #101820; }
canvas { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
#candle-readout { position: absolute; left: 10px; top: 7px; right: 10px; pointer-events: none; color: #ecf2f7; font: 11px/1.55 var(--mono); text-shadow: 0 1px 2px #000; }
.analysis { display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 1fr); gap: 15px; margin-top: 15px; }
.analysis section { padding: 11px 14px 12px; background: var(--inner); }
h3 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; }
dl { margin: 0; border: 1px solid var(--soft-line); border-radius: 6px; overflow: hidden; }
.plan-row { display: grid; grid-template-columns: minmax(79px, 29%) minmax(0, 1fr); min-height: 32px; }
.plan-row + .plan-row { border-top: 1px solid var(--soft-line); }
dt, dd { padding: 5px 10px; margin: 0; overflow-wrap: anywhere; }
dt { color: #d8e1e9; background: #1b2732; font-size: 13px; }
dd { font: 13px/1.5 var(--mono); }
#evidence { list-style: none; padding: 0; margin: 0; counter-reset: evidence; }
#evidence li { display: flex; align-items: start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--soft-line); }
#evidence li::before {
  counter-increment: evidence; content: counter(evidence); flex: 0 0 23px; text-align: center;
  border: 1px solid #488b81; color: var(--accent); background: #16343a; border-radius: 5px; font: 13px/20px var(--mono);
}
.muted { color: var(--muted); font-size: 12px; margin-top: 8px; overflow-wrap: anywhere; }
.notice { border: 1px solid #675530; border-radius: 7px; background: #2b2319; color: #ffdc91; padding: 8px 13px; margin-bottom: 12px; }
footer { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--line); padding: 10px 10px 14px; margin-top: 15px; color: #c5d0db; font-size: 12px; }
@media (min-width: 1300px) {
  .watch-row { font-size: 15px; }
  .topbar { padding-inline: 28px; }
}
@media (max-width: 1060px) {
  .analysis { grid-template-columns: 1fr; gap: 11px; }
  .instrument { padding-inline: 3px; }
  #periods button { min-width: auto; }
}
@media (max-width: 730px) {
  .topbar { align-items: flex-start; padding: 8px 12px; gap: 10px; }
  .brand { gap: 7px; margin-top: 4px; }
  .brand strong { font-size: 16px; }
  .brand svg { width: 22px; height: 22px; }
  .connection { gap: 6px 8px; font-size: 11px; }
  .source { display: none; }
  #refresh { min-height: 31px; padding-inline: 9px; }
  main { padding: 13px 10px 0; }
  .intro { padding-inline: 3px; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
  .workspace { display: flex; flex-direction: column; gap: 12px; }
  #watch-rows { max-height: 218px; overflow-y: auto; }
  .watch-row { min-height: 43px; }
  .instrument { min-height: auto; flex-wrap: wrap; }
  #periods { width: 100%; }
  .plot { height: 310px; }
  .detail { padding: 8px; }
}