:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #fafbfd;
  --border: #e3e8f0;
  --text: #1b2431;
  --text-dim: #6b7787;
  --brand: #1f4e79;
  --brand-2: #2b6cb0;
  --brand-soft: #eaf2fb;
  --ok: #16794a;
  --ok-soft: #e6f5ee;
  --warn: #9a6b00;
  --warn-soft: #fdf4e0;
  --err: #b3261e;
  --err-soft: #fdecea;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 8px 24px rgba(16, 32, 56, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- 登录页 ---------------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1100px 520px at 12% -10%, #e8f0fb 0%, rgba(232,240,251,0) 60%),
    radial-gradient(900px 500px at 100% 110%, #eaf4f0 0%, rgba(234,244,240,0) 55%),
    var(--bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.login-side {
  padding: 44px 38px;
  background: linear-gradient(160deg, #1f4e79 0%, #2b6cb0 100%);
  color: #fff;
}
.login-side h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: .5px; }
.login-side p.dim { color: rgba(255, 255, 255, .78); margin: 0 0 26px; font-size: 13px; }
.login-side ul { padding-left: 18px; margin: 0; color: rgba(255, 255, 255, .9); font-size: 13px; }
.login-side li { margin-bottom: 9px; }
.login-side .badge-row { margin-top: 30px; display: flex; gap: 8px; flex-wrap: wrap; }
.login-side .badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25);
}

.login-form { padding: 44px 38px; }
.login-form h2 { margin: 0 0 4px; font-size: 20px; }
.login-form .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 22px; }

/* ---------------- 布局 ---------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  flex: 0 0 224px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(150deg, #1f4e79, #2b6cb0);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.brand b { font-size: 14px; display: block; line-height: 1.2; }
.brand span { font-size: 11px; color: var(--text-dim); }

.nav-sec { font-size: 11px; color: var(--text-dim); padding: 12px 10px 4px; letter-spacing: .4px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 8px; color: var(--text);
  font-size: 13.5px; cursor: pointer;
}
.nav-item:hover { background: var(--panel-2); text-decoration: none; }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-item .ic { width: 16px; text-align: center; opacity: .85; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 58px; background: var(--panel); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; position: sticky; top: 0; z-index: 20;
}
.topbar h2 { font-size: 16px; margin: 0; }
.topbar .user-box { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand); font-weight: 700; display: flex; align-items: center;
  justify-content: center; font-size: 12px;
}

.content { padding: 20px 22px 60px; }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px;
}
.card > header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card > header h3 { margin: 0; font-size: 14.5px; }
.card > header .hint { font-size: 12px; color: var(--text-dim); }
.card .body { padding: 18px; }
.card .body.tight { padding: 10px 18px 16px; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .login-card { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .sidebar { display: none; }
}

.stat { padding: 16px 18px; }
.stat .lbl { font-size: 12px; color: var(--text-dim); }
.stat .val { font-size: 24px; font-weight: 700; margin-top: 4px; letter-spacing: -.4px; }
.stat .val.small { font-size: 15px; font-weight: 600; word-break: break-all; }

/* ---------------- 表单 ---------------- */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 160px; }
.field.full { flex-basis: 100%; }
.field label { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.field .req { color: var(--err); }

input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: var(--text); font-size: 13.5px;
  font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(43, 108, 176, .12);
}
textarea { resize: vertical; min-height: 72px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: 8px;
  background: var(--brand); color: #fff; font-size: 13.5px; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { background: var(--err); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow: auto; max-height: 640px; border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: #f7f9fc; color: var(--text-dim);
  text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .2px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; z-index: 2;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid #f0f3f8; white-space: nowrap; }
tbody tr:hover { background: var(--panel-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- 徽标 / 提示 ---------------- */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; line-height: 1.7; border: 1px solid transparent;
}
.tag.admin { background: var(--brand-soft); color: var(--brand); border-color: #cfe0f4; }
.tag.user { background: #f1f3f7; color: var(--text-dim); border-color: var(--border); }
.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: #cbe9d9; }
.tag.off { background: var(--err-soft); color: var(--err); border-color: #f6d3cf; }

.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13.5px; border: 1px solid transparent; }
.flash.success { background: var(--ok-soft); color: var(--ok); border-color: #cbe9d9; }
.flash.error { background: var(--err-soft); color: var(--err); border-color: #f6d3cf; }
.flash.warn { background: var(--warn-soft); color: var(--warn); border-color: #f2e2bb; }

.empty { color: var(--text-dim); text-align: center; padding: 26px; font-size: 13px; }
.muted { color: var(--text-dim); }
.mono { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.sec-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
hr.sep { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.right { text-align: right; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mb0 { margin-bottom: 0; }

/* ---------- 新增：输入框 / 指标卡 / 徽标 / 行状态 ---------- */
.inp {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 13px; font-family: inherit;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.inp:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(43, 108, 176, .12); }

.kpi-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kpi {
  flex: 1 1 150px; min-width: 130px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.kpi span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.kpi b { font-size: 20px; letter-spacing: -.3px; }
.kpi.warn { background: var(--warn-soft); border-color: #f2e2bb; }
.kpi.warn b { color: var(--warn); }

/* ---------------- 开关组（v1.9.7）----------------
   止盈止损页：一个视觉单位 = 「标签 + 状态徽章 + 开启/关闭两个按钮」。
   口径：开关只有「开启 / 关闭」两种说法，不出现「开启中｜总开关已关闭」这类混合表述。 */
.sw-group {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.sw-group.sm { padding: 0; border: 0; background: transparent; gap: 6px; }
.sw-group .sw-label { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.sw-group .sw-state {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--border);
  background: #f1f3f7; color: var(--text-dim); white-space: nowrap;
}
.sw-group .sw-state.on { background: var(--ok-soft); color: var(--ok); border-color: #cbe9d9; }
.sw-group .sw-state.off { background: #f1f3f7; color: var(--text-dim); border-color: var(--border); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { filter: none; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px;
  border: 1px solid var(--border); background: #f1f3f7; color: var(--text-dim);
  white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: #cbe9d9; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: #f2e2bb; }
.badge.danger { background: var(--err-soft); color: var(--err); border-color: #f6d3cf; }
/* v1.9.8 在线持仓：做多=红、做空=绿（A 股习惯，与涨红跌绿一致） */
.badge.long { background: var(--err-soft); color: var(--err); border-color: #f6d3cf; }
.badge.short { background: var(--ok-soft); color: var(--ok); border-color: #cbe9d9; }
td.pos-up, b.pos-up { color: var(--err); }     /* 盈利 / 上涨 → 红 */
td.pos-down, b.pos-down { color: var(--ok); }  /* 亏损 / 下跌 → 绿 */

/* ---------------- 可排序表头（v1.9.8 在线持仓）----------------
   点击表头即排序：第一次从高到低，第二次从低到高，第三次恢复默认。
   箭头 ▲/▼ 标示当前列与方向；未排序列半透明，避免视觉噪音。 */
th.sortable { cursor: pointer; user-select: none; position: relative; }
th.sortable:hover { color: var(--brand-2); background: #eef3fa; }
th.sortable .arw { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .3; }
th.sortable.on { color: var(--brand); }
th.sortable.on .arw { opacity: 1; color: var(--brand); }

tr.row-danger td { background: #fdf4f3; }
tr.row-ok td { background: #f2fbf6; }

details.card > summary { list-style: revert; }
details.card > summary::marker { color: var(--brand); }
details > summary { cursor: pointer; font-size: 13px; color: var(--brand-2); }

/* ---------------- 紧凑表格：参数列表等「列很多」的表格用 ----------------
   默认表格每格 9px/12px 内边距、13px 字号，列一多就显得稀稀拉拉；
   compact 把字号降到 12px、内边距压到 3px/7px，列宽收紧、表头不再撑开，
   同样的屏幕宽度能多显示 2~3 列，且不影响可读性。 */
table.compact { font-size: 12px; }
table.compact thead th {
  padding: 5px 7px; font-size: 11.5px; letter-spacing: 0;
}
table.compact tbody td { padding: 3px 7px; line-height: 1.5; }
table.compact .badge { padding: 1px 6px; font-size: 11px; }
table.compact .btn.sm { padding: 3px 8px; font-size: 11.5px; }
table.compact .op-col { padding-left: 6px; padding-right: 6px; }
/* 单元格里的输入框也一并收窄，避免「一行只放得下 3 个参数」 */
table.compact .inp.cell-inp, table.compact input.cell-inp {
  width: 96px; padding: 3px 6px; font-size: 12px;
}
table.compact select.inp { padding: 3px 6px; font-size: 12px; }
/* 用户参数页的分组表头也跟着收紧 */
table.compact thead tr.group-row th { padding: 4px 6px; font-size: 11.5px; }
table.compact thead tr.field-row th { top: 30px; }

/* 实盘账户行：整行淡红底，一眼看出哪些账户在真实下单 */
tr.row-live td { background: #fdf6f5; }
tr.row-live:hover td { background: #fbeeec; }
tr.row-live td.hl-col { background: #fbe4e0; }

/* v1.6.0：切换交易模式后，刚刚变动的那一行闪烁高亮提示「已刷新」 */
@keyframes row-flash {
  0%   { box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, .55); }
  60%  { box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, .22); }
  100% { box-shadow: inset 0 0 0 9999px rgba(255, 193, 7, 0); }
}
tr.row-flash td { animation: row-flash 1.6s ease-out 2; }
/* 切换按钮点击后进入「切换中…」的等待态，避免重复点击 */
.btn.is-busy { opacity: .55; pointer-events: none; }

/* ---------------- 二级导航（用户参数分组） ---------------- */
.nav-item.nav-sub {
  padding-left: 26px;
  font-size: 13px;
  color: var(--text-dim);
}
.nav-item.nav-sub .ic { font-size: 15px; opacity: .7; }
.nav-item.nav-sub.active { color: var(--brand); font-weight: 600; }
.nav-item.nav-sub:hover { background: var(--panel-2); }

/* ---------------- 宽表：全字段横排 + 横向滚动 ---------------- */
.table-wrap.wide {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 72vh;
  /* 底部横向滚动条更醒目 */
  scrollbar-width: thin;
}
.table-wrap.wide::-webkit-scrollbar { height: 12px; width: 12px; }
.table-wrap.wide::-webkit-scrollbar-thumb {
  background: #c8d2e0; border-radius: 6px; border: 3px solid transparent;
  background-clip: content-box;
}
.table-wrap.wide::-webkit-scrollbar-thumb:hover { background: #a9b7ca; background-clip: content-box; }
table.wide-table { width: max-content; min-width: 100%; table-layout: auto; }
table.wide-table td, table.wide-table th { white-space: nowrap; }

/* 分组表头行 */
thead tr.group-row th {
  background: #eef3fa;
  color: var(--brand);
  font-size: 12px;
  text-align: center;
  border-bottom: 2px solid var(--border);
  z-index: 3;
}
thead tr.group-row th.g-check    { background: #eaf2fb; }
thead tr.group-row th.g-order    { background: #eaf6f0; }
thead tr.group-row th.g-trailing { background: #fdf4e6; }
thead tr.group-row th.g-close    { background: #fdeeec; }
thead tr.group-row th.g-base     { background: #f1f3f7; color: var(--text-dim); }
thead tr.field-row th { top: 34px; }

/* 操作列 & 固定列 */
th.op-col, td.op-col {
  position: sticky; right: 0; background: var(--panel);
  border-left: 1px solid var(--border); z-index: 4;
}
thead th.op-col { background: #f7f9fc; z-index: 6; }
tbody tr:hover td.op-col { background: var(--panel-2); }
td.stick-col, th.stick-col {
  position: sticky; left: 0; background: var(--panel);
  border-right: 1px solid var(--border); z-index: 4;
}
thead th.stick-col { background: #f7f9fc; z-index: 6; }

/* 当前交易等级高亮 */
th.hl-col, td.hl-col { background: var(--brand-soft); }
tr.row-current td { background: #f5faff; }
tr.row-current td.hl-col { background: #d9e9fb; font-weight: 600; }
tr.row-current:hover td { background: #eef6ff; }

/* 编辑表格中的输入框 */
.editor-table td { padding: 6px 8px; }
.inp.cell-inp { width: 128px; padding: 5px 8px; font-size: 12.5px; }

/* 表单分组块 */
.group-box {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px 2px; margin-bottom: 12px; background: var(--panel-2);
}
.group-title {
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  margin-bottom: 10px; letter-spacing: .3px;
}
.kv { border-bottom: 1px dashed var(--border); padding: 7px 0; }
.kv b { display: block; font-size: 12.5px; }
.kv span { font-size: 12px; }
.btn.active { background: var(--brand-soft); color: var(--brand); border-color: #cfe0f4; }