:root {
  color-scheme: dark;
  --bg: #080a0f;
  --panel: #0d1017;
  --panel-2: #11151e;
  --line: #202531;
  --muted: #7c8496;
  --text: #e7eaf0;
  --blue: #4ea1ff;
  --amber: #f4b75c;
  --red: #ef5350;
  --green: #26a69a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.workstation { height: 100vh; display: grid; grid-template-rows: 64px 42px auto minmax(0, 1fr); }
.command-bar { display: flex; align-items: center; gap: 26px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #0b0e14; }
.brand { min-width: 210px; display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #9b723a; border-radius: 9px; color: var(--amber); background: #211a12; font-family: serif; font-size: 20px; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .04em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.top-nav { white-space: nowrap; }
.top-nav a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; color: #b7bdc8; text-decoration: none; font-size: 12px; }
.top-nav a:hover { border-color: #3a638f; color: #fff; background: #152033; }
.query-form { flex: 1; display: flex; align-items: center; gap: 10px; }
.symbol-search { position: relative; }
.symbol-field, .limit-field { height: 36px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.symbol-field span, .limit-field span { padding-left: 10px; color: var(--muted); font-size: 12px; }
.symbol-field input { width: 142px; }
.symbol-field input, .limit-field select { height: 100%; border: 0; outline: 0; color: var(--text); background: transparent; padding: 0 10px 0 8px; }
.symbol-field input::placeholder { color: #596171; }
.instrument-suggestions { position: absolute; z-index: 20; top: 41px; left: 0; width: 286px; max-height: 360px; overflow: auto; padding: 5px; border: 1px solid #303746; border-radius: 7px; background: #111620; box-shadow: 0 14px 36px rgba(0,0,0,.55); }
.instrument-suggestions[hidden] { display: none; }
.instrument-option { width: 100%; min-height: 42px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 7px 9px; border: 0; border-radius: 5px; color: #dce1e9; background: transparent; cursor: pointer; text-align: left; }
.instrument-option:hover, .instrument-option.active { background: #253044; }
.instrument-option strong, .instrument-option small { display: block; }
.instrument-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.instrument-option small { margin-top: 2px; color: #778196; font-size: 10px; }
.instrument-option code { color: #aab4c5; font-size: 11px; }
.limit-field select { width: 82px; }
.timeframes { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.timeframes button { height: 28px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; }
.timeframes button.active { color: #fff; background: #293244; }
.primary { height: 36px; padding: 0 16px; border: 1px solid #407fc7; border-radius: 6px; color: #fff; background: #2367b5; cursor: pointer; }
.primary:hover { background: #2c76c8; }
.repair-range { height: 36px; padding: 0 12px; border: 1px solid #66502f; border-radius: 6px; color: #dcb66f; background: #1b1710; cursor: pointer; white-space: nowrap; }
.repair-range:hover { border-color: #aa7d3d; background: #251d12; }
.repair-range.gap-detected { border-color: #c98c36; color: #ffe0a4; box-shadow: 0 0 0 2px rgba(244,183,92,.08); }
.repair-range:disabled, .primary:disabled { cursor: wait; opacity: .5; }
.status { display: flex; align-items: center; gap: 8px; min-width: 108px; justify-content: flex-end; color: var(--muted); font-size: 12px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #576071; }
.status.loading i { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 1s infinite; }
.status.ready i { background: var(--green); }
.status.error i { background: var(--red); }
@keyframes pulse { 50% { opacity: .35; } }
.toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #0c0f15; color: var(--muted); font-size: 12px; }
.layers, .legend { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.layers label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.layers input { accent-color: var(--blue); }
.view-modes { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: #111620; }
.view-modes button { height: 25px; padding: 0 10px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; }
.view-modes button.active { color: #fff; background: #2a3447; }
.chart-views { margin-left: 4px; }
.toolbar-label { color: #b7bdc8; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.fx { background: var(--green); }.dot.bi { background: var(--blue); }.dot.seg { background: var(--amber); }.dot.zs { background: rgba(78,161,255,.65); border-radius: 2px; }
.dash { width: 14px; border-top: 2px dashed #7f8794; }
.endpoint-glyph { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #c99546; border-radius: 50%; color: #f4c77f; background: #211a12; font-size: 9px; font-weight: 700; }
.warning-panel { padding: 8px 18px; border-bottom: 1px solid #6a4a22; color: #f0c982; background: #241b10; font-size: 12px; }
.workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 286px; }
.chart-panel { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-rows: 38px minmax(0, 1fr); background: #0b0d12; }
.market-line { z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #181c25; font-size: 12px; }
.market-identity { display: flex; align-items: center; min-width: 0; }
.market-line strong { margin-right: 8px; font-size: 16px; }
.market-line span { margin-right: 9px; color: var(--muted); }
.market-line .market-code { color: #c8ced9; font-weight: 600; font-variant-numeric: tabular-nums; }
.market-line .market-badge { padding: 2px 6px; border: 1px solid #303746; border-radius: 4px; color: #929cad; background: #111620; font-size: 10px; }
.market-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.zoom-controls { display: flex; align-items: center; overflow: hidden; border: 1px solid #2a3341; border-radius: 5px; background: #10151e; }
.zoom-controls button { height: 25px; min-width: 27px; padding: 0 7px; border: 0; border-right: 1px solid #2a3341; color: #aeb7c5; background: transparent; cursor: pointer; font-size: 12px; }
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover:not(:disabled) { color: #fff; background: #243044; }
.zoom-controls button:disabled { color: #4e5766; cursor: default; }
.zoom-controls span { min-width: 43px; color: #8792a4; text-align: center; font-size: 9px; font-variant-numeric: tabular-nums; }
.ohlc { color: #aab1bf; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart { min-height: 0; position: relative; overflow: hidden; }
.empty-state { position: absolute; inset: 38px 0 0; display: grid; place-items: center; pointer-events: none; color: #697184; font-size: 13px; letter-spacing: .03em; }
.empty-state[hidden] { display: none; }
.inspector { min-height: 0; overflow: auto; padding: 16px; border-left: 1px solid var(--line); background: var(--panel); }
.inspector-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.inspector-title small { color: var(--muted); font-size: 9px; letter-spacing: .15em; }.inspector-title h2 { margin: 4px 0 0; font-size: 17px; }.inspector-title span { padding: 4px 8px; border: 1px solid #345e8c; border-radius: 4px; color: #7cb8ff; background: #101d2d; font-size: 11px; }
.metrics { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }.metrics div { padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.metrics div:nth-child(2n) { border-right: 0; }.metrics div:nth-last-child(-n+2) { border-bottom: 0; }.metrics dt { color: var(--muted); font-size: 11px; }.metrics dd { margin: 4px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.inspect-card { margin-top: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }.inspect-card h3 { margin: 0 0 9px; color: #b9bfca; font-size: 12px; }.inspect-copy, .inspect-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.inspect-copy b { color: var(--text); font-weight: 500; }.contract-card code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: #699dd6; font-size: 10px; }
.chanpy-native-line-layer, .chanpy-native-box-layer, .chanpy-native-bsp-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.chanpy-native-line { position: absolute; left: 0; top: 0; height: 2px; transform-origin: left center; border-radius: 2px; }.chanpy-native-line.seg { height: 2px; }.chanpy-native-line.candidate { opacity: .72; }
.chanpy-native-box { position: absolute; border: 1px solid rgba(78,161,255,.72); background: rgba(78,161,255,.09); }.chanpy-native-box.candidate { border-style: dashed; opacity: .65; }
.chanpy-native-box.segzs { border-color: rgba(244,183,92,.72); background: rgba(244,183,92,.09); }
.structure-sketch { width: 100%; height: 100%; display: block; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sketch-bg { fill: #0c1017; }
.sketch-grid { stroke: #202631; stroke-width: 1; stroke-dasharray: 3 5; }
.sketch-title { fill: #d8dee8; font-size: 13px; font-weight: 650; }
.sketch-summary { fill: #8b96a7; font-size: 10px; font-variant-numeric: tabular-nums; }
.sketch-current-summary { fill: #6ed6ca; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sketch-range, .sketch-time-label, .sketch-price-label { fill: #747d8d; font-size: 10px; font-variant-numeric: tabular-nums; }
.sketch-price-label.current { fill: #f4b75c; font-weight: 650; }
.sketch-current-price { stroke: rgba(244,183,92,.62); stroke-width: 1; stroke-dasharray: 3 4; }
.sketch-market-point { fill: #64d7c8; stroke: #09201e; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sketch-leg { stroke: #d6a24e; stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; }
.sketch-leg.candidate { stroke: #f4b75c; stroke-dasharray: 7 5; opacity: .72; }
.sketch-central { fill: rgba(244,183,92,.10); stroke: rgba(244,183,92,.72); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sketch-central.candidate { stroke-dasharray: 6 4; opacity: .65; }
.sketch-central-label { fill: #c9984e; font-size: 10px; font-weight: 700; }
.sketch-central-boundary { fill: #d3a85d; font-size: 9px; font-weight: 650; paint-order: stroke; stroke: #0c1017; stroke-width: 3px; }
.sketch-endpoint { fill: #231c12; stroke: #e4ad56; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sketch-endpoint.candidate { stroke-dasharray: 3 2; opacity: .78; }
.sketch-endpoint.current { fill: #f4b75c; stroke: #fff1d9; }
.sketch-endpoint-label { fill: #fff1d9; font-size: 10px; font-weight: 700; paint-order: stroke; stroke: #0c1017; stroke-width: 3px; stroke-linejoin: round; }
.sketch-endpoint-label.candidate { fill: #ffd38d; }
.sketch-key-time { fill: #a5afbe; font-size: 9px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #0c1017; stroke-width: 3px; }
.sketch-bsp { stroke: #0b0f16; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sketch-bsp.buy { fill: #e76f69; }.sketch-bsp.sell { fill: #39b3a4; }.sketch-bsp.candidate { opacity: .58; stroke-dasharray: 3 2; }
.sketch-bsp-text { fill: #fff; font-size: 8px; font-weight: 750; paint-order: stroke; stroke: rgba(0,0,0,.4); stroke-width: 2px; }
.sketch-empty { height: 100%; display: grid; place-items: center; color: #747d8d; font-size: 13px; }
.chanpy-native-bsp-marker { position: absolute; min-width: 22px; height: 20px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid #4d596d; border-radius: 10px; color: #dce2eb; background: rgba(13,16,23,.92); box-shadow: 0 1px 5px rgba(0,0,0,.45); font-size: 10px; font-weight: 700; line-height: 1; }
.chanpy-native-bsp-marker.segment-endpoint { z-index: 3; min-width: 20px; height: 20px; padding: 0 4px; border-color: #d39a43; border-radius: 50%; color: #fff6e6; background: #2a2114; font-size: 11px; }
.chanpy-native-bsp-marker.segment-endpoint.candidate { border-style: dashed; color: #ffd38d; background: rgba(42,33,20,.84); }
.chanpy-native-bsp-marker.segment-endpoint.current { border-color: #ffd38d; box-shadow: 0 0 0 3px rgba(244,183,92,.12), 0 0 12px rgba(244,183,92,.24); }
.tracker-card { border-color: #3b3326; background: #15130f; }
.commentary-card { border-color: #34475d; background: #101720; }
.commentary-copy { color: #9aa7b8; font-size: 12px; line-height: 1.65; }
.commentary-copy p { margin: 0 0 8px; }
.commentary-copy p:last-child { margin-bottom: 0; }
.commentary-copy .commentary-response { padding-top: 8px; border-top: 1px solid #2a394b; color: #d7dee8; }

@media (max-width: 980px) {
  .command-bar { gap: 10px; }.brand { min-width: 150px; }.legend { display: none; }.workspace { grid-template-columns: minmax(0,1fr) 236px; }
}