:root {
  --bg: #0b0e14;
  --panel: #11151f;
  --panel2: #161b27;
  --line: #222a3a;
  --text: #dfe6f2;
  --dim: #7b8798;
  --dim2: #55617a;
  --up: #ff4d4f;
  --down: #17b978;
  --accent: #3b82f6;
  --warn: #f5a623;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}

button, select, input { font-family: inherit; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
}
.brand span { color: var(--accent); }

.picker { display: flex; gap: 8px; align-items: center; }

select {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 96px;
  outline: none;
}
select:focus { border-color: var(--accent); }

.status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 12px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #666; display: inline-block;
}
.dot.on { background: var(--down); box-shadow: 0 0 8px var(--down); }
.dot.err { background: var(--up); box-shadow: 0 0 8px var(--up); }

.btn {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: #fff; }

/* ---------------- 主体 ---------------- */
.wrap {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr) 268px;
  height: calc(100% - 48px);
}

.panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.panel.right { border-right: none; border-left: 1px solid var(--line); }

.panel-title {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12px;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  flex: none;
}

/* 自选 */
.watch { overflow-y: auto; flex: 1; }
.wrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 6px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(34, 42, 58, .55);
  cursor: pointer;
}
.wrow:hover { background: var(--panel2); }
.wrow.active { background: #1b2434; box-shadow: inset 2px 0 0 var(--accent); }
.wrow .name { font-size: 13px; color: var(--text); }
.wrow .code { font-size: 11px; color: var(--dim2); }
.wrow .px { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.wrow .chg { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }

/* 中间 */
.center { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

.quote {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.quote .big { display: flex; flex-direction: column; gap: 2px; }
.quote .sym { font-size: 15px; font-weight: 600; }
.quote .sym .code {
  font-size: 11px;
  font-weight: 400;
  color: var(--dim2);
  margin-left: 8px;
  letter-spacing: .3px;
}
.quote .sub { font-size: 11px; color: var(--dim); }
.quote .last {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.quote .delta { font-size: 13px; font-variant-numeric: tabular-nums; }

/* 价格跳动提示：红涨绿跌，短暂底色闪烁，一眼能看出"在动" */
@keyframes flashUp {
  from { background: rgba(255, 77, 79, .28); }
  to   { background: transparent; }
}
@keyframes flashDown {
  from { background: rgba(23, 185, 120, .28); }
  to   { background: transparent; }
}
.quote .last.flash-up,
.wrow .px.flash-up { animation: flashUp .6s ease-out; border-radius: 3px; }
.quote .last.flash-down,
.wrow .px.flash-down { animation: flashDown .6s ease-out; border-radius: 3px; }

/* 链路在、但没有推送（休市或交易所静默）用黄灯，避免误判成故障 */
.dot.idle { background: #d9a13c; box-shadow: 0 0 8px #d9a13c; }
.grid6 {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px 22px;
  font-size: 12px;
  color: var(--dim);
}
.grid6 b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
  align-items: center;
}
.tab {
  padding: 4px 12px;
  border-radius: 5px;
  color: var(--dim);
  cursor: pointer;
  font-size: 12px;
}
.tab.active { background: #1e2839; color: #fff; }
.tab:hover { color: var(--text); }
.tabs .spacer { flex: 1; }
.tabs .hint { font-size: 11px; color: var(--dim2); }

.chart-box { position: relative; flex: 1; min-height: 0; }
#chart { width: 100%; height: 100%; display: block; }

.tip {
  position: absolute;
  left: 10px; top: 8px;
  background: rgba(17, 21, 31, .92);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--dim);
  pointer-events: none;
  display: none;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.tip b { color: var(--text); margin-left: 4px; }
.tip .k { color: var(--dim2); margin-right: 3px; }

/* 右侧 */
.depth { padding: 0 0 6px; }
.drow {
  display: grid;
  grid-template-columns: 44px 1fr 62px;
  align-items: center;
  height: 20px;
  position: relative;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
}
.drow .lab { color: var(--dim2); font-size: 11px; z-index: 1; }
.drow .px { text-align: right; z-index: 1; }
.drow .qty { text-align: right; color: var(--dim); z-index: 1; }
.drow .bar {
  position: absolute;
  right: 8px; top: 2px; bottom: 2px;
  background: rgba(23, 185, 120, .16);
  border-radius: 2px;
}
.drow.ask .bar { background: rgba(255, 77, 79, .16); }
.mid {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px;
  margin: 2px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--dim);
}

.tape { flex: 1; overflow-y: auto; }
.trow {
  display: grid;
  grid-template-columns: 60px 1fr 56px 40px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(34, 42, 58, .4);
}
.trow span:nth-child(2) { text-align: right; }
.trow span:nth-child(3) { text-align: right; color: var(--dim); }
.trow span:nth-child(4) { text-align: right; color: var(--dim2); }

.hist { padding: 4px 10px 10px; font-size: 11.5px; color: var(--dim); }
.hist div { display: flex; justify-content: space-between; padding: 2px 0; }
.hist b { color: var(--text); font-weight: 500; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #263044; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 窄窗口自适应 ----------------
   固定 214px + 268px 两栏会把绘图区压得很窄：柱宽触及 3.2px 下限后
   可看的根数反而更少。这里分级收敛侧栏，优先把像素让给 K 线。
   窗口足够宽时保持原样，不影响正常桌面观感。 */
@media (max-width: 1280px) {
  .wrap { grid-template-columns: 184px minmax(0, 1fr) 232px; }
  .trow { grid-template-columns: 52px 1fr 50px 34px; padding: 3px 8px; }
}
@media (max-width: 1060px) {
  .wrap { grid-template-columns: 150px minmax(0, 1fr) 196px; }
  .drow { grid-template-columns: 32px 1fr 46px; padding: 0 6px; height: 19px; }
  .quote .last { font-size: 25px; }
  .quote { gap: 14px; padding: 8px 12px 6px; }
  .grid6 { gap: 6px 12px; }
}
@media (max-width: 880px) {
  .wrap { grid-template-columns: 126px minmax(0, 1fr) 166px; }
  .quote .last { font-size: 22px; }
  .wrow { grid-template-columns: 1fr auto; }
  .wrow .code { display: none; }
  .hist { display: none; }
}
@media (max-width: 720px) {
  .wrap { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .panel.left, .panel.right { display: none; }
}