/**
 * dark-mode.css — carefree.fit 暗色模式
 * 
 * 所有样式严格包裹在 :root[data-theme="dark"] 或 @media (prefers-color-scheme: dark) 内
 * 浅色模式下 ZERO 影响
 */

/* ============================
   手动切换: :root[data-theme="dark"]
   ============================ */

:root[data-theme="dark"] {
  --primary: #7BA896;
  --primary-light: #A4C3B2;
  --primary-dark: #8EC4B0;
  --bg: #0F1923;
  --warm: #162A3A;
  --accent: #1A2F3F;
  --text: #E8EDF2;
  --text-secondary: #9BA8B4;
  --white: #E8EDF2;
  --shadow: 0 2px 15px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
}

:root[data-theme="dark"] body {
  background:
    /* 暗色覆盖层 — 更暗让背景图若隐若现 */
    linear-gradient(180deg, rgba(15,25,35,0.78) 0%, rgba(15,25,35,0.72) 50%, rgba(15,25,35,0.80) 100%),
    radial-gradient(ellipse at 20% 50%, rgba(123,168,150,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(26,47,63,0.15) 0%, transparent 60%),
    /* 背景图 */
    url('../assets/images/photo-starry-sky.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  color: var(--text);
}

:root[data-theme="dark"] ::-webkit-scrollbar { width: 8px; } /* same width as light mode */
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--warm); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A4A5E; border-radius: 4px; }
:root[data-theme="dark"] ::selection { background: rgba(123,168,150,0.3); color: #E8EDF2; }

/* ---- Navbar ---- */
:root[data-theme="dark"] .navbar { background: transparent; border-bottom: none; }
:root[data-theme="dark"] .navbar .navbar__logo { color: #fff; }
:root[data-theme="dark"] .navbar .navbar__logo span { color: var(--primary-light); }
:root[data-theme="dark"] .navbar .navbar__links a { color: rgba(255,255,255,0.85); }
:root[data-theme="dark"] .navbar .navbar__toggle span { background: #fff; }
:root[data-theme="dark"] .navbar.scrolled {
  background: rgba(15,25,35,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .navbar.scrolled .navbar__logo { color: var(--text); }
:root[data-theme="dark"] .navbar.scrolled .navbar__links a { color: var(--text); }
:root[data-theme="dark"] .navbar.scrolled .navbar__links a:hover { color: var(--primary-light); }
:root[data-theme="dark"] .navbar.scrolled .navbar__toggle span { background: var(--text); }

/* ---- Hero ---- */
:root[data-theme="dark"] .hero__title { color: #fff; }
:root[data-theme="dark"] .hero__subtitle { color: rgba(255,255,255,0.85); }

/* ---- Cards ---- */
:root[data-theme="dark"] .card {
  background: rgba(26,47,63,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}
@supports (backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .card {
    background: rgba(26,47,63,0.45);
    backdrop-filter: blur(12px) saturate(0.9);
    -webkit-backdrop-filter: blur(12px) saturate(0.9);
    box-shadow:
      0 2px 15px rgba(0,0,0,0.2),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
}
:root[data-theme="dark"] .card:hover {
  background: rgba(26,47,63,0.60);
  box-shadow: var(--shadow-hover);
  border-color: rgba(123,168,150,0.2);
}
@supports (backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .card:hover {
    backdrop-filter: blur(16px) saturate(0.95);
    -webkit-backdrop-filter: blur(16px) saturate(0.95);
    box-shadow:
      var(--shadow-hover),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
}
:root[data-theme="dark"] .card__tag { background: rgba(123,168,150,0.15); color: var(--primary-light); }

/* ---- CTA ---- */
:root[data-theme="dark"] .cta {
  background: linear-gradient(135deg, rgba(15,25,35,0.30), rgba(15,25,35,0.20));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="dark"] .cta .btn { background: #fff; color: var(--primary); }
:root[data-theme="dark"] .cta .btn:hover { background: var(--accent); color: var(--text); }

/* ---- Article ---- */
:root[data-theme="dark"] .article__quote { background: var(--warm); border-left-color: var(--primary); color: var(--text); }
:root[data-theme="dark"] .article__content a { color: var(--primary-light); }
:root[data-theme="dark"] .article__content a:hover { color: var(--primary); }

/* ---- Buttons ---- */
:root[data-theme="dark"] .btn { background: var(--primary); color: #0F1923; }
:root[data-theme="dark"] .btn:hover { background: var(--primary-light); color: #0F1923; }

/* ---- Forms: glass inputs ---- */
@supports (backdrop-filter: blur(1px)) {
  :root[data-theme="dark"] .form-group input,
  :root[data-theme="dark"] .form-group textarea {
    background: rgba(22,42,58,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
  }
  :root[data-theme="dark"] .form-group input:focus,
  :root[data-theme="dark"] .form-group textarea:focus {
    background: rgba(22,42,58,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--primary);
    box-shadow:
      0 0 0 3px rgba(123,168,150,0.15),
      inset 0 1px 2px rgba(0,0,0,0.1);
  }
}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--warm); color: var(--text); border-color: rgba(255,255,255,0.1);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px rgba(123,168,150,0.2);
}

/* ---- Footer ---- */
:root[data-theme="dark"] .footer {
  background: linear-gradient(180deg, rgba(15,25,35,0.15) 0%, rgba(15,25,35,0.50) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}
:root[data-theme="dark"] .footer__brand h3 { color: #fff; }
:root[data-theme="dark"] .footer__brand p { color: var(--text-secondary); }
:root[data-theme="dark"] .footer__nav h4 { color: #fff; }
:root[data-theme="dark"] .footer__nav a { color: var(--text-secondary); }
:root[data-theme="dark"] .footer__nav a:hover { color: var(--primary-light); }

/* ---- Music Player ---- */
:root[data-theme="dark"] .music-player { background: rgba(15,25,35,0.85); border-top-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .music-player__label { color: var(--text-secondary); }

/* ---- Dividers ---- */
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .divider { border-color: rgba(255,255,255,0.06); }

/* ---- Code ---- */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre { background: #1A2F3F; color: var(--text); }

/* ---- Theme Toggle Button ---- */
.theme-toggle {
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: 8px; font-size: 1.2rem;
  color: rgba(255,255,255,0.85); transition: color 0.3s;
  display: inline-flex; align-items: center;
}
.theme-toggle:hover { color: #fff; }
:root[data-theme="dark"] .navbar.scrolled .theme-toggle { color: var(--text); }

/* ============================
   自动跟随系统
   ============================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #7BA896; --primary-light: #A4C3B2; --primary-dark: #8EC4B0;
    --bg: #0F1923; --warm: #162A3A; --accent: #1A2F3F;
    --text: #E8EDF2; --text-secondary: #9BA8B4; --white: #E8EDF2;
    --shadow: 0 2px 15px rgba(0,0,0,0.3); --shadow-hover: 0 8px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  }
  :root:not([data-theme="light"]) body { background-color: var(--bg); color: var(--text); }
  :root:not([data-theme="light"]) .navbar { background: transparent; border-bottom: none; }
  :root:not([data-theme="light"]) .navbar .navbar__logo { color: #fff; }
  :root:not([data-theme="light"]) .navbar .navbar__logo span { color: var(--primary-light); }
  :root:not([data-theme="light"]) .navbar .navbar__links a { color: rgba(255,255,255,0.85); }
  :root:not([data-theme="light"]) .navbar .navbar__toggle span { background: #fff; }
  :root:not([data-theme="light"]) .navbar.scrolled {
    background: rgba(15,25,35,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 1px 8px rgba(0,0,0,0.4);
  }
  :root:not([data-theme="light"]) .navbar.scrolled .navbar__logo { color: var(--text); }
  :root:not([data-theme="light"]) .navbar.scrolled .navbar__links a { color: var(--text); }
  :root:not([data-theme="light"]) .navbar.scrolled .navbar__toggle span { background: var(--text); }
  :root:not([data-theme="light"]) .card {
    background: rgba(26,47,63,0.45);
    border: 1px solid rgba(255,255,255,0.06);
  }
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .card {
      background: rgba(26,47,63,0.45);
      backdrop-filter: blur(12px) saturate(0.9);
      -webkit-backdrop-filter: blur(12px) saturate(0.9);
      box-shadow: 0 2px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    }
  }
  :root:not([data-theme="light"]) .footer {
    background: linear-gradient(180deg, rgba(15,25,35,0.15) 0%, rgba(15,25,35,0.50) 100%);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  :root:not([data-theme="light"]) .footer__brand h3,
  :root:not([data-theme="light"]) .footer__nav h4 { color: #fff; }
  :root:not([data-theme="light"]) .footer__nav a { color: var(--text-secondary); }

  :root:not([data-theme="light"]) .article__insight {
    background: rgba(107,144,128,0.1); border-color: rgba(107,144,128,0.2);
  }
  :root:not([data-theme="light"]) .insight__check { background: var(--primary); }
    }
      background: rgba(107,144,128,0.15); color: var(--primary-light);
  }
      background: var(--primary); color: #fff;
  }
  :root:not([data-theme="light"]) .back-to-top {
    background: var(--primary-dark); color: #fff;
  }
  :root:not([data-theme="light"]) .back-to-top:hover {
    background: var(--primary-light);
  }

  /* ---- Glass: article elements ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .article__quote {
      background: linear-gradient(135deg, rgba(22,42,58,0.45) 0%, rgba(15,25,35,0.28) 100%);
      backdrop-filter: blur(10px) saturate(0.9);
      -webkit-backdrop-filter: blur(10px) saturate(0.9);
      border: 1px solid rgba(255,255,255,0.06);
      border-left: 4px solid var(--primary);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    :root:not([data-theme="light"]) .article__quote:hover {
      background: linear-gradient(135deg, rgba(22,42,58,0.55) 0%, rgba(15,25,35,0.40) 100%);
      backdrop-filter: blur(14px) saturate(0.95);
      -webkit-backdrop-filter: blur(14px) saturate(0.95);
      box-shadow: 0 6px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    :root:not([data-theme="light"]) .article__reflect {
      background: linear-gradient(135deg, rgba(22,42,58,0.35) 0%, rgba(15,25,35,0.20) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.06);
      border-left: 3px solid var(--primary);
    }
    :root:not([data-theme="light"]) .article__insight {
      background: linear-gradient(135deg, rgba(22,42,58,0.40) 0%, rgba(15,25,35,0.22) 100%);
      backdrop-filter: blur(10px) saturate(0.9);
      -webkit-backdrop-filter: blur(10px) saturate(0.9);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    :root:not([data-theme="light"]) .article__glass-wrap::before {
      background: rgba(15,25,35,0.25);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }
  }
  :root:not([data-theme="light"]) .article__quote {
    background: rgba(107,144,128,0.08);
  }
  :root:not([data-theme="light"]) .article__quote:hover {
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
  }
  :root:not([data-theme="light"]) .quote-copy-btn { opacity: 0.3; }
  :root:not([data-theme="light"]) .article__quote:hover .quote-copy-btn { opacity: 0.8; }
  :root:not([data-theme="light"]) .quote-copied {
    background: rgba(107,144,128,0.15); color: var(--primary-light);
  }

  

  

  

  :root:not([data-theme="light"]) .insight-copy-btn { opacity: 0.3; }
  :root:not([data-theme="light"]) .insight__item:hover .insight-copy-btn { opacity: 0.8; }
  :root:not([data-theme="light"]) .insight__item:hover { background: rgba(107,144,128,0.08); }
  :root:not([data-theme="light"]) .insight-copied {
    background: rgba(107,144,128,0.15); color: var(--primary-light);
  }

  /* ---- Glass: practice ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .practice {
      background: linear-gradient(135deg, rgba(22,42,58,0.28) 0%, rgba(15,25,35,0.12) 100%);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.06);
    }
    :root:not([data-theme="light"]) .practice__step {
      background: rgba(26,47,63,0.35);
      backdrop-filter: blur(8px) saturate(0.9);
      -webkit-backdrop-filter: blur(8px) saturate(0.9);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 2px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    :root:not([data-theme="light"]) .practice__step:hover {
      background: rgba(26,47,63,0.55);
      backdrop-filter: blur(12px) saturate(0.95);
      -webkit-backdrop-filter: blur(12px) saturate(0.95);
      box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
    }
  }

  /* ---- Glass: about cards ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .about__card {
      background: rgba(26,47,63,0.35);
      backdrop-filter: blur(10px) saturate(0.9);
      -webkit-backdrop-filter: blur(10px) saturate(0.9);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    }
  }

  /* ---- Glass: social links ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .social-link {
      background: rgba(26,47,63,0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.08);
    }
    :root:not([data-theme="light"]) .social-link:hover {
      background: rgba(123,168,150,0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
  }

  /* ---- Glass: page nav ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .page-nav a {
      background: rgba(26,47,63,0.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.06);
    }
    :root:not([data-theme="light"]) .page-nav a:hover {
      background: rgba(26,47,63,0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }

  /* ---- Glass: related cards ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .related .card {
      background: rgba(26,47,63,0.30);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.06);
    }
    :root:not([data-theme="light"]) .related .card:hover {
      background: rgba(26,47,63,0.50);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-color: rgba(123,168,150,0.15);
    }
  }

  /* ---- Glass: form inputs ---- */
  @supports (backdrop-filter: blur(1px)) {
    :root:not([data-theme="light"]) .form-group input,
    :root:not([data-theme="light"]) .form-group textarea {
      background: rgba(22,42,58,0.35);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.08);
    }
    :root:not([data-theme="light"]) .form-group input:focus,
    :root:not([data-theme="light"]) .form-group textarea:focus {
      background: rgba(22,42,58,0.55);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 0 0 3px rgba(123,168,150,0.15);
    }
  }

  /* Mobile: safe area */
  @supports (padding: max(0px)) {
    .navbar { padding-left: max(24px, calc(24px + env(safe-area-inset-left))); }
  }

  /* Mobile nav overlay: glass */
  @media (min-width: 769px) {
  body { background-attachment: fixed; }
}

@media (max-width: 768px) {
    @supports (backdrop-filter: blur(1px)) {
      :root:not([data-theme="light"]) .navbar__links {
        background: rgba(15,25,35,0.82);
        backdrop-filter: blur(24px) saturate(0.9);
        -webkit-backdrop-filter: blur(24px) saturate(0.9);
      }
    }
  }

  :root:not([data-theme="light"]) .tts-btn {
    background: rgba(107,144,128,0.12); border-color: rgba(107,144,128,0.2);
  }
  :root:not([data-theme="light"]) .tts-btn:hover {
    background: rgba(107,144,128,0.2);
  }
  :root:not([data-theme="light"]) .tts-btn.playing {
    background: var(--primary);
  }

}