/* ==========================================================================
   argo-board · Bloomberg-terminal style · high information density
   Palette: phosphor CRT (deep black + neon green/red). No cream, no serif.
   Type: JetBrains Mono for displays + IDs, Inter for body. No serif.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #0A0E0C;
  --surface: #111714;
  --surface-hover: #181F1B;
  --border: #1F2824;
  --border-strong: #2C3833;

  --ink: #D8E2DC;
  --ink-dim: #7A8A82;
  --ink-mute: #4A5651;

  --ours: #5EFF8B;
  --ours-bg: rgba(94, 255, 139, .10);
  --ours-bg-strong: rgba(94, 255, 139, .22);
  --mismatch: #FF5C5C;
  --mismatch-bg: rgba(255, 92, 92, .10);
  --mismatch-bg-strong: rgba(255, 92, 92, .22);
  --ignored: #6E7C76;
  --secondary: #8B7B5A;
  --errored: #FFB347;

  --accent: #FFB347;

  --row-h: 40px;
  --cell-w: 56px;

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

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

html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.topbar-left { display: flex; align-items: baseline; gap: 10px; }

.brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink);
}
.brand-accent { color: var(--accent); padding: 0 1px; }

.ts-label, .range-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .12em;
}
.ts {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.topbar-stats { display: flex; align-items: center; gap: 14px; }

.stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.stat b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ink-mute);
}
.stat--ours b { color: var(--ours); }
.stat--mismatch b { color: var(--mismatch); }
.stat--core b { color: var(--accent); }
.stat--sold b { color: var(--ink-dim); }

.topbar-right { display: flex; align-items: center; gap: 4px; }

.btn-refresh, .btn-logout, .btn-toggle-all {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: color .12s, background-color .12s;
}
.btn-refresh:hover, .btn-logout:hover, .btn-toggle-all:hover { color: var(--ink); background: var(--surface-hover); }
.btn-refresh.loading { animation: spin 1s linear infinite; }

/* ============================================================
   Toolbar
   ============================================================ */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.search-input {
  flex: 1;
  max-width: 320px;
  height: 24px;
  padding: 0 10px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  outline: none;
  transition: border-color .12s;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--ink-mute); }

.chips { display: flex; gap: 4px; }

.chip {
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: color .12s, background-color .12s, border-color .12s;
}
.chip:hover { color: var(--ink); border-color: var(--border-strong); }
.chip.is-active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.chip[data-filter="ours"].is-active     { background: var(--ours);     border-color: var(--ours);     color: var(--bg); }
.chip[data-filter="mismatch"].is-active { background: var(--mismatch); border-color: var(--mismatch); color: var(--bg); }
.chip[data-filter="ignored"].is-active  { background: var(--ignored);  border-color: var(--ignored);  color: var(--bg); }

.toggle-tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  cursor: pointer;
  user-select: none;
}
.toggle-tier input { accent-color: var(--accent); }

.range-select {
  height: 24px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.range-select:hover { border-color: var(--border-strong); }

/* ============================================================
   Board + POI sections
   ============================================================ */

.board { padding: 0; max-width: 100%; }

.loading, .empty, .error {
  margin: 24px 16px;
  padding: 32px;
  text-align: center;
  color: var(--ink-mute);
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.loading, .empty, .error { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loading[hidden], .empty[hidden], .error[hidden] { display: none; }
.error h3 { margin: 0; color: var(--mismatch); font-size: 12px; }
.error p { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid var(--ink-mute);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.btn-retry {
  height: 24px; padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--bg);
  background: var(--accent);
  border: 0; border-radius: 3px;
  cursor: pointer;
}

section.poi {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.poi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 40px;
  z-index: 5;
  overflow: hidden;
}
.poi-toggle {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink-dim);
  border: 0; cursor: pointer;
  font-size: 11px;
  transition: transform .15s;
  flex-shrink: 0;
}
.poi.collapsed .poi-toggle { transform: rotate(-90deg); }

.poi-name {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  flex-shrink: 0;
}
.poi-id { font-size: 11px; color: var(--ink-mute); flex-shrink: 0; }

.poi-summary {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.poi-summary em { color: var(--ink-mute); font-style: normal; padding: 0 3px; }
.t-ours { color: var(--ours); }
.t-mis  { color: var(--mismatch); }

/* ============================================================
   Rows table — scrollable horizontally
   ============================================================ */

.rows-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}
.rows-wrap::-webkit-scrollbar { height: 8px; }
.rows-wrap::-webkit-scrollbar-track { background: var(--bg); }
.rows-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.rows-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

.rows {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
  min-width: max-content;
}
section.poi.collapsed .rows-wrap { display: none; }

.rows thead th {
  position: static;
  height: 22px;
  padding: 0 8px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-mute);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.rows thead th.col-status { width: 24px; padding: 0; text-align: center; }
.rows thead th.col-rid    { width: 64px; }
.rows thead th.col-name   { width: 280px; }
.rows thead th.col-price  { width: 80px; text-align: right; }
.rows thead th.col-actions{ width: 76px; text-align: right; }
.rows thead th.col-cells  { width: auto; min-width: 480px; }
.rows thead th.col-cells .cell-axis {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--ink-mute);
  width: var(--cell-w);
  text-align: center;
  white-space: nowrap;
}

.rows tbody tr.row {
  height: var(--row-h);
  border-bottom: 1px solid var(--border);
  transition: background-color .08s, box-shadow .08s;
}
.rows tbody tr.row:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.rows tbody tr.row:hover .col-name .row-title { color: var(--ink); }
.rows tbody tr.row:hover .col-rid { color: var(--ink); }
.rows tbody tr.row:hover .col-cells { border-left-color: var(--border-strong); }
.rows tbody tr.row:hover .cells .cell { border-right-color: var(--border-strong); }
.rows tbody tr.row:hover .col-actions .btn-copy-rid,
.rows tbody tr.row:hover .col-actions .btn-copy-cpid,
.rows tbody tr.row:hover .col-actions .btn-copy-all {
  border-color: var(--border-strong);
  color: var(--ink-dim);
}
.rows tbody tr.row[hidden] { display: none; }

.rows tbody tr.row[data-tier="hidden"] { display: none; }
.poi.show-hidden .rows tbody tr.row[data-tier="hidden"] { display: table-row; }
.rows tbody tr.row[data-tier="secondary"] { display: none; }
.poi.show-secondary .rows tbody tr.row[data-tier="secondary"] { display: table-row; }

.rows tbody tr.row td {
  padding: 0 8px;
  vertical-align: middle;
  font-size: 12px;
  white-space: nowrap;
}

/* Status dot */
.col-status { width: 24px; padding: 0; text-align: center; }
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ignored);
}
.row[data-status="ours"]     .dot { background: var(--ours);     box-shadow: 0 0 6px rgba(94,255,139,.6); }
.row[data-status="mismatch"] .dot { background: var(--mismatch); box-shadow: 0 0 6px rgba(255,92,92,.6); }
.row[data-status="errored"]  .dot { background: var(--errored); }

.row[data-status="ours"]     { background: var(--ours-bg); }
.row[data-status="mismatch"] { background: var(--mismatch-bg); }
.row[data-status="ignored"]  { color: var(--ink-dim); }

.col-rid {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  cursor: pointer;
}
.col-rid:hover { color: var(--accent); }

.col-name {
  max-width: 260px;
  padding: 2px 8px;
}
.row-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.row-line--title {
  height: 16px;
}
.row-line--meta {
  height: 14px;
  font-size: 10px;
  color: var(--ink-mute);
}
.row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink);
}
.row[data-status="ignored"] .row-title { color: var(--ink-dim); }
.meta-sep {
  color: var(--ink-mute);
  opacity: .6;
}
.meta-pid,
.meta-rid,
.meta-ppl {
  white-space: nowrap;
}
.meta-ppl {
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .04em;
}

.col-price {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
}
.row[data-status="ours"]     .price { color: var(--ours); }
.row[data-status="mismatch"] .price { color: var(--mismatch); }
.tier-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mute);
  border: 1px solid var(--border);
  border-radius: 2px;
  vertical-align: middle;
  letter-spacing: .04em;
}
.row[data-tier="hidden"] .tier-badge { color: var(--secondary); border-color: var(--secondary); }

/* ============================================================
   Price history cells (col-cells)
   ============================================================ */

.col-cells { padding: 0; }
.cells {
  display: flex;
  height: var(--row-h);
  align-items: stretch;
  border-left: 1px solid var(--border);
}

.cell {
  flex: 0 0 var(--cell-w);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  border-right: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  padding: 1px 0;
  gap: 1px;
}
.cell:last-child { border-right: 0; }
.cell .cell-price {
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.1;
}
.cell .cell-time  { color: var(--ink-mute); font-size: 8px; letter-spacing: .04em; }

.cell-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 9px;
  line-height: 0;
}
.ic {
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
}
.ic-flat { color: var(--ink-mute); opacity: .55; }
.ic-up,
.ic-down { color: var(--ink-mute); }

/* Change-detected arrow + bolt: yellow (matches the "now" accent) */
.cell.is-flat  .ic.ic-up,
.cell.is-flat  .ic.ic-down,
.cell.is-flat  .ic-bolt,
.cell .ic-bolt  { color: var(--accent); }
.cell .ic-warn { color: var(--errored); }

/* On monitored rows the arrow/bolt inherit status color, NOT yellow.
 * "改价点" (⚡) is still yellow on monitored rows because the user
 * specifically asked for yellow here. */
.row[data-status="ours"]     .cell .ic.ic-up,
.row[data-status="ours"]     .cell .ic.ic-down { color: var(--ours); }
.row[data-status="mismatch"] .cell .ic.ic-up,
.row[data-status="mismatch"] .cell .ic.ic-down { color: var(--mismatch); }

/* Status-aware cell background (monitored rows only) */
.cell.is-ours-cell     { background: var(--ours-bg); }
.cell.is-mismatch-cell { background: var(--mismatch-bg); }
.cell.is-ours-cell     .cell-price { color: var(--ours); font-weight: 500; }
.cell.is-mismatch-cell .cell-price { color: var(--mismatch); font-weight: 500; }

/* "now" highlight: the most recent cell with a price */
.cell.is-now {
  background: rgba(255, 179, 71, .08);
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
.cell.is-now .cell-price { color: var(--accent); font-weight: 600; }

/* Delta vs current price (still layered on top of status bg) */
.cell.is-up    { box-shadow: inset 0 1px 0 0 var(--mismatch); }
.cell.is-down  { box-shadow: inset 0 1px 0 0 var(--ours); }
.cell.is-flat  { /* no decoration */ }

/* Missing / failed bucket */
.cell.is-empty { background: transparent; }
.cell.is-empty .cell-price { color: var(--ink-mute); }
.cell.is-failed { background: rgba(255, 92, 92, .04); }
.cell.is-failed .cell-price { color: var(--mismatch); opacity: .55; }

/* Hover tooltip via title attr — handled in JS */

.col-actions {
  white-space: nowrap;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.btn-copy-rid, .btn-copy-cpid, .btn-copy-all {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--font-mono);
  transition: color .1s, border-color .1s, background-color .1s;
  padding: 0;
  flex: 0 0 auto;
}
.btn-copy-rid:hover, .btn-copy-cpid:hover, .btn-copy-all:hover { color: var(--accent); border-color: var(--accent); }
.btn-copy-all:hover { background: rgba(255, 179, 71, .08); }

/* Footer toggle */
.rows-foot td {
  padding: 0;
  border-top: 1px solid var(--border);
}
.btn-show-hidden {
  width: 100%;
  height: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .12s;
}
.btn-show-hidden:hover { color: var(--accent); }
.rows-foot[hidden] { display: none; }

/* ============================================================
   Toast
   ============================================================ */

#toast {
  position: fixed;
  bottom: 16px; left: 50%;
  z-index: 60;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bg);
  background: var(--accent);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
#toast[hidden] { display: none; }
#toast.visible { opacity: .95; }

/* ============================================================
   Login overlay
   ============================================================ */

.login-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.login-overlay[hidden] { display: none; }

.login-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 92vw);
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.login-title {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--ink);
}
.login-sub {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-mute);
}
.login-input {
  height: 30px; padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  outline: none;
  transition: border-color .12s;
}
.login-input:focus { border-color: var(--accent); }
.login-btn {
  height: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bg);
  background: var(--accent);
  border: 0; border-radius: 3px;
  cursor: pointer;
  transition: opacity .12s;
}
.login-btn:hover { opacity: .88; }
.login-error {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mismatch);
}

/* ============================================================
   Fail box
   ============================================================ */

.fail-box {
  margin: 24px 16px;
  padding: 20px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.fail-box h3 { margin: 0 0 6px; color: var(--mismatch); font-size: 12px; letter-spacing: .08em; }
.fail-box p { margin: 0 0 12px; color: var(--ink-dim); }
.fail-box button {
  height: 24px; padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bg);
  background: var(--accent);
  border: 0; border-radius: 3px;
  cursor: pointer;
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .topbar-stats { gap: 8px; }
  .stat em { display: none; }
  .rows thead th.col-actions,
  .rows tbody td.col-actions { display: none; }
}

@media (max-width: 600px) {
  .toolbar { flex-wrap: wrap; height: auto; padding: 6px 16px; gap: 6px; }
  .search-input { max-width: none; flex-basis: 100%; }
  .topbar-stats { display: none; }
  .col-name { width: 160px; }
}