/* ============================================================
   LP4 dark scheme — shared shell, 2026-07-28
   Trước đây khối này chỉ nằm inline trong index.html, nên /creator
   không có chế độ Tối: đặt Tối ở trang chủ rồi bấm sang creator là
   rơi về nền sáng chói. Tách ra đây để hai trang bật/tắt cùng một chỗ.

   Màu lấy từ --d-* (tokens-v4.css), khớp .dark của app.
   Nạp SAU khối <style> của trang: chọn lọc `html.ld-dark .x` (0,1,1)
   thắng rule sáng `.x` (0,1,0) bất kể thứ tự, nhưng đặt sau cho chắc
   khi có rule sáng cùng độ đặc hiệu.
   ============================================================ */

html.ld-dark, html.ld-dark body { background: var(--d-bg); color: var(--d-ink-2); }
html.ld-dark h1, html.ld-dark h2, html.ld-dark h3, html.ld-dark h4 { color: var(--d-ink); }

/* ---- Nav ---- */
html.ld-dark .lp4-nav { background: rgba(19,16,25,0.88); border-bottom-color: var(--d-line); }
html.ld-dark .lp4-logo { color: var(--d-primary-soft); }
html.ld-dark .lp4-logo .seg { color: var(--d-ink-3); border-color: var(--d-line-2); }
html.ld-dark .lp4-nav-links a { color: var(--d-ink-2); }
html.ld-dark .lp4-nav-links a:hover { color: var(--d-primary); }
html.ld-dark .lp4-scheme-btn { color: var(--d-ink-2); border-color: var(--d-line-2); }
html.ld-dark .lp4-scheme-btn:hover { color: var(--d-primary); border-color: var(--d-primary); }

/* ---- Buttons (saffron giữ nguyên — ~10:1 trên nền tối) ---- */
html.ld-dark .lp4-btn-ghost { color: var(--d-primary-soft); border-color: var(--d-line-2); }
html.ld-dark .lp4-btn-ghost:hover { background: var(--d-tint-hi); border-color: var(--d-primary); color: var(--d-ink); }
html.ld-dark .lp4-btn-primary { background: var(--d-btn); }
html.ld-dark .lp4-btn-primary:hover { background: var(--d-btn-hover); }
html.ld-dark .lp4-btn-saffron { box-shadow: 0 4px 20px rgba(232,184,62,0.28); }

/* ---- Hero ---- */
html.ld-dark .lp4-hero {
  background:
    radial-gradient(ellipse 55% 45% at 18% 25%, rgba(232,184,62,0.08), transparent 60%),
    radial-gradient(ellipse 50% 55% at 85% 75%, rgba(124,92,230,0.16), transparent 60%),
    var(--d-bg);
}
html.ld-dark .lp4-eyebrow { color: var(--d-primary-soft); background: var(--d-tint); }
html.ld-dark .lp4-hero h1 { color: var(--d-ink); }
html.ld-dark .lp4-hero h1 em { color: var(--d-primary); }
html.ld-dark .lp4-hero h1 em::after { background: rgba(232,184,62,0.30); }
html.ld-dark .lp4-hero-sub { color: var(--d-ink-2); }
html.ld-dark .lp4-hero-trust { border-top-color: var(--d-line); color: var(--d-ink-3); }
html.ld-dark .lp4-hero-trust strong { color: var(--d-ink); }
html.ld-dark .lp4-hero-visual { border-color: var(--d-line); }

/* ---- Device toggle + demo frames (learner) ---- */
html.ld-dark .lp4-device-toggle { background: var(--d-tint); border-color: var(--d-line-2); }
html.ld-dark .ldt-btn { color: var(--d-primary-soft); }
html.ld-dark .ldt-btn:hover { color: var(--d-ink); }
html.ld-dark .ldt-btn.is-active { background: var(--d-btn); color: #fff; }
html.ld-dark .lp4-laptop-screen { border-color: var(--d-line); }

/* ---- Pain ---- */
html.ld-dark .lp4-pain { background: var(--d-bg-2); }
html.ld-dark .lp4-pain-lead p { color: var(--d-ink-2); }
html.ld-dark .lp4-pain-card { background: var(--d-surface); border-color: var(--d-line); }
html.ld-dark .lp4-pain-card:hover { border-color: var(--d-primary); }
html.ld-dark .lp4-pain-card .ico { background: var(--d-tint); color: var(--d-primary-soft); }
html.ld-dark .lp4-pain-card p { color: var(--d-ink-2); }

/* ---- Bridge ---- */
html.ld-dark .lp4-bridge { background: linear-gradient(180deg, var(--d-bg-2) 0%, var(--d-bg) 100%); }
html.ld-dark .lp4-bridge-quote { color: var(--d-ink); }
html.ld-dark .lp4-bridge-quote .accent { color: var(--d-primary); }
html.ld-dark .lp4-bridge-sub { color: var(--d-ink-3); }

/* ---- Section header (shared) ---- */
html.ld-dark .lp4-sec-head .num { color: var(--d-primary); }
html.ld-dark .lp4-sec-head p { color: var(--d-ink-2); }

/* ---- How ---- */
html.ld-dark .lp4-how { background: var(--d-bg-2); }
html.ld-dark .lp4-how-step { background: var(--d-surface); border-color: var(--d-line); }
html.ld-dark .lp4-how-step p { color: var(--d-ink-2); }

/* ---- Pricing ---- */
html.ld-dark .lp4-pricing { background: var(--d-bg); }
html.ld-dark .lp4-tier { background: var(--d-surface); border-color: var(--d-line); }
html.ld-dark .lp4-tier.featured { border-color: var(--d-primary); }
html.ld-dark .lp4-tier-name { color: var(--d-primary-soft); }
html.ld-dark .lp4-tier-price { color: var(--d-ink); }
html.ld-dark .lp4-tier-price .unit { color: var(--d-ink-3); }
html.ld-dark .lp4-tier-desc { color: var(--d-ink-3); }
html.ld-dark .lp4-tier-feats li { color: var(--d-ink-2); }
html.ld-dark .lp4-tier-feats li::before { color: var(--d-primary); }
html.ld-dark .lp4-tier-feats li.dim { color: var(--d-ink-3); }
html.ld-dark .lp4-pricing-foot { color: var(--d-ink-3); }
html.ld-dark .lp4-pricing-foot strong { color: var(--d-ink); }
html.ld-dark .soon { color: var(--d-ink-3); background: var(--d-tint); }

/* ---- Creator: earnings calculator ----
   .lp4-calc-inputs hardcode `background:#fff` và .lp4-calc-breakdown .v dùng
   --stone-800 (nay là màu NỀN tối, không còn là màu chữ) — hai chỗ này phải
   override tường minh, nếu không: thẻ trắng chói + số tiền chìm hẳn vào nền. */
html.ld-dark .lp4-earn { background: var(--d-bg-2); }
html.ld-dark .lp4-calc-inputs { background: var(--d-surface); border-color: var(--d-line); }
html.ld-dark .lp4-calc-field label { color: var(--d-ink-3); }
html.ld-dark .lp4-calc-field input[type=range] { accent-color: var(--d-primary); }
html.ld-dark .lp4-calc-vrow .vv { color: var(--d-primary-soft); }
html.ld-dark .lp4-calc-vrow .vv .cur,
html.ld-dark .lp4-calc-vrow .hint { color: var(--d-ink-3); }
html.ld-dark .lp4-calc-output {
  background: linear-gradient(160deg, rgba(181,118,196,0.14) 0%, rgba(232,184,62,0.12) 130%);
  border-color: var(--d-line-2);
}
html.ld-dark .lp4-calc-tabs { background: rgba(19,16,25,0.5); border-color: var(--d-line-2); }
html.ld-dark .lp4-calc-tab { color: var(--d-ink-3); }
html.ld-dark .lp4-calc-tab.on { background: var(--d-btn); color: #fff; }
html.ld-dark .lp4-calc-revenue { color: var(--d-ink); }
html.ld-dark .lp4-calc-revenue .cur,
html.ld-dark .lp4-calc-revlbl { color: var(--d-ink-3); }
html.ld-dark .lp4-calc-breakdown .k { color: var(--d-ink-3); }
html.ld-dark .lp4-calc-breakdown .v { color: var(--d-ink); }
html.ld-dark .lp4-calc-breakdown .row { border-bottom-color: var(--d-line-2); }
html.ld-dark .lp4-calc-breakdown .row:last-child { border-top-color: var(--d-line-2); }
html.ld-dark .lp4-calc-disclaimer { color: var(--d-ink-3); }

/* ---- Creator: studio dashboard mock ---- */
html.ld-dark .lp4-dash { background: var(--d-bg); }
html.ld-dark .lp4-dash-mock { background: var(--d-surface); border-color: var(--d-line); }
html.ld-dark .lp4-dash-metric { background: var(--d-tint); border-color: var(--d-line-2); }
html.ld-dark .lp4-dash-metric .lab { color: var(--d-ink-3); }
html.ld-dark .lp4-dash-metric .val { color: var(--d-primary-soft); }
html.ld-dark .lp4-dash-bar { background: var(--d-bg-2); border-bottom-color: var(--d-line); }
html.ld-dark .lp4-dash-bar .u { color: var(--d-ink-3); }
html.ld-dark .lp4-dash-chart,
html.ld-dark .lp4-dash-courses { background: var(--d-bg-2); border-color: var(--d-line); }
html.ld-dark .lp4-dash-chart-head .t,
html.ld-dark .lp4-dash-courses-h { color: var(--d-ink); }
html.ld-dark .lp4-dash-course-row { border-top-color: var(--d-line); color: var(--d-ink-3); }
html.ld-dark .lp4-dash-course-row .nm { color: var(--d-ink); }
html.ld-dark .lp4-dash-course-row .mt { color: var(--d-ink-3); }
html.ld-dark .lp4-dash-course-row .pp { color: var(--d-primary-soft); }

/* ---- Glass section giữa trang learner (#competence-map / #path / #ui-rate) ----
   Chỉ tối nền chung quanh + header/desc sang light; panel trắng đặc giữ nguyên
   (nội thất hardcode light — đề xuất panel rgba(30,24,40,.78) còn deferred). */
html.ld-dark section.s { background: rgba(30,24,40,0.55); }
html.ld-dark section.s h2 { color: var(--d-ink); }
html.ld-dark section.s .section-desc { color: var(--d-ink-2); }

@media (prefers-reduced-motion: reduce) {
  html.ld-dark, html.ld-dark body { transition: none; }
}