:root{
  /* Pastel palette */
  --cream:#FBFFBF;
  --mint:#D2FFC5;
  --butter:#FFF6D9;
  --sand:#FEEBC6;
  --Pink:#FFDADA;
  --aqua:#DAFFFD;
  --Lime:#f9c0b6;
  --blush:#FDCEE0;
  --orchid:#F4D1FF;
  --bubble:#FEDBF4;
  --periw:#DDDEF6;

  /* Theme variables (changed by theme switch) */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#FFF6D9;
  --text:#121212;
  --muted:rgba(18,18,18,.66);
  --line:rgba(18,18,18,.14);
  --accent:var(--aqua);

  --radius:18px;
  --radius2:24px;
  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --detailHeroH:180px;
}

/* Flat only. No shadows. */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

.app{max-width:1180px;margin:0 auto;padding:16px 14px 96px}

.topbar{
  position:sticky;top:0;z-index:10;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:12px 0 10px;
}
.toprow{display:flex;align-items:center;gap:12px}
/* Fix: keep Theme button outside the search field to avoid overlap */
.toprow{flex-wrap:wrap}
#themeBtn{white-space:nowrap}
@media (max-width: 640px){
  .brand{min-width:0;flex:1 1 100%}
  .search{flex:1 1 100%}
  #themeBtn{flex:0 0 auto;margin-left:auto}
}

.brand{display:flex;align-items:center;gap:10px;min-width:240px}
.logo{width:38px;height:38px;border-radius:14px;background:var(--accent);border:1px solid var(--line)}
.brand h1{font-size:16px;margin:0;letter-spacing:.2px}
.brand p{margin:0;font-size:12px;color:var(--muted)}

.search{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--line);
}
.search input{width:100%;background:transparent;border:0;outline:none;color:var(--text);font-size:14px}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);font-size:13px;cursor:pointer;user-select:none;
}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);border:1px solid rgba(18,18,18,.10)}

.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px;grid-template-areas:"audio" "med"}
@media (min-width: 980px){ .grid{grid-template-columns: 1.1fr .9fr; grid-template-areas:"med audio"} 
/* Layout order: show Audio first on mobile, keep Meditations left on desktop */
#meditationsSection{grid-area:med}
#audioSection{grid-area:audio}
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  overflow:hidden;
}
.hd{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--line);
  background:var(--surface2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.hd h2{margin:0;font-size:15px;letter-spacing:.2px}
.sub{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35;max-width:78ch}
.bd{padding:14px}

.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.row.first{margin-top:0}

.btn{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:999px;
  padding:11px 14px;
  font-size:13px;
  cursor:pointer;
}
.btn:hover{background:rgba(18,18,18,.04)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent)}
.btn.ok{background:var(--mint)}
.btn.soft{background:var(--butter)}
.btn.warn{background:var(--sand)}
.btn.Lime{background:var(--Lime)}
.btn.periw{background:var(--periw)}

.select{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:999px;
  padding:10px 12px;
  font-size:13px;
  outline:none;
  min-width: 220px;
  max-width: 100%;
}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  background:var(--surface2);
  border:1px solid var(--line);
  font-size:12px;color:rgba(18,18,18,.76);
}
.lamp{width:14px;height:14px;border-radius:50%;border:1px solid rgba(18,18,18,.10);display:inline-block;margin-right:8px}
/* Timer lamp states */
#timerLamp.state-ready{background-color:#e53935 !important;box-shadow:0 0 10px rgba(229,57,53,.85) !important;}
#timerLamp.state-running{background-color:#43a047 !important;box-shadow:0 0 12px rgba(67,160,71,.90) !important;}


.two{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 760px){ .two{grid-template-columns: 1fr 1fr} }

.bigtime{font-size:42px;letter-spacing:1px;font-weight:900;line-height:1}
.slider{
  width:100%;
  appearance:none;height:10px;border-radius:999px;
  background:var(--periw);
  border:1px solid var(--line);
  outline:none;
}
.slider::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);
  border:1px solid rgba(18,18,18,.22);
}

/* Categories */
.cats{display:flex;flex-wrap:wrap;gap:10px}
.catbtn{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:999px;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
}
.catbtn.active{background:var(--accent)}

/* Cards grid */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}
@media (min-width: 760px){ .cards{grid-template-columns:1fr 1fr} }
@media (min-width: 1060px){ .cards{grid-template-columns:1fr 1fr 1fr} }

.xcard{
  position:relative;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:var(--surface);
  cursor:pointer;
}
.ximg{
  width:100%;
  height:140px;
  background:var(--surface2);
  border-bottom:1px solid var(--line);
}
.ximg img{width:100%;height:100%;object-fit:cover;display:block}

.bm{
  position:absolute;top:10px;right:10px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  cursor:pointer;
}
.bm.on{background:var(--mint)}

.xbody{padding:12px}
.xtitle{margin:0;font-size:13px;font-weight:900}
.xmeta{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35}
.xtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{font-size:11px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:rgba(18,18,18,.72)}

/* Detail */
.detail{
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:var(--surface);
}
.detailTop{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:12px;background:var(--surface2);border-bottom:1px solid var(--line)
}
.detailTop h3{margin:0;font-size:14px}
.detailBody{padding:12px}
.textBox{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface2);
  padding:12px;
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
}

/* Audio panels */
.playerBox{
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface2);
  padding:12px;
}
.playerTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.playerTitle .name{font-size:13px;font-weight:900}
.playerTitle .hint{font-size:12px;color:var(--muted)}
.playerControls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.vol{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.vol label{font-size:12px;color:var(--muted)}
.time{font-size:12px;color:var(--muted);margin-top:10px}

/* Bottom nav */
.bottom{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:10px 12px 14px;
  z-index:20;
}
.nav{
  max-width:600px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.navbtn{
  flex:1;
  text-align:center;
  padding:10px 8px;
  border-radius:18px;
  color:rgba(18,18,18,.70);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.navbtn.active{
  color:rgba(18,18,18,.92);
  background:var(--accent);
  border-color:var(--line);
}
.navbtn small{
  display:block;
  margin-top:4px;
  font-size:11px;
}

@media (max-width: 420px){
  .nav{gap:8px}
  .navbtn{padding:8px 6px;border-radius:16px;font-size:11px}
  .navbtn small{font-size:9px}
}

/* Expanded setup under each meditation card */
.expand{
  display:none;
  border-top:1px solid var(--line);
  background:var(--surface2);
  padding:12px;
}
.xcard.expanded .expand{display:block}
.expandTitle{font-size:12px;font-weight:900;margin:0 0 8px}
.expandText{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  padding:12px;
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
}
.expandControls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.miniLabel{font-size:12px;color:var(--muted)}

/* UI cleanup: hide TTS buttons (keep scripts for future use) */
#ttsPlay, #ttsPause, #ttsStop { display:none !important; }
/* Legacy inline TTS buttons (if any remain) */
[data-tts] { display:none !important; }

/* Mobile: reduce image dominance + faster scanning */
@media (max-width: 640px){
  /* Make meditation cards more text-first */
  .cards .xcard{display:flex;align-items:stretch}
  .cards .ximg{
    width:92px;min-width:92px;
    height:92px;
    border-bottom:0;
    border-right:1px solid var(--line);
  }
  .cards .ximg img{object-fit:cover}
  .cards .xbody{padding:10px;flex:1}
  .cards .xtags{display:none}
  .cards .xmeta{margin-top:4px}
  .cards .bm{top:8px;right:8px;padding:7px 9px}

  /* Detail hero image smaller on phones (more room for text) */
  :root{ --detailHeroH:80px; }

  /* IMPORTANT: remove fixed hero frame height on mobile so description is visible */
  #detail .detailBody .ximg{height:auto !important;}
  #detail .detailBody .ximg img{
    height:auto !important;
    max-height:80px;
    object-fit:contain;
  }
}

/* Subtle "look here" pulse for the Start button after selecting a topic */
@keyframes mhPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.focusPulse{animation:mhPulse 1.2s ease-in-out 0s 2}


/* Require selecting a topic before showing Timer + Audio */
body.needsTopic .requiresTopic{display:none !important;}
/* In the Topic Modal we always show session UI even if body is in needsTopic state */
.topicModalOverlay.open .requiresTopic{display:block !important;}

body.hasTopic .requiresTopic{display:block !important;}
.navbtn.disabled{opacity:.45;pointer-events:none;}

body.modalOpen{overflow:hidden;}
.paywallOverlay, .topicModalOverlay{overflow:auto;}
.paywallBody{max-height:calc(100vh - 40px);}
.topicModal{max-height:calc(100vh - 36px);}



/* ---------- SUBSCRIPTION PAYWALL ---------- */
.paywallOverlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(18,18,18,.22);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:18px 14px;
}
.paywallOverlay.show{display:flex}
.paywallSheet{
  width:min(720px, 100%);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:var(--surface);
}
.paywallHead{
  padding:14px 14px 12px;
  background:var(--surface2);
  border-bottom:1px solid var(--line);
}
.paywallHead h3{margin:0;font-size:16px;letter-spacing:.2px}
.paywallHead p{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.4}
.paywallBody{padding:14px}
.planGrid{display:grid;gap:12px}
@media (min-width: 680px){ .planGrid{grid-template-columns:1fr 1fr 1fr} }
.planBtn{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface2);
  padding:14px 14px;
  cursor:pointer;
  color:var(--text);
}
.planBtn:hover{background:rgba(18,18,18,.04)}
.planBtn .t{font-weight:900;font-size:14px;margin:0}
.planBtn .p{margin:6px 0 0;font-size:12px;color:var(--muted)}
.paywallFoot{
  padding:12px 14px 14px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;
  background:var(--surface);
}
.paywallFoot .leftNote{margin-right:auto;font-size:12px;color:var(--muted);line-height:1.35}
.catbtn.allGreen{background:var(--mint); border-color:rgba(18,18,18,.18)}
.catbtn.freeRed{background:var(--Pink); border-color:rgba(18,18,18,.18)}
.catbtn .catico{width:18px;height:18px;object-fit:contain;vertical-align:-3px;margin-right:8px}


/* ---------- TOPIC MODAL (full-screen) ---------- */
.topicModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.topicModalOverlay.open{ display:flex; }
.topicModal{
  width:min(980px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.18);
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.topicModalInner{
  padding:16px;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.topicModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:6px 4px 14px 4px;
}
.topicModalHeader h2{
  margin:0;
  font-size:22px;
  letter-spacing:-0.2px;
}
.topicModalHeader .hint{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}
.topicModalClose{
  border:1px solid var(--line);
  background:#ffe4e4;
  color:#6b1b1b;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.topicModalClose:hover{ filter:brightness(.98); }

/* Keep inner content spaced nicely */
#topicModalTimerMount .card,
#topicModalAudioMount .card,
#topicModalDetailMount .detail{
  margin-top:12px;
}

/* Hide session UI on main page until a topic is selected */
.requiresTopicHidden{ display:none !important; }

/* ---------- THEME MODAL ---------- */
.themeModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.themeModalOverlay.show{ display:flex; }
.themeModal{
  width:min(600px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.18);
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.themeModalInner{
  padding:16px;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.themeModalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:6px 4px 14px 4px;
  position:sticky;
  top:0;
  background:var(--surface);
  z-index:1;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.themeModalHeader h2{
  margin:0;
  font-size:22px;
  letter-spacing:-0.2px;
}
.themeModalHeader .hint{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}
.themeModalClose{
  border:1px solid var(--line);
  background:#ffe4e4;
  color:#6b1b1b;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}
.themeModalClose:hover{ filter:brightness(.98); }

/* Tip container styling for instruction modal */
.tip-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--surface2);
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}

.info-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.tip-text {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}