/* ==================================================================================
   OASIS · 智能可视化实时策略交互平台
   视觉体系：彭博终端式框架结构 + 墨绿/白 双主色
   ─────────────────────────────────────────────────────────────────────────────────
   设计原则
     1. 终端式「面板栅格」：每个功能区都是带标题条的独立面板，边框直角、密排
     2. 绿白双主色：OASIS 翡翠绿为唯一强调色；中性灰阶为文字与骨架（色值见 palette.css）
     3. 数据密度优先：等宽字体、紧凑行高、零圆角、零渐变留白
     4. 涨跌沿用终端惯例：绿涨 / 红跌（与内盘分区保留红涨绿跌的本地化提示位）
     5. 图表语言：细网格、硬边线、无阴影——更像终端而非消费级 App
   ================================================================================== */

/* 内盘惯例配色：红涨绿跌（一键切换，通过 body.cn-mode 生效） */
body.cn-mode {
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--o-bg);
  color: var(--o-white);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.42;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
b, strong { font-weight: 700; color: #fff; }
button, input, select, textarea { font-family: var(--mono); font-size: 12px; color: inherit; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--o-void); border-left: 1px solid var(--o-line); }
::-webkit-scrollbar-thumb { background: var(--o-line2); border: 1px solid var(--o-line3); }
::-webkit-scrollbar-thumb:hover { background: var(--o-line3); }

.mono { font-family: var(--mono); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--o-white2); }
.muted { color: var(--o-white2); }
.dim { color: var(--o-white3); }
.nowrap { white-space: nowrap; }

/* ================================================================ 启动画面 */
.boot { position: fixed; inset: 0; z-index: 9999; background: var(--o-void);
  display: flex; align-items: center; justify-content: center; transition: opacity .45s; }
.boot.hide { opacity: 0; pointer-events: none; }
.boot-inner { width: 480px; border: 1px solid var(--o-line2); background: var(--o-panel); }
.boot-head { background: var(--o-green); color: var(--o-on-accent); padding: 5px 10px; font-weight: 700;
  letter-spacing: 3px; font-size: 12px; display: flex; justify-content: space-between; }
.boot-body { padding: 18px 16px; }
.boot-logo { font-size: 40px; letter-spacing: 14px; font-weight: 700; color: var(--o-green);
  text-shadow: 0 0 22px rgba(0, 224, 122, .35); }
.boot-sub { color: var(--o-white2); letter-spacing: 2px; margin: 6px 0 20px; font-size: 11px; }
.boot-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 11px;
  color: var(--o-white2); margin-bottom: 16px; }
.boot-meta b { color: var(--o-green); font-weight: 500; }
.boot-bar { height: 8px; background: var(--o-field); border: 1px solid var(--o-line2); padding: 1px; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--o-green); transition: width .3s; }
.boot-tip { margin-top: 9px; color: var(--o-white3); font-size: 11px; }

/* ================================================================ 顶栏 */
.topbar { height: 46px; display: flex; align-items: stretch; gap: 0;
  background: var(--o-panel); border-bottom: 1px solid var(--o-line2); }
.brand { display: flex; align-items: center; gap: 0; flex: 0 0 auto;
  border-right: 1px solid var(--o-line2); }
.brand-mark { background: var(--o-green); color: var(--o-on-accent); font-weight: 700; font-size: 15px;
  letter-spacing: 4px; padding: 0 14px; height: 100%; display: flex; align-items: center; }
.brand-name { color: var(--o-white2); font-size: 10.5px; letter-spacing: .5px; padding: 0 12px;
  display: flex; align-items: center; height: 100%; }
.brand-name em { font-style: normal; color: var(--o-green); }
.ticker { flex: 1 1 auto; overflow: hidden; position: relative; display: flex; align-items: center;
  border-right: 1px solid var(--o-line2); }
.ticker:before { content: "实时行情"; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  background: var(--o-green-d); color: var(--o-green); font-size: 10px; letter-spacing: 1px;
  padding: 0 7px; display: flex; align-items: center; border-right: 1px solid var(--o-line2); }
.ticker-track { display: flex; gap: 0; white-space: nowrap; animation: tick 60s linear infinite;
  padding-left: 62px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; padding: 0 11px;
  border-right: 1px solid var(--o-line); }
.tk .c { color: var(--o-white2); }
.tk .p { color: var(--o-white); font-weight: 700; }
.topright { display: flex; align-items: stretch; flex: 0 0 auto; }
.pill { display: flex; align-items: center; gap: 5px; padding: 0 11px; font-size: 11px;
  color: var(--o-white2); border-right: 1px solid var(--o-line2); }
.pill b { color: var(--o-white); }
.pill.live b { color: var(--o-green); }
.pill.dead b { color: var(--o-amber); }

/* ================================================================ 按钮 / 输入（功能键风格） */
.btn { background: var(--o-panel); border: 1px solid var(--o-line2); color: var(--o-white);
  padding: 3px 11px; cursor: pointer; font-size: 11.5px; letter-spacing: .3px;
  transition: background .1s, color .1s, border-color .1s; white-space: nowrap; }
.btn:hover { background: var(--o-green-d); border-color: var(--o-green); color: var(--o-green); }
.btn:active { background: var(--o-green); color: var(--o-on-accent); }
.btn.primary { background: var(--o-green); border-color: var(--o-green); color: var(--o-on-accent); font-weight: 700; }
.btn.primary:hover { background: var(--o-green2); color: var(--o-on-accent); }
.btn.ok { border-color: var(--o-green2); color: var(--o-green); }
.btn.danger { border-color: color-mix(in srgb, var(--o-red) 45%, var(--o-line2)); color: var(--o-red); }
.btn.danger:hover { background: color-mix(in srgb, var(--o-red) 14%, transparent); border-color: var(--o-red); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 2px 8px; font-size: 11px; }
.btn.xs { padding: 1px 6px; font-size: 10.5px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn kbd { color: var(--o-white3); font-size: 9.5px; margin-left: 4px; }

.input, select.select, textarea.input {
  background: var(--o-field); border: 1px solid var(--o-line2); color: var(--o-white);
  padding: 3px 7px; outline: none; width: 100%; transition: border-color .1s; }
.input:focus, select.select:focus { border-color: var(--o-green); background: var(--o-bg); }
.input::placeholder { color: var(--o-white3); }
select.select { cursor: pointer; appearance: none; padding-right: 20px;
  background-image: linear-gradient(45deg, transparent 50%, var(--o-green) 50%),
                    linear-gradient(135deg, var(--o-green) 50%, transparent 50%);
  background-position: calc(100% - 12px) 8px, calc(100% - 8px) 8px;
  background-size: 4px 4px; background-repeat: no-repeat; }
label.field { display: block; margin-bottom: 7px; }
label.field > span { display: block; font-size: 10.5px; color: var(--o-white3); margin-bottom: 3px;
  letter-spacing: .4px; text-transform: uppercase; }
.row { display: flex; gap: 6px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* ================================================================ 主布局 */
.layout { display: flex; height: calc(100vh - 46px); overflow: hidden; }
/* 关键：flex 子项默认 min-width:auto，会被内部 nowrap 的表格/指标格撑宽，
   导致长内容面板挤占布局。显式归零才能让 .main / .view 正确收缩。 */
.layout > .sidebar { min-width: 0; }
.layout > .main { min-width: 0; min-height: 0; }
.sidebar { width: 272px; flex: 0 0 272px; background: var(--o-panel);
  border-right: 1px solid var(--o-line2); display: flex; flex-direction: column; overflow: hidden; }
.side-head { border-bottom: 1px solid var(--o-line2); }
.side-title { background: var(--o-green-d); color: var(--o-green); font-size: 10.5px; letter-spacing: 1.5px;
  padding: 3px 8px; border-bottom: 1px solid var(--o-line2); display: flex; justify-content: space-between; }
.side-search { padding: 6px; border-bottom: 1px solid var(--o-line); }
.side-tabs { display: flex; flex-wrap: wrap; gap: 0; padding: 0 6px 6px; }
.chip { background: var(--o-panel2); border: 1px solid var(--o-line2); color: var(--o-white2);
  padding: 2px 9px; font-size: 10.5px; cursor: pointer; margin: 0 -1px 0 0; }
.chip:hover { color: var(--o-white); border-color: var(--o-line3); }
.chip.active { background: var(--o-green); border-color: var(--o-green); color: var(--o-on-accent); font-weight: 700; }
.side-body { flex: 1; overflow-y: auto; }
.side-foot { border-top: 1px solid var(--o-line2); background: var(--o-panel2); }
.kv { display: flex; justify-content: space-between; font-size: 11px; color: var(--o-white2);
  padding: 2px 8px; border-bottom: 1px solid var(--o-line); }
.kv b { color: var(--o-green); font-weight: 500; }

/* 板块分组（终端式树） */
.sgroup { border-bottom: 1px solid var(--o-line); }
.sgroup-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer;
  background: var(--o-panel2); color: var(--o-white); font-size: 11.5px; user-select: none;
  border-left: 3px solid var(--o-green); }
.sgroup-head:hover { background: var(--o-panel2); }
.sgroup-head .caret { color: var(--o-green); font-size: 9px; width: 8px; }
.sgroup.collapsed .caret { transform: rotate(-90deg); }
.sgroup.collapsed .sgroup-body { display: none; }
.sgroup-head .cnt { margin-left: auto; color: var(--o-white3); font-size: 10.5px; }
.flag { font-size: 9.5px; padding: 0 5px; letter-spacing: .5px; }
.flag.dom { background: color-mix(in srgb, var(--o-amber) 16%, transparent); color: var(--o-amber); border: 1px solid color-mix(in srgb, var(--o-amber) 46%, var(--o-line2)); }
.flag.glb { background: var(--o-panel2); color: var(--o-cyan); border: 1px solid var(--o-line2); }
.sub-head { padding: 3px 8px 3px 16px; font-size: 10px; color: var(--o-white3);
  letter-spacing: .8px; background: var(--o-void); border-bottom: 1px solid var(--o-line); }
.srow { display: grid; grid-template-columns: 1fr 82px 66px; gap: 5px; align-items: center;
  padding: 2px 8px 2px 10px; cursor: pointer; border-bottom: 1px solid var(--o-hair); }
.srow:hover { background: var(--o-panel2); }
.srow.active { background: var(--o-green-d); box-shadow: inset 3px 0 0 var(--o-green); }
.srow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px;
  color: var(--o-white); }
.srow .nm small { color: var(--o-white3); font-size: 9.5px; margin-left: 5px; }
.srow .px { text-align: right; font-size: 11.5px; color: var(--o-white); font-weight: 600; }
.srow .ch { text-align: right; font-size: 11px; }
.flash-up { background: rgba(0, 224, 122, .22) !important; }
.flash-down { background: rgba(255, 59, 84, .22) !important; }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* 功能键栏（彭博式） */
.tabs { display: flex; gap: 0; background: var(--o-panel2); border-bottom: 1px solid var(--o-line2);
  overflow-x: auto; flex: 0 0 auto; }
.tab { background: var(--o-bg); border: none; border-right: 1px solid var(--o-line2); color: var(--o-white2);
  padding: 6px 14px; cursor: pointer; white-space: nowrap; font-size: 11.5px; letter-spacing: .3px;
  display: flex; align-items: center; gap: 6px; }
.tab i { font-style: normal; color: var(--o-green); font-size: 11px; }
.tab:hover { background: var(--o-panel2); color: var(--o-white); }
.tab.active { background: var(--o-green); color: var(--o-on-accent); font-weight: 700; }
.tab.active i { color: var(--o-on-accent); }
.tab .key { font-size: 9px; color: var(--o-white3); border: 1px solid var(--o-line2); padding: 0 3px; }
.tab.active .key { color: var(--o-on-accent); border-color: var(--o-on-accent); }
.views { flex: 1; overflow: auto; padding: 6px; background: var(--o-bg); }
.view { display: none; }
.view.active { display: block; }
/* 关键：flex/grid 子项默认 min-width:auto，会被内部 nowrap 的表格/指标格撑宽 */
.views, .view, .card, .tbl-wrap, .cols > *, .tiles > * { min-width: 0; }

/* ================================================================ 面板（核心框架单元） */
.card { background: var(--o-panel); border: 1px solid var(--o-line2); margin-bottom: 6px; }
.card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--o-green-d); border-bottom: 1px solid var(--o-line2); padding: 2px 8px; min-height: 20px; }
.card-title { font-size: 11px; letter-spacing: 1.2px; color: var(--o-green); font-weight: 700;
  display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.card-title:before { content: "▮"; color: var(--o-green); font-size: 9px; }
.card-sub { font-size: 10px; color: var(--o-white3); letter-spacing: .3px; font-weight: 400; }
.card > .tiles, .card > .tbl-wrap, .card > .heat, .card > .tests,
.card > div > .chart, .card > canvas.chart { margin: 6px; }
.card > .tbl-wrap { margin: 6px; }
.card-body { padding: 6px; }
.card > .verdict, .card > .hr, .card > .kvlist, .card > .sig, .card > .chart-legend,
.card > .gauge, .card > .gauge-lab, .card > .dim, .card > .row { margin-left: 6px; margin-right: 6px; }
.card > .row:first-of-type { margin-top: 6px; }
.card > .hr { margin-top: 6px; margin-bottom: 6px; }

.cols { display: grid; gap: 6px; align-items: start; }
.cols.c2 { grid-template-columns: 1fr 1fr; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cols.c4 { grid-template-columns: repeat(4, 1fr); }
.cols.c2-1 { grid-template-columns: 2fr 1fr; }
.cols.c1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1680px) { .cols.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1500px) {
  .cols.c2, .cols.c2-1, .cols.c1-2 { grid-template-columns: 1fr; }
  .cols.c3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) { .cols.c3, .cols.c4 { grid-template-columns: 1fr; } }

/* ================================================================ 数据单元格 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 1px;
  background: var(--o-line); border: 1px solid var(--o-line); }
.tile { background: var(--o-field); padding: 4px 7px 5px; position: relative; }
.tile:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--o-line3); }
.tile.up:before { background: var(--up); }
.tile.down:before { background: var(--down); }
.tile.acc:before { background: var(--o-green); }
.tile.warn:before { background: var(--o-amber); }
.tile .l { font-size: 10px; color: var(--o-white3); letter-spacing: .3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tile .v { font-size: 15px; font-weight: 700; color: var(--o-white); letter-spacing: -.2px; line-height: 1.25; }
.tile .s { font-size: 10px; color: var(--o-white3); }
.tile.big .v { font-size: 19px; color: var(--o-green); }

/* ================================================================ 表格 */
.tbl-wrap { overflow: auto; border: 1px solid var(--o-line2); background: var(--o-field); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.tbl th { position: sticky; top: 0; z-index: 2; background: var(--o-panel2); color: var(--o-green);
  font-weight: 700; text-align: right; padding: 3px 7px; border-bottom: 1px solid var(--o-line3);
  border-right: 1px solid var(--o-line); white-space: nowrap; font-size: 10.5px; letter-spacing: .3px; }
table.tbl td { padding: 2px 7px; border-bottom: 1px solid var(--o-panel); border-right: 1px solid var(--o-hair);
  text-align: right; white-space: nowrap; color: var(--o-white); }
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl td.txt { font-family: var(--sans); }
table.tbl tbody tr:nth-child(even) { background: var(--o-void); }
table.tbl tbody tr:hover { background: var(--o-panel2); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl.compact td { padding: 1px 6px; font-size: 11px; }
.badge { display: inline-block; padding: 0 5px; font-size: 10px; background: var(--o-panel2);
  border: 1px solid var(--o-line2); color: var(--o-white2); letter-spacing: .2px; }
.badge.ok { background: color-mix(in srgb, var(--o-green) 16%, transparent); border-color: var(--o-green2); color: var(--o-green); }
.badge.bad { background: color-mix(in srgb, var(--o-red) 16%, transparent); border-color: color-mix(in srgb, var(--o-red) 48%, var(--o-line2)); color: var(--o-red); }
.badge.warn { background: color-mix(in srgb, var(--o-amber) 16%, transparent); border-color: color-mix(in srgb, var(--o-amber) 46%, var(--o-line2)); color: var(--o-amber); }
.badge.acc { background: var(--o-green-d); border-color: var(--o-green2); color: var(--o-green); }
.badge.cy { background: var(--o-panel2); border-color: var(--o-line2); color: var(--o-cyan); }

/* ================================================================ 图表面板 */
.chart { width: 100%; display: block; background: var(--o-void); border: 1px solid var(--o-line); }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--o-white2);
  margin-top: 4px; margin-bottom: 4px; }
.chart-legend i { display: inline-block; width: 10px; height: 8px; margin-right: 4px; vertical-align: -1px; }
.chart-tip { position: fixed; pointer-events: none; background: var(--o-on-accent); border: 1px solid var(--o-green);
  padding: 5px 8px; font-size: 11px; z-index: 900; display: none; line-height: 1.5; color: var(--o-white);
  box-shadow: 0 0 0 1px rgba(0, 224, 122, .2); white-space: pre; }
.chart-tip b { color: var(--o-green); }

/* ================================================================ 状态 / 进度 */
.prog { height: 8px; background: var(--o-field); border: 1px solid var(--o-line2); padding: 1px; margin-top: 5px; }
.prog i { display: block; height: 100%; width: 0; background: var(--o-green); transition: width .25s; }
.status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--o-white2); }
.dot { width: 7px; height: 7px; background: var(--o-white3); flex: 0 0 auto; }
.dot.run { background: var(--o-green); animation: blink 1s steps(2) infinite; }
.dot.ok { background: var(--o-green); }
.dot.err { background: var(--o-red); }
@keyframes blink { 50% { opacity: .2; } }

/* ================================================================ 热力图 */
/* gap 1px + 单元格 border 1px 会叠成 2px 的粗缝；这里 gap 归零，只靠单元格
   自身的 1px 边线分隔 —— 细缝让整面墙读成一个色场，而不是一堆小方块。 */
.heat { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0;
  background: var(--o-line); border: 1px solid var(--o-line); }
.heat-cell { padding: 4px 7px 5px; cursor: pointer; background: var(--o-field); }
.heat-cell:hover { outline: 1px solid var(--o-green); outline-offset: -1px; }
.heat-cell .hc { font-size: 11px; font-weight: 700; color: var(--o-white); }
.heat-cell .hn { font-size: 9.5px; color: rgba(232, 242, 234, .6); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.heat-cell .hp { font-size: 12px; font-weight: 700; }

/* ================================================================ 正态分析专用 */
.tests { display: flex; flex-direction: column; gap: 1px; background: var(--o-line); }
.test { display: grid; grid-template-columns: 158px 1fr 96px 78px; gap: 8px; align-items: center;
  background: var(--o-field); padding: 4px 7px; font-size: 11px; }
.test .tn { color: var(--o-white); }
.test .tv { font-size: 10px; color: var(--o-white3); }
.test .tp { text-align: right; color: var(--o-white2); }
.bar { height: 5px; background: var(--o-panel); border: 1px solid var(--o-line); }
.bar i { display: block; height: 100%; background: var(--o-green); }

.gauge { position: relative; height: 10px; background: linear-gradient(90deg,
  var(--o-green) 0%, color-mix(in srgb, var(--o-green) 22%, transparent) 40%, color-mix(in srgb, var(--o-red) 22%, transparent) 60%, var(--o-red) 100%); border: 1px solid var(--o-line2); }
.gauge .mark { position: absolute; top: -3px; width: 2px; height: 14px; background: #fff; transition: left .4s; }
.gauge-lab { display: flex; justify-content: space-between; font-size: 10px; color: var(--o-white3); margin-top: 2px; }
.kvlist { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; font-size: 11px; }
.kvlist .k { color: var(--o-white3); }
.kvlist .v { color: var(--o-white); text-align: right; }
.verdict { background: var(--o-panel); border: 1px solid var(--o-green2); border-left: 3px solid var(--o-green);
  padding: 7px 9px; font-size: 11.5px; line-height: 1.7; color: var(--o-white); }
.sig { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sig-dir { font-size: 17px; font-weight: 700; }
.sig-dir.long { color: var(--up); }
.sig-dir.short { color: var(--down); }
.sig-dir.hold { color: var(--o-white3); }

/* ================================================================ 代码 / 工具台 */
.code { background: var(--o-void); border: 1px solid var(--o-line2); border-left: 2px solid var(--o-green);
  padding: 7px 9px; font-size: 11px; white-space: pre-wrap; word-break: break-all;
  max-height: 430px; overflow: auto; color: var(--o-green); line-height: 1.5; }
.toolitem { display: flex; align-items: center; gap: 8px; padding: 3px 7px; cursor: pointer;
  border-bottom: 1px solid var(--o-hair); }
.toolitem:hover { background: var(--o-panel2); }
.toolitem.active { background: var(--o-green-d); box-shadow: inset 3px 0 0 var(--o-green); }
.toolitem .tname { font-size: 11px; color: var(--o-green); min-width: 172px; }
.toolitem .tdesc { font-size: 10.5px; color: var(--o-white3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.toolitem .tcat { margin-left: auto; flex: 0 0 auto; }

/* ================================================================ 提示 / 弹窗 */
.toasts { position: fixed; right: 10px; bottom: 26px; z-index: 1200; display: flex;
  flex-direction: column; gap: 4px; width: 400px; }
.toast { background: var(--o-panel2); border: 1px solid var(--o-line2); border-left: 3px solid var(--o-green);
  padding: 5px 9px; font-size: 11.5px; animation: slide .18s ease; }
.toast.ok { border-left-color: var(--o-green); }
.toast.err { border-left-color: var(--o-red); }
.toast.warn { border-left-color: var(--o-amber); }
.toast .tt { font-weight: 700; color: var(--o-white); }
.toast .tb { color: var(--o-white3); font-size: 10.5px; word-break: break-all; max-height: 90px; overflow: auto; }
@keyframes slide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .78); z-index: 1300;
  display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-box { background: var(--o-panel); border: 1px solid var(--o-green); max-width: 960px;
  width: 94%; max-height: 86vh; overflow: auto; }

/* ================================================================ 底部状态栏（彭博式） */
.statusbar { height: 22px; background: var(--o-panel2); border-top: 1px solid var(--o-line2);
  display: flex; align-items: stretch; font-size: 10.5px; color: var(--o-white2); }
.statusbar .sb { display: flex; align-items: center; gap: 5px; padding: 0 10px;
  border-right: 1px solid var(--o-line2); }
.statusbar .sb b { color: var(--o-green); }
.statusbar .sb.grow { flex: 1; }
.statusbar .sb kbd { border: 1px solid var(--o-line2); padding: 0 4px; color: var(--o-white3); font-size: 9.5px; }
.statusbar .clock { margin-left: auto; color: var(--o-green); font-weight: 700; }

.spin { display: inline-block; width: 10px; height: 10px; border: 2px solid rgba(0, 224, 122, .25);
  border-top-color: var(--o-green); border-radius: 50%; animation: sp .6s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.empty { padding: 18px; text-align: center; color: var(--o-white3); font-size: 11px;
  background: var(--o-field); border: 1px dashed var(--o-line2); margin: 6px; }
.hr { height: 1px; background: var(--o-line); }
.scroll { overflow: auto; }
.maxh240 { max-height: 240px; } .maxh320 { max-height: 320px; }
.maxh440 { max-height: 440px; } .maxh560 { max-height: 560px; }

/* ================================================================ 终端微组件 */
.unit { font-size: 9.5px; color: var(--o-white3); letter-spacing: .3px; }
.stats-ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px; background: var(--o-line); border: 1px solid var(--o-line2); }
.stats-ribbon > div { background: var(--o-field); padding: 2px 7px 3px; }
.stats-ribbon .k { font-size: 9.5px; color: var(--o-white3); letter-spacing: .4px; }
.stats-ribbon .v { font-size: 13px; font-weight: 700; color: var(--o-white); }
.matrix { display: grid; gap: 1px; background: var(--o-line); border: 1px solid var(--o-line2); }
.matrix .mh { background: var(--o-green-d); color: var(--o-green); font-size: 10px; padding: 2px 6px;
  letter-spacing: .5px; }
.matrix .mc { background: var(--o-field); padding: 2px 6px; font-size: 11px; text-align: right; }
.matrix .mc.l { text-align: left; color: var(--o-white2); }
.matrix .mc.hi { color: var(--o-green); font-weight: 700; }
.matrix .mc.lo { color: var(--o-red); }
.book-row { display: grid; grid-template-columns: 1fr 1fr 54px; gap: 6px; padding: 1px 6px;
  position: relative; font-size: 11.5px; border-bottom: 1px solid var(--o-hair); }
.book-row .fillbar { position: absolute; left: 0; top: 0; bottom: 0; }
.book-row span { position: relative; }
.book-row .r { text-align: right; }
.sig-strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 5px 7px;
  background: var(--o-field); border: 1px solid var(--o-line2); }
.tape { max-height: 420px; overflow: auto; }
.tape .tr { display: grid; grid-template-columns: 74px 1fr 82px 66px; gap: 6px; padding: 1px 6px;
  font-size: 11px; border-bottom: 1px solid var(--o-hair); }
.tape .tr:nth-child(even) { background: var(--o-void); }
.tape .tr .p { text-align: right; font-weight: 600; }
.tape .tr .q { text-align: right; color: var(--o-white2); }
.tape .tr .d { text-align: right; }
.fkey { border: 1px solid var(--o-line2); color: var(--o-white3); font-size: 9.5px; padding: 0 3px;
  margin-left: 5px; }
.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 9px; padding: 6px; }
.param-grid label { display: block; }
.param-grid label span { display: block; font-size: 10px; color: var(--o-white3); letter-spacing: .3px; }
.param-grid label .hint { color: var(--o-white3); font-size: 9.5px; }
.hot { color: var(--o-green); }
.cold { color: var(--o-cyan); }
.warnc { color: var(--o-amber); }
.dangerc { color: var(--o-red); }

/* ================================================================ 品牌标识 LOGO */
.brand { gap: 0; }
.brand-logo { display: block; width: 34px; height: 34px; min-width: 34px; flex: 0 0 auto;
  aspect-ratio: 1 / 1; margin: 0 9px 0 10px; }
.brand-logo.sm { width: 22px; height: 22px; margin: 0 7px 0 0; }
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding-right: 12px; }
.brand-word { font-size: 16px; font-weight: 700; letter-spacing: 4px; line-height: 1; color: var(--o-white); }
.brand-word em { font-style: normal; color: var(--o-green); }
.brand-tag { font-size: 9.5px; color: var(--o-white3); letter-spacing: .6px; line-height: 1.2; }
.boot-logo-row { display: flex; align-items: center; gap: 16px; }
.boot-logo-svg { width: 84px; height: 84px; min-width: 84px; flex: 0 0 auto; aspect-ratio: 1 / 1; filter: drop-shadow(0 0 18px rgba(0, 224, 122, .30)); }
.boot-word { font-size: 38px; letter-spacing: 13px; font-weight: 700; color: var(--o-green); line-height: 1; }
.sb-logo { display: flex; align-items: center; flex: 0 0 auto; padding: 0 8px 0 6px; }
.sb-logo svg { width: 14px; height: 14px; min-width: 14px; display: block; aspect-ratio: 1 / 1; flex: 0 0 auto; }

/* 标识一律锁定等比：flex 项默认会被压扁（曾出现状态栏标识被压成 33x19） */
.brand-logo svg, .boot-logo-svg svg { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; }

/* 品牌落地页（模态）：LOGO 主展示 + 商业化文案 */
.about-hero { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 14px 6px; }
.about-logo-hero { width: 100%; max-width: 560px; height: auto; display: block; }
.about-tagline { font-size: 15px; color: var(--o-white); letter-spacing: 1.2px; text-align: center; }
.about-sub { font-size: 11.5px; color: var(--o-white2); text-align: center; line-height: 1.6; max-width: 640px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 5px; margin: 6px; }
.about-item { border: 1px solid var(--o-line); border-radius: 4px; padding: 7px 9px; background: var(--o-void); }
.about-item .k { font-size: 9.5px; color: var(--o-white3); letter-spacing: .6px; }
.about-item .v { font-size: 12px; color: var(--o-white); margin-top: 3px; line-height: 1.5; }
.about-item .v b { color: var(--o-green); }
.about-sec { font-size: 11px; color: var(--o-green); letter-spacing: 1px; font-weight: 700;
  margin: 10px 6px 4px; }

/* 模态：可滚动的品牌落地页 */
.modal-box { max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-bottom: 1px solid var(--o-line); background: var(--o-green-d);
  flex: 0 0 auto; }
.modal-title { font-size: 11.5px; font-weight: 700; color: var(--o-green); letter-spacing: 1px; }
.modal-body { overflow: auto; padding: 4px 2px 10px; min-height: 0; }

/* ================================================================ DOM 价格阶梯 */
.ladder { border: 1px solid var(--o-line2); background: var(--o-void); margin: 6px; }
.ladder-body { display: grid; grid-template-columns: 1fr 118px 1fr; align-items: start; }
.ladder-col { min-width: 0; }
.ladder-row { display: grid; grid-template-columns: 22px 1fr 64px 30px 64px; align-items: center;
  position: relative; padding: 1px 5px; border-bottom: 1px solid var(--o-bg); font-size: 11.5px; min-height: 20px; }
.ladder-row.near { background: rgba(0, 224, 122, .05); }
.ladder-row.hit { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); }
.ladder-row .side { position: absolute; top: 0; bottom: 0; right: 0; opacity: .16; }
.ladder-row .side.bid { background: linear-gradient(90deg, transparent, var(--up)); }
.ladder-row .side.ask { background: linear-gradient(90deg, transparent, var(--down)); }
.ladder-row .sz { position: absolute; top: 2px; bottom: 2px; right: 0; opacity: .34; }
.ladder-row .sz.bid { background: var(--up); }
.ladder-row .sz.ask { background: var(--down); }
.ladder-row span { position: relative; }
.ladder-row .lv { color: var(--o-white3); font-size: 10px; }
.ladder-row .px { font-weight: 700; text-align: right; }
.ladder-row .qty { text-align: right; color: var(--o-white); }
.ladder-row .orders { text-align: right; font-size: 10px; }
.ladder-row .cum { text-align: right; font-size: 10px; }
.ladder-mid { text-align: center; padding: 8px 4px; border-left: 1px solid var(--o-line2);
  border-right: 1px solid var(--o-line2); background: var(--o-void); align-self: stretch; }
.ladder-mid .mid-price { font-size: 17px; font-weight: 700; letter-spacing: -.4px; color: var(--o-white); transition: color .25s; }
.ladder-mid .mid-price.up { color: var(--up); }
.ladder-mid .mid-price.down { color: var(--down); }
.ladder-mid .mid-sub { font-size: 10.5px; color: var(--o-white2); margin-top: 3px; }
@media (max-width: 1280px) {
  .ladder-body { grid-template-columns: 1fr 98px 1fr; }
  .ladder-row { grid-template-columns: 18px 1fr 54px 54px; }
  .ladder-row .orders { display: none; }
}

/* ==================================================================================
   轻量化 UI（Lightweight Pass）
   ─────────────────────────────────────────────────────────────────────────────────
   目标：同屏看到更多有效信息，视觉噪音更低。
     · 分隔线从「到处画框」改为「只在必要处出现」
     · 统一 1px 网格节律（--o-line 只用于结构，--o-hair 用于行间）
     · 折叠优先：默认只显示摘要，点开才展开
     · 交互元素更小、对比更克制
   ================================================================================== */

/* ---- 功能键栏：分组 + 分隔（策略机独立板块）---- */
.tabs { gap: 0; padding: 0 6px; }
.tab { padding: 5px 10px; font-size: 11px; gap: 5px; }
.tab i { font-size: 10.5px; opacity: .9; }
.tab .key { font-size: 8.5px; padding: 0 2px; opacity: .75; }
.tab .badge.ro { font-size: 9px; padding: 0 3px; margin-left: 2px; }
.tab-group {
  display: flex; align-items: center; font-size: 9.5px; letter-spacing: 1px;
  color: var(--o-white3); padding: 0 8px 0 10px; background: var(--o-void);
  border-right: 1px solid var(--o-line); white-space: nowrap;
}
.tab-sep { width: 1px; background: var(--o-line2); margin: 3px 4px; align-self: stretch; }
.tab.tab-machine { box-shadow: inset 0 -2px 0 rgba(0, 224, 122, .45); }
.tab.tab-machine.active { box-shadow: none; }

/* ---- 折叠摘要条（peek）：一行看完策略机 ---- */
.peek {
  display: flex; align-items: center; gap: 10px; padding: 4px 9px;
  cursor: pointer; user-select: none; background: linear-gradient(90deg, var(--o-void), var(--o-void));
  border-bottom: 1px solid var(--o-line); transition: background .12s;
}
.peek:hover { background: linear-gradient(90deg, var(--o-panel2), var(--o-void)); }
.peek:focus { outline: 1px solid var(--o-green); outline-offset: -1px; }
.peek-title { font-size: 11px; font-weight: 700; color: var(--o-green); letter-spacing: 1px;
  flex: 0 0 auto; }
.peek-metrics { display: flex; flex-wrap: wrap; gap: 3px 12px; flex: 1 1 auto; min-width: 0; }
.peek-metrics .pm { font-size: 10.5px; color: var(--o-white3); white-space: nowrap; }
.peek-metrics .pm b { color: var(--o-white); font-weight: 600; margin-left: 2px; }
.peek-metrics .pm b.up { color: var(--up); }
.peek-metrics .pm b.down { color: var(--down); }
.peek-metrics .pm b.warnc { color: var(--o-amber); }
.peek-caret { flex: 0 0 auto; font-size: 10.5px; color: var(--o-white3); }
.peek.open .peek-caret { color: var(--o-green); }
.peek-body { display: none; }
.peek.open + .peek-body { display: block; }

/* ---- 全局轻量化 ---- */
.card { border-color: var(--o-line); }
.card + .card { margin-top: var(--gap); }
.cols { gap: var(--gap); }
.views { padding: var(--gap); }
.card-head { padding: 2px 7px; min-height: 19px; border-bottom-color: var(--o-line); }
.card-title { font-size: 10.5px; letter-spacing: 1px; }
.card > .tiles, .card > .tbl-wrap, .card > .heat, .card > .tests,
.card > canvas.chart { margin: var(--pad); }

/* 表格：斑马纹收敛为发丝线，表头更轻 */
table.tbl { font-size: 11px; }
table.tbl th { padding: 2px 6px; font-size: 10px; border-bottom-color: var(--o-line2);
  border-right-color: var(--o-hair); }
table.tbl td { padding: 1.5px 6px; border-bottom-color: var(--o-hair); border-right-color: var(--o-hair); }
table.tbl tbody tr:nth-child(even) { background: var(--o-void); }
table.tbl tbody tr:hover { background: var(--o-panel); }

/* 指标格：更小、更轻 */
.tiles { gap: 1px; border-color: var(--o-line); background: var(--o-line); }
.tile { padding: 3px 6px 4px; }
.tile .l { font-size: 9.5px; }
.tile .v { font-size: 13.5px; }
.tile.big .v { font-size: 17px; }
.tile .s { font-size: 9.5px; }

/* 侧栏更紧凑 */
.srow { grid-template-columns: 1fr 76px 62px; padding: 1px 7px 1px 9px;
  border-bottom-color: var(--o-hair); }
.srow .nm { font-size: 11px; }
.srow .px, .srow .ch { font-size: 11px; }
.sub-head { padding: 2px 8px 2px 14px; font-size: 9.5px; }
.side-foot .kv { padding: 1.5px 8px; font-size: 10.5px; }
.side-search { padding: 4px 6px; }
.side-tabs { padding: 0 6px 5px; }
.chip { padding: 1.5px 8px; font-size: 10px; }

/* DOM 阶梯更紧凑（同屏可看更多档） */
.ladder { margin: var(--pad); border-color: var(--o-line); }
.ladder-row { min-height: 17px; padding: 0 5px; font-size: 11px;
  border-bottom-color: var(--o-hair); }
.ladder-mid { padding: 5px 4px; }
.ladder-mid .mid-price { font-size: 15.5px; }
.tape .tr { padding: 0 6px; font-size: 10.5px; border-bottom-color: var(--o-hair); }
.book-row { padding: 0 6px; font-size: 11px; border-bottom-color: var(--o-hair); }

/* 状态栏 / 顶栏微调 */
.statusbar { height: 20px; font-size: 10px; }
.statusbar .sb { padding: 0 9px; }
.topbar { height: 44px; }
.layout { height: calc(100vh - 44px); }
.pill { padding: 0 9px; font-size: 10.5px; }
.btn.sm { padding: 2px 7px; font-size: 10.5px; }
.btn.xs { padding: 1px 5px; font-size: 10px; }
.kvlist { gap: 0 10px; font-size: 10.5px; }
.chart-legend { gap: 10px; font-size: 10px; margin-top: 3px; margin-bottom: 3px; }
.verdict { padding: 6px 8px; font-size: 11px; }
.test { padding: 3px 6px; font-size: 10.5px; }
.empty { padding: 12px; font-size: 10.5px; }
.hr { background: var(--o-hair); }

/* 市场总览里嵌入的策略机摘要板块 */
.embed-machine { border: 1px solid var(--o-line2); background: var(--o-void); }
.embed-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  background: var(--o-green-d); border-bottom: 1px solid var(--o-line2); cursor: pointer; }
.embed-head:hover { background: var(--o-green2); }
.embed-title { font-size: 11px; font-weight: 700; color: var(--o-green); letter-spacing: 1px; }
.embed-metrics { display: flex; flex-wrap: wrap; gap: 3px 12px; flex: 1 1 auto; min-width: 0; }
.embed-metrics .pm { font-size: 10.5px; color: var(--o-white3); white-space: nowrap; }
.embed-metrics .pm b { color: var(--o-white); margin-left: 2px; }
.embed-metrics .pm b.up { color: var(--up); }
.embed-metrics .pm b.down { color: var(--down); }
.embed-metrics .pm b.warnc { color: var(--o-amber); }
.embed-body { display: none; padding: 0; }
.embed-machine.open .embed-body { display: block; }
.embed-caret { font-size: 10.5px; color: var(--o-green); }

/* ==================================================================================
   登录门 / 用户区 / 密度模式
   ─────────────────────────────────────────────────────────────────────────────────
   登录页是产品的第一屏：品牌标识 + 一句话定位 + 极简表单。
   视觉与终端同源（深色底、绿主色、等宽数字），但更安静 —— 不抢内容。
   ================================================================================== */

.gate {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 700px at 50% 12%, var(--o-void) 0%, var(--o-void) 62%, var(--o-void) 100%);
  padding: 18px;
}
.gate.hidden { display: none; }

.gate-card {
  width: 100%; max-width: 428px;
  border: 1px solid var(--o-line2); border-radius: 8px;
  background: linear-gradient(180deg, var(--o-bg) 0%, var(--o-void) 100%);
  padding: 24px 26px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(0, 224, 122, .10);
}

.gate-brand { display: flex; align-items: center; gap: 12px; }
.gate-logo { width: 56px; height: 56px; flex: 0 0 auto; }
.gate-logo svg { width: 56px; height: 56px; aspect-ratio: 1 / 1; display: block; }
.gate-name { font-size: 26px; font-weight: 700; letter-spacing: 7px; color: var(--o-white); line-height: 1.1; }
.gate-sub { font-size: 10.5px; color: var(--o-white3); letter-spacing: .8px; margin-top: 3px; }
.gate-tagline { font-size: 13px; color: var(--o-green); margin: 16px 0 14px; letter-spacing: .6px; }

.gate-form { display: flex; flex-direction: column; }
.gate-form.hidden { display: none; }
.gate-label { font-size: 10.5px; color: var(--o-white3); margin: 8px 0 4px; letter-spacing: .5px; }
.gate-input {
  width: 100%; height: 34px; padding: 0 10px; font-size: 13px;
  background: var(--o-void); border: 1px solid var(--o-line2); border-radius: 4px;
  color: var(--o-white); outline: none; transition: border-color .12s;
}
.gate-input:focus { border-color: var(--o-green); box-shadow: 0 0 0 2px rgba(0, 224, 122, .13); }
.gate-submit { margin-top: 16px; height: 36px; font-size: 13.5px; letter-spacing: 2px; width: 100%; }
.gate-hint { font-size: 10.5px; color: var(--o-white3); margin-top: 8px; line-height: 1.5; }
.gate-banner {
  font-size: 11px; color: var(--o-amber); background: rgba(255, 176, 32, .08);
  border: 1px solid rgba(255, 176, 32, .28); border-radius: 4px;
  padding: 5px 9px; margin-bottom: 6px;
}
.gate-bar { height: 4px; background: var(--o-panel); border: 1px solid var(--o-line); margin-top: 6px; }
.gate-bar i { display: block; height: 100%; width: 0; background: var(--o-red); transition: width .18s, background .18s; }

.gate-msg { font-size: 11.5px; min-height: 17px; margin-top: 12px; line-height: 1.5; color: var(--o-white2); }
.gate-msg.err { color: var(--o-red); }
.gate-msg.warn { color: var(--o-amber); }
.gate-msg.ok { color: var(--o-green); }

.gate-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--o-line);
  font-size: 10px; color: var(--o-white3); letter-spacing: .4px;
}
.gate-note { font-size: 10.5px; color: var(--o-white3); margin-top: 8px; line-height: 1.5; }
.gate-note.hidden { display: none; }

/* ---- 顶栏用户区 ---- */
.user-chip { display: flex; align-items: center; flex: 0 0 auto; }
.user-btn {
  display: flex; align-items: center; gap: 7px;
  border-color: var(--o-green); color: var(--o-white);
  background: rgba(0, 224, 122, .08);
}
.user-btn:hover { background: rgba(0, 224, 122, .16); }
.user-btn b { font-weight: 600; color: var(--o-white); font-size: 11.5px; }
.user-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.user-dot.adm { background: var(--o-green); box-shadow: 0 0 6px rgba(0, 224, 122, .7); }
.user-dot.opr { background: var(--o-cyan); }
.user-dot.vwr { background: var(--o-white3); }
/* 未登录时的登录按钮：主色描边，保证一眼能找到 */
#btnLogin { border-color: var(--o-green); color: var(--o-green); font-weight: 700; }
#btnAccount { margin-left: 2px; white-space: nowrap; }

/* 顶栏在窄屏下不要挤成一团：允许换行，而不是把按钮挤出屏幕 */
.topright { flex-wrap: wrap; row-gap: 3px; justify-content: flex-end; }
@media (max-width: 1500px) {
  .pill#pillTps { display: none; }
}

/* ---- 密度模式 ---- */
body.density-comfortable .card-head { min-height: 23px; padding: 4px 9px; }
body.density-comfortable table.tbl td { padding: 3px 7px; }
body.density-comfortable .srow { padding: 3px 8px; }
body.density-comfortable .ladder-row { min-height: 21px; }
body.density-comfortable .tile { padding: 5px 8px 6px; }
body.density-comfortable .tile .v { font-size: 15px; }

/* ==================================================================================
   首次进入引导（First-run Onboarding）—— 面板样式
   ---------------------------------------------------------------------------------
   注意：这段曾被「批量清理失效 light-mode 规则」的正则误删过一次。
   引导卡是客户装完看到的第一屏，样式缺失会直接毁掉第一印象，故单独成块并加注释，
   避免今后再被整块正则清理误伤。
   ================================================================================== */

.firstrun { margin: 4px; }

.firstrun-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 8px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--o-green) 10%, transparent),
    color-mix(in srgb, var(--o-green) 2%, transparent) 62%, transparent);
  border: 1px solid var(--o-line2);
}
.firstrun-hero .logo { width: 52px; height: 52px; flex: 0 0 auto; aspect-ratio: 1 / 1; }
.firstrun-hero h2 {
  font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--o-white);
  letter-spacing: .3px; margin-bottom: 4px;
}
.firstrun-hero p {
  font-family: var(--sans); font-size: 12px; color: var(--o-white2); line-height: 1.62;
}
.firstrun-hero b { color: var(--o-white); }
.firstrun-hero u { text-decoration-color: var(--o-green); text-underline-offset: 2px; }

.firstrun-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px; margin-top: 8px;
}
.firstrun-card {
  border: 1px solid var(--o-line); border-radius: 6px; padding: 11px 13px;
  background: color-mix(in srgb, var(--o-white) 1.8%, transparent);
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.firstrun-card:hover {
  border-color: var(--o-green2); transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.firstrun-card .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; font-size: 10px; font-weight: 700;
  background: var(--o-green-d); color: var(--o-green); margin-right: 7px;
  flex: 0 0 auto;
}
.firstrun-card .t {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--o-white);
  display: flex; align-items: center;
}
.firstrun-card .d {
  font-family: var(--sans); font-size: 11px; color: var(--o-white2);
  line-height: 1.62; margin-top: 6px;
}
.firstrun-card .k {
  display: inline-block; margin-top: 8px; padding: 1px 7px; border-radius: 3px;
  font-size: 10px; background: color-mix(in srgb, var(--o-green) 10%, transparent);
  color: var(--o-green); border: 1px solid color-mix(in srgb, var(--o-green) 28%, transparent);
  font-family: var(--mono);
}

body[data-theme="light"] .firstrun-card { background: var(--o-on-accent); }

/* ==================================================================================
   密码栏显示 / 隐藏（Password Visibility Toggle）
   ---------------------------------------------------------------------------------
   交互：眼睛按钮嵌在输入框右侧，点击在「明文」与「掩码」间切换。
   可访问性：带 aria-label / aria-pressed；键盘 Enter/Space 可切换；
            切到明文后光标停在末尾（不会跳回开头）。
   安全：明文仅存在于当前输入框内，不落日志、不写存储；面板重开自动复位为掩码。
   注意：这段曾被「批量清理失效 light-mode 规则」的正则误删过一次，故单独成块。
   ================================================================================== */

.pw-wrap { position: relative; display: block; }
.pw-wrap .pw-input,
.pw-wrap input { padding-right: 38px; }

.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-s);
  color: var(--o-white3); cursor: pointer; line-height: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.pw-eye:hover {
  color: var(--o-green);
  background: color-mix(in srgb, var(--o-green) 10%, transparent);
  border-color: var(--o-line2);
}
.pw-eye:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-green) 26%, transparent); }
.pw-eye.on {
  color: var(--o-green);
  background: color-mix(in srgb, var(--o-green) 14%, transparent);
  border-color: var(--o-line2);
}
.pw-eye svg { display: block; }

/* 账号面板里的新密码强度条 */
.pw-bar { height: 4px; background: var(--o-panel2); border: 1px solid var(--o-line); border-radius: 3px; overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; background: var(--o-red); transition: width .18s, background .18s; }

/* 明文状态下给出视觉提示：避免误以为仍是掩码 */
.pw-wrap input[type="text"].pw-input { border-color: var(--o-amber, var(--o-amber)); }
.pw-wrap input[type="text"].pw-input:focus {
  border-color: var(--o-amber, var(--o-amber));
  box-shadow: 0 0 0 2px rgba(255, 176, 32, .16);
}