/* ==========================================================================
   Read4Me AI - Modern Multi-Theme System & Component Styles
   4 Themes: Warm Editorial | Cyber Slate | Ocean Breeze | Forest Zen
   ========================================================================== */

:root,
[data-theme="editorial"] {
  --theme-name: "暖阳社论 · Warm Editorial";
  --bg-primary: #FAF6F0;
  --bg-secondary: #F2ECE1;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFCF9;
  --bg-audio: #F7F2E9;
  --text-primary: #1F1A17;
  --text-secondary: #5C5346;
  --text-muted: #8C8273;
  --accent: #D95D39;
  --accent-hover: #BF4B28;
  --accent-soft: rgba(217, 93, 57, 0.12);
  --border-color: #E6DEC8;
  --shadow-card: 0 10px 30px -10px rgba(31, 26, 23, 0.07);
  --shadow-hover: 0 18px 36px -12px rgba(217, 93, 57, 0.15);
  --badge-bg: #EFE7DA;
}

[data-theme="cyber"] {
  --theme-name: "暗夜极客 · Cyber Slate";
  --bg-primary: #0B0F19;
  --bg-secondary: #131B2E;
  --bg-card: #161F33;
  --bg-card-hover: #1C2740;
  --bg-audio: #0F1626;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent: #38BDF8;
  --accent-hover: #0EA5E9;
  --accent-soft: rgba(56, 189, 248, 0.15);
  --border-color: #26334D;
  --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 18px 40px -10px rgba(56, 189, 248, 0.22);
  --badge-bg: #1E293B;
}

[data-theme="ocean"] {
  --theme-name: "蔚蓝海风 · Ocean Breeze";
  --bg-primary: #F0F7FF;
  --bg-secondary: #E0EFFE;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FBFF;
  --bg-audio: #EDF5FF;
  --text-primary: #0C2340;
  --text-secondary: #3B5B82;
  --text-muted: #6E8CA8;
  --accent: #0284C7;
  --accent-hover: #0369A1;
  --accent-soft: rgba(2, 132, 199, 0.12);
  --border-color: #CBE2FA;
  --shadow-card: 0 10px 30px -10px rgba(2, 132, 199, 0.08);
  --shadow-hover: 0 18px 36px -12px rgba(2, 132, 199, 0.18);
  --badge-bg: #E1F0FF;
}

[data-theme="forest"] {
  --theme-name: "森系禅意 · Forest Zen";
  --bg-primary: #F2F6F3;
  --bg-secondary: #E3ECE6;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9FCFA;
  --bg-audio: #EBF2EE;
  --text-primary: #162A22;
  --text-secondary: #435E52;
  --text-muted: #738F82;
  --accent: #2D6A4F;
  --accent-hover: #1B4332;
  --accent-soft: rgba(45, 106, 79, 0.13);
  --border-color: #CDE0D5;
  --shadow-card: 0 10px 30px -10px rgba(22, 42, 34, 0.07);
  --shadow-hover: 0 18px 36px -12px rgba(45, 106, 79, 0.16);
  --badge-bg: #DFECE4;
}

/* Base Styles */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

.font-serif-title {
  font-family: 'Noto Serif SC', 'Inter', serif;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Theme Utilities */
.theme-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-card:hover {
  background-color: var(--bg-card-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.theme-surface {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.theme-audio-box {
  background-color: var(--bg-audio);
  border: 1px solid var(--border-color);
}

.theme-btn-primary {
  background-color: var(--accent);
  color: #FFFFFF;
  transition: all 0.2s ease;
}

.theme-btn-primary:hover:not(:disabled) {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

.theme-btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.theme-badge {
  background-color: var(--badge-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.theme-accent-text {
  color: var(--accent);
}

.theme-accent-bg-soft {
  background-color: var(--accent-soft);
  color: var(--accent);
}

/* 3-line progressive truncation */
.article-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom Audio Slider */
input[type="range"].audio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border-color);
  outline: none;
  cursor: pointer;
}

input[type="range"].audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: transform 0.15s ease;
}

input[type="range"].audio-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Sound Wave Animation */
@keyframes soundWave {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}
.wave-bar {
  width: 3px;
  background-color: var(--accent);
  border-radius: 999px;
  display: inline-block;
  height: 4px;
  transition: height 0.2s ease;
}
.playing .wave-bar:nth-child(1) { animation: soundWave 0.7s infinite ease-in-out 0.1s; }
.playing .wave-bar:nth-child(2) { animation: soundWave 0.7s infinite ease-in-out 0.25s; }
.playing .wave-bar:nth-child(3) { animation: soundWave 0.7s infinite ease-in-out 0.4s; }
.playing .wave-bar:nth-child(4) { animation: soundWave 0.7s infinite ease-in-out 0.15s; }

.theme-dot-btn.active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transform: scale(1.08);
}