/* 操作端样式。层次只有四层：页面底 → 白面板 → 深色窄带 → 面板内细线。
   新增区块必须落在这四层里，不引入第五种底色，也不加阴影（设计文档第 3.2 节）。 */
:root{
  --bg:#dbe2ec;        /* 页面底色，只作背板 */
  --panel:#ffffff;     /* 内容面板 */
  --line:#d3dbe6;      /* 面板描边 */
  --hair:#eef1f5;      /* 面板内细线，比描边浅一档 */
  /* 实色深底。半透明黑 .28 叠在白面板上只有 #b7b7b7，窄带会变成灰条，压不住层次。 */
  --strip:#1c2430;
  --text:#333333;
  --muted:#8a94a6;
  --primary:#42a5f5;
  --banker:#e53935;    /* 庄 */
  --player:#1e88e5;    /* 闲 */
  --tie:#43a047;       /* 和 */
  --warn:#f57c00;
  --topbar:46px;
}
*{box-sizing:border-box}
/* hidden 属性必须压过下面任何写了 display 的类（.mask/.field/.menu 都写了）。
   少了这条，带 hidden 的弹层会全部同时显示出来。 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:13px/1.5 "Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  /* 数字等宽：金额与倒计时逐行对照时不会左右跳动 */
  font-variant-numeric:tabular-nums;
  overflow:hidden; /* 整页不滚动，滚动只发生在列内 */
}
b{font-weight:600}

/* ── 顶栏 ─────────────────────────────────────────── */
.topbar{
  height:var(--topbar);display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;background:var(--panel);border-bottom:1px solid var(--line);
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}
.brand{font-size:14px;font-weight:600}
.sep{width:1px;height:18px;background:var(--hair)}
.tb-item{font-size:12px;color:var(--muted)}
.tb-item b{color:var(--text);font-size:13px}
.tb-btn{
  height:26px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:3px;
  font-size:12px;color:var(--text);cursor:pointer;
}
.tb-btn:hover{border-color:var(--primary);color:var(--primary)}
.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:30px;z-index:40;min-width:160px;
  background:#fff;border:1px solid var(--line);border-radius:3px;
}
.menu button{
  display:block;width:100%;padding:7px 10px;border:0;border-bottom:1px solid var(--hair);
  background:#fff;text-align:left;font-size:12px;cursor:pointer;color:var(--text);
}
.menu button:last-child{border-bottom:0}
.menu button:hover{background:var(--hair)}

/* 状态点：颜色之外必须带文字，不能只靠颜色表达状态 */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:#b7c0cf}
.dot.ok{background:#43a047}
.dot.warn{background:var(--warn)}
.dot.err{background:var(--banker)}

/* ── 三列工作区 ───────────────────────────────────── */
.work{
  height:calc(100vh - var(--topbar));
  display:grid;grid-template-columns:200px 260px 1fr;gap:6px;padding:6px;
}
.col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:3px}
.col-strip{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  height:28px;padding:0 8px;background:var(--strip);color:#fff;font-size:12px;font-weight:600;
  border-radius:2px 2px 0 0;letter-spacing:.5px;
}
.strip-note{font-size:11px;color:rgba(255,255,255,.75);font-weight:400}
.col-tools{padding:6px;border-bottom:1px solid var(--hair)}
.input-sm{width:100%;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:2px;font-size:12px}
.input-sm:focus{outline:0;border-color:var(--primary)}

/* 第一列：平台 Logo 按钮 */
.plat-list{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:6px}
.plat-btn{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:8px;border:1px solid var(--line);border-radius:3px;
  background:#fff;cursor:pointer;text-align:left;
}
.plat-btn:hover{border-color:var(--primary)}
.plat-btn.on{box-shadow:inset 0 0 0 2px var(--primary);border-color:var(--primary)}
.plat-btn .logo{
  width:40px;height:40px;flex:none;border-radius:3px;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;
}
/* 万利、宝马用项目里的原标，不再用单字色块 */
.plat-btn .logo-img{
  display:block;width:96px;height:40px;flex:none;object-fit:contain;
  border-radius:2px;background:#0c2018;
}
.plat-btn .pinfo{min-width:0;flex:1}
.plat-btn{display:grid;grid-template-columns:1fr;gap:5px}
.plat-btn .pinfo{display:flex;flex-wrap:wrap;gap:2px 8px;grid-row:1}
.plat-btn .pname{width:100%;overflow-wrap:anywhere;line-height:1.5}
.plat-btn .logo-img{width:100%;height:40px;object-position:left}
.topbar-right a.tb-btn{display:inline-flex;align-items:center;text-decoration:none}
.plat-btn .pname{font-size:13px;font-weight:600}
.plat-btn .pmeta{font-size:11px;color:var(--muted);margin-top:1px}
.plat-btn.maint .logo,.plat-btn.maint .logo-img{filter:grayscale(1);opacity:.4}

/* 第二列：账号行 */
.acct-list{flex:1;overflow-y:auto}
.acct-empty{padding:16px 10px;color:var(--muted);font-size:12px;text-align:center}
.acct-row{padding:6px 8px;border-bottom:1px solid var(--hair);cursor:pointer}
.acct-row:hover{background:#f7f9fc}
.acct-row.on{box-shadow:inset 0 0 0 2px var(--primary)}
.acct-row .line1{display:flex;align-items:center;justify-content:space-between;gap:6px}
.acct-row .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row .line2{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:2px}
.acct-row .bal{color:var(--text)}
.acct-pnl{font-weight:700}
.acct-pnl.pos{color:var(--tie)}
.acct-pnl.neg{color:var(--banker)}
.detail-meta{font-size:12px;line-height:1.7;margin-bottom:8px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detail-item{border:1px solid var(--hair);border-radius:2px;padding:6px 8px}
.detail-item .k{font-size:11px;color:var(--muted)}
.detail-item .v{font-size:16px;font-weight:700}
.detail-foot{flex-wrap:wrap}
.acct-row .msg{color:var(--warn);font-size:11px;margin-top:2px}
.acct-ops{display:flex;gap:4px}

/* 第三列：台桌卡片 */
.table-scroll{flex:1;min-width:0;overflow-x:hidden;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:6px}
.card{flex:none;border:1px solid var(--line);border-radius:3px;background:#fff}
.card-strip{
  display:flex;align-items:center;gap:12px;height:32px;padding:0 10px;
  background:var(--strip);color:#fff;font-size:12px;border-radius:2px 2px 0 0;
}
.card-strip .tname{font-weight:600;font-size:14px;letter-spacing:.5px}
.card-strip .big{font-weight:600;font-size:13px}
.card-strip .stale{color:#ffcdd2;font-weight:600}
.card-strip .spacer{flex:1}
.card-body{display:grid;grid-template-columns:minmax(0,1fr) 250px}
.card-left{padding:8px;border-right:1px solid var(--line);min-width:0;background:#fff}
/* 右栏退半档，四项统计的白块才从露珠区里分离出来 */
.card-right{padding:8px;background:#f4f7fb}

/* 露珠：左珠盘路固定，右块是万利整张路单。窄的时候只留珠盘路。 */
.road-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.road-title{font-size:13px;font-weight:600}
.road-count{display:flex;gap:8px;font-size:12px}
.road-count .cb{color:var(--banker)}
.road-count .cp{color:var(--player)}
.road-count .ct{color:var(--tie)}
.road-sum{margin-left:auto;font-size:12px;color:var(--muted)}
.roads{display:flex;align-items:flex-start;gap:6px;min-width:0}
.roads canvas{display:block;flex:none;border:1px solid #d5dbe3;border-radius:2px}
.roads.bead-only .board-cv{display:none}
.road-empty{padding:12px;color:var(--muted);font-size:12px}

/* 右操作栏：四项统计 + 策略摘要 + 控制按钮 */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.stat{background:#fff;padding:5px 6px}
.stat .k{font-size:11px;color:var(--muted)}
.stat .v{font-size:14px;font-weight:600;text-align:right}
.v.pos{color:var(--tie)}
.v.neg{color:var(--banker)}
.scope{font-size:11px;color:var(--muted);margin:4px 0 6px}
.strat-line{font-size:12px;margin-bottom:4px}
.strat-miss{color:var(--banker);font-weight:700}
.strat-set{color:#1565c0;font-weight:700}
.task-run{color:var(--banker);font-weight:700}
.decide{font-size:11px;color:var(--muted);min-height:30px;border-top:1px solid var(--hair);padding-top:4px}
.ctrl{display:flex;gap:4px;margin-top:6px}
.ctrl .btn{flex:1}

/* 下部下注列表 */
.bets{border-top:1px solid var(--hair);max-height:132px;overflow-y:auto}
table.grid{width:100%;border-collapse:collapse;font-size:12px}
table.grid th{background:#f2f5f9;color:var(--muted);font-weight:400;padding:3px 6px;text-align:center;border-bottom:1px solid var(--hair)}
table.grid td{padding:3px 6px;text-align:center;border-bottom:1px solid var(--hair)}
table.grid td.num{text-align:right}
.side-b{color:var(--banker);font-weight:600}
.side-p{color:var(--player);font-weight:600}
.bets-empty{padding:8px;text-align:center;color:var(--muted);font-size:12px}
.tag{display:inline-block;padding:0 5px;border-radius:2px;font-size:11px;background:var(--hair);color:var(--muted)}
.tag.ok{background:#e8f5e9;color:#2e7d32}
.tag.warn{background:#fff3e0;color:#ef6c00}
.tag.err{background:#ffebee;color:#c62828}
.tag.run{background:#e3f2fd;color:#1565c0}
.tag.live{background:#ffebee;color:#c62828;font-weight:700}

/* ── 按钮三态 ─────────────────────────────────────── */
.btn{
  height:26px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:#fff;
  font-size:12px;color:var(--text);cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.06);color:#fff}
.btn-xs{height:20px;padding:0 6px;font-size:11px;line-height:18px}
/* 禁用保留原位置，不隐藏：灰度 + 透明 */
.btn:disabled{filter:grayscale(1);opacity:.4;cursor:not-allowed}

/* ── 弹框 ─────────────────────────────────────────── */
.mask{position:fixed;inset:0;z-index:50;background:rgba(20,28,40,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
/* 未登录：工作区整体不渲染，登录遮罩直接盖在页面底色上 */
body.pre-auth .topbar,body.pre-auth .work{display:none}
.dialog{width:420px;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:3px}
.dialog-narrow{width:320px}
.dialog-wide{width:860px}
.dialog-title{height:28px;flex:none;display:flex;align-items:center;padding:0 10px;background:var(--strip);color:#fff;font-size:12px}
.dialog-body{flex:1 1 auto;min-height:0;padding:10px;overflow:auto}
.dialog-foot{flex:none;display:flex;justify-content:flex-end;gap:6px;padding:8px 10px;border-top:1px solid var(--hair)}
/* 标签与输入左右对齐成列，不上下堆叠 */
.field{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.field>span{width:96px;flex:none;color:var(--muted);font-size:12px;text-align:right}
.field input,.field select{flex:1;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:2px;font-size:12px;min-width:0}
.field input:focus,.field select:focus{outline:0;border-color:var(--primary)}
.field input:disabled{background:#f5f7fa;color:var(--muted)}
.field-row{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.field-row .field{flex:1 1 220px;min-width:0;flex-direction:column;align-items:stretch;gap:2px}
.field-row .field>span{width:auto;min-width:0;text-align:left}
.time-range{display:flex;align-items:center;gap:4px;flex:1}
.time-range input{width:60px;height:26px;border:1px solid var(--line);border-radius:2px;padding:0 4px}
.form-error{min-height:18px;color:var(--banker);font-size:12px}
.form-hint{font-size:11px;color:var(--muted);line-height:1.6}
.group-strip{
  display:flex;align-items:center;gap:8px;height:22px;padding:0 8px;margin:8px 0 8px;
  background:var(--strip);color:#fff;font-size:12px;border-radius:2px;
}
.table-picker{display:flex;flex-wrap:wrap;gap:6px}
.table-picker label{
  display:flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--line);
  border-radius:2px;font-size:12px;cursor:pointer;
}
.strat-current{border:1px solid var(--hair);background:#f7f9fc;padding:6px 8px;font-size:12px;margin-bottom:8px}
.strat-current .row{display:flex;gap:8px}
.strat-current .k{color:var(--muted);min-width:84px}

/* ── 登录页 ───────────────────────────────────────── */
/* 版式照宝马操作端：深色满屏 + 居中白卡片。底色取万利过渡页取样
   （上沿 #152D20，中部 #0F2519，角落沉到 #040A08），不沿用工作台的浅灰底。 */
body.pre-auth #loginMask{
  background:
    radial-gradient(ellipse 78% 62% at 50% 36%, #163024 0%, #0c2018 48%, #071410 100%);
}
.login-orbit{
  position:absolute;left:50%;top:46%;width:150vmin;height:150vmin;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.7;
}
.login-orbit svg{width:100%;height:100%;overflow:visible}
.spin{transform-box:fill-box;transform-origin:center}
.spin-slow{animation:login-spin 42s linear infinite}
.spin-rev{animation:login-spin 68s linear infinite reverse}
@keyframes login-spin{to{transform:rotate(360deg)}}

.login-card{
  position:relative;z-index:1;width:328px;
  padding:26px 24px 22px;background:#fff;border-radius:4px;
  box-shadow:0 18px 48px rgba(0,0,0,.38);
}
/* 字标是按万利那种立体烫金签字单独做的图，透明底，不垫色块。 */
.login-mark{
  display:block;width:100%;height:auto;margin:2px 0 14px;
  background:none;filter:drop-shadow(0 2px 2px rgba(90,58,8,.18));
}
/* 标签留在框内上方，输入值在下面，和宝马登录框一样 */
.login-field{
  display:flex;flex-direction:column;gap:1px;
  margin-bottom:12px;padding:5px 10px 6px;
  background:#eef3f8;border-radius:2px;
}
.login-field>span{font-size:11px;line-height:1.3;color:#9aa6b4}
.login-field input{
  height:22px;padding:0;border:0;background:transparent;
  font-size:14px;color:var(--text);
}
.login-field input:focus{outline:0}
.login-field:focus-within{box-shadow:inset 0 0 0 1px var(--primary)}
.login-error{
  margin:0 0 10px;padding:5px 8px;font-size:12px;
  background:#fdecea;color:#c62828;border-left:2px solid var(--banker);
}
.login-submit{width:100%;height:36px;margin-top:4px;font-size:14px;letter-spacing:6px;border-radius:2px}
.login-foot{
  position:absolute;left:0;right:0;bottom:26px;z-index:1;
  text-align:center;font-size:13px;letter-spacing:3px;color:rgba(226,210,168,.78);
}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;
  padding:7px 14px;background:rgba(20,28,40,.9);color:#fff;border-radius:3px;font-size:12px;
}
.tb-btn{white-space:nowrap;flex-shrink:0}
.visible-table-summary{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--primary);margin-right:6px}.acct-row .line2:has(.visible-table-summary){align-items:flex-start}.acct-row .acct-pnl{flex-shrink:0}

#acctDetailMask .dialog{width:min(1000px,96vw);max-width:1000px}.history-controls{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap}.history-controls select{height:26px;border:1px solid var(--line);background:#fff}.account-history-scroll{overflow-x:auto;margin:8px 0}.account-history-scroll table{min-width:520px}.account-history-scroll td{padding:6px!important;white-space:nowrap}.history-period{border:0;background:transparent;color:#1565c0;cursor:pointer;text-decoration:underline;font:inherit}.history-paging{display:flex;justify-content:flex-end;align-items:center;gap:10px}.history-note{color:var(--muted);font-size:11px;margin:6px 0}#acctHistory{margin-top:12px}

/* 账号详情：宽屏三列统计，为历史明细保留更多可视空间。 */
#acctDetailMask .dialog{width:min(1280px,96vw);max-width:1280px;height:92vh;max-height:92vh}
#acctDetailMask .detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#acctDetailMask .detail-item{padding:5px 8px}
#acctDetailBody{display:flex;flex-direction:column}
#acctDetailBody>.detail-meta,#acctDetailBody>.detail-grid,#acctDetailBody>.form-hint{flex-shrink:0}
#acctHistory{display:flex;flex-direction:column;flex:1 0 260px;min-height:260px}
#acctHistoryContent{display:flex;flex-direction:column;flex:1;min-height:0}
#acctHistoryContent .account-history-scroll{flex:1;min-height:160px;overflow:auto}
#acctHistoryContent .history-back{align-self:flex-start}
#acctHistoryContent .history-paging{flex-shrink:0;padding:4px 0}
@media(max-width:680px){#acctDetailMask .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.strategy-description{background:#f4f8fc;border:1px solid #d6e2ef;border-left:3px solid #409eff;padding:10px 12px;margin:8px 0 12px;font-size:12px;line-height:1.65;color:#43576d}.strategy-description b{color:#263d56}.strategy-description p{margin:5px 0}

.cycle-extremes{margin-top:6px}.cycle-extremes .k{font-size:11px}.cycle-extremes .v{font-size:13px}

.strategy-replay{margin:4px 0 8px;font-size:12px}.replay-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.replay-stat-grid>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;background:#f4f8fc;border:1px solid #e2eaf3;border-radius:3px}.replay-stat-grid span,.replay-stat-note{color:#7b8ba3;font-size:11px}.replay-stat-grid b{font-variant-numeric:tabular-nums}.replay-stat-note{margin-top:4px}@media(max-width:560px){.replay-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.replay-stat-grid b.pos,.strat-line b.pos{color:var(--tie)}.replay-stat-grid b.neg,.strat-line b.neg{color:var(--banker)}

.replay-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.replay-stat-grid>.replay-period{display:block;padding:6px 9px}.replay-period>div{display:flex;align-items:center;justify-content:space-between;gap:6px;line-height:20px}@media(max-width:560px){.replay-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}