:root {
  --canvas: #08090b;
  --surface: #101318;
  --surface-2: #15191f;
  --surface-3: #1a2027;
  --border: #2a313a;
  --border-strong: #3b4652;
  --text: #eef2f5;
  --muted: #93a0ab;
  --cyan: #49d6cf;
  --green: #45d28a;
  --red: #f06a73;
  --gold: #e8bd61;
  --blue: #6fa8ff;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--canvas); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
h1, h2, p, dl, dd { margin: 0; }

.app-shell { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: 18px 22px 28px; }
.app-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border-strong); }
.brand-block { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: #07110f; background: var(--cyan); font-weight: 900; font-size: 14px; }
.brand-block h1 { font-size: 20px; line-height: 1.25; }
.brand-block p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.brand-block p span { margin: 0 7px; color: var(--border-strong); }
.brand-block p b { color: #c5d0d8; font-weight: 600; }
.connection { display: flex; align-items: center; gap: 10px; min-width: 154px; padding: 9px 12px; border: 1px solid var(--border); background: var(--surface); }
.connection i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--gold); }
.connection[data-state="online"] i { background: var(--green); box-shadow: 0 0 10px rgba(69,210,138,.6); }
.connection[data-state="error"] i { background: var(--red); }
.connection span { display: block; color: var(--muted); font-size: 10px; }
.connection b { display: block; margin-top: 2px; font-size: 12px; }

.control-bar { display: grid; grid-template-columns: 1fr 1fr 1fr 120px 106px; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.control-bar label { min-width: 0; }
.control-bar label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
input, select { width: 100%; height: 36px; padding: 0 10px; color: var(--text); border: 1px solid var(--border); border-radius: 3px; outline: 0; background: var(--surface); }
input:focus, select:focus { border-color: var(--cyan); }
.refresh-button { align-self: end; height: 36px; color: #06100e; border: 0; border-radius: 3px; background: var(--cyan); font-weight: 800; }
.refresh-button span { margin-right: 5px; font-size: 17px; }
.refresh-button:disabled { opacity: .5; cursor: wait; }

.view-tabs { display: flex; gap: 2px; margin-top: 12px; border-bottom: 1px solid var(--border); }
.view-tabs button, .record-tabs button { min-width: 112px; height: 39px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font-weight: 700; }
.view-tabs button.active, .record-tabs button.active { color: var(--text); border-bottom-color: var(--cyan); }
.view { display: none; padding-top: 14px; }
.view.active, .record-view.active { display: block; }

.signal-banner { min-height: 132px; display: grid; grid-template-columns: minmax(300px, 1.6fr) 140px minmax(360px, 1fr); gap: 18px; align-items: stretch; padding: 18px 20px; border: 1px solid var(--border-strong); border-left: 4px solid var(--gold); background: var(--surface); }
.signal-banner[data-direction="buy"] { border-left-color: var(--green); }
.signal-banner[data-direction="sell"] { border-left-color: var(--red); }
.signal-main span { color: var(--gold); font-size: 12px; font-weight: 700; }
.signal-main strong { display: block; margin-top: 7px; font-size: 26px; }
.signal-banner[data-direction="buy"] .signal-main strong { color: var(--green); }
.signal-banner[data-direction="sell"] .signal-main strong { color: var(--red); }
.signal-main p { margin-top: 9px; color: #c5ced5; font-size: 13px; line-height: 1.6; }
.signal-score { display: flex; align-items: baseline; align-content: center; justify-content: center; flex-wrap: wrap; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.signal-score span { width: 100%; text-align: center; color: var(--muted); font-size: 11px; }
.signal-score strong { font-size: 38px; color: var(--cyan); }
.signal-score small { color: var(--muted); }
.signal-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; align-content: center; }
.signal-meta div { min-width: 0; padding-left: 12px; border-left: 1px solid var(--border); }
.signal-meta dt { color: var(--muted); font-size: 10px; }
.signal-meta dd { margin-top: 7px; font-size: 13px; overflow-wrap: anywhere; }

.metric-grid, .risk-metrics { display: grid; gap: 10px; margin-top: 10px; }
.metric-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.risk-metrics { grid-template-columns: repeat(6, minmax(0,1fr)); }
.metric-grid article, .risk-metrics article { min-width: 0; min-height: 94px; padding: 14px; border: 1px solid var(--border); background: var(--surface); }
.metric-grid span, .risk-metrics span { color: var(--muted); font-size: 10px; }
.metric-grid strong, .risk-metrics strong { display: block; margin-top: 8px; font-size: 19px; overflow-wrap: anywhere; }
.metric-grid small, .risk-metrics small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }

.analysis-grid, .risk-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: 10px; margin-top: 10px; }
.surface { border: 1px solid var(--border); background: var(--surface); }
.surface > header { height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.surface > header h2 { font-size: 14px; }
.surface > header span { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.execution-levels { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); }
.level { min-height: 92px; padding: 16px; border-right: 1px solid var(--border); }
.level:last-child { border-right: 0; }
.level span { color: var(--muted); font-size: 10px; }
.level strong { display: block; margin-top: 10px; font-size: 17px; overflow-wrap: anywhere; }
.level.entry strong { color: var(--gold); }
.level.stop strong { color: var(--red); }
.level.target strong { color: var(--green); }
.analyst-lines { border-top: 1px solid var(--border); }
.analyst-lines p { min-height: 47px; display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.5; }
.analyst-lines p:last-child { border-bottom: 0; }
.analyst-lines b { color: var(--gold); }
.analyst-lines span { color: #c6d0d7; }
.structure-list { display: grid; grid-template-columns: 1fr 1fr; }
.structure-list div { min-height: 66px; padding: 13px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.structure-list div:nth-child(even) { border-right: 0; }
.structure-list dt { color: var(--muted); font-size: 10px; }
.structure-list dd { margin-top: 7px; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.energy-block { padding: 8px 14px; }
.energy-block > div { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; min-height: 34px; }
.energy-block span { color: var(--muted); font-size: 11px; }
.energy-block span b { float: right; color: var(--text); }
.energy-block i { height: 7px; background: #232a31; overflow: hidden; }
.energy-block em { display: block; width: 0; height: 100%; background: var(--green); transition: width .25s ease; }
#bearBar { background: var(--red); }
.tech-row { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--border); }
.tech-row span { padding: 10px; text-align: center; color: var(--muted); font-size: 10px; border-right: 1px solid var(--border); }
.tech-row span:last-child { border-right: 0; }
.tech-row b { margin-left: 4px; color: var(--text); }

.chart-panel { margin-top: 10px; }
.tf-tabs { display: grid; grid-template-columns: repeat(9, minmax(42px,1fr)); gap: 1px; padding: 9px 10px 0; }
.tf-tabs button { height: 31px; color: var(--muted); border: 1px solid var(--border); background: var(--surface-2); font-size: 11px; }
.tf-tabs button.active, .tf-tabs button:hover { color: #08100f; border-color: var(--gold); background: var(--gold); }
.tv-chart { height: 520px; margin: 9px 10px 10px; overflow: hidden; border: 1px solid var(--border); background: #0c0f13; }
.tradingview-widget-container, .tradingview-widget-container__widget { width: 100%; height: 100%; }

.section-heading { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 2px; }
.section-heading h2 { font-size: 18px; }
.section-heading p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.section-heading > span { color: var(--muted); font-size: 10px; }
.record-tabs { display: flex; border: 1px solid var(--border); border-bottom: 0; background: var(--surface); }
.record-view { display: none; }
.table-wrap { min-height: 310px; overflow-x: auto; border: 1px solid var(--border); background: var(--surface); }
table { width: 100%; min-width: 1000px; border-collapse: collapse; table-layout: fixed; }
th { height: 38px; padding: 0 10px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); text-align: left; font-size: 10px; font-weight: 600; }
td { height: 44px; padding: 7px 10px; color: #d7dfe5; border-bottom: 1px solid #20262d; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-3); }
.empty-cell { height: 230px; text-align: center; color: var(--muted); cursor: default; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 10px; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.status-tag { display: inline-block; padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--gold); background: #17191a; }
.status-tag[data-status="won"], .status-tag[data-status="tp1_hit"] { color: var(--green); border-color: rgba(69,210,138,.4); }
.status-tag[data-status="lost"] { color: var(--red); border-color: rgba(240,106,115,.4); }
.record-detail { display: grid; grid-template-columns: 260px 1fr; gap: 18px; min-height: 126px; margin-top: 10px; padding: 16px; border: 1px solid var(--border); background: var(--surface); }
.record-detail > div span { display: block; color: var(--muted); font-size: 10px; }
.record-detail > div strong { display: block; margin-top: 8px; color: var(--cyan); font-size: 14px; overflow-wrap: anywhere; }
.record-detail dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.record-detail dl div { padding: 0 14px; border-left: 1px solid var(--border); }
.record-detail dt { color: var(--muted); font-size: 10px; }
.record-detail dd { margin-top: 7px; color: #d0d8de; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }

.status-distribution, .audit-summary { min-height: 210px; display: grid; align-content: start; padding: 10px 14px; }
.status-distribution div, .audit-summary div { min-height: 39px; display: grid; align-items: center; border-bottom: 1px solid var(--border); font-size: 11px; }
.status-distribution div { grid-template-columns: 1fr auto; }
.audit-summary div { grid-template-columns: 1fr 70px 110px; }
.audit-summary em { text-align: right; font-style: normal; }
.status-distribution span, .audit-summary span { color: var(--muted); }
.status-distribution p, .audit-summary p { align-self: center; text-align: center; color: var(--muted); font-size: 12px; }
.risk-conclusion { min-height: 108px; margin-top: 10px; padding: 17px 19px; border: 1px solid var(--border); border-left: 4px solid var(--green); background: var(--surface); }
.risk-conclusion[data-level="warning"] { border-left-color: var(--gold); }
.risk-conclusion[data-level="danger"] { border-left-color: var(--red); }
.risk-conclusion span { color: var(--muted); font-size: 10px; }
.risk-conclusion strong { display: block; margin-top: 6px; font-size: 18px; }
.risk-conclusion p { margin-top: 8px; color: #c8d1d8; font-size: 12px; line-height: 1.55; }

footer { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 12px; color: #71808b; border-top: 1px solid var(--border); font-size: 10px; }

@media (max-width: 1050px) {
  .signal-banner { grid-template-columns: 1fr 125px; }
  .signal-meta { grid-column: 1 / -1; }
  .risk-metrics { grid-template-columns: repeat(3,1fr); }
  .execution-levels { grid-template-columns: repeat(2,1fr); }
  .level:nth-child(2) { border-right: 0; }
  .level:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 760px) {
  .app-shell { padding: 10px 10px 78px; }
  .app-header { align-items: flex-start; gap: 10px; padding-bottom: 10px; }
  .brand-mark { width: 32px; height: 32px; font-size: 12px; }
  .brand-block h1 { max-width: 190px; font-size: 15px; }
  .brand-block p { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .connection { min-width: 112px; padding: 7px 8px; }
  .control-bar { grid-template-columns: 1fr 1fr; }
  .refresh-button { grid-column: 1 / -1; width: 100%; }
  .view-tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); border: 1px solid var(--border); background: rgba(12,15,19,.97); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
  .view-tabs button { min-width: 0; height: 44px; font-size: 12px; }
  .signal-banner { grid-template-columns: 1fr; }
  .signal-score { min-height: 80px; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .signal-meta { grid-column: auto; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .analysis-grid, .risk-grid { grid-template-columns: 1fr; }
  .risk-metrics { grid-template-columns: repeat(2,1fr); }
  .record-detail { grid-template-columns: 1fr; }
  .record-detail dl { grid-template-columns: 1fr; }
  .record-detail dl div { min-height: 60px; padding: 10px 0; border-left: 0; border-top: 1px solid var(--border); }
  .tv-chart { height: 360px; }
}

@media (max-width: 480px) {
  .app-header { display: flex; }
  .connection { margin-top: 0; }
  .control-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
  input, select, .refresh-button { height: 38px; font-size: 12px; }
  .view { padding-top: 10px; }
  .signal-banner { padding: 14px; }
  .signal-main strong { font-size: 22px; }
  .signal-meta { grid-template-columns: 1fr; }
  .signal-meta div { min-height: 39px; padding: 8px 0; border-left: 0; border-bottom: 1px solid var(--border); }
  .metric-grid, .risk-metrics { grid-template-columns: 1fr 1fr; }
  .metric-grid article, .risk-metrics article { min-height: 82px; padding: 11px; }
  .metric-grid strong, .risk-metrics strong { font-size: 16px; }
  .execution-levels { grid-template-columns: 1fr 1fr; }
  .level { min-height: 76px; padding: 11px; }
  .level:nth-child(2) { border-right: 0; }
  .level:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .structure-list { grid-template-columns: 1fr 1fr; }
  .structure-list div { min-height: 60px; padding: 10px; }
  .structure-list div:nth-child(even) { border-right: 0; }
  .analyst-lines p { grid-template-columns: 66px 1fr; padding: 8px 11px; font-size: 11px; }
  .energy-block { padding: 7px 10px; }
  .energy-block > div { grid-template-columns: 98px 1fr; gap: 7px; }
  .tf-tabs { grid-template-columns: repeat(5,1fr); }
  .tv-chart { height: 300px; margin: 7px; }
  .record-tabs button { min-width: 0; flex: 1; font-size: 11px; }
  .table-wrap { min-height: 230px; }
  table { min-width: 820px; }
  .record-detail dl { grid-template-columns: 1fr 1fr 1fr; }
  .record-detail dl div { min-height: 0; padding: 8px 7px; border-left: 1px solid var(--border); border-top: 0; }
  footer { align-items: flex-start; flex-direction: column; padding-top: 10px; }
}