/* 妖币雷达 v2 — 设计系统
 * 沿用主站 stone 灰系 + amber 主色 + emerald/rose PnL 色 + Georgia 衬线标题
 * Inter 正文 + JetBrains Mono 数字
 */

:root {
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
  --stone-800:#292524; --stone-900:#1c1917;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-300:#fcd34d; --amber-400:#fbbf24;
  --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --emerald-50:#ecfdf5; --emerald-300:#6ee7b7; --emerald-500:#10b981; --emerald-600:#059669;
  --rose-50:#fff1f2; --rose-300:#fda4af; --rose-500:#f43f5e; --rose-600:#e11d48;
  --blue-50:#eff6ff; --blue-500:#3b82f6;

  --bg: var(--stone-50); --surface: #ffffff; --surface-2: var(--stone-100);
  --border: var(--stone-200); --border-strong: var(--stone-300);
  --text: var(--stone-900); --text-2: var(--stone-700); --text-dim: var(--stone-500);
  --text-faint: var(--stone-400);
  --accent: var(--stone-900);
  --profit: var(--emerald-600); --loss: var(--rose-500); --warn: var(--amber-500);

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(28,25,23,0.04);
  --shadow: 0 4px 14px rgba(28,25,23,0.06);
  --shadow-lg: 0 12px 32px rgba(28,25,23,0.08);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: 'Georgia', 'PingFang SC', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.profit { color: var(--profit); }
.loss { color: var(--loss); }
.warn  { color: var(--warn); }

/* ─── topbar ────────────────────────────────────────────── */
.topbar {
  background: rgba(250,250,249,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 28px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; background: var(--stone-900); color: var(--stone-50);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.brand-title { font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { color: var(--text-faint); font-size: 12px; margin-left: 6px; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  color: var(--text-2); padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { color: var(--text); background: var(--surface-2); font-weight: 500; }
.nav-link.cta {
  background: var(--stone-900); color: var(--stone-50);
}
.nav-link.cta:hover { background: var(--stone-700); color: var(--stone-50); }

/* ─── layout ─────────────────────────────────────────────── */
.wrap { max-width: 1440px; margin: 0 auto; padding: 28px; }
.wrap-narrow { max-width: 1120px; margin: 0 auto; padding: 28px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.page-title { font-family: var(--font-serif); font-size: 26px; color: var(--text); margin-bottom: 6px; }
.page-sub { color: var(--text-dim); font-size: 14px; max-width: 640px; }

/* ─── card ───────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px;
  transition: border-color .15s, box-shadow .15s;
}
.card-title { font-family: var(--font-serif); font-size: 17px; margin-bottom: 4px; }
.card-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.card-hover { cursor: pointer; }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

/* ─── button ─────────────────────────────────────────────── */
.btn {
  background: var(--stone-900); color: var(--stone-50); border: 1px solid var(--stone-900);
  padding: 8px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--stone-700); border-color: var(--stone-700); }
.btn[disabled] { background: var(--stone-300); border-color: var(--stone-300); color: var(--stone-500); cursor: not-allowed; }
.btn-ghost {
  background: var(--surface); color: var(--text-2); border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-amber {
  background: var(--amber-500); border-color: var(--amber-500); color: var(--stone-900);
}
.btn-amber:hover { background: var(--amber-400); border-color: var(--amber-400); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 22px; font-size: 14px; }

.icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  transition: background .1s, color .1s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ─── input ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; color: var(--text-2); display: flex; justify-content: space-between; align-items: baseline; }
.field-default { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.input, select.input {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--r-sm); padding: 8px 11px; font-size: 13px; font-family: var(--font-mono);
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, select.input:focus {
  outline: none; border-color: var(--stone-900);
  box-shadow: 0 0 0 3px rgba(28,25,23,0.06);
}
.input-sm { padding: 5px 8px; font-size: 12px; }
.input.changed { border-color: var(--amber-500); background: var(--amber-50); }

/* segment / toggle group */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 2px; }
.seg button {
  background: transparent; border: none; padding: 5px 12px; border-radius: 4px;
  font-size: 12px; color: var(--text-dim); transition: background .12s, color .12s;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* switch */
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--stone-300); transition: .2s; border-radius: 20px; }
.switch .slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: white; transition: .2s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.switch input:checked + .slider { background: var(--emerald-500); }
.switch input:checked + .slider::before { transform: translateX(16px); }

/* ─── badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--border-strong); color: var(--text-2); background: var(--surface);
}
.badge.green { background: var(--emerald-50); color: var(--emerald-600); border-color: var(--emerald-300); }
.badge.rose  { background: var(--rose-50);    color: var(--rose-600);    border-color: var(--rose-300); }
.badge.amber { background: var(--amber-50);   color: var(--amber-700);   border-color: var(--amber-300); }
.badge.stone { background: var(--surface-2);  color: var(--text-2); }
.badge.dot::before { content:"●"; font-size: 8px; line-height: 1; }

/* ─── tabs ───────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 22px; gap: 2px; }
.tab {
  background: none; border: none; color: var(--text-dim); padding: 11px 18px;
  font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover:not(.active) { color: var(--text-2); }
.tab.active { color: var(--text); border-bottom-color: var(--stone-900); font-weight: 500; }
.pane { display: none; } .pane.active { display: block; }

/* ─── table ──────────────────────────────────────────────── */
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
table.t th { color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
table.t td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.t tbody tr:hover { background: var(--surface-2); }

/* ─── tooltip ────────────────────────────────────────────── */
.tip { position: relative; display: inline-flex; cursor: help; }
.tip > .tip-body {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--stone-900); color: var(--stone-50); padding: 7px 11px;
  border-radius: var(--r-sm); font-size: 12px; line-height: 1.45; white-space: normal;
  width: max-content; max-width: 260px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 80;
}
.tip:hover > .tip-body { opacity: 1; }

/* ─── modal ──────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(28,25,23,.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100;
}
.modal-bg.hidden { display: none; }
.modal {
  background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 760px;
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.modal-head { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 18px 24px; overflow-y: auto; }
.modal-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ─── toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--stone-900); color: var(--stone-50);
  padding: 11px 16px; border-radius: var(--r-sm); font-size: 13px; box-shadow: var(--shadow-lg);
  z-index: 200; transition: opacity .25s, transform .25s;
}
.toast.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* ─── scrollbar ──────────────────────────────────────────── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--stone-400); }

/* ─── source badge (合约 / 现货 / 现-合) ─────────────────── */
.src-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  margin-left: 6px; white-space: nowrap; vertical-align: middle;
  border: 1px solid transparent;
}
.src-badge.src-futures      { background: var(--surface-2); color: var(--text-2);   border-color: var(--border); }
.src-badge.src-futures-only { background: #fef3c7;         color: #b45309;           border-color: #fcd34d; }
.src-badge.src-spot         { background: #eff6ff;         color: #2563eb;           border-color: #bfdbfe; }
.src-badge.src-cross        { background: #f5f3ff;         color: #7c3aed;           border-color: #ddd6fe; }

.cat-soon {
  font-size: 10px; color: var(--text-faint); padding: 1px 6px;
  background: var(--surface-2); border-radius: 999px; margin-left: 6px;
}

.picker-banner {
  padding: 10px 14px; background: var(--blue-50); border: 1px solid #bfdbfe;
  border-radius: var(--r-sm); color: #1e40af; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 14px;
}
.picker-banner strong { color: #1e3a8a; }

.picker-item.soon {
  opacity: 0.55; cursor: not-allowed; background: var(--surface-2);
}
.picker-item.soon:hover { border-color: var(--border); background: var(--surface-2); }
.picker-item .soon-tag {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-300);
  margin-left: 4px;
}
.picker-cat-btn .cat-count {
  margin-left: auto; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono);
}

/* ─── running banner ─────────────────────────────────────── */
#running-banner { max-width: 1440px; margin: 12px auto 0; padding: 0 28px; }
.rb-pill {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
}
.rb-pill.running { background: linear-gradient(90deg, var(--emerald-50), var(--surface) 60%); border-color: var(--emerald-300); }
.rb-pill.stopped { background: var(--surface-2); }
.rb-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--emerald-500);
  flex-shrink: 0; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); animation: rb-pulse 2s infinite;
}
.rb-dot.stopped { background: var(--stone-400); animation: none; box-shadow: none; }
@keyframes rb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.rb-text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.rb-label {
  font-size: 11px; color: var(--emerald-600); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; padding: 2px 8px; background: white; border-radius: 999px;
  border: 1px solid var(--emerald-300);
}
.rb-pill.stopped .rb-label { color: var(--text-dim); border-color: var(--border-strong); }
.rb-name { font-size: 14px; color: var(--text); }
.rb-name strong { font-family: var(--font-serif); font-weight: 600; }
.rb-meta { font-size: 12px; }
.rb-sep { margin: 0 4px; color: var(--text-faint); }
.rb-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.rb-btn {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  padding: 5px 11px; border-radius: var(--r-sm); font-size: 12px; transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.rb-btn:hover { background: var(--surface-2); color: var(--text); }
.rb-btn.primary { background: var(--stone-900); color: var(--stone-50); border-color: var(--stone-900); }
.rb-btn.primary:hover { background: var(--stone-700); }
.rb-btn.warn { color: var(--amber-700); border-color: var(--amber-300); }
.rb-btn.warn:hover { background: var(--amber-50); }
@media (max-width: 720px) {
  .rb-pill { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .rb-actions { width: 100%; }
}

/* ─── responsive helpers ─────────────────────────────────── */
@media (max-width: 920px) {
  .wrap { padding: 18px; }
  .topbar-inner { padding: 0 16px; }
}