:root {
  --bg: #0d1117;
  --bg2: #151b24;
  --bg3: #1d2531;
  --line: #2a3442;
  --fg: #e6edf3;
  --mut: #8b98a8;
  --acc: #4cc2ff;
  --side: #ff9f43;
  --other: #5b6573;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5;
}
button { font: inherit; color: inherit; cursor: pointer; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--bg2);
}
.brand h1 { margin: 0; font-size: 20px; letter-spacing: .5px; }
.brand .sub { color: var(--mut); font-size: 13px; }
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search input {
  width: 260px; max-width: 70vw; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); outline: none;
}
.search input:focus { border-color: var(--acc); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 7px 16px; color: var(--mut); }
.seg button.active { background: var(--acc); color: #04121c; font-weight: 600; }
.lang { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 14px; color: var(--mut); }
.lang:hover { border-color: var(--acc); color: var(--fg); }

.quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 0; }
.quick button {
  border: 1px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 4px 12px; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.quick button:hover { border-color: var(--acc); }
.quick button.on { background: var(--bg3); border-color: var(--acc); color: var(--acc); }
.quick button.side { border-style: dashed; color: var(--side); }
.quick button.side.on { border-color: var(--side); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 20px; min-height: 42px; }
.crumbs button { background: none; border: 0; padding: 2px 6px; border-radius: 6px; color: var(--acc); }
.crumbs button:hover { background: var(--bg3); }
.crumbs .cur { color: var(--fg); font-weight: 600; padding: 2px 6px; }
.crumbs .sep { color: var(--mut); }
.crumbs .tag-side { color: var(--side); font-size: 12px; border: 1px dashed var(--side); border-radius: 4px; padding: 0 4px; margin-right: 2px; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 0 20px 16px; }
.chart-wrap {
  position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 560px; display: flex; flex-direction: column;
}
#chart { flex: 1; min-height: 520px; position: relative; }
#chart svg { display: block; width: 100%; height: 100%; }
.back {
  position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; font-size: 13px;
}
.back:disabled { opacity: .35; cursor: default; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 14px 12px; color: var(--mut); font-size: 12px; }
.legend .hint { margin-left: auto; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.sw.main { background: linear-gradient(90deg, #4cc2ff, #7ee787, #d2a8ff); }
.sw.side { background: var(--side); outline: 1px dashed #fff8; outline-offset: 1px; }
.sw.other { background: var(--other); }

.arc { cursor: pointer; transition: opacity .15s; }
.arc:hover { opacity: .85; }
.arc-label { pointer-events: none; fill: #0b0f14; font-size: 11px; font-weight: 500; }
.center-label { pointer-events: none; }
.center-hit { cursor: pointer; }
.cell { cursor: pointer; }
.cell rect { transition: opacity .15s; }
.cell:hover rect.leaf { opacity: .85; }
.cell-text { pointer-events: none; fill: #0b0f14; font-size: 12px; }
.cell-head { pointer-events: none; font-size: 12px; font-weight: 600; }

.side-col { position: sticky; top: 12px; align-self: start; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  max-height: calc(100vh - 210px); overflow: auto;
}
.side-col .panel { max-height: calc(100vh - 480px); min-height: 320px; }
.panel h2 { margin: 0 0 4px; font-size: 18px; }
.panel .big { font-size: 28px; font-weight: 700; color: var(--acc); letter-spacing: .5px; }
.panel.is-side .big { color: var(--side); }
.panel .range { color: var(--mut); font-size: 12px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--mut); }
.badge.est { border-color: #d29922; color: #d29922; }
.badge.side { border: 1px dashed var(--side); color: var(--side); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat { background: var(--bg3); border-radius: 8px; padding: 8px; }
.stat b { display: block; font-size: 15px; }
.stat span { color: var(--mut); font-size: 11px; }
.note { color: #c9d1d9; font-size: 13px; background: var(--bg3); border-left: 3px solid var(--acc); padding: 8px 10px; border-radius: 4px; }
.panel.is-side .note { border-left-color: var(--side); }
.src { color: var(--mut); font-size: 12px; margin-top: 6px; }
.panel h3 { font-size: 13px; color: var(--mut); margin: 18px 0 8px; font-weight: 600; }
.kids { list-style: none; margin: 0; padding: 0; }
.kids li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.kids li:hover, .kids li.sel { background: var(--bg3); }
.kids .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kids .nm .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.kids .nm .arrow { color: var(--mut); font-size: 11px; margin-left: 4px; }
.kids .v { color: var(--mut); font-variant-numeric: tabular-nums; }
.kids .bar { grid-column: 1 / -1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.kids .bar i { display: block; height: 100%; }
.side-card {
  border: 1px dashed var(--side); border-radius: 8px; padding: 10px; margin-bottom: 8px; cursor: pointer;
  background: rgba(255, 159, 67, .06);
}
.side-card:hover { background: rgba(255, 159, 67, .14); }
.side-card .t { display: flex; justify-content: space-between; font-weight: 600; color: var(--side); }
.side-card .d { color: var(--mut); font-size: 12px; margin-top: 4px; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 10; background: #0b0f14ee; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; max-width: 280px; opacity: 0; transition: opacity .1s;
}
.tooltip b { font-size: 13px; }
.tooltip .tv { color: var(--acc); font-weight: 600; }
.tooltip .tm { color: var(--mut); }

.foot { color: var(--mut); font-size: 12px; padding: 4px 20px 24px; }
.foot a { color: var(--acc); margin-left: 8px; white-space: nowrap; }

.ad-slot { position: relative; }
.ad-label { color: var(--mut); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.ad-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  border: 1px dashed var(--line); border-radius: 8px; background: repeating-linear-gradient(45deg, #151b24, #151b24 10px, #18202b 10px, #18202b 20px);
  color: var(--mut); font-size: 12px; padding: 12px;
}
.ad-placeholder b { color: var(--fg); font-size: 13px; }
.ad-sidebar .ad-placeholder { height: 250px; }
.below-wrap { padding: 0 20px 12px; }
.ad-belowChart { max-width: 970px; margin: 0 auto; }
.ad-belowChart .ad-placeholder { height: 90px; }
.ad-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(5, 8, 12, .78); display: flex; align-items: center; justify-content: center;
  animation: adfade .2s ease-out;
}
@keyframes adfade { from { opacity: 0; } to { opacity: 1; } }
.ad-modal {
  position: relative; width: min(92vw, 420px); background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.ad-modal .ad-placeholder { height: 280px; }
.ad-close {
  position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--mut); font-size: 22px; line-height: 1; padding: 4px 8px;
}
.ad-close:hover { color: var(--fg); }
.ad-continue { align-self: flex-end; background: var(--acc); color: #04121c; border: 0; border-radius: 999px; padding: 7px 18px; font-weight: 600; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .side-col { position: static; }
  .panel, .side-col .panel { position: static; max-height: none; min-height: 0; }
  .chart-wrap { min-height: 440px; }
  #chart { min-height: 400px; }
  .legend .hint { margin-left: 0; }
}

.doc { max-width: 780px; margin: 0 auto; padding: 32px 20px 60px; }
.doc h1 { font-size: 26px; margin-top: 8px; }
.doc h2 { font-size: 18px; margin-top: 32px; }
.doc h3 { font-size: 15px; margin: 20px 0 4px; color: var(--fg); }
.doc p, .doc li { color: #c9d1d9; line-height: 1.7; }
.doc a { color: var(--acc); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.doc .lede { font-size: 16px; color: var(--fg); }
.doc .updated { color: var(--mut); font-size: 12px; }
.doc .doc-nav, .doc .doc-foot { font-size: 13px; }
.doc table.chain { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.doc table.chain th, .doc table.chain td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.doc table.chain th { color: var(--mut); font-weight: 600; }
.doc table.chain td:nth-child(2) { color: var(--acc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.notfound { text-align: center; padding-top: 12vh; }
.notfound .code { font-size: 72px; font-weight: 700; color: var(--acc); margin: 0; }

a.lang { text-decoration: none; display: inline-block; }
.intro { max-width: 900px; margin: 0 auto; padding: 8px 20px 4px; color: #c9d1d9; }
.intro h2 { font-size: 16px; margin: 8px 0 6px; color: var(--fg); }
.intro p { margin: 6px 0; line-height: 1.7; font-size: 14px; }
.intro a { color: var(--acc); }