/* ═══════════════════════════════════════════════════════
   套利实盘监控面板 v2.2 — 暗色主题 + 架构分层配色
   分层: 交易层(蓝) / 策略层(绿) / 监控层(灰) / 流水线(紫)
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:        #0d1117;
  --bg-card:   #161b22;
  --border:    #30363d;
  --text:      #c9d1d9;
  --muted:     #8b949e;
  --blue:      #58a6ff;
  --green:     #3fb950;
  --yellow:    #d29922;
  --red:       #f85149;
  --purple:    #a371f7;
  --rad:       8px;
  /* 架构分层色 */
  --layer-trading:  #1a2a3a;
  --layer-strategy: #1a2e1a;
  --layer-monitor:  #1a1a1a;
  --layer-pipeline: #1f1a2e;
  --border-trading:  #58a6ff44;
  --border-strategy: #3fb95044;
  --border-monitor:  #8b949e44;
  --border-pipeline: #a371f744;
}

body {
  font-family: 'Segoe UI','Microsoft YaHei',Consolas,monospace;
  background: var(--bg); color: var(--text);
  padding: 16px 20px; max-width: 1400px; margin: 0 auto;
}

/* ══ 顶栏 ══ */
#topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
#topbar h1 { font-size: 20px; color: var(--blue); }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topbar-time { color: var(--muted); }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.conn-dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.conn-dot.off{ background: var(--red);  box-shadow: 0 0 6px var(--red); }

/* ══ 架构分层标签 ══ */
.layer-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 4px 10px; margin: 12px 0 6px;
  border-radius: 4px; display: inline-block;
}
.layer-trading  { color: var(--blue);  border-left: 3px solid var(--blue); }
.layer-strategy { color: var(--green); border-left: 3px solid var(--green); }
.layer-monitor  { color: var(--muted); border-left: 3px solid var(--muted); }
.layer-pipeline { color: var(--purple); border-left: 3px solid var(--purple); }

/* 面板层边框着色 */
.layer-panel-trading  { border-color: var(--border-trading) !important; }
.layer-panel-strategy { border-color: var(--border-strategy) !important; }
.layer-panel-monitor  { border-color: var(--border-monitor) !important; }

/* 卡片层边框着色 */
.layer-card-trading  { border-left: 2px solid var(--blue) !important; }
.layer-card-account  { border-left: 2px solid var(--yellow) !important; }
.layer-card-strategy { border-left: 2px solid var(--green) !important; }

/* ══ 网格 ══ */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 10px; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ══ 卡片 ══ */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 12px 14px;
}
.card .label { font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.card .value { font-size: 22px; font-weight: 700; }
.panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 14px; overflow: hidden;
}
.chart-wrap {
  position: relative; width: 100%; height: 200px;
}
.chart-wrap-tall {
  position: relative; width: 100%; height: 260px;
}
.section-title { font-size: 14px; color: #f0f6fc; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* ══ 颜色 ══ */
.blue  { color: var(--blue); }
.green { color: var(--green); }
.yellow{ color: var(--yellow); }
.red   { color: var(--red); }
.purple{ color: var(--purple); }

/* ══ 保证金条 ══ */
#risk-bar { margin-bottom: 12px; }
.risk-summary { display: flex; gap: 20px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.risk-summary strong { color: var(--text); }
.bar-wrap { background: #21262d; border-radius: 6px; height: 18px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 6px; transition: width .5s; }
.bar-fill.safe   { background: linear-gradient(90deg,#238636,var(--green)); }
.bar-fill.warn   { background: linear-gradient(90deg,#9a6700,var(--yellow)); }
.bar-fill.danger { background: linear-gradient(90deg,#da3633,var(--red)); }

/* ══ 表格 ══ */
.table-wrap { max-height: 280px; overflow: auto; }  /* 横向 + 纵向滚动 */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; padding: 7px 8px; background: var(--bg); color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1; }
td { padding: 6px 8px; border-bottom: 1px solid #21262d; }
tr:hover td { background: #1a1f2b; }
.empty-msg { color: var(--muted); padding: 24px; text-align: center; font-size: 13px; }

/* ══ 徽章 ══ */
.badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.badge-buy  { background: #1b3a1b; color: var(--green); }
.badge-sell { background: #3a1b1b; color: var(--red); }
.badge-pass { background: #1b3a1b; color: var(--green); }
.badge-block{ background: #3a2a1b; color: var(--yellow); }

/* ══ 风控门 ══ */
.gate-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #21262d; font-size: 12px; }
.gate-row:last-child { border-bottom: none; }
.gate-status { font-weight: 600; }
.gate-status.ok { color: var(--green); }
.gate-status.warn{ color: var(--yellow); }
.gate-status.danger{ color: var(--red); }

/* ══ 流水线可视化 ══ */
#pipeline-viz { padding: 8px 0; }
#pipeline-nodes {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap; padding: 8px 0;
}
.pipe-node {
  display: flex; flex-direction: column; align-items: center;
  width: 80px; padding: 8px 4px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 10px; text-align: center; transition: all .3s;
}
.pipe-node .pipe-icon { font-size: 18px; margin-bottom: 2px; }
.pipe-node .pipe-name { font-weight: 700; color: var(--muted); }
.pipe-node .pipe-rate { font-size: 9px; color: var(--muted); margin-top: 2px; }
.pipe-node.active { border-color: var(--green); background: #1a2e1a; }
.pipe-node.active .pipe-name { color: var(--green); }
.pipe-node.blocked { border-color: var(--red); background: #2e1a1a; }
.pipe-arrow {
  color: var(--muted); font-size: 14px; margin: 0 4px;
  flex-shrink: 0;
}
#pipeline-stats {
  text-align: center; font-size: 11px; color: var(--muted);
  padding: 4px 0; border-top: 1px solid #21262d; margin-top: 4px;
}

/* ══ Canvas ══ */
canvas { max-width: 100%; }
.chart-container { position: relative; width: 100%; }

/* ══ Select ══ */
select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 8px; font-size: 12px; margin-left: 8px;
}

/* ══ 控制面板 ══ */
#control-panel { margin-bottom: 16px; padding: 12px 16px; }
.ctrl-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ctrl-section { display: flex; flex-direction: column; gap: 6px; }
.ctrl-section .section-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ctrl-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.btn { cursor: pointer; border: 1px solid var(--border); border-radius: 4px; padding: 5px 12px; font-size: 12px; color: var(--text); background: var(--bg-card); white-space: nowrap; transition: background .15s; }
.btn:hover:not(.disabled) { background: var(--border); }
.btn.disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { padding: 2px 8px; font-size: 11px; }
.ctrl-btn { border-color: #3fb950; color: #3fb950; }
.ctrl-btn:hover:not(:disabled) { background: #1a3a20; }
.ctrl-btn-stop { border-color: #f85149; color: #f85149; }
.ctrl-btn-stop:hover:not(:disabled) { background: #3a1a1a; }
.ctrl-btn-buy { border-color: #58a6ff; color: #58a6ff; }
.ctrl-btn-buy:hover:not(:disabled) { background: #1a2a3a; }
.ctrl-btn-danger { border-color: #f0883e; color: #f0883e; }
.ctrl-btn-danger:hover:not(:disabled) { background: #3a2a1a; }
.btn-danger { border-color: #f85149; color: #f85149; }
.btn-danger:hover:not(:disabled) { background: #3a1a1a; }

.ctrl-input, .ctrl-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 12px; }
.ctrl-select { cursor: pointer; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; }
.status-dot.live { background: #3fb950; box-shadow: 0 0 6px #3fb95080; }
.status-dot.dead { background: #8b949e; }
.ctrl-status-label { font-size: 12px; color: var(--muted); }

/* Toast 通知 */
.toast { position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; border-radius: 6px; font-size: 13px; z-index: 9999; max-width: 400px; transition: opacity .3s; }
.toast-ok  { background: #1a3a20; color: #3fb950; border: 1px solid #3fb950; }
.toast-err { background: #3a1a1a; color: #f85149; border: 1px solid #f85149; }

/* ══ 页脚 ══ */
footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
}
.offline-badge { color: var(--yellow); }
.hidden { display: none; }

/* ══ 登录遮罩 ══ */
#login-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.login-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 40px; text-align: center;
  min-width: 340px; max-width: 400px;
}
.login-box h1 { font-size: 22px; color: var(--blue); margin-bottom: 8px; }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.login-input {
  width: 100%; padding: 10px 14px; font-size: 15px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; margin-bottom: 16px; outline: none;
}
.login-input:focus { border-color: var(--blue); }
.login-btn {
  width: 100%; padding: 10px; font-size: 15px; font-weight: 600;
  background: var(--blue); color: #fff; border: none;
  border-radius: 6px; cursor: pointer;
}
.login-btn:hover { opacity: 0.9; }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-msg { color: var(--red); font-size: 13px; margin-top: 12px; }

/* ── 系统日志页 ── */
#logs-table th { position: sticky; top: 0; z-index: 1; }
#logs-table tr { border-bottom: 1px solid #1a1a2e; }
#logs-table tr:hover { background: #1a1a2a; }
#logs-table .log-error { background: rgba(255,68,68,0.08); }
#logs-table .log-warn  { background: rgba(255,170,0,0.06); }
#logs-table .log-time { color: #666; white-space: nowrap; }
#logs-table .log-level { font-weight: bold; white-space: nowrap; }
#logs-table .log-tag { color: #4af; white-space: nowrap; }
#logs-table .log-msg { color: #ccc; word-break: break-all; }
#logs-toggle-btn { transition: all 0.2s; }
#logs-toggle-btn:hover { background: #2a2a4e !important; border-color: #4af !important; }
.btn-active { background: #2a2a4e !important; border-color: #4af !important; }