/* ============================================================
   龙头作战室 · B端专业版 UI（Pro Console）
   布局：深色侧栏 + 浅灰工作区 + 白卡片 + 标准控件
   配色：Ant蓝主色 #1677ff · A股红涨 #cf1322 · 绿跌 #389e0d
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #f0f2f5;
  --bg2: #ffffff;
  --panel: #ffffff;
  --panel2: #fafafa;
  --line: #e8eaef;
  --line2: #d9dce3;
  --txt: #333a45;
  --dim: #8a9099;
  --mut: #b3b9c2;
  --red: #cf1322;        /* 涨 / 警示 */
  --red-soft: rgba(207,19,34,.08);
  --green: #389e0d;      /* 跌 / 安全 */
  --green-soft: rgba(56,158,13,.08);
  --gold: #d48806;       /* 机会 / 重点 */
  --gold-soft: rgba(212,136,6,.1);
  --blue: #1677ff;       /* 主操作 / 链接 */
  --blue-soft: rgba(22,119,255,.09);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --hud-h: 52px;
  --sbar-w: 196px;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--txt); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
#layout { display: flex; height: 100vh; }

/* ---------- 侧栏（B端深色导航） ---------- */
#sidebar { width: var(--sbar-w); min-width: var(--sbar-w); background: #001529; display: flex; flex-direction: column; }
.logo { padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #d93531, #9c1f1c); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.logo-text { font-weight: 700; color: #e6f0ff; font-size: 14px; line-height: 1.25; }
.logo-text small { display: block; color: #6b7a90; font-weight: 400; font-size: 9px; letter-spacing: 2px; margin-top: 1px; }
#nav { flex: 1; padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.mg { margin-bottom: 10px; }
.mg-title { padding: 8px 12px 5px; font-size: 10.5px; letter-spacing: 2px; color: #54657d; font-weight: 600; }
.mg a { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 6px; color: #9fb0c5; text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.mg a .nv { font-family: var(--mono); font-size: 10.5px; color: #5b6b81; }
.mg a:hover { background: rgba(255,255,255,.06); color: #e6f0ff; }
.mg a.on { background: #1677ff; color: #fff; border-left-color: rgba(255,255,255,.85); font-weight: 600; }
.mg a.on .nv { color: rgba(255,255,255,.8); }
#side-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: #6b7a90; }
.sf-item { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.sf-item b { color: #c6d2e0; font-family: var(--mono); font-size: 11.5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5b6b81; display: inline-block; }
.dot.on { background: #52c41a; box-shadow: 0 0 6px rgba(82,196,26,.7); }
.dot.off { background: #ff4d4f; }

/* ---------- 主区 ---------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar { height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.tb-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.tb-title { font-size: 16.5px; font-weight: 700; color: #1a2233; letter-spacing: .5px; white-space: nowrap; }
.crumb { font-size: 12px; color: var(--dim); white-space: nowrap; }
.tb-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
#stock-search { height: 34px; width: 210px; border: 1px solid var(--line2); color: var(--txt); background: #fff; border-radius: 6px; padding: 0 12px; outline: none; font-size: 13.5px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
#stock-search::placeholder { color: var(--mut); }
#stock-search:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
#topbar button { height: 34px; padding: 0 14px; background: #fff; border: 1px solid var(--line2); color: #57606f; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-family: inherit; transition: all .15s; }
#topbar button:hover { color: var(--blue); border-color: var(--blue); }
#topbar button.on { color: #fff; background: var(--blue); border-color: var(--blue); }

/* ---------- HUD 顶带（状态条） ---------- */
#hud { height: var(--hud-h); display: flex; align-items: center; gap: 0; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fff; flex-shrink: 0; }
.hud-mini { display: flex; align-items: center; gap: 2px; height: 100%; padding: 0 4px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; flex-shrink: 0; }
.hud-mini-switch { display: flex; align-items: center; padding: 0 12px; height: 100%; font-weight: 700; font-size: 12.5px; letter-spacing: .3px; white-space: nowrap; border-right: 1px solid var(--line); }
.hud-mini-switch.lock { color: #ff4d4f; }
.hud-mini-switch.ok { color: #52c41a; }
.hud-mini-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 10px; height: 100%; min-width: 0; border-right: 1px solid var(--line); white-space: nowrap; }
.hud-mini-cell b { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #1a2233; }
.hud-mini-cell .up { color: var(--red); } .hud-mini-cell .down { color: var(--green); } .hud-mini-cell .warn { color: var(--gold); }
.hud-mini-ml { display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 100%; min-width: 0; overflow: hidden; }
.hud-mini-ml .chip { margin: 0; font-size: 11px; padding: 1px 7px; }
.hud-lbl { font-size: 10px; color: var(--dim); letter-spacing: .5px; line-height: 1.3; }
.hud-cell { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-right: 1px solid var(--line); height: 100%; white-space: nowrap; }
.hud-cell:last-child { border-right: none; }
.hud-lamp { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hud-lamp.lock { background: #ff4d4f; box-shadow: 0 0 8px rgba(255,77,79,.5); }
.hud-lamp.ok { background: #52c41a; box-shadow: 0 0 8px rgba(82,196,26,.45); }
.hud-lamp.na { background: var(--mut); }
.hud-lbl { font-size: 11px; color: var(--dim); letter-spacing: .5px; }
.hud-val { font-family: var(--mono); font-size: 15px; font-weight: 700; color: #1a2233; }
.hud-val.up { color: var(--red); } .hud-val.down { color: var(--green); } .hud-val.warn { color: var(--gold); }
.hud-sub { font-size: 11px; color: var(--mut); }
.hud-switch { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.hud-switch.lock { color: #ff4d4f; }
.hud-switch.ok { color: #52c41a; }
.hud-ml { display: flex; align-items: center; gap: 6px; padding: 0 16px; min-width: 0; overflow: hidden; }
.hud-ml .chip { margin: 0; font-size: 12px; padding: 2px 9px; }

/* ---------- 内容 ---------- */
#content { flex: 1; overflow-y: auto; padding: 18px 20px 32px; }

/* ---------- 卡片/网格 ---------- */
.row { display: grid; gap: 14px; margin-bottom: 14px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.panel h3 { font-size: 13.5px; color: #1a2233; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.panel h3 .bar { width: 4px; height: 15px; background: var(--blue); border-radius: 2px; }
.panel h3 .tag { margin-left: auto; font-size: 11.5px; color: var(--dim); font-weight: 400; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.kpi .k-label { color: var(--dim); font-size: 11.5px; letter-spacing: .5px; }
.kpi .k-value { font-family: var(--mono); font-size: 22px; font-weight: 700; color: #1a2233; margin-top: 3px; }
.kpi .k-sub { font-size: 11.5px; color: var(--dim); margin-top: 3px; }

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: #57606f; font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; font-size: 12.5px; background: #fafafa; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tr:hover td { background: #f5f8fd; }
.tbl .num { font-family: var(--mono); text-align: right; }
.tbl .r { text-align: right; }
.mono { font-family: var(--mono); }
.up { color: var(--red); } .down { color: var(--green); } .zero { color: var(--dim); }
.flag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12px; line-height: 1.7; font-weight: 500; }
.flag.red { background: var(--red-soft); color: var(--red); }
.flag.green { background: var(--green-soft); color: var(--green); }
.flag.gold { background: var(--gold-soft); color: var(--gold); }
.flag.blue { background: var(--blue-soft); color: var(--blue); }
.flag.gray { background: #f0f1f3; color: var(--dim); }
a.stk { color: var(--blue); cursor: pointer; text-decoration: none; font-family: var(--mono); }
a.stk:hover { text-decoration: underline; }

/* ---------- 控件（B端标准：32px 高） ---------- */
.ctl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-label { font-size: 13px; color: var(--dim); margin-right: 8px; }
details summary { list-style: none; cursor: pointer; }
details summary::before { content: "▸ "; color: var(--blue); }
details[open] summary::before { content: "▾ "; }
.ctl label { color: var(--dim); font-size: 13px; }
.ctl select, .ctl input[type=date] { height: 32px; border: 1px solid var(--line2); color: var(--txt); background: #fff; border-radius: 6px; padding: 0 10px; outline: none; font-size: 13.5px; font-family: inherit; }
.ctl select:focus, .ctl input[type=date]:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.ctl button { height: 32px; padding: 0 16px; background: #fff; border: 1px solid var(--line2); color: #57606f; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-family: inherit; }
.ctl button:hover { color: var(--blue); border-color: var(--blue); }
.ctl input[type=text], .ctl input[type=number] { height: 32px; border: 1px solid var(--line2); color: var(--txt); background: #fff; border-radius: 6px; padding: 0 11px; outline: none; font-size: 13.5px; font-family: inherit; }
.ctl input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
#content input[type=text], #content input[type=number] { height: 32px; border: 1px solid var(--line2); color: var(--txt); background: #fff; border-radius: 6px; padding: 0 11px; outline: none; font-size: 13.5px; font-family: inherit; }
#content input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
#content select { height: 32px; border: 1px solid var(--line2); color: var(--txt); background: #fff; border-radius: 6px; padding: 0 10px; outline: none; font-size: 13.5px; font-family: inherit; }
#content button { height: 32px; padding: 0 16px; background: #fff; border: 1px solid var(--line2); color: #57606f; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-family: inherit; transition: all .15s; }
#content button:hover { color: var(--blue); border-color: var(--blue); }
#content button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
#content button.primary:hover { background: #3c8bff; }
#content button.danger { color: var(--red); border-color: rgba(207,19,34,.4); }
#content button.danger:hover { background: var(--red-soft); border-color: var(--red); }
#content button.ok { color: var(--green); border-color: rgba(56,158,13,.4); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 16px; border: 1px solid var(--line2); color: #57606f; cursor: pointer; font-size: 12.5px; margin-right: 6px; background: #fff; }
.chip.on { color: #fff; background: var(--blue); border-color: var(--blue); }
.chip.gold { border-color: rgba(212,136,6,.4); color: var(--gold); }
.chip.up { border-color: rgba(207,19,34,.4); color: var(--red); }
.chip.down { border-color: rgba(56,158,13,.4); color: var(--green); }
.chip.warn { border-color: rgba(255,77,79,.6); color: #ff4d4f; }
.empty { color: var(--mut); text-align: center; padding: 30px 0; font-size: 13px; }
.chart { width: 100%; height: 260px; }
.chart.sm { height: 200px; }

/* ---------- 作战舱：今日机会 双舱 ---------- */
.cockpit { display: grid; grid-template-columns: 400px 1fr; gap: 14px; align-items: start; }
.cockpit-console, .cockpit-ops { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.verdict-big { font-size: 16px; font-weight: 700; line-height: 1.6; color: #1a2233; }
.verdict-big.lock { color: #ff4d4f; }
.verdict-big.ok { color: var(--green); }
.verdict { font-size: 14px; line-height: 1.7; color: #57606f; }
.pos-card { margin-bottom: 0; }
.pos-card .flag { font-size: 11px; }
.opp-card { margin-bottom: 10px; border-left: 3px solid var(--line2); }
.opp-card.grade-A { border-left-color: var(--red); }
.opp-card.grade-B { border-left-color: var(--gold); }
.opp-card.grade-C { border-left-color: var(--line2); }
.opp-reason { font-size: 13px; color: #57606f; line-height: 1.6; margin: 5px 0; }
.opp-ops { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; margin-top: 7px; }
.opp-ops b { color: var(--gold); font-weight: 600; }
.grade { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; font-weight: 800; font-size: 12px; font-family: var(--mono); }
.grade-A { background: var(--red-soft); color: var(--red); border: 1px solid rgba(207,19,34,.5); }
.grade-B { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,136,6,.45); }
.grade-C { background: #f0f1f3; color: var(--dim); border: 1px solid rgba(139,152,165,.3); }
.code { color: var(--mut); font-family: var(--mono); font-size: 11.5px; margin-left: 5px; }

/* ---------- 时间轴 ---------- */
.tl-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; }
.tl-item { min-width: 210px; flex: 1; border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; background: #fff; }
.tl-item.done { border-color: rgba(82,196,26,.45); background: rgba(82,196,26,.04); }
.tl-item.run { border-color: var(--gold); background: var(--gold-soft); }
.tl-dot { font-size: 14px; }
.tl-hm { font-weight: 700; color: var(--gold); font-size: 14px; margin-top: 2px; }
.tl-name { font-size: 12.5px; margin-top: 2px; font-weight: 600; }
.tl-deliver { color: var(--dim); font-size: 11.5px; line-height: 1.5; margin-top: 4px; }
.tl-mini-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-mini { font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--line2); border-radius: 14px; color: #57606f; cursor: pointer; white-space: nowrap; background: #fff; }
.tl-mini:hover { border-color: var(--blue); color: var(--blue); }
.tl-mini.hl { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.tl-mini.dn { border-color: rgba(82,196,26,.45); color: var(--green); background: var(--green-soft); }

/* ---------- 紧凑折叠 ---------- */
.panel.slim { padding: 9px 12px; }
.panel.slim h3, .panel.slim summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fold-body > .panel { margin: 0; }
.fold-body { padding-top: 2px; }

/* ---------- 报告 markdown ---------- */
.md { font-size: 13.5px; line-height: 1.75; color: #444b57; overflow-wrap: anywhere; }
.md h1 { font-size: 18px; color: #1a2233; margin: 14px 0 10px; border-bottom: 1px solid var(--line2); padding-bottom: 8px; }
.md h2 { font-size: 15.5px; color: var(--gold); margin: 16px 0 8px; padding-left: 9px; border-left: 3px solid var(--gold); }
.md h3 { font-size: 14px; color: var(--blue); margin: 12px 0 6px; }
.md h4, .md h5, .md h6 { font-size: 13.5px; color: #57606f; margin: 10px 0 5px; }
.md p { margin: 7px 0; }
.md table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 12.5px; }
.md th, .md td { border: 1px solid var(--line2); padding: 6px 9px; }
.md th { background: #fafafa; color: #57606f; font-weight: 600; }
.md tbody tr:nth-child(odd) { background: #fafbfc; }
.md blockquote { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: 8px 14px; margin: 10px 0; color: #57606f; border-radius: 0 6px 6px 0; }
.md ul, .md ol { padding-left: 22px; margin: 7px 0; }
.md li { margin: 3px 0; }
.md code { background: #f0f2f5; padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 12.5px; color: #d4380d; }
.md pre { background: #0f1722; padding: 12px 14px; border-radius: 6px; overflow: auto; border: 1px solid var(--line); }
.md pre code { background: none; padding: 0; color: #a8c7f5; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.md strong { color: #1a2233; }
.md a { color: var(--blue); }
.md img { max-width: 100%; border-radius: 6px; }

/* ---------- 抽屉（个股卡片） ---------- */
#drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; }
#drawer { position: fixed; top: 0; right: 0; width: 620px; max-width: 94vw; height: 100vh; background: var(--bg2); border-left: 1px solid var(--line2); z-index: 91; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.18); }
.dr-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: #fff; }
.dr-head b { font-size: 15px; color: #1a2233; }
.dr-head button { background: none; border: none; color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; }
.dr-head button:hover { color: var(--red); }
#dr-body { flex: 1; overflow-y: auto; padding: 14px 18px; }

/* ---------- 提示 ---------- */
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: #1a2233; border: none; color: #fff; padding: 9px 20px; border-radius: 8px; z-index: 99; font-size: 13.5px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* ---------- 系统监控 ---------- */
.run-ok { color: var(--green); } .run-err { color: var(--red); }
.sched-table td, .sched-table th { white-space: normal; }
pre.log { background: #0f1722; border: 1px solid var(--line); border-radius: 6px; padding: 10px; font-family: var(--mono); font-size: 12px; color: #9db3d0; white-space: pre-wrap; max-height: 180px; overflow: auto; }

/* ---------- B端补充：个股研究 / 配置 / 统计 ---------- */
.stock-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stock-hero .sh-name { font-size: 20px; font-weight: 700; color: #1a2233; }
.stock-hero .sh-code { font-family: var(--mono); color: var(--dim); font-size: 13px; }
.sh-px { font-family: var(--mono); font-size: 26px; font-weight: 700; }
.sh-chg { font-size: 14px; font-weight: 600; }
.mk-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line2); background: #fff; cursor: pointer; font-size: 12.5px; color: #57606f; }
.mk-btn:hover { border-color: var(--blue); color: var(--blue); }
.mk-btn.good { background: var(--green-soft); color: var(--green); border-color: rgba(56,158,13,.4); }
.mk-btn.bad { background: var(--red-soft); color: var(--red); border-color: rgba(207,19,34,.4); }
.mk-btn.watch { background: var(--gold-soft); color: var(--gold); border-color: rgba(212,136,6,.4); }
.note-input { height: 32px; border: 1px solid var(--line2); border-radius: 6px; padding: 0 11px; font-size: 13.5px; font-family: inherit; width: 220px; outline: none; }
.note-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.stat-card .sc-lbl { font-size: 12px; color: var(--dim); }
.stat-card .sc-val { font-size: 24px; font-weight: 700; font-family: var(--mono); margin-top: 4px; color: #1a2233; }
.stat-card .sc-sub { font-size: 12px; color: var(--dim); margin-top: 3px; }
.cfg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cfg-node { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.cfg-node .cn-hm { font-family: var(--mono); font-weight: 700; color: var(--blue); font-size: 14px; }
.cfg-node .cn-name { font-weight: 600; margin-top: 2px; font-size: 13px; }
.cfg-node .cn-desc { color: var(--dim); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.ok-badge { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.ok-badge.good { background: #52c41a; }
.ok-badge.bad { background: #ff4d4f; }
.ok-badge.run { background: var(--gold); }

@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .cockpit { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .cfg-grid { grid-template-columns: repeat(2, 1fr); }
  #hud { flex-wrap: wrap; height: auto; padding: 8px 10px; }
  .hud-cell { border-right: none; border-bottom: 1px solid var(--line); }
}