/* ============================================================
   灵策智算 LynxceAI — 暗色模式
   dark-mode.css
   - 完整的暗色主题 CSS
   - 通过 .dark-mode class 切换
   - 配合 JS 自动检测系统偏好
   ============================================================ */

/* ---- System preference auto-apply ---- */
@media (prefers-color-scheme: dark){
  :root{ --dm-bg:#0d0f17; --dm-bg-2:#11131f; --dm-bg-pale:#171a2a; --dm-ink:#e6e8f0; --dm-ink-2:#b0b6cc; --dm-muted:#7a82a0; --dm-faint:#5a6280; --dm-line:#1e2238; --dm-line-2:#262b45; --dm-card:#131625; --dm-dark:#080a12; --dm-dark-2:#0c0e1a; }
}

/* ---- 暗色变量 ---- */
.dark-mode {
  --bg: #0d0f17;
  --bg-2: #11131f;
  --bg-pale: #171a2a;
  --ink: #e6e8f0;
  --ink-2: #b0b6cc;
  --muted: #7a82a0;
  --faint: #5a6280;
  --line: #1e2238;
  --line-2: #262b45;
  --card: #131625;
  --ink-dark: #080a12;
  --ink-dark-2: #0c0e1a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.25);
  --shadow-glow: 0 24px 70px rgba(99,102,241,.15);

  --grad-soft: linear-gradient(135deg,rgba(123,97,255,.18),rgba(59,130,246,.14) 55%,rgba(34,211,238,.14));
}

/* ---- Dark mode tweaks ---- */

/* Nav */
.dark-mode nav {
  background: rgba(13,15,23,.82);
}
.dark-mode nav.scrolled {
  background: rgba(13,15,23,.92);
  border-bottom-color: var(--line);
}

/* Hero */
.dark-mode .hero-bg .grid {
  background-image:
    linear-gradient(rgba(100,120,220,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,120,220,.06) 1px, transparent 1px);
}

/* Trust strip */
.dark-mode .trust {
  background: var(--bg-2);
}

/* Buttons */
.dark-mode .btn-ghost {
  background: var(--bg-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}
.dark-mode .btn-ghost:hover {
  border-color: color-mix(in srgb, var(--b1) 50%, var(--line-2));
  color: var(--b1);
}

/* Cards */
.dark-mode .vcard {
  background: var(--card);
}
.dark-mode .vcard:hover {
  border-color: color-mix(in srgb, var(--b1) 35%, var(--line));
}

/* Feature cells */
.dark-mode .fcell {
  background: var(--card);
}

/* Download section */
.dark-mode #download {
  background: var(--bg-2);
}
.dark-mode .dlcard {
  background: var(--card);
}
.dark-mode .dlcol-head .os {
  background: var(--bg-pale);
  border-color: var(--line);
  color: var(--ink);
}
.dark-mode .dlbtn {
  background: var(--bg-pale);
  border-color: var(--line-2);
  color: var(--muted);
}
.dark-mode .dlbtn-ghost {
  background: var(--bg-2);
  color: var(--ink-2);
}
.dark-mode .chip-help,
.dark-mode .macos-help {
  background: var(--bg-pale);
  border-color: var(--line);
  color: var(--ink-2);
}
.dark-mode .macos-help code {
  background: #0a0c14;
}

/* Modal */
.dark-mode .dlmodal-card {
  background: var(--bg-2);
}
.dark-mode .dlmodal-logo {
  border-color: var(--line);
}
.dark-mode .dlmodal-x {
  background: var(--bg-pale);
  border-color: var(--line);
}
.dark-mode .dlmodal-x:hover {
  background: var(--bg-2);
  border-color: var(--line-2);
}

/* Blog */
.dark-mode .blog-card {
  background: var(--card);
}
.dark-mode .cat-tab {
  background: var(--bg-2);
  border-color: var(--line-2);
  color: var(--ink-2);
}

/* Changelog */
.dark-mode .cl-item {
  background: var(--card);
}
.dark-mode .cl-badge.req {
  background: rgba(212,56,13,.15);
  border-color: rgba(255,214,210,.2);
  color: #ff7a4a;
}
.dark-mode .cl-badge.beta {
  background: rgba(114,46,209,.15);
  border-color: rgba(239,219,255,.2);
  color: #b37feb;
}
.dark-mode .cl-plat {
  background: var(--bg-pale);
  border-color: var(--line);
  color: var(--ink-2);
}

/* Docs */
.dark-mode .docs-callout {
  background: var(--bg-pale);
  border-color: var(--line);
}
.dark-mode .docs-faq {
  border-color: var(--line);
}
.dark-mode .docs-faq details {
  border-color: var(--line);
}
.dark-mode .docs-faq summary {
  color: var(--ink);
}
.dark-mode .man-bar {
  background: rgba(13,15,23,.9);
}

/* Drawer */
.dark-mode .navdrawer-panel {
  background: var(--card);
}
.dark-mode .navdrawer-links a {
  border-bottom-color: var(--line);
}
.dark-mode .navdrawer-x:hover {
  background: var(--bg-pale);
}

/* Video preview */
.dark-mode .vid-preview-strip {
  background: rgba(8,10,18,.75);
  backdrop-filter: blur(8px);
}
.dark-mode .vps-label {
  color: var(--muted);
}
.dark-mode .vps-thumb {
  border-color: var(--line-2);
}

/* Scrollbar for dark mode */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg);
}
.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}
.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Code blocks */
.dark-mode pre,
.dark-mode code {
  color: #cfe3ff;
}
.dark-mode .content pre {
  background: #0a0c14;
}
.dark-mode .content blockquote {
  background: var(--bg-pale);
  border-left-color: var(--b2);
  color: var(--muted);
}

/* Tables */
.dark-mode .content th {
  background: var(--bg-pale);
  color: var(--ink);
}
.dark-mode .content td,
.dark-mode .content th {
  border-color: var(--line-2);
}

/* Selection */
.dark-mode ::selection {
  background: rgba(123,97,255,.3);
}