/* Dark mode - toggled via .dark on html */

html.dark {
  --bg: #0b1220;
  --bg-soft: #111827;
  --surface: #111827;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #1f2937;
}
html.dark body { background: var(--bg); color: var(--text); }
html.dark .header { background: rgba(11,18,32,.75); border-bottom-color: var(--border); }
html.dark .nav-links a { color: var(--text); }
html.dark .icon-btn { background: #111827; border-color: var(--border); color: var(--text); }
html.dark .stat-card,
html.dark .feature-card,
html.dark .price-card,
html.dark .blog-card,
html.dark .faq-item,
html.dark .card,
html.dark .guide-item,
html.dark .device-chip { background: #111827; border-color: var(--border); }
html.dark .price-card.popular {
  background:
    linear-gradient(#111827,#111827) padding-box,
    var(--gradient) border-box;
}
html.dark .form-group input,
html.dark .form-group textarea,
html.dark .form-group select {
  background: #0b1220; border-color: var(--border); color: var(--text);
}
html.dark .toc { background: #0b1220; border-color: var(--border); }
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: var(--text); }
html.dark .qty-controls button { background: #111827; color: var(--text); border-color: var(--border); }
html.dark .footer { background: #060a13; }
html.dark .nav-links.open { background: #0b1220; }