:root{
  /* The Inner Compass palette (soft slate + warm gold) */
  --bg1:#f1f5f9;       /* slate-100 */
  --bg2:#f8fafc;       /* slate-50 */
  --card: rgba(255,255,255,0.72);
  --cardBorder: rgba(148,163,184,0.28);
  --text:#1e293b;
  --muted:#475569;
  --accent:#d4af7f;
  --accent2:#b28c60;
  --shadow: 0 18px 55px rgba(15,23,42,0.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(212,175,127,0.18), transparent 62%),
    radial-gradient(900px 600px at 90% 20%, rgba(178,140,96,0.12), transparent 62%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}

/* Common glass card look */
.card, .main-card, .nav-container, .app-header, .category-header{
  background: var(--card) !important;
  border: 1px solid var(--cardBorder) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(14px);
}

/* Improve top controls readability on any background */
.header-controls{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(62,47,28,0.10);
  padding: 10px 12px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

.control-btn{
  color: var(--text) !important;
  background: rgba(255,255,255,0.84) !important;
  border: 1px solid rgba(62,47,28,0.12) !important;
  font-weight: 600 !important;
}

.control-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.96) !important;
}

/* Buttons */
button, .btn{
  font-family: inherit;
}

.btn-primary, .primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color:#fff !important;
}
.btn-secondary, .secondary{
  background: rgba(62,47,28,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(62,47,28,0.10) !important;
}

/* Links */
a{color: var(--accent2)}

/* Make common headings readable on lighter theme */
.logo, .subtitle, .header, h1, h2, h3, .phase-title{
  color: var(--text) !important;
  -webkit-text-fill-color: unset !important;
  text-shadow: none !important;
}

.phase-title{
  background: none !important;
}

.method-tag{
  color: var(--text) !important;
  background: rgba(212,175,127,0.18) !important;
  border: 1px solid rgba(212,175,127,0.30) !important;
}

.main-card, .card{
  color: var(--text) !important;
}

p, .phase-description{ color: var(--muted) !important; }


/* --- Visibility & Contrast Fixes --- */

/* Force a light background even if a page has inline dark styles */
body{
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(212,175,127,0.18), transparent 62%),
    radial-gradient(900px 600px at 90% 20%, rgba(178,140,96,0.12), transparent 62%),
    linear-gradient(180deg, var(--bg2), var(--bg1)) !important;
  color: var(--text) !important;
}

/* Make sure text is readable even if some pages set opacity/transparent colors */
h1,h2,h3,h4,h5,h6,p,li,span,small,label,input,textarea,select{
  color: inherit;
}
p,li,span,label,small{
  opacity: 1 !important;
}
.muted,.small-muted,.subtitle,.hint,.help{
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Common containers: force light surfaces */
.card,.glass,.panel,.box,.section,.content,.container,.wrap,.step,.exercise-card,.app-container,.app-container > .card,.app-container > .section{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  color: var(--text) !important;
}

/* Header controls on exercise pages */
.header-controls, .top-controls, .headerBar, .topbar-controls{
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  backdrop-filter: blur(8px);
}
.control-btn, .linkbtn{
  color: var(--text) !important;
}
.control-btn{
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
}

/* Ensure overlay layers don't hide text */
.overlay, .bg-overlay{
  background: transparent !important;
}


/* Force exercise text to be readable even if original page CSS set it to white */
.app-container .header,
.app-container .subtitle,
.app-container .phase-description,
.app-container .guidance-text,
.app-container .method-tag,
.app-container .timer-display,
.app-container .music-controls,
.app-container .phase-title,
.app-container .completion-section,
.app-container .reflection-area,
.app-container .instructions,
.app-container .content{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}


/* Reduce dark overlays defined in some exercise pages */
body::before{opacity:0.22 !important;}

/* If an exercise still uses a dark theme, kill the dark overlay completely */
body::before{opacity:0 !important;}

/* Force light surfaces for common “card” classes used by older exercises (1–10) */
.app-container .main-card,
.app-container .phase-card,
.app-container .phase-content,
.app-container .step-card,
.app-container .exercise-section,
.app-container .section-card,
.app-container .content-card,
.app-container .timer-section,
.app-container .music-section,
.app-container .music-controls,
.app-container .audio-controls,
.app-container .instructions-card,
.app-container .reflection-card,
.app-container .reflection-area,
.app-container .completion-section,
.app-container .question-card,
.app-container .insight-section,
.app-container .results-container{
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  color: var(--text) !important;
}

/* Ultra-safe text contrast inside older exercises */
.app-container .main-card h1,
.app-container .main-card h2,
.app-container .main-card h3,
.app-container .main-card h4,
.app-container .main-card p,
.app-container .main-card li,
.app-container .main-card span,
.app-container .main-card label,
.app-container .main-card small{
  color: var(--text) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--text) !important;
}
.app-container .main-card .subtitle,
.app-container .main-card .phase-description,
.app-container .main-card .muted,
.app-container .main-card .hint,
.app-container .main-card .help{
  color: var(--muted) !important;
}

/* Some Canva exports wrap content in generic blocks: make them readable */
.app-container section,
.app-container article{
  color: var(--text) !important;
}

/* Ensure gradient/transparent title text remains readable */
h1,h2,h3,.title,.exercise-title,.phase-title{background:none !important;-webkit-text-fill-color: var(--text) !important;}


/* Extra: enforce readable text in common exercise blocks */
.app-container, .main-card, .intro-section, .question-card, .insight-section, .results-container, .completion-section,
.test-container, .exercise-container, .content-card, .reflection-card, .reflection-area, .instructions, .science-info{
  color: var(--text) !important;
}
.app-container p, .main-card p, .intro-section p, .science-info p, .question-card p, .insight-section p, .results-container p,
.app-container .subtitle, .app-container .meta, .app-container .hint, .app-container .help, .app-container .description,
.main-card .subtitle, .main-card .meta, .main-card .hint, .main-card .help, .main-card .description{
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* --- HARD OVERRIDES for remaining dark inline styles (some Canva exports) --- */
/* If a page uses inline dark backgrounds, force them to a light surface */
[style*="background:#0"],
[style*="background: #0"],
[style*="background-color:#0"],
[style*="background-color: #0"],
[style*="rgba(0,0,0"],
[style*="rgb(0,"]{
  background: rgba(255,255,255,0.92) !important;
  color: var(--text) !important;
  border-color: rgba(15,23,42,0.10) !important;
}

/* If a page uses inline white/transparent text, force readable text */
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:white"],
[style*="color: white"],
[style*="color: rgba(255,255,255"],
[style*="color:rgba(255,255,255"]{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}


/* Typography */
.font-display{font-family:'Cormorant Garamond', Georgia, serif;}
.font-body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
h1,h2,h3,.logo{font-family:'Cormorant Garamond', Georgia, serif; letter-spacing:-.01em;}