/* LOLWiki v2.0 — 量化分析平台样式 · Light Theme */
:root {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f1f5f9;
  --border: #e2e8f0;
  --border-accent: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --accent: #0284c7;
  --accent-glow: rgba(2,132,199,.10);
  --green: #059669;
  --green-bg: rgba(5,150,105,.08);
  --red: #dc2626;
  --red-bg: rgba(220,38,38,.08);
  --amber: #d97706;
  --amber-bg: rgba(217,119,6,.08);
  --purple: #7c3aed;
  --purple-bg: rgba(124,58,237,.08);
  --cyan: #0891b2;
  --code-bg: #f1f5f9;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --scrollbar-track: #e2e8f0;
  --scrollbar-thumb: #94a3b8;
  --font-mono: 'JetBrains Mono','Fira Code','Cascadia Code',Consolas,monospace;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 180ms ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:15px; }
body {
  font-family:var(--font-sans);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.65;
  overflow-x:hidden;
}
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }

/* Layout */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:260px; min-width:260px;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  padding:1.25rem 0;
  position:sticky; top:0; height:100vh;
  overflow-y:auto;
  z-index:100;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.sidebar-header {
  padding:0 1.25rem 1rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.5rem;
}
.sidebar-logo { font-size:1.35rem; font-weight:800; color:var(--accent); letter-spacing:-.02em; }
.sidebar-logo span { color:var(--text-secondary); font-weight:400; font-size:.75rem; display:block; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.sidebar-nav { flex:1; padding:.5rem 0; }
.nav-section { padding:.4rem 1.25rem; }
.nav-section-title {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-muted);
  margin:.6rem 0 .3rem;
}
.nav-link {
  display:block; padding:.4rem .85rem; margin:1px 0;
  border-radius:6px; font-size:.82rem; color:var(--text-secondary);
  text-decoration:none; cursor:pointer;
  transition:all var(--transition);
  border-left:2px solid transparent;
}
.nav-link:hover { color:var(--text-primary); background:var(--bg-elevated); }
.nav-link.active { color:var(--accent); background:var(--accent-glow); border-left-color:var(--accent); font-weight:600; }
.nav-badge {
  display:inline-block; font-size:.6rem; padding:1px 6px; border-radius:10px;
  margin-left:6px; font-weight:700; vertical-align:middle;
  background:var(--accent-glow); color:var(--accent);
}

.main { flex:1; padding:2rem 2.5rem; max-width:960px; }
.hero {
  padding:3rem 0 2rem;
  border-bottom:1px solid var(--border);
  margin-bottom:2rem;
}
.hero h1 { font-size:2.4rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.hero h1 .gradient { background:linear-gradient(135deg,var(--accent),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero .subtitle { color:var(--text-secondary); font-size:.95rem; margin-top:.6rem; }
.hero .badges { margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.badge {
  font-size:.72rem; padding:3px 10px; border-radius:20px;
  font-weight:600; letter-spacing:.03em;
}
.badge-blue { background:var(--accent-glow); color:var(--accent); }
.badge-green { background:var(--green-bg); color:var(--green); }
.badge-purple { background:var(--purple-bg); color:var(--purple); }
.badge-amber { background:var(--amber-bg); color:var(--amber); }

/* Cards */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.card:hover { border-color:var(--border-accent); box-shadow:var(--shadow-md); }
.card-header { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.card-icon { font-size:1.4rem; }
.card-title { font-size:1.15rem; font-weight:700; }
.section { margin:2.5rem 0; }
.section-title {
  font-size:1.55rem; font-weight:800; letter-spacing:-.02em;
  margin-bottom:1.2rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--border);
}
.section-title .num { color:var(--accent); margin-right:.5rem; }

/* Tables */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
th {
  background:var(--bg-elevated); padding:.6rem .75rem; text-align:left;
  font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-secondary); border-bottom:2px solid var(--border);
  white-space:nowrap;
}
td { padding:.5rem .75rem; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(2,132,199,.03); }
td.mono { font-family:var(--font-mono); font-size:.78rem; color:var(--cyan); }

/* Formula / Code */
.formula {
  background:var(--code-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem 1.25rem;
  margin:.75rem 0; overflow-x:auto;
  font-family:var(--font-mono); font-size:.82rem; color:var(--text-primary);
  line-height:1.7;
}
.formula .kw { color:var(--accent); }
.formula .fn { color:var(--purple); }
.formula .num { color:var(--green); }
.formula .op { color:var(--amber); }
code {
  font-family:var(--font-mono); font-size:.85em;
  background:var(--code-bg); padding:1px 5px; border-radius:3px;
  color:var(--accent);
}

/* Factor Grid */
.factor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.factor-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition); cursor:default;
}
.factor-card:hover { border-color:var(--border-accent); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.factor-card .fc-tag { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:4px; display:inline-block; margin-bottom:.5rem; }
.fc-tag.beta { background:var(--purple-bg); color:var(--purple); }
.fc-tag.alpha { background:var(--green-bg); color:var(--green); }
.fc-tag.event { background:var(--amber-bg); color:var(--amber); }
.factor-card .fc-name { font-size:1rem; font-weight:700; margin-bottom:.3rem; }
.factor-card .fc-eq { font-size:.75rem; color:var(--text-secondary); font-family:var(--font-mono); margin-bottom:.4rem; }
.factor-card .fc-desc { font-size:.78rem; color:var(--text-secondary); line-height:1.5; }

/* Flow diagram */
.flow { display:flex; gap:1rem; align-items:stretch; flex-wrap:wrap; margin:1rem 0; }
.flow-step {
  flex:1; min-width:140px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; text-align:center;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.flow-step .fs-num { font-size:.65rem; font-weight:800; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; }
.flow-step .fs-title { font-size:.85rem; font-weight:700; margin:.3rem 0; }
.flow-step .fs-desc { font-size:.72rem; color:var(--text-secondary); }
.flow-arrow { display:flex; align-items:center; color:var(--accent); font-size:1.5rem; min-width:20px; justify-content:center; }

/* Metric cards */
.metric-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; margin:1rem 0; }
.metric-card {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; text-align:center;
  box-shadow:var(--shadow-sm);
}
.metric-card .mc-value { font-size:1.5rem; font-weight:800; font-family:var(--font-mono); }
.metric-card .mc-label { font-size:.7rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-top:.2rem; }
.mc-green { color:var(--green); }
.mc-blue { color:var(--accent); }
.mc-amber { color:var(--amber); }
.mc-red { color:var(--red); }

/* Alerts / Callouts */
.callout {
  border-left:3px solid var(--accent); background:var(--bg-elevated);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:.85rem 1.1rem; margin:.75rem 0; font-size:.85rem;
}
.callout.warn { border-left-color:var(--amber); }
.callout.info { border-left-color:var(--accent); }
.callout.tip { border-left-color:var(--green); }

/* Matrix */
.matrix { display:inline-block; overflow-x:auto; }
.matrix table { font-size:.72rem; }
.matrix th:first-child, .matrix td:first-child { font-weight:700; color:var(--accent); }
.matrix .diag { color:var(--green); font-weight:700; }
.matrix .pos { color:var(--green); }
.matrix .neg { color:var(--red); }
.matrix .zero { color:var(--text-muted); }

/* Responsive */
@media (max-width:900px) {
  .app { flex-direction:column; }
  .sidebar { width:100%; min-width:100%; height:auto; position:relative; padding:.75rem 1rem; box-shadow:none; }
  .sidebar-nav { display:none; }
  .sidebar-nav.open { display:block; }
  .main { padding:1.25rem; }
  .hero h1 { font-size:1.6rem; }
}

/* Print */
@media print {
  .sidebar { display:none; }
  .main { max-width:100%; }
  body { background:#fff; color:#000; }
}

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation:fadeIn .4s ease forwards; }

/* Tabs */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1rem; }
.tab-btn {
  padding:.5rem 1.2rem; background:none; border:none; color:var(--text-muted);
  font-size:.82rem; font-weight:600; cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-2px; transition:all var(--transition);
}
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeIn .3s ease; }

/* Footer */
.footer {
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border);
  color:var(--text-secondary); font-size:.78rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}
.footer a { color:var(--accent); text-decoration:none; }