/* === CSS Variables & Theme === */
:root {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-card: #1c2333;
  --bg-card-hover: #212a3b;
  --bg-sidebar: #0f1729;
  --bg-input: #1a2235;
  --border: #2d3748;
  --border-light: #3a4a5e;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #5c6a7a;
  --accent: #f0b90b;
  --accent-dim: #b8960f;
  --up: #ef4444;
  --up-bg: rgba(239, 68, 68, 0.12);
  --down: #22c55e;
  --down-bg: rgba(34, 197, 94, 0.12);
  --blue: #3b82f6;
  --blue-dim: #2563eb;
  --purple: #8b5cf6;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --transition: 0.2s ease;
  --sidebar-w: 210px;
  --topbar-h: 52px;
  --bottombar-h: 56px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Scrollbar === */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-light); }

/* === Layout === */
.app { display:flex; min-height:100vh; }

/* === Sidebar (Desktop) === */
.sidebar {
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:100;
  padding:16px 0;
  overflow-y:auto;
}
.sidebar-logo {
  padding:0 20px 20px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.sidebar-logo h1 {
  font-size:1.3rem;
  font-weight:800;
  background:linear-gradient(135deg, var(--accent), #ff6b35);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:1px;
}
.sidebar-logo span {
  font-size:0.7rem;
  color:var(--text-muted);
  display:block;
  margin-top:2px;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  margin:2px 8px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  color:var(--text-secondary);
  font-size:0.9rem;
  transition:all var(--transition);
  border:none;
  background:none;
  width:calc(100% - 16px);
  text-align:left;
}
.nav-item:hover { background:var(--bg-card); color:var(--text-primary); }
.nav-item.active {
  background:var(--bg-card);
  color:var(--accent);
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-icon { font-size:1.15rem; width:22px; text-align:center; flex-shrink:0; }

/* === Main Content === */
.main {
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* === Top Bar (Index Ticker) === */
.topbar {
  height:var(--topbar-h);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:0;
  overflow:hidden;
  position:sticky;
  top:0;
  z-index:50;
}
.index-ticker {
  display:flex;
  gap:24px;
  white-space:nowrap;
  animation:tickerScroll 60s linear infinite;
  min-width: max-content;
}
@keyframes tickerScroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.index-item {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
}
.index-name { color:var(--text-muted); font-weight:500; }
.index-price { font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.index-change { font-weight:600; font-variant-numeric:tabular-nums; }
.index-change.up { color:var(--up); }
.index-change.down { color:var(--down); }

/* Market Stats Mini */
.market-stats {
  display:flex;
  gap:16px;
  margin-left:auto;
  font-size:0.78rem;
  color:var(--text-muted);
  flex-shrink:0;
  padding-left:16px;
  border-left:1px solid var(--border);
}
.market-stats .up-count { color:var(--up); }
.market-stats .down-count { color:var(--down); }

/* === Content Area === */
.content {
  flex:1;
  padding:20px;
  overflow-y:auto;
}
.page { display:none; }
.page.active { display:block; }

/* === Cards === */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
  transition:all var(--transition);
}
.card:hover { border-color:var(--border-light); box-shadow:var(--shadow); }
.card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.card-title {
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:8px;
}

/* === Stock Cards Grid === */
.stock-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
.stock-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  cursor:pointer;
  transition:all var(--transition);
  position:relative;
  overflow:hidden;
}
.stock-card:hover {
  border-color:var(--accent-dim);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.stock-card .rank-badge {
  position:absolute;
  top:10px; right:10px;
  background:var(--accent);
  color:#000;
  font-size:0.7rem;
  font-weight:800;
  width:24px; height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stock-card .stock-name {
  font-weight:700;
  font-size:1rem;
  margin-bottom:4px;
}
.stock-card .stock-code {
  font-size:0.75rem;
  color:var(--text-muted);
  margin-bottom:10px;
}
.stock-card .stock-price {
  font-size:1.5rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.stock-card .stock-change {
  font-size:0.85rem;
  font-weight:600;
  margin-left:6px;
}
.stock-card .stock-change.up { color:var(--up); }
.stock-card .stock-change.down { color:var(--down); }
.stock-card .ai-tag {
  display:inline-block;
  background:linear-gradient(135deg, #8b5cf6, #6366f1);
  color:#fff;
  font-size:0.68rem;
  padding:3px 8px;
  border-radius:4px;
  margin-top:8px;
}
.stock-card .price-targets {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
  font-size:0.7rem;
}
.price-targets .pt { text-align:center; }
.price-targets .pt-label { color:var(--text-muted); font-size:0.65rem; }
.price-targets .pt-val { font-weight:700; font-size:0.85rem; }
.price-targets .pt-val.buy { color:var(--up); }
.price-targets .pt-val.sell { color:var(--down); }
.price-targets .pt-val.stop { color:var(--text-muted); }

/* === Tables === */
.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.data-table th {
  text-align:left;
  padding:10px 12px;
  background:var(--bg-secondary);
  color:var(--text-muted);
  font-weight:600;
  font-size:0.78rem;
  border-bottom:2px solid var(--border);
  position:sticky;
  top:0;
}
.data-table td {
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
.data-table tr:hover td { background:var(--bg-card-hover); }
.data-table .up { color:var(--up); font-weight:600; }
.data-table .down { color:var(--down); font-weight:600; }

/* === Buttons === */
.btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:var(--radius-sm);
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text-primary);
  transition:all var(--transition);
}
.btn:hover { background:var(--bg-card-hover); border-color:var(--border-light); }
.btn-primary {
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
}
.btn-primary:hover { background:var(--accent-dim); }
.btn-sm { padding:5px 10px; font-size:0.75rem; }

/* === Search === */
.search-box {
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.search-box input {
  flex:1;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text-primary);
  font-size:0.9rem;
  outline:none;
  transition:border var(--transition);
}
.search-box input:focus { border-color:var(--accent); }
.search-box input::placeholder { color:var(--text-muted); }

/* === Tabs === */
.tabs {
  display:flex;
  gap:4px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
  padding-bottom:0;
}
.tab {
  padding:8px 18px;
  cursor:pointer;
  color:var(--text-muted);
  font-size:0.85rem;
  font-weight:500;
  border-bottom:2px solid transparent;
  transition:all var(--transition);
  background:none;
  border-top:none;
  border-left:none;
  border-right:none;
}
.tab:hover { color:var(--text-primary); }
.tab.active {
  color:var(--accent);
  border-bottom-color:var(--accent);
}

/* Quant System Tab Content */
.qtab-content { display:none; }
.qtab-content.active { display:block; }

/* Strategy Indicator Card */
.strategy-indicator-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
}
.strategy-indicator-card .si-header {
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.strategy-indicator-card .si-name {
  font-weight:700;font-size:0.85rem;color:var(--text-primary);
}
.strategy-indicator-card .si-badge {
  font-size:0.6rem;padding:2px 6px;border-radius:3px;font-weight:600;
}
.strategy-indicator-card .si-desc {
  font-size:0.72rem;color:var(--text-muted);line-height:1.6;
}
.strategy-indicator-card .si-signals {
  display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;
}
.strategy-indicator-card .si-signal-tag {
  font-size:0.62rem;padding:2px 6px;border-radius:3px;
  background:rgba(240,185,11,0.12);color:#f0b90b;
}

/* Risk param cards */
.risk-param-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  text-align:center;
}
.risk-param-card .rp-label {
  font-size:0.65rem;color:var(--text-muted);margin-bottom:4px;
}
.risk-param-card .rp-value {
  font-size:1.1rem;font-weight:800;
}

/* === Chart Container === */
.chart-container {
  width:100%;
  height:420px;
  background:var(--bg-card);
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.chart-container.full { height:500px; }

/* === Heatmap === */
.heatmap-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:6px;
}
.heatmap-cell {
  padding:8px 6px;
  border-radius:4px;
  text-align:center;
  font-size:0.72rem;
  cursor:pointer;
  transition:all var(--transition);
}
.heatmap-cell:hover { transform:scale(1.05); z-index:2; }
.heatmap-cell .hm-name { font-weight:600; margin-bottom:2px; }
.heatmap-cell .hm-change { font-weight:700; }

/* === News === */
.news-list { display:flex; flex-direction:column; gap:10px; }
.news-item {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  cursor:pointer;
  transition:all var(--transition);
}
.news-item:hover { border-color:var(--border-light); }
.news-item .news-title {
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:6px;
  line-height:1.4;
}
.news-item .news-meta {
  display:flex;
  gap:12px;
  font-size:0.72rem;
  color:var(--text-muted);
}
.news-item .news-impact {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:3px;
  font-size:0.7rem;
  font-weight:600;
  margin-top:6px;
}
.news-impact.bullish { background:var(--up-bg); color:var(--up); }
.news-impact.bearish { background:var(--down-bg); color:var(--down); }
.news-impact.neutral { background:rgba(139,148,158,0.15); color:var(--text-secondary); }
.news-impact .affected { margin-left:4px; color:var(--text-muted); font-weight:400; }

/* === AI Analysis Box === */
.ai-box {
  background:linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.05));
  border:1px solid rgba(139,92,246,0.25);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:16px;
}
.ai-box .ai-header {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--purple);
  font-weight:700;
  font-size:0.85rem;
  margin-bottom:10px;
}
.ai-box .ai-content {
  color:var(--text-secondary);
  font-size:0.85rem;
  line-height:1.7;
  white-space:pre-wrap;
}
.ai-box.loading .ai-content {
  color:var(--text-muted);
  font-style:italic;
}

/* === All Stocks Table === */
.all-stocks-table-wrap {
  max-height:calc(100vh - 200px);
  overflow-y:auto;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.all-stocks-table-wrap thead { position:sticky; top:0; z-index:2; }

/* === Back Button === */
.back-btn {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--text-muted);
  cursor:pointer;
  font-size:0.85rem;
  padding:6px 0;
  margin-bottom:12px;
  border:none;
  background:none;
}
.back-btn:hover { color:var(--text-primary); }

/* === Loading & Empty === */
.loading {
  text-align:center;
  padding:40px;
  color:var(--text-muted);
}
.loading::after {
  content:'';
  display:inline-block;
  width:20px; height:20px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-left:8px;
  vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }
.empty {
  text-align:center;
  padding:60px 20px;
  color:var(--text-muted);
  font-size:0.9rem;
}
.empty-icon { font-size:2.5rem; display:block; margin-bottom:10px; }

/* === Badge / Tag === */
.badge {
  display:inline-block;
  padding:2px 7px;
  border-radius:3px;
  font-size:0.68rem;
  font-weight:600;
}
.badge-up { background:var(--up-bg); color:var(--up); }
.badge-down { background:var(--down-bg); color:var(--down); }
.badge-info { background:rgba(59,130,246,0.15); color:var(--blue); }

/* === Modal === */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  max-width:90vw;
  max-height:85vh;
  overflow-y:auto;
  min-width:320px;
}
.modal-close {
  float:right;
  background:none;
  border:none;
  color:var(--text-muted);
  font-size:1.3rem;
  cursor:pointer;
  padding:0 0 8px 8px;
}
.modal-close:hover { color:var(--text-primary); }

/* === Mobile Bottom Nav === */
.mobile-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--bottombar-h);
  background:var(--bg-sidebar);
  border-top:1px solid var(--border);
  z-index:100;
  padding:0 8px;
}
.mobile-nav-inner {
  display:flex;
  height:100%;
  overflow-x:auto;
}
.mobile-nav-item {
  flex:1;
  min-width:60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:var(--text-muted);
  font-size:0.65rem;
  cursor:pointer;
  border:none;
  background:none;
  padding:4px;
}
.mobile-nav-item.active { color:var(--accent); }
.mobile-nav-item .mni-icon { font-size:1.2rem; }

/* === Responsive === */
@media (max-width:768px) {
  :root { --sidebar-w:0px; }
  .sidebar { display:none; }
  .main { margin-left:0; padding-bottom:var(--bottombar-h); }
  .mobile-nav { display:block; }
  .content { padding:12px; }
  .stock-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
  .stock-card { padding:12px; }
  .stock-card .stock-price { font-size:1.2rem; }
  .chart-container { height:280px; }
  .chart-container.full { height:340px; }
  .topbar { padding:0 10px; }
  .index-ticker { gap:16px; font-size:0.75rem; }
  .market-stats { display:none; }
  .index-item { font-size:0.72rem; }
  .all-stocks-table-wrap { max-height:calc(100vh - 280px); }
  .data-table { font-size:0.75rem; }
  .data-table th, .data-table td { padding:7px 6px; }
  .price-targets { font-size:0.65rem; }
}

@media (max-width:480px) {
  .stock-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stock-card { padding:10px; }
  .stock-card .stock-price { font-size:1.1rem; }
  .stock-card .stock-name { font-size:0.85rem; }
  .chart-container { height:240px; }
  .content { padding:8px; }
}