/* ── Reset & Base ───────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0f1117; color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif; height: 100vh; overflow: hidden; }

/* ── Layout ─────────────────────────────────────────────────────── */
.layout { display: flex; height: 100vh; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width: 220px; min-width: 220px;
  background: #1a1d27; border-right: 1px solid #2d3148;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 16px; border-bottom: 1px solid #2d3148;
}
.logo-icon { font-size: 22px; }
.logo-title { font-size: 15px; font-weight: 700; color: #a78bfa; }
.logo-sub { font-size: 11px; color: #64748b; margin-top: 1px; }

.nav-section {
  padding: 14px 16px 4px; font-size: 10px;
  color: #4b5563; text-transform: uppercase; letter-spacing: 1px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin: 2px 8px; border-radius: 8px;
  font-size: 13px; color: #94a3b8; text-decoration: none;
  transition: all 0.15s; cursor: pointer;
}
.nav-item:hover:not(.disabled) { background: #252840; color: #e2e8f0; }
.nav-item.active { background: #2d2f5e; color: #a78bfa; font-weight: 600; }
.nav-item.disabled { opacity: 0.4; cursor: default; }
.nav-item .icon { font-size: 15px; }
.badge {
  margin-left: auto; background: #7c3aed;
  color: white; font-size: 10px; padding: 1px 7px;
  border-radius: 99px; display: none;
}
.badge.show { display: inline-block; }
.soon { margin-left: auto; font-size: 9px; color: #4b5563; border: 1px solid #2d3148; padding: 1px 5px; border-radius: 4px; }
.sidebar-footer { margin-top: auto; padding: 16px; font-size: 11px; color: #374151; border-top: 1px solid #1e2235; line-height: 1.6; }

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  padding: 18px 28px 14px; border-bottom: 1px solid #1e2235;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.topbar h1 { font-size: 20px; font-weight: 700; color: #f1f5f9; }
.subtitle { font-size: 13px; color: #64748b; margin-top: 2px; }
.meta { font-size: 12px; color: #475569; text-align: right; line-height: 1.7; }
.meta strong { color: #a78bfa; }

/* K線頁 topbar */
.topbar-kline { padding: 12px 28px; }
.breadcrumb { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: #7c6fcd; text-decoration: none; }
.breadcrumb a:hover { color: #a78bfa; }
.breadcrumb .sep { color: #374151; }
.breadcrumb .current { color: #e2e8f0; }
.nav-arrows { display: flex; gap: 8px; }
.nav-arrow {
  padding: 6px 16px; border-radius: 6px; border: 1px solid #2d3148;
  background: #1a1d27; color: #94a3b8; font-size: 13px; cursor: pointer;
  transition: all 0.15s;
}
.nav-arrow:hover:not(:disabled) { border-color: #5b4fcf; color: #a78bfa; background: #1e1f3a; }
.nav-arrow:disabled { opacity: 0.3; cursor: default; }

/* ── Stats Row ───────────────────────────────────────────────────── */
.stats-row {
  display: flex; gap: 14px; padding: 14px 28px;
  border-bottom: 1px solid #1e2235; flex-shrink: 0;
}
.stat-card {
  flex: 1; background: #1a1d27; border: 1px solid #2d3148;
  border-radius: 10px; padding: 12px 16px;
}
.stat-card .label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .value { font-size: 22px; font-weight: 700; margin-top: 4px; color: #f1f5f9; }
.stat-card .value.red { color: #34d399; }
.stat-card .value.green { color: #f87171; }
.stat-card .sub { font-size: 11px; color: #475569; margin-top: 2px; }

/* ── Filter Bar ──────────────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 28px; background: #0d1018;
  border-bottom: 1px solid #1e2235; flex-shrink: 0;
}
.filter-label { font-size: 12px; color: #64748b; }
.filter-group { display: flex; gap: 6px; }
.filter-btn {
  padding: 4px 14px; border-radius: 6px; border: 1px solid #2d3148;
  background: #1a1d27; color: #94a3b8; font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: #5b4fcf; color: #a78bfa; }
.filter-btn.active { background: #2d2f5e; border-color: #5b4fcf; color: #a78bfa; font-weight: 600; }
.sort-group { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-select {
  padding: 5px 10px; border-radius: 6px; border: 1px solid #2d3148;
  background: #1a1d27; color: #94a3b8; font-size: 12px; cursor: pointer;
}

/* ── Period Stats Bar ────────────────────────────────────────────── */
.period-stats-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 28px; background: #0b0e16;
  border-bottom: 1px solid #1e2235; flex-shrink: 0;
}
.ps-label {
  font-size: 11px; color: #4b5563; text-transform: uppercase;
  letter-spacing: 0.5px; white-space: nowrap; min-width: 56px;
}
.ps-items { display: flex; gap: 6px; flex: 1; }
.ps-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: #1a1d27; border: 1px solid #2d3148; border-radius: 8px;
  padding: 6px 8px; min-width: 0;
}
.ps-item.highlight { border-color: #5b4fcf; background: #1e1f3a; }
.ps-period { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.ps-avg { font-size: 13px; font-weight: 700; color: #475569; }
.ps-avg.pos { color: #f87171; }
.ps-avg.neg { color: #34d399; }
.ps-rate { font-size: 10px; color: #64748b; margin-top: 1px; }
.ps-rate.high { color: #f87171; }
.ps-rate.low { color: #34d399; }

/* ── Table ───────────────────────────────────────────────────────── */
.table-wrap { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 10px 10px; text-align: right;
  background: #0f1117;
  color: #475569; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid #1e2235; cursor: pointer; user-select: none;
  white-space: nowrap;
}
thead th.left { text-align: left; }
thead th:hover { color: #a78bfa; }
thead th.sorted { color: #a78bfa; }

tbody tr { border-bottom: 1px solid #13161f; cursor: pointer; transition: background 0.1s; }
tbody tr:hover { background: #181b2e; }
tbody td { padding: 10px 10px; text-align: right; white-space: nowrap; }
tbody td:first-child { text-align: left; color: #94a3b8; font-size: 12px; }
tbody td:nth-child(2) { text-align: left; font-weight: 600; }

.drop-pct { color: #34d399; font-weight: 700; font-size: 14px; }
.pos { color: #f87171; }
.neg { color: #34d399; }
.na { color: #2d3148; }

.kline-btn {
  display: inline-flex; align-items: center; gap: 4px;
  color: #7c6fcd; font-size: 11px; text-decoration: none;
  padding: 3px 8px; border-radius: 4px; border: 1px solid #2d2f5e;
  transition: all 0.15s; white-space: nowrap;
}
.kline-btn:hover { background: #2d2f5e; color: #a78bfa; }
.loading { text-align: center; color: #374151; padding: 40px; font-size: 14px; }

/* ── Event Card ──────────────────────────────────────────────────── */
.event-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 28px; background: #13161f;
  border-bottom: 1px solid #1e2235; flex-shrink: 0;
}
.event-main { display: flex; align-items: baseline; gap: 12px; }
.event-date { display: flex; flex-direction: column; }
.event-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.event-date span:last-child { font-size: 24px; font-weight: 800; color: #f1f5f9; }
.event-drop { font-size: 30px; font-weight: 800; color: #34d399; }
.vdivider { width: 1px; background: #2d3148; align-self: stretch; flex-shrink: 0; }
.event-info { display: flex; flex-direction: column; gap: 3px; }
.info-row { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.ilabel { color: #64748b; min-width: 42px; }
.ival { color: #e2e8f0; font-weight: 600; font-variant-numeric: tabular-nums; }

.return-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.return-chip {
  display: flex; flex-direction: column; align-items: center;
  background: #1a1d27; border: 1px solid #2d3148;
  border-radius: 8px; padding: 7px 12px; min-width: 66px;
  transition: border-color 0.15s;
}
.return-chip.highlight { border-color: #5b4fcf; background: #1e1f3a; }
.rperiod { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.rpct { font-size: 15px; font-weight: 700; color: #475569; }
.rpct.pos { color: #f87171; }
.rpct.neg { color: #34d399; }

/* ── Chart Section ───────────────────────────────────────────────── */
.chart-section { flex: 1; padding: 12px 28px 16px; display: flex; flex-direction: column; min-height: 0; }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-shrink: 0; }
.chart-title { font-size: 13px; color: #94a3b8; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: #64748b; }
.chart-legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.red { background: #f87171; }
.dot.yellow { background: #facc15; }
.dot.green { background: #34d399; }
#chart { flex: 1; border-radius: 10px; overflow: hidden; border: 1px solid #1e2235; min-height: 200px; }

/* ── Row Highlight ───────────────────────────────────────────────── */
tr.row-highlight { background: #1e3a5f !important; }

/* ── OI Chart ────────────────────────────────────────────────────── */
.chart-wrap { padding: 12px 28px 16px; }
.oi-legend {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #94a3b8; cursor: pointer; user-select: none;
}
.oi-legend input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 3px;
  border: 1.5px solid #475569; background: #1e293b;
  cursor: pointer; flex-shrink: 0; position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.oi-legend input[type="checkbox"]:checked {
  background: #38bdf8; border-color: #38bdf8;
}
.oi-legend input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 3px; top: 0px; width: 4px; height: 8px;
  border: 2px solid #0f172a; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.oi-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1117; }
::-webkit-scrollbar-thumb { background: #2d3148; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3d4160; }