/**
 * bluey-theme.css — Learning Hub 全局布鲁伊主题
 * 引入后覆盖各页面视觉层，内容/结构不变
 */

/* ── Design tokens ── */
:root {
  --bg: #EEF8FF !important;
  --cream: #EEF8FF !important;
  --paper: #FFFFFF !important;
  --white: #FFFFFF !important;
  --ink: #1E3A4C !important;
  --muted: #6B8FA3 !important;
  --border: #C8E4F5 !important;
  --line: #C8E4F5 !important;
  --orange: #FF7B45 !important;
  --orange-lt: #FFF0E8 !important;
  --orange-d: #C25A1A !important;
  --orange-deep: #C25A1A !important;
  --green: #5DBE5A !important;
  --green-lt: #DFF5DE !important;
  --green-soft: #DFF5DE !important;
  --green-d: #2A7A27 !important;
  --blue: #3AABDE !important;
  --blue-lt: #DCF1FB !important;
  --blue-soft: #DCF1FB !important;
  --purple: #9B72CF !important;
  --purple-lt: #F0E2FF !important;
  --yellow: #FFD449 !important;
  --yellow-lt: #FFF9DC !important;
  --teal: #3ECFBF !important;
  --teal-lt: #DDF6F4 !important;
  --coral: #FF8FA0 !important;
  --coral-lt: #FFE8EE !important;
  --red: #EF476F !important;
  --red-lt: #FFE8EE !important;
  --shadow: 0 4px 0 rgba(30,58,76,0.14), 0 8px 20px rgba(30,58,76,0.08) !important;
  --shadow-lg: 0 6px 0 rgba(30,58,76,0.14), 0 12px 30px rgba(30,58,76,0.10) !important;
  --r: 18px !important;
  --r-sm: 12px !important;
  --r-xs: 8px !important;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: #EEF8FF !important;
  color: #1E3A4C !important;
  font-family: 'Nunito', sans-serif !important;
}

/* Rainbow top strip */
body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  top: 0; left: 0; right: 0 !important;
  height: 5px !important;
  background: repeating-linear-gradient(90deg,
    #FF7B45 0px, #FF7B45 30px,
    #FFD449 30px, #FFD449 60px,
    #5DBE5A 60px, #5DBE5A 90px,
    #3AABDE 90px, #3AABDE 120px,
    #9B72CF 120px, #9B72CF 150px
  ) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

/* ── Header overrides ── */
header {
  padding-top: 34px !important; /* clear rainbow strip */
  border-radius: 0 0 24px 24px !important;
}

/* Make headers feel more Bluey */
header h1 {
  font-family: 'Fredoka One', cursive !important;
  letter-spacing: 0.01em !important;
}

/* ── White card overrides ── */
.white-box,
.panel, .panel-card,
.add-form, .chart-box, .quiz-wrap, .qcard,
.card, .box, .section,
[class*="-card"]:not(.tool-card):not(.entry-card),
[class*="-box"]:not(.plan-box),
[class*="-wrap"]:not(.cal-wrap):not(.chart-svg-wrap):not(.qcard-img) {
  background: #FFFFFF !important;
  border-radius: 18px !important;
}

/* ── Buttons ── */
button, .btn, [class*="save-btn"], [class*="start-btn"],
[class*="next-btn"], [class*="gen-cards-btn"] {
  font-family: 'Fredoka One', cursive !important;
  border-radius: 12px !important;
  transition: transform 0.12s, box-shadow 0.12s !important;
}

/* Primary buttons */
[class*="save-btn"], [class*="start-btn"] {
  background: linear-gradient(135deg, #FF7B45, #FF9F68) !important;
  border: none !important;
  box-shadow: 0 4px 0 #C25A1A !important;
  color: #fff !important;
}
[class*="save-btn"]:hover, [class*="start-btn"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #C25A1A !important;
}
[class*="save-btn"]:active, [class*="start-btn"]:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #C25A1A !important;
}

/* ── Input fields ── */
input[type="text"], input[type="url"], input[type="email"],
input[type="number"], textarea, select, .fi {
  border-radius: 10px !important;
  border: 2px solid #C8E4F5 !important;
  background: #FFFFFF !important;
  color: #1E3A4C !important;
  font-family: 'Nunito', sans-serif !important;
}
input:focus, textarea:focus, select:focus, .fi:focus {
  border-color: #3AABDE !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(58,171,222,0.15) !important;
}

/* ── Stat cards ── */
.stat-card {
  background: #fff !important;
  border-radius: 16px !important;
  border: 2.5px solid #C8E4F5 !important;
  box-shadow: 0 3px 0 #A8D0E8 !important;
}
.stat-num {
  font-family: 'Fredoka One', cursive !important;
}

/* ── Tab nav ── */
.tab-nav, .nav-row {
  background: #fff !important;
  border-radius: 14px !important;
  border: 2px solid #C8E4F5 !important;
  overflow: hidden !important;
}
.tab-btn {
  font-family: 'Fredoka One', cursive !important;
  color: #6B8FA3 !important;
}
.tab-btn.active {
  color: #1E3A4C !important;
  border-bottom-color: #FF7B45 !important;
  background: #FFF0E8 !important;
}

/* ── Calendar ── */
.cal-wrap {
  background: #fff !important;
  border-radius: 18px !important;
  border: 2.5px solid #C8E4F5 !important;
  box-shadow: 0 4px 0 #A8D0E8 !important;
  overflow: hidden !important;
}
.cal-week-hdr {
  background: #DCF1FB !important;
}
.cal-cell:hover { background: #FFF0E8 !important; }
.cal-cell.is-today { outline-color: #FF7B45 !important; }
.cal-cell.checked { background: #DFF5DE !important; }

/* ── Pills & badges ── */
.acc-pill, .hist-tab-btn, .filter-btn, .topic-tab {
  border-radius: 999px !important;
  font-family: 'Fredoka One', cursive !important;
  border-width: 2px !important;
}

/* ── Progress bars ── */
.prog-bar, .meter-track {
  background: #C8E4F5 !important;
  border-radius: 999px !important;
}
.prog-fill, .meter-fill {
  background: linear-gradient(90deg, #FF7B45, #FFD449, #5DBE5A) !important;
}

/* ── Toast ── */
#toast {
  background: #1E3A4C !important;
  border-radius: 999px !important;
  font-family: 'Fredoka One', cursive !important;
}

/* ── History items ── */
.hist-item {
  background: #fff !important;
  border-radius: 14px !important;
  border: 2px solid #C8E4F5 !important;
  box-shadow: 0 2px 0 #A8D0E8 !important;
}
.hist-item:hover { background: #FFF0E8 !important; }

/* ── Step items ── */
.step-item {
  background: #F0F8FF !important;
  border-radius: 12px !important;
  border: 2px solid transparent !important;
}
.step-item:hover { background: #FFF0E8 !important; border-color: #FF7B45 !important; }
.step-item.done { background: #DFF5DE !important; border-color: #5DBE5A !important; }
.step-chk { border-radius: 50% !important; }
.step-item.done .step-chk { background: #5DBE5A !important; border-color: #5DBE5A !important; }

/* ── Word/book cards ── */
.word-card, .book-card {
  border-radius: 16px !important;
  border: 2px solid #C8E4F5 !important;
  box-shadow: 0 3px 0 #A8D0E8 !important;
  background: #fff !important;
}
.word-card:hover, .book-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 0 #A8D0E8 !important;
}

/* ── Book entry (checkin) ── */
.book-entry {
  background: #F0F8FF !important;
  border-radius: 12px !important;
  border: 2px solid #C8E4F5 !important;
}
.book-entry:focus-within { border-color: #3AABDE !important; }

/* ── Plan box ── */
.plan-box {
  border-radius: 14px !important;
  border-width: 2.5px !important;
}
.plan-book {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.8) !important;
}

/* ── Modal ── */
.modal-overlay { backdrop-filter: blur(4px) !important; }
.modal-box {
  border-radius: 24px !important;
  border: 3px solid #C8E4F5 !important;
  box-shadow: 0 8px 0 #A8D0E8, 0 20px 50px rgba(30,58,76,0.2) !important;
}

/* ── Navbar override ── */
.lh-navbar {
  background: rgba(238, 248, 255, 0.95) !important;
  border-bottom: 2.5px solid #C8E4F5 !important;
  backdrop-filter: blur(12px) !important;
}
.lh-tabbar {
  background: rgba(238, 248, 255, 0.95) !important;
  border-top: 2.5px solid #C8E4F5 !important;
  backdrop-filter: blur(12px) !important;
}
.lh-tabbar a.active { color: #FF7B45 !important; }

/* ── Section titles ── */
.section-title, .panel-title, .form-title, .chart-title,
.saved-title, .modal-title {
  font-family: 'Fredoka One', cursive !important;
  color: #1E3A4C !important;
}

/* ── Acc pills active states ── */
.acc-pill.a98 { background: #DFF5DE !important; border-color: #5DBE5A !important; color: #2A7A27 !important; }
.acc-pill.a95 { background: #DDF6F4 !important; border-color: #3ECFBF !important; color: #1A7A73 !important; }
.acc-pill.a90 { background: #FFF9DC !important; border-color: #FFD449 !important; color: #8B6800 !important; }
.acc-pill.a85 { background: #FFE8EE !important; border-color: #EF476F !important; color: #9B1239 !important; }

/* ── Quiz option buttons ── */
.opt {
  border-radius: 14px !important;
  border: 2.5px solid #C8E4F5 !important;
  font-family: 'Nunito', sans-serif !important;
  transition: all 0.12s !important;
}
.opt:hover:not(:disabled) { border-color: #9B72CF !important; background: #F0E2FF !important; }
.opt.correct { border-color: #5DBE5A !important; background: #DFF5DE !important; color: #2A7A27 !important; }
.opt.wrong { border-color: #EF476F !important; background: #FFE8EE !important; color: #9B1239 !important; }

/* ── RR chart elements ── */
.add-form { border: 2.5px solid #C8E4F5 !important; }
.chart-box { border: 2.5px solid #C8E4F5 !important; }
.acc-select .acc-btn {
  border-radius: 999px !important;
  font-family: 'Fredoka One', cursive !important;
}

/* ── Review/wordcard flip card ── */
.quiz-card, .card-inner {
  border-radius: 20px !important;
}

/* ── Badges page ── */
.badge-card {
  border-radius: 18px !important;
  border: 2.5px solid #C8E4F5 !important;
  box-shadow: 0 3px 0 #A8D0E8 !important;
}
.badge-card:hover { transform: translateY(-3px) !important; }

/* ── Library filter buttons ── */
.filter-btn {
  border-radius: 999px !important;
  font-family: 'Fredoka One', cursive !important;
}
.filter-btn.active {
  background: #FF7B45 !important;
  border-color: #C25A1A !important;
  color: #fff !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #EEF8FF; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #C8E4F5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3AABDE; }

/* ── Responsive ── */
@media (max-width: 480px) {
  header { border-radius: 0 0 18px 18px !important; }
}