/* stock.oioi.lu — 三套皮肤系统
 * 基于 newswall 皮肤系统移植，适配投资看板组件
 * 皮肤通过 data-skin 属性切换，主题通过 data-theme 切换
 * 默认 notion（晨光），可选 verge（极夜）/ stripe（破晓）
 */

/* ===== Design Tokens · 基础 ===== */
:root {
  /* Typography */
  --font-sans: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;

  /* Spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-16: 64px;

  /* Rounded */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --dur-state: 150ms;
  --dur-pop: 200ms;
}

/* ===== 皮肤 1: 晨光 (notion) — 暖白 Notion 风 ===== */
:root[data-skin="notion"],
:root[data-skin="notion"][data-theme="light"] {
  --skin-name: "晨光";
  --page-bg: #f6f5f4;
  --page-bg-alt: #f0efed;
  --card: #ffffff;
  --card-hover: #f0efed;
  --text: rgba(0,0,0,0.95);
  --text-muted: #615d59;
  --primary: #0075de;
  --accent: #097fe8;
  --border: rgba(0,0,0,0.1);
  --up: #2a9d99;
  --down: #dd5b00;
  --neutral: #615d59;
  --tag-bg: rgba(0,117,222,0.12);
  --card-radius: var(--r-md);
  --shadow-card: 0 2px 2px rgba(0,0,0,0.03);
  --shadow-card-hover: rgba(0,0,0,0.06) 0px 8px 24px, rgba(0,0,0,0.04) 0px 4px 12px;
  --toggle-bg: rgba(0,0,0,0.03);
  --toggle-border: rgba(0,0,0,0.1);
  --toggle-color: #615d59;
  --toggle-hover-bg: rgba(0,0,0,0.06);
  --toggle-hover-border: rgba(0,0,0,0.15);
  --focus-ring: 0 0 0 2px #f6f5f4, 0 0 0 4px #0075de;
  --clue-border-left: 3px solid #0075de;
  --clue-border-left-hover: 3px solid #097fe8;
  --dir-bull-bg: rgba(42,157,153,0.12);
  --dir-bull-text: #2a9d99;
  --dir-bear-bg: rgba(221,91,0,0.12);
  --dir-bear-text: #dd5b00;
}

:root[data-skin="notion"][data-theme="dark"] {
  --page-bg: #1a1a1a;
  --page-bg-alt: #222222;
  --card: #222222;
  --card-hover: #2a2a2a;
  --text: #ededed;
  --text-muted: #949494;
  --primary: #48aeff;
  --accent: #48aeff;
  --border: rgba(255,255,255,0.12);
  --up: #4ce15e;
  --down: #ff676d;
  --neutral: #6e6e6e;
  --tag-bg: rgba(72,174,255,0.15);
  --shadow-card: 0 2px 2px rgba(0,0,0,0.3);
  --shadow-card-hover: rgba(0,0,0,0.4) 0px 8px 24px;
  --toggle-bg: rgba(255,255,255,0.05);
  --toggle-border: rgba(255,255,255,0.1);
  --toggle-color: #949494;
  --toggle-hover-bg: rgba(255,255,255,0.08);
  --toggle-hover-border: rgba(255,255,255,0.15);
  --focus-ring: 0 0 0 2px #1a1a1a, 0 0 0 4px #48aeff;
  --clue-border-left: 3px solid #48aeff;
  --clue-border-left-hover: 3px solid #6ec4ff;
  --dir-bull-bg: rgba(76,225,94,0.15);
  --dir-bull-text: #4ce15e;
  --dir-bear-bg: rgba(255,103,109,0.15);
  --dir-bear-text: #ff676d;
}

/* ===== 皮肤 2: 极夜 (verge) — 近黑 The Verge 风 =====
 * 永远暗色调，无传统亮色模式
 * 青色霓虹 accent，大圆角，零阴影靠边框分层
 */
:root[data-skin="verge"],
:root[data-skin="verge"][data-theme="dark"],
:root[data-skin="verge"][data-theme="light"] {
  --skin-name: "极夜";
  --page-bg: #131313;
  --page-bg-alt: #1a1a1a;
  --card: #1a1a1a;
  --card-hover: #222222;
  --text: #ffffff;
  --text-muted: #949494;
  --primary: #3cffd0;
  --accent: #3cffd0;
  --border: rgba(255,255,255,0.12);
  --up: #3cffd0;
  --down: #a060ff;
  --neutral: #949494;
  --tag-bg: rgba(60,255,208,0.15);
  --card-radius: var(--r-xl);
  --shadow-card: none;
  --shadow-card-hover: 0 0 0 1px rgba(60,255,208,0.3);
  --toggle-bg: rgba(255,255,255,0.05);
  --toggle-border: rgba(255,255,255,0.1);
  --toggle-color: #949494;
  --toggle-hover-bg: rgba(255,255,255,0.08);
  --toggle-hover-border: rgba(60,255,208,0.3);
  --focus-ring: 0 0 0 2px #131313, 0 0 0 4px #3cffd0;
  --clue-border-left: 3px solid #3cffd0;
  --clue-border-left-hover: 3px solid #52ffff;
  --dir-bull-bg: rgba(60,255,208,0.15);
  --dir-bull-text: #3cffd0;
  --dir-bear-bg: rgba(160,96,255,0.2);
  --dir-bear-text: #a060ff;
}

/* ===== 皮肤 3: 破晓 (stripe) — 纯白 Mintlify 风 =====
 * 翠绿 accent，大圆角，极轻阴影，5%透明边框
 * 空灵文档阅读气质，靠留白和边框分层而非阴影
 */
:root[data-skin="stripe"],
:root[data-skin="stripe"][data-theme="light"] {
  --skin-name: "破晓";
  --page-bg: #ffffff;
  --page-bg-alt: #f5f5f5;
  --card: #ffffff;
  --card-hover: #f5f5f5;
  --text: #0d0d0d;
  --text-muted: #666666;
  --primary: #18E299;
  --accent: #0fa76e;
  --border: rgba(0,0,0,0.05);
  --up: #0fa76e;
  --down: #d45656;
  --neutral: #888888;
  --tag-bg: rgba(24,226,153,0.12);
  --card-radius: var(--r-lg);
  --shadow-card: 0 2px 4px rgba(0,0,0,0.03);
  --shadow-card-hover: rgba(0,0,0,0.06) 0px 4px 12px;
  --toggle-bg: rgba(0,0,0,0.03);
  --toggle-border: rgba(0,0,0,0.05);
  --toggle-color: #666666;
  --toggle-hover-bg: #d4fae8;
  --toggle-hover-border: rgba(24,226,153,0.3);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #18E299;
  --clue-border-left: 3px solid #18E299;
  --clue-border-left-hover: 3px solid #0fa76e;
  --dir-bull-bg: rgba(24,226,153,0.12);
  --dir-bull-text: #0fa76e;
  --dir-bear-bg: rgba(212,86,86,0.12);
  --dir-bear-text: #d45656;
}

:root[data-skin="stripe"][data-theme="dark"] {
  --page-bg: #0d0d0d;
  --page-bg-alt: #1a1a1a;
  --card: #1a1a1a;
  --card-hover: #222222;
  --text: #ffffff;
  --text-muted: #888888;
  --primary: #18E299;
  --accent: #0fa76e;
  --border: rgba(255,255,255,0.08);
  --up: #18E299;
  --down: #d45656;
  --neutral: #888888;
  --tag-bg: rgba(24,226,153,0.15);
  --shadow-card: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-card-hover: rgba(0,0,0,0.3) 0px 4px 12px;
  --toggle-bg: rgba(255,255,255,0.05);
  --toggle-border: rgba(255,255,255,0.08);
  --toggle-color: #888888;
  --toggle-hover-bg: rgba(24,226,153,0.1);
  --toggle-hover-border: rgba(24,226,153,0.3);
  --focus-ring: 0 0 0 2px #0d0d0d, 0 0 0 4px #18E299;
  --clue-border-left: 3px solid #18E299;
  --clue-border-left-hover: 3px solid #2sf5b0;
  --dir-bull-bg: rgba(24,226,153,0.15);
  --dir-bull-text: #18E299;
  --dir-bear-bg: rgba(212,86,86,0.15);
  --dir-bear-text: #d45656;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}

/* ===== 顶部行情条 ===== */
.ticker-bar {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--page-bg);
  z-index: 100;
  backdrop-filter: blur(12px);
}
.ticker-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-2) 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.logo {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  color: var(--text);
}
.logo .accent { color: var(--primary); }
.ticker-items {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  scrollbar-width: none;
}
.ticker-items::-webkit-scrollbar { display: none; }
.ticker-item { white-space: nowrap; }
.ticker-item .name { color: var(--text-muted); margin-right: 6px; }
.ticker-item .val { font-weight: 600; color: var(--text); }
.ticker-item .pct.up { color: var(--up); }
.ticker-item .pct.down { color: var(--down); }

/* ===== 顶部操作区 ===== */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.skin-toggle, .theme-toggle {
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
  font-family: var(--font-sans);
}
.theme-toggle {
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: var(--toggle-color);
}
.skin-toggle {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--toggle-color);
  gap: 4px;
}
.skin-toggle:hover, .theme-toggle:hover {
  background: var(--toggle-hover-bg);
  border-color: var(--toggle-hover-border);
}
.skin-toggle:focus-visible, .theme-toggle:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.theme-icon-light, .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-icon-light { display: inline; }

/* ===== Dashboard 布局 ===== */
.dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--sp-4) 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "clues watchlist" "macro macro";
  gap: var(--sp-4);
}
.panel-clues { grid-area: clues; }
.panel-watchlist { grid-area: watchlist; }
.panel-macro { grid-area: macro; }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.panel-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--sp-3);
  color: var(--text);
}

/* ===== 投资线索卡片 ===== */
.clue-cards { display: flex; flex-direction: column; gap: 10px; }
.clue-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: var(--clue-border-left);
  border-radius: var(--card-radius);
  padding: var(--sp-3);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-state) var(--ease), border-left-color var(--dur-state) var(--ease);
}
.clue-card:hover {
  border-left-color: var(--clue-border-left-hover);
  box-shadow: var(--shadow-card-hover);
}
.clue-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.clue-priority {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--tag-bg);
  color: var(--primary);
  font-weight: 600;
}
.clue-symbol { font-weight: 600; font-family: var(--font-mono); color: var(--text); }
.clue-market {
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}
.clue-conf { color: var(--primary); font-size: 12px; }
.clue-thesis { font-size: 13px; margin-bottom: var(--sp-2); color: var(--text); line-height: 1.6; }
.clue-meta {
  display: flex;
  gap: var(--sp-3);
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.clue-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* ===== 观察池 ===== */
.watchlist-add {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.input, .select {
  background: var(--page-bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--dur-state) var(--ease);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.input { flex: 1; font-family: var(--font-mono); }
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 6px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: opacity var(--dur-state) var(--ease);
}
.btn-primary:hover { opacity: 0.85; }

.watch-table { width: 100%; }
.watch-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.watch-row:last-child { border-bottom: none; }
.watch-sym { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.watch-price { font-family: var(--font-mono); text-align: right; color: var(--text); }
.watch-pct { font-family: var(--font-mono); text-align: right; min-width: 60px; }
.watch-pct.up { color: var(--up); }
.watch-pct.down { color: var(--down); }
.watch-del {
  background: none;
  border: none;
  color: var(--down);
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
  transition: opacity var(--dur-state) var(--ease);
}
.watch-del:hover { opacity: 1; }

/* ===== 宏观仪表盘 ===== */
.macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.macro-card {
  background: var(--page-bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--sp-3);
  text-align: center;
  transition: border-color var(--dur-state) var(--ease);
}
.macro-card:hover { border-color: var(--primary); }
.macro-name { font-size: 12px; color: var(--text-muted); margin-bottom: var(--sp-1); }
.macro-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.macro-trend { font-size: 16px; margin-top: var(--sp-1); }
.macro-trend.up { color: var(--up); }
.macro-trend.down { color: var(--down); }

/* ===== 加载状态 ===== */
.loading, .empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas: "clues" "watchlist" "macro";
  }
  .ticker-items { font-size: 12px; gap: 12px; }
  .macro-grid { grid-template-columns: repeat(2, 1fr); }
  .skin-toggle { padding: 4px 10px; font-size: 11px; }
  .theme-toggle { width: 32px; height: 32px; font-size: 14px; }
}