/* =====================================================================
   v3-inner.css — re-themes the inner pages (safety, academy, dashboard,
   bot setup …) to the NEW version's design language: cream canvas,
   serif display headings, plum/rose accents, soft 18px cards.
   It only overrides colour / type / shape — never layout — so the
   existing page scripts keep working. Loaded AFTER each page's inline
   <style>, so equal-specificity rules here win.
   ===================================================================== */

:root {
  --ink: #2b2035;
  --muted: #726d79;
  --plum: #51265d;
  --plum-mid: #6d3979;
  --rose: #db6683;
  --rose-deep: #b75c82;
  --line: #eee8ed;
  --canvas: #fffdfb;
  --cream: #fffaf7;
  --display: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Vazirmatn", Tahoma, Arial, sans-serif;
  --shadow-s: 0 8px 20px rgba(101, 52, 117, .10);
  --shadow-m: 0 14px 32px rgba(105, 60, 90, .10);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--canvas) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 14.5px;
  line-height: 1.75 !important;
}

/* ---- headings ---- */
h1, h2, h3, .hero-title, .page-title {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  letter-spacing: -.5px !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
}
h1 { font-size: clamp(27px, 3.2vw, 42px) !important; }
h2 { font-size: clamp(21px, 2.4vw, 30px) !important; }
h3 { font-size: clamp(16px, 1.6vw, 20px) !important; }
p, li, label, .small, small { color: var(--muted); }
strong, b { color: var(--ink); }

/* ---- top bar: dark → cream, like the new version ---- */
header {
  background: rgba(255, 253, 251, .97) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(105, 60, 90, .04);
  backdrop-filter: blur(8px);
}
header, header * { color: var(--ink) !important; }
header a { font-weight: 700; font-size: 12px; color: #61586a !important; }
header a:hover { color: var(--rose) !important; }
header .logo, header .logo span { color: #3b2645 !important; font-weight: 800; }
header svg { color: var(--plum-mid) !important; }
.header-inner, .menu-container, nav .container { max-width: 1180px; }

/* ---- hero bands / SOS banners ---- */
.sos-banner, .hero, .page-hero, .banner {
  background: linear-gradient(140deg, #4b2158 0%, #7a3168 55%, #a4486b 100%) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 52px rgba(80, 30, 80, .22) !important;
}
.sos-banner *, .hero *, .page-hero *, .banner * { color: #fff !important; }
.sos-banner h1, .sos-banner h2, .hero h1, .hero h2, .page-hero h1, .page-hero h2 { color: #fff !important; }
.sos-banner p, .hero p, .page-hero p { color: #f0e2ee !important; }

/* ---- cards ---- */
.card, .panel, .box, .tile, .tool-card, .lesson-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-s) !important;
  color: var(--ink) !important;
}
.card:hover, .lesson-card:hover, .tool-card:hover { box-shadow: var(--shadow-m) !important; }
.card h2, .card h3 { color: var(--plum) !important; }

/* ---- buttons ---- */
.btn-purple, .btn-primary, .btn-main, .sos-btn, button.btn-purple {
  background: var(--plum-mid) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-height: 42px;
  padding-inline: 18px;
  box-shadow: var(--shadow-s) !important;
  transition: transform .18s, background .18s;
}
.btn-purple:hover, .btn-primary:hover, .sos-btn:hover { background: #542862 !important; transform: translateY(-1px); }
.btn-secondary, .btn-ghost, .sos-safe-btn {
  background: #fffdfc !important;
  color: #61416a !important;
  border: 1px solid #e5d5df !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.btn-secondary:hover, .sos-safe-btn:hover { background: #fff6f8 !important; }

/* ---- forms ---- */
input, textarea, select {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(219, 102, 131, .35); outline-offset: 1px; }

/* ---- misc chrome ---- */
.sos-btn, .badge, .pill, .tag { letter-spacing: .2px; }
.timer-digits { font-family: var(--display) !important; color: var(--plum) !important; }
footer, .footer {
  background: var(--cream) !important;
  border-top: 1px solid var(--line) !important;
  color: #8d8290 !important;
}
footer *, .footer * { color: #8d8290 !important; }
.container { max-width: 1180px; }
a { color: var(--plum); }
a:hover { color: var(--rose-deep); }

/* keep the offline badge / floating button above everything */
.off-badge, .off-fab { z-index: 9998; }

/* ---- legacy accent gradients (education / academy cards etc.) ---- */
.card-icon, .card-header, .lesson-icon, .icon-band, [class*="gradient"] {
  background: linear-gradient(135deg, #6d3979 0%, #a4486b 100%) !important;
  color: #fff !important;
}
:root { --gradient: linear-gradient(135deg, #6d3979 0%, #a4486b 100%); }

/* legacy badges keep their meaning but with the new palette */
.badge, .tag, .pill, [class*="badge-"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
}

/* legacy dark bars inside inner pages → cream card look */
.menu-bar, .top-bar, .subheader {
  background: #fff !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
.menu-bar *, .top-bar *, .subheader * { color: var(--ink) !important; }

/* heading accents that used to be red/orange */
h1 span, h2 span, .section-title span { color: var(--rose-deep) !important; }
.sos-banner h1 span, .sos-banner h2 span, .hero h1 span, .hero h2 span { color: #ffc0d2 !important; }