:root{
  --sand:#f5efe6;
  --sand-dark:#e8dfd2;
  --cream:#fffcf7;
  --terra:#c47d5a;
  --terra-deep:#a8623e;
  --terra-soft:#dba88a;
  --sage:#8fa583;
  --sage-deep:#6b8560;
  --charcoal:#3a3535;
  --text-soft:#7a7170;
  --text-whisper:#a89e9c;
  --gold:#c9a86c;
  --radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--sand-dark);
  color:var(--charcoal);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
}

/* subtle grain */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  opacity:.55;
}

.phone{
  width:min(390px,100vw);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  background:var(--cream);
  overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.08);
}

.screen{display:none;min-height:100vh;flex-direction:column;animation:fadeUp .45s ease}
.screen.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Buttons */
.btn{
  box-shadow:0 0 0 rgba(196,125,90,0);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  color:var(--charcoal);
  font:500 14px/1 "Outfit",sans-serif;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.btn-primary{background:var(--terra);color:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(196,125,90,.25)}
.btn-primary:hover{background:var(--terra-deep);box-shadow:0 14px 38px rgba(196,125,90,.28)}
.btn-secondary{background:rgba(255,255,255,.9)}
.btn-cta{padding:16px 22px;letter-spacing:.2px;display:block;margin:0 auto;text-align:center}
.btn-ico,.nav-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:currentColor}
.btn-ico svg,.nav-ico svg{width:100%;height:100%;display:block}

/* Gate */
.gate{position:absolute;inset:0;background:rgba(245,239,230,.92);backdrop-filter: blur(7px);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.gate.hidden{display:none}
.gate-card{width:100%;max-width:340px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.05);border-radius:18px;padding:22px;box-shadow:0 14px 60px rgba(0,0,0,.08)}
.gate-card h2{font-family:"Cormorant",serif;font-weight:500;color:var(--charcoal);margin-bottom:6px}
.gate-sub{font-size:13px;color:var(--text-soft);margin-bottom:14px}
.gate-row{display:flex;gap:10px;align-items:center}
.gate-row input{flex:1;padding:14px 14px;border-radius:14px;border:1.5px solid var(--sand-dark);background:var(--cream);font:500 14px/1 "Outfit",sans-serif;outline:none}
.gate-row input:focus{border-color:var(--terra-soft);box-shadow:0 0 0 3px rgba(196,125,90,.12)}
.gate-err{margin-top:10px;font-size:12px;color:#b24a3b;min-height:18px}
.trust{margin-top:14px;font-size:12px;color:var(--text-whisper)}

/* Branding */
.brand{font-family:"Caveat",cursive;font-size:14px;color:var(--terra);letter-spacing:4px;text-transform:uppercase;margin-bottom:28px}
.brand-logo{display:flex;align-items:center;justify-content:center;gap:10px}
.brand-logo--landing{margin-bottom:30px}
.brand-text{font-family:"Caveat",cursive;font-size:14px;color:var(--terra);letter-spacing:4px}
.logo{display:block;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(196,125,90,.22))}
.logo--landing{width:72px;height:72px}
.logo--chat{width:28px;height:28px;filter:drop-shadow(0 6px 14px rgba(201,168,108,.22))}

.moon-rot{width:16px;height:16px;border-radius:50%;display:inline-block;position:relative;
  background:radial-gradient(circle at 35% 40%,rgba(255,255,255,.9),rgba(201,168,108,.35) 55%,rgba(196,125,90,.16));
  box-shadow:0 0 0 1px rgba(201,168,108,.25);
  overflow:hidden;opacity:.92
}
.moon-rot::after{content:"";position:absolute;inset:-4px;left:5px;border-radius:50%;
  background:linear-gradient(180deg,rgba(58,53,53,.18),rgba(58,53,53,.05));
  animation:moon 6.2s ease-in-out infinite
}
@keyframes moon{0%,100%{transform:translateX(2px)}50%{transform:translateX(-6px)}}

/* Stars + twinkle */
.stars{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 15% 30%,rgba(255,255,255,.8) 0 1px,transparent 2px),
  radial-gradient(circle at 65% 25%,rgba(255,255,255,.6) 0 1px,transparent 2px),
  radial-gradient(circle at 30% 70%,rgba(255,255,255,.5) 0 1px,transparent 2px),
  radial-gradient(circle at 78% 72%,rgba(255,255,255,.7) 0 1px,transparent 2px);
  opacity:.55;animation:starsFloat 6s ease-in-out infinite
}
@keyframes starsFloat{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:.75}}
.twinkle{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.8' stroke-width='1'%3E%3Cpath d='M55 62 l6 0'/%3E%3Cpath d='M210 84 l8 0'/%3E%3Cpath d='M120 180 l7 0'/%3E%3Cpath d='M270 220 l5 0'/%3E%3Cpath d='M60 250 l10 0'/%3E%3C/g%3E%3C/svg%3E");animation:twPulse 4.4s ease-in-out infinite}
@keyframes twPulse{0%,100%{opacity:.28}50%{opacity:.55}}

.stars--gate{opacity:.45;filter:blur(.2px)}
.stars--quiz{opacity:.30}
.stars--load{opacity:.45}
.stars--res{opacity:.35}

/* Landing */
.landing{
  background:linear-gradient(175deg,#f5efe6 0%,#faf7f2 45%,#f0e8dc 100%);
  padding:0 28px;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.landing::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(196,125,90,.08),transparent 70%)}
.landing::after{content:"";position:absolute;bottom:-100px;left:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(143,165,131,.06),transparent 70%)}
.land-inner{position:relative;z-index:2;padding:64px 0 120px}
.landing h1{font-family:"Cormorant",serif;font-size:36px;font-weight:300;line-height:1.25;color:var(--charcoal);margin-bottom:14px}
.landing h1 em{font-style:italic;color:var(--terra)}
.tag{font-size:15px;color:var(--text-soft);max-width:290px;margin:0 auto 28px;font-weight:300}

.zodiacCircle{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);opacity:.15;pointer-events:none;mix-blend-mode:multiply;filter:blur(.0px)}
.zodiacCircle svg{width:360px;height:360px;animation:zrot 120s linear infinite}
@keyframes zrot{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.waves{position:absolute;left:0;right:0;bottom:-1px;height:140px;pointer-events:none;opacity:.92}
.wavesSvg{width:100%;height:140px}
.w{transform-origin:center}
.w1{fill:rgba(196,125,90,.16);animation:waveDrift1 12s ease-in-out infinite}
.w2{fill:rgba(143,165,131,.12);animation:waveDrift2 16s ease-in-out infinite reverse}
.w3{fill:rgba(201,168,108,.10);animation:waveDrift3 20s ease-in-out infinite}
@keyframes waveDrift1{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-22px) translateY(-3px)}}
@keyframes waveDrift2{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-16px) translateY(2px)}}
@keyframes waveDrift3{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(-28px) translateY(-1px)}}

/* Quiz */
.quiz-wrap{background:var(--cream);flex-direction:column;position:relative}
.q-head{padding:20px 24px 14px;display:flex;align-items:center;justify-content:space-between}
.q-back{width:38px;height:38px;border-radius:50%;border:1px solid var(--sand-dark);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-soft);transition:.2s}
.q-back:hover{border-color:rgba(196,125,90,.45);background:rgba(196,125,90,.06)}
.q-dots{display:flex;gap:4px}
.q-dot{width:22px;height:3px;border-radius:2px;background:var(--sand-dark);transition:.35s}
.q-dot.done{background:var(--terra)}
.q-dot.now{background:var(--terra);width:32px}
.q-num{font-size:11px;color:var(--text-whisper)}

.q-body{flex:1;padding:16px 28px 22px;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto}
.q-body::-webkit-scrollbar{width:8px}
.q-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.08);border-radius:999px}
.q-body::-webkit-scrollbar-track{background:transparent}
.q-emoji{font-size:40px;margin-bottom:14px}
.q-title{font-family:"Cormorant",serif;font-size:24px;font-weight:500;line-height:1.3;color:var(--charcoal);margin-bottom:20px}
.q-opts{display:flex;flex-direction:column;gap:10px}
.q-opt{padding:15px 18px;border:1.5px solid var(--sand-dark);border-radius:14px;background:var(--cream);cursor:pointer;font:400 14px/1.5 "Outfit",sans-serif;color:var(--charcoal);transition:all .25s;display:flex;align-items:center;gap:12px}
.q-opt:hover{border-color:rgba(196,125,90,.55);background:rgba(196,125,90,.05);box-shadow:0 10px 30px rgba(201,168,108,.10)}
.q-opt.sel{border-color:var(--terra);background:rgba(196,125,90,.06);box-shadow:0 0 0 1px var(--terra)}

.q-form input{width:100%;padding:15px 16px;border-radius:14px;border:1.5px solid var(--sand-dark);background:var(--cream);font:400 14px/1.4 "Outfit",sans-serif;outline:none;margin-bottom:10px}
.q-form input:focus{border-color:var(--terra-soft);box-shadow:0 0 0 3px rgba(196,125,90,.12)}
.q-form .mini{font-size:12px;color:var(--text-whisper);margin-top:-6px;margin-bottom:12px}

.place-hint{display:flex;align-items:center;gap:8px;margin:-2px 0 8px;color:var(--text-whisper);font-size:12px}

.q-next{
  margin-top:18px;
  padding:16px;
  width:100%;
  background:var(--terra);
  color:#fff;
  border:none;
  border-radius:14px;
  font:600 15px/1 "Outfit",sans-serif;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  display:flex;align-items:center;justify-content:center;gap:10px;
  position:sticky;
  bottom:10px;
  box-shadow:0 16px 34px rgba(196,125,90,.18);
}
.q-next:hover{transform:translateY(-1px);box-shadow:0 18px 44px rgba(196,125,90,.22)}
.q-next:disabled{background:var(--sand-dark);color:var(--text-whisper);cursor:default;box-shadow:none;transform:none}

@media (max-height: 500px){
  .q-head{padding:14px 18px 10px}
  .q-title{font-size:20px;margin-bottom:14px}
  .q-emoji{font-size:34px;margin-bottom:10px}
  .q-opt{padding:12px 14px}
  .q-next{padding:14px}
}

/* Loading */
.load-wrap{background:linear-gradient(175deg,#f5efe6,#f0e8dc);justify-content:center;align-items:center;text-align:center;padding:40px 28px;position:relative}
.load-inner{position:relative;z-index:2}
.orb{width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 38% 38%,var(--terra-soft),var(--terra) 55%,var(--terra-deep));margin:0 auto 26px;animation:orbPulse 2.2s ease infinite;box-shadow:0 0 60px rgba(196,125,90,.18);position:relative;display:flex;align-items:center;justify-content:center}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.86}}
.orb-ico{width:46px;height:46px;color:rgba(255,255,255,.92);animation:fadeSwap .65s ease both}
@keyframes fadeSwap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.load-title{font-family:"Cormorant",serif;font-weight:600;font-size:22px;line-height:1.25;color:var(--charcoal);margin-bottom:10px}
.load-sub{font-size:13.5px;color:var(--text-soft);font-family:"Caveat",cursive;font-style:italic;letter-spacing:.2px}
.load-author{font-family:"Outfit",sans-serif;font-style:normal;font-size:12px;color:var(--text-whisper);margin-left:6px}

/* Results */
.res-wrap{background:var(--cream);padding-bottom:132px;position:relative}
.res-head{background:linear-gradient(175deg,#f0e4d4,#f5efe6);padding:28px 18px 24px;text-align:center;border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.res-head::after{content:"";position:absolute;inset:-30px;background:radial-gradient(circle at 20% 30%,rgba(201,168,108,.16),transparent 55%),radial-gradient(circle at 80% 60%,rgba(143,165,131,.14),transparent 62%);opacity:.95;pointer-events:none}
.res-top{position:relative;z-index:2}
.res-body{padding:18px 18px 0;position:relative;z-index:2}

.card{background:#fff;border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 2px 16px rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.03)}
.card-tag{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--terra);margin-bottom:6px}
.card-title{font-family:"Cormorant",serif;font-size:19px;font-weight:600;color:var(--charcoal);margin-bottom:6px}
.card-text{font-size:13.5px;color:var(--text-soft);line-height:1.7}

#wheelWrap{display:flex;justify-content:center;align-items:center}
svg.wheelSvg{width:100%;max-width:342px;height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.06))}
svg.wheelSvg .hnum{font:600 10px/1 "Outfit",sans-serif;fill:rgba(58,53,53,.52)}
svg.wheelSvg .axis{font:700 9px/1 "Outfit",sans-serif;letter-spacing:.8px;fill:rgba(196,125,90,.9)}
svg.wheelSvg .plab{font:700 9px/1 "Outfit",sans-serif;fill:rgba(58,53,53,.68)}
svg.wheelSvg .zseg{transition:opacity .25s ease}

/* wheel animation */
.wheelIn{animation:wheelIn .65s ease both;transform-origin:50% 50%}
@keyframes wheelIn{from{opacity:0;transform:scale(.94) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.reading-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.reading-card{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(0,0,0,.06);padding:16px;background:linear-gradient(175deg,rgba(196,125,90,.055),rgba(143,165,131,.045));transition:transform .2s ease, box-shadow .2s ease}
.reading-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.07)}
.reading-card.will{opacity:0;transform:translateY(10px)}
.reading-card.in{animation:cardIn .55s ease both}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
.reading-card::before{content:"";position:absolute;inset:-2px;background:radial-gradient(circle at 12% 14%,rgba(201,168,108,.16),transparent 55%),radial-gradient(circle at 88% 70%,rgba(143,165,131,.12),transparent 55%);opacity:.95;pointer-events:none}
.reading-card > *{position:relative;z-index:2}
.reading-card h4{font:650 16px/1.25 "Cormorant",serif;color:var(--charcoal);margin-bottom:6px}
.reading-card .sub{color:var(--text-whisper);font-size:12px;margin-bottom:10px}
.reading-card p{font-size:13.5px;color:var(--text-soft);white-space:pre-wrap}
.card-meta{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-soft)}
.card-meta .strength{color:rgba(107,133,96,.98)}
.card-meta .challenge{color:rgba(167,98,62,.98)}

.reading-actions{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.share-hint{min-height:16px;font-size:12px;color:var(--text-whisper)}

/* Chat */
.ch-wrap{background:var(--cream);flex-direction:column}
.ch-head{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--sand-dark);background:radial-gradient(circle at 20% 30%,rgba(201,168,108,.18),transparent 55%),radial-gradient(circle at 70% 35%,rgba(143,165,131,.14),transparent 60%),#fff}
.ch-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--terra),var(--terra-deep));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 10px 26px rgba(196,125,90,.18)}
.ch-av img{animation:avPulse 3.2s ease-in-out infinite;filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.18))}
@keyframes avPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(201,168,108,0))}50%{transform:scale(1.03);filter:drop-shadow(0 0 14px rgba(201,168,108,.18))}}
.ch-name{font-weight:700;line-height:1.1}
.ch-sub{font-size:11px;color:var(--text-whisper)}

.ch-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 14px 18px;
  overflow:auto;
  justify-content:flex-end;
  min-height:100%;
}
.ch-wrap{padding-bottom:96px}
.msg{max-width:82%;padding:13px 16px;border-radius:16px;font-size:13.5px;line-height:1.6;animation:msgIn .25s ease;white-space:pre-wrap}
@keyframes msgIn{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
.msg.st{background:#fff;color:var(--charcoal);border:1px solid rgba(0,0,0,.04);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--terra);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}

.ch-foot{
  display:flex;
  gap:10px;
  padding:16px 14px 28px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.04);
}
.ch-foot input{
  flex:1;
  padding:16px 16px;
  border-radius:14px;
  border:1.5px solid var(--sand-dark);
  background:var(--cream);
  outline:none;
  font:500 14px/1.2 "Outfit",sans-serif;
}
.ch-foot input:focus{border-color:var(--terra-soft);box-shadow:0 0 0 3px rgba(196,125,90,.12)}
.ch-send{width:46px;height:46px;border-radius:50%;background:var(--terra);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(196,125,90,.22)}
.ch-send:hover{background:var(--terra-deep)}

/* Bottom nav */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(390px,100vw);padding:8px 20px 22px;background:#fff;border-top:1px solid rgba(0,0,0,.04);display:none;justify-content:space-around;z-index:40}
.bnav.vis{display:flex}
.bnav button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;color:var(--text-whisper);cursor:pointer;border:0;background:transparent}
.bnav button .nav-ico{width:18px;height:18px}
.bnav button.act{color:var(--terra)}

/* Print improvements for /reading/:shareId/print */
@media print{
  body::after{display:none}
  .bnav,.gate{display:none!important}
  .phone{width:100%;box-shadow:none}
}

/* Language switcher */
.lang-switch {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  opacity: 0.65;
  transition: opacity 0.3s ease, transform .2s ease;
}
.lang-switch:hover { opacity: 1; transform: translateY(-1px); }

/* Hide language switcher on chat screen (header is tight) */
body.is-chat .lang-switch{display:none}
body.is-med .lang-switch{display:none}
body.is-res .lang-switch{display:none}
.lang-btn {
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 3px 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}
.lang-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 10px rgba(196,125,90,0.2);
}
.lang-btn.active {
  border-color: var(--terra);
  box-shadow: 0 2px 12px rgba(196,125,90,0.3);
  opacity: 1;
}
.lang-btn svg { display: block; border-radius: 3px; }

/* Reading loading */
.reading-loading{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:14px;background:rgba(245,239,230,.75);border:1px solid rgba(0,0,0,.04)}
.reading-loading .t{font-size:13.5px;color:var(--text-soft)}
.reading-loading .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(196,125,90,.25);border-top-color:rgba(196,125,90,.9);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reading-error{padding:14px 12px;border-radius:14px;background:rgba(167,98,62,.07);border:1px solid rgba(167,98,62,.14);color:rgba(167,98,62,.9);font-size:13px}

/* Meditation */
.med-wrap{background:var(--cream);padding:18px 18px 132px;position:relative}
.med-inner{position:relative;z-index:2}
.serif{font-family:"Cormorant",serif;font-weight:600;font-size:26px;line-height:1.2;color:var(--charcoal);margin:10px 0 8px}
.med-wrap .sub{color:var(--text-soft);font-size:13.5px;line-height:1.7;margin-bottom:14px}
.med-cards{display:grid;grid-template-columns:1fr;gap:12px}
.med-card{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:18px;padding:16px;box-shadow:0 2px 16px rgba(0,0,0,.03);position:relative;overflow:hidden}
.med-card::before{content:"";position:absolute;inset:-2px;background:radial-gradient(circle at 12% 18%,rgba(201,168,108,.14),transparent 55%),radial-gradient(circle at 90% 70%,rgba(143,165,131,.12),transparent 58%);opacity:.95;pointer-events:none}
.med-card > *{position:relative;z-index:2}
.med-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(196,125,90,.14),rgba(143,165,131,.12));color:rgba(58,53,53,.82);margin-bottom:10px}
.med-icon svg{width:22px;height:22px}
.med-title{font-family:"Cormorant",serif;font-weight:700;font-size:18px;color:var(--charcoal);margin-bottom:4px}
.med-sub{color:var(--text-whisper);font-size:12.5px;margin-bottom:12px}
.med-player{position:relative;background:var(--sand);border-radius:16px;padding:14px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;border:1px solid rgba(0,0,0,.04)}
.med-player-bg{position:absolute;inset:0;border-radius:16px;background:radial-gradient(circle at 14% 30%,rgba(201,168,108,.22),transparent 60%),radial-gradient(circle at 86% 70%,rgba(143,165,131,.16),transparent 62%);opacity:.9;pointer-events:none}
.med-player > *{position:relative;z-index:2}
.med-play-btn{width:44px;height:44px;border-radius:50%;background:var(--terra);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(196,125,90,.18);cursor:pointer;flex:0 0 auto}
.med-play-btn .btn-ico svg{width:20px;height:20px}
.med-progress{flex:1;min-width:140px;height:4px;background:var(--sand-dark);border-radius:2px;overflow:hidden;cursor:pointer}
.med-progress-bar{height:100%;background:var(--terra);border-radius:2px;width:0%;transition:width 0.25s ease}
.med-time{font-size:12px;color:var(--text-whisper);font-family:'Outfit',system-ui;white-space:nowrap}
.med-download{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;color:var(--terra);background:rgba(196,125,90,.06);border:1px solid rgba(196,125,90,.14);text-decoration:none;flex:0 0 auto}
.med-download .btn-ico svg{width:18px;height:18px}
.med-text-toggle{border:none;background:transparent;color:var(--terra);font-weight:650;font-size:13px;cursor:pointer;padding:6px 6px;margin-left:auto}
.med-text-body{width:100%;margin-top:6px;white-space:pre-wrap;color:var(--text-soft);font-size:13.2px;line-height:1.7;font-family:'Caveat',cursive;letter-spacing:.2px}
.med-hint{margin-top:12px;min-height:18px;font-size:12px;color:var(--text-whisper)}

.chat-disclaimer{padding:0 18px 12px;color:var(--text-whisper);font-size:10px;line-height:1.35}

/* Modal (PDF language picker) */
.modal{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-end;justify-content:center}
.modal.vis{display:flex}
.modal-back{position:absolute;inset:0;background:rgba(58,53,53,.35);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(360px,92vw);background:#fff;border-radius:18px;padding:14px 14px 16px;margin:0 auto 22px;border:1px solid rgba(0,0,0,.05);box-shadow:0 30px 80px rgba(0,0,0,.22);animation:modalIn .22s ease}
@keyframes modalIn{from{transform:translateY(10px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-title{font-family:"Cormorant",serif;font-weight:600;font-size:18px;color:var(--charcoal);margin:4px 4px 12px}
.modal-grid{display:grid;grid-template-columns:1fr;gap:10px}
.modal-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--sand-dark);background:var(--cream);cursor:pointer;transition:all .2s ease}
.modal-opt:hover{border-color:rgba(196,125,90,.55);background:rgba(196,125,90,.05);box-shadow:0 10px 28px rgba(201,168,108,.10)}
.modal-opt .f{display:inline-flex;align-items:center;justify-content:center;width:36px;height:28px;border-radius:10px;background:linear-gradient(135deg,rgba(196,125,90,.12),rgba(143,165,131,.10));color:rgba(58,53,53,.75);font-weight:700;font-size:12px;letter-spacing:.6px}
.modal-opt .t{font-weight:600;color:var(--charcoal)}

/* Micro animations */
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{position:relative}
.btn-primary::after{content:"";position:absolute;inset:-2px;border-radius:999px;opacity:0;transition:opacity .25s ease;box-shadow:0 0 0 6px rgba(196,125,90,.12)}
.btn-primary:hover::after{opacity:1}



/* --- Breathing Animation --- */
.reading-breathe {
  text-align: center;
  padding: 32px 16px 24px;
}
.breathe-hint {
  font-family: 'Cormorant', serif;
  font-size: 18px;
  color: var(--charcoal, #3a3535);
  margin-bottom: 6px;
}
.breathe-sub {
  font-size: 13px;
  color: rgba(107,99,98,.7);
  margin-bottom: 28px;
}
.breathe-circle-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breathe-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,125,90,.25) 0%, rgba(196,125,90,.08) 70%, transparent 100%);
  animation: breathePulse 12s ease-in-out infinite;
}
@keyframes breathePulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  33%  { transform: scale(1.8); opacity: 0.9; }
  50%  { transform: scale(1.8); opacity: 0.9; }
  83%  { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1);   opacity: 0.5; }
}
.breathe-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: var(--terra, #c47d5a);
  pointer-events: none;
}
.breathe-instruction {
  font-size: 12px;
  color: rgba(107,99,98,.5);
  margin-top: 8px;
}
.breathe-needed {
  font-size: 11px;
  color: rgba(107,99,98,.5);
  margin-top: 20px;
  font-style: italic;
}

/* PDF Language Modal */
.pdf-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.pdf-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.pdf-modal__card{position:relative;z-index:1;background:var(--cream,#fffcf7);border-radius:16px;padding:24px 20px;width:280px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.pdf-modal__title{font-family:"Cormorant",serif;font-size:18px;color:var(--charcoal,#3a3535);margin-bottom:16px}
.pdf-modal__opts{display:flex;flex-direction:column;gap:10px}
.pdf-lang{background:var(--sand,#f5efe6);border:none;border-radius:10px;padding:12px;font-size:15px;font-family:"Outfit",sans-serif;cursor:pointer;transition:background .2s}
.pdf-lang:hover,.pdf-lang:active{background:var(--terra,#c47d5a);color:#fff}

/* Landing brand: logo+text centered, moon beside */
.brand-logo--landing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.brand-logo--landing .logo--landing {
  height: 32px;
}
.brand-logo--landing .moon-rot {
  width: 14px;
  height: 14px;
}