/* ============================================================
   Ballet Bloom — Member App UI Kit styles
   Lifted + unified from 01-intake, 02-todays-practice, 03-orchid.
   Authenticated experience. Bottom-tab nav. WCAG-AA muted.
   ============================================================ */
:root {
  --blush:#F2E8E4; --rose:#C4788A; --plum:#7D3F52; --brown:#4A2530;
  --warm-white:#FAF6F4; --ink:#2E1A20; --muted:#7E5C66;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Jost',sans-serif; background:var(--warm-white); color:var(--ink); line-height:1.5; }
button { font-family:'Jost',sans-serif; cursor:pointer; }
:focus-visible { outline:3px solid var(--orchid); outline-offset:3px; }

/* ---- App frame ---- */
.app { min-height:100vh; display:flex; flex-direction:column; }
.app-main { flex:1; }

/* ---- Top bar ---- */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2rem; background:rgba(250,246,244,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(196,120,138,.15); }
.topbar-logo { font-family:'Cormorant Garamond',serif; font-size:1.35rem; letter-spacing:.12em; color:var(--plum); }
.topbar-logo img { display:block; width:8.5rem; height:auto; }
.topbar-right { display:flex; gap:1.6rem; align-items:center; }
.topnav-links { display:flex; gap:1.6rem; list-style:none; }
.topnav-links a { display:inline-flex; align-items:center; min-height:44px; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); text-decoration:none; cursor:pointer; }
.topnav-links a.active { color:var(--plum); }
.avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--rose),var(--plum)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Cormorant Garamond',serif; }

/* ---- Bottom-tab nav (authenticated) ---- */
.bottomnav { position:fixed; bottom:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(250,246,244,.96); backdrop-filter:blur(14px); border-top:1px solid rgba(196,120,138,.18); padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.bottomnav.has-studio { grid-template-columns:repeat(4,1fr); }
.tabitem { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:.5rem 0; background:none; border:none; text-decoration:none; }
.tab-ico { width:22px; height:22px; }
.tab-ico svg { width:100%; height:100%; display:block; stroke:var(--muted); fill:none; stroke-width:1.4; }
.tab-lbl { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.tabitem.active .tab-ico svg { stroke:var(--plum); }
.tabitem.active .tab-lbl { color:var(--plum); font-weight:500; }

/* ---- Shared bits ---- */
.eyebrow { font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--rose); margin-bottom:1rem; display:flex; align-items:center; gap:.75rem; }
.eyebrow::before { content:''; display:block; width:30px; height:1px; background:var(--rose); }
.btn-primary { background:var(--plum); color:#fff; padding:1rem 2.2rem; border-radius:3rem; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; border:2px solid var(--plum); transition:all .3s; }
.btn-primary:hover { background:var(--brown); border-color:var(--brown); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--plum); border:2px solid var(--rose); padding:1rem 2.2rem; border-radius:3rem; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; transition:all .3s; }
.btn-ghost:hover { background:var(--rose); color:#fff; }
.btn-text { background:none; border:none; color:var(--plum); font-size:.82rem; letter-spacing:.04em; text-decoration:underline; text-underline-offset:5px; }

/* ============ INTAKE ============ */
.intake { max-width:640px; margin:0 auto; padding:3.5rem 2rem; position:relative; }
.intake-bg { position:fixed; inset:0; z-index:-1; background:
  radial-gradient(ellipse 60% 80% at 80% 50%, rgba(196,120,138,.12) 0%, transparent 70%),
  radial-gradient(ellipse 40% 60% at 15% 80%, rgba(125,63,82,.08) 0%, transparent 60%), var(--warm-white); }
.stepper { display:flex; gap:.4rem; margin-bottom:2.5rem; }
.step { width:34px; height:3px; background:rgba(196,120,138,.25); border-radius:2px; transition:background .3s; }
.step.active { background:var(--rose); }
.step.done { background:var(--plum); }
.intake h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,5vw,3.6rem); font-weight:300; line-height:1.06; color:var(--brown); margin-bottom:1.3rem; }
.intake h1 em { font-style:italic; color:var(--rose); }
.intake .lede { font-size:1.05rem; font-weight:300; line-height:1.7; color:var(--muted); max-width:480px; margin-bottom:2.4rem; }
.signature { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:var(--plum); margin-bottom:.5rem; }
.doctor { font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:2.4rem; }
.intake-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.footnote { font-size:.76rem; color:var(--muted); margin-top:2.6rem; line-height:1.7; }
.footnote a { color:var(--plum); }
/* yes/no question */
.q-eyebrow { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:1rem; }
.q-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:300; line-height:1.15; color:var(--brown); margin-bottom:.8rem; }
.q-help { font-size:.92rem; font-weight:300; color:var(--muted); line-height:1.6; margin-bottom:2.2rem; max-width:460px; }
.yesno { display:flex; gap:1rem; margin-bottom:1.6rem; }
.yesno button { flex:1; padding:1.3rem; border-radius:12px; border:1.5px solid rgba(196,120,138,.3); background:#fff; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:var(--plum); transition:all .25s; }
.yesno button:hover { border-color:var(--rose); }
.yesno button.sel { background:var(--plum); border-color:var(--plum); color:#fff; }
.q-skip { font-size:.8rem; color:var(--muted); }
.q-skip button { background:none; border:none; color:var(--plum); text-decoration:underline; text-underline-offset:4px; font-size:.8rem; }
/* building + result */
.building { text-align:center; max-width:520px; margin:0 auto; padding:7rem 2rem; }
.building .spinner { width:46px; height:46px; border:2px solid rgba(196,120,138,.25); border-top-color:var(--plum); border-radius:50%; margin:0 auto 2rem; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.building h2 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:2rem; color:var(--brown); }
.building p { color:var(--muted); margin-top:.6rem; font-weight:300; }

/* ============ PRACTICE DASHBOARD ============ */
.screen { max-width:1080px; margin:0 auto; padding:2.6rem 2rem; }
.greeting { margin-bottom:2.2rem; }
.greeting-eyebrow { font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--rose); margin-bottom:.6rem; display:flex; align-items:center; gap:.75rem; }
.greeting-eyebrow::before { content:''; display:block; width:30px; height:1px; background:var(--rose); }
.greeting h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,3.5vw,2.7rem); font-weight:300; line-height:1.15; color:var(--brown); }
.greeting h1 em { font-style:italic; color:var(--rose); }
.practice-card { background:linear-gradient(145deg,#fff 0%,var(--blush) 100%); border:1px solid rgba(196,120,138,.2); border-radius:12px; padding:2.6rem 2.6rem 2.2rem; margin-bottom:1.8rem; position:relative; overflow:hidden; }
.practice-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--rose),var(--plum)); }
.card-grid { display:grid; grid-template-columns:1fr auto; gap:2.6rem; align-items:center; }
.card-eyebrow { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:.8rem; }
.card-title { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; line-height:1.1; color:var(--brown); margin-bottom:.4rem; }
.card-title em { font-style:italic; color:var(--plum); }
.lesson-num { font-size:.82rem; color:var(--muted); margin-bottom:1.3rem; }
.sherona-quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--plum); margin-bottom:1.8rem; max-width:520px; line-height:1.5; }
.card-meta { display:flex; gap:2rem; flex-wrap:wrap; font-size:.82rem; color:var(--muted); margin-bottom:1.8rem; }
.card-meta strong { color:var(--brown); font-weight:500; }
.play-btn { background:var(--plum); color:#fff; border:none; padding:1.1rem 2.4rem; border-radius:3rem; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.8rem; transition:all .3s; }
.play-btn:hover { background:var(--brown); transform:translateY(-2px); }
.play-btn .triangle { width:0; height:0; border-left:8px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.play-aside { background:rgba(255,255,255,.5); border-radius:8px; padding:1.4rem 1.6rem; text-align:center; min-width:172px; }
.aside-num { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:var(--plum); line-height:1; }
.aside-label { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }
.aside-rule { border:none; border-top:1px solid rgba(196,120,138,.15); margin:1rem 0; }
.aside-week { font-size:.72rem; color:var(--muted); line-height:1.6; }
.aside-week em { font-family:'Cormorant Garamond',serif; color:var(--plum); font-style:italic; }
.streak-pill { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; background:rgba(125,63,82,.1); padding:.4rem 1rem; border-radius:2rem; font-size:.75rem; color:var(--plum); font-weight:500; }
.flex-row { display:flex; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.flex-chip { font-size:.74rem; letter-spacing:.06em; color:var(--muted); border:1px solid rgba(196,120,138,.25); border-radius:2rem; padding:.5rem 1.1rem; background:#fff; transition:all .25s; }
.flex-chip:hover { border-color:var(--rose); color:var(--plum); }
.bottom-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.6rem; }
.panel { background:#fff; border:1px solid rgba(196,120,138,.15); border-radius:8px; padding:1.8rem; }
.panel h2 { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:400; color:var(--brown); margin-bottom:1.2rem; border-bottom:1px solid rgba(196,120,138,.12); padding-bottom:.9rem; }
.lrow { display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px dashed rgba(196,120,138,.15); }
.lrow:last-child { border-bottom:none; }
.lmark { width:22px; height:22px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; }
.lmark.done { background:var(--rose); color:#fff; }
.lmark.skipped { background:rgba(140,107,114,.2); color:var(--muted); }
.lmark.upcoming { border:1px dashed var(--muted); color:transparent; }
.linfo { flex-grow:1; }
.linfo .t { font-size:.88rem; color:var(--brown); font-weight:500; }
.linfo .w { font-size:.74rem; color:var(--muted); margin-top:.15rem; }
.lrow .act { font-size:.76rem; color:var(--plum); text-decoration:underline; text-underline-offset:3px; background:none; border:none; }
.browse h3 { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:400; color:var(--brown); margin-bottom:.6rem; }
.browse p { font-size:.85rem; color:var(--muted); line-height:1.6; margin-bottom:1.4rem; }
.browse { display:flex; flex-direction:column; justify-content:space-between; }

/* ============ BLOOM (program) ============ */
.bloom-wrap { max-width:880px; margin:0 auto; padding:2.6rem 2rem; text-align:center; }
.bloom-eyebrow { font-size:.74rem; letter-spacing:.25em; text-transform:uppercase; color:var(--rose); margin-bottom:1rem; display:inline-flex; align-items:center; gap:.75rem; }
.bloom-eyebrow::before,.bloom-eyebrow::after { content:''; display:block; width:30px; height:1px; background:var(--rose); }
.bloom-wrap h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:300; line-height:1.1; color:var(--brown); margin-bottom:.8rem; }
.bloom-wrap h1 em { font-style:italic; color:var(--rose); }
.bloom-sub { font-size:1rem; color:var(--muted); margin-bottom:2.4rem; }
.bloom-sub strong { color:var(--brown); font-weight:500; }
.bloom-stage { background:linear-gradient(180deg,var(--warm-white) 0%,var(--blush) 100%); border-radius:16px; padding:2.4rem 2rem 2rem; margin-bottom:1.8rem; border:1px solid rgba(196,120,138,.18); }
.bloom-svg { display:block; margin:0 auto; width:360px; height:auto; max-width:100%; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:2rem; border-top:1px solid rgba(196,120,138,.18); margin-top:2rem; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:2.3rem; font-weight:300; color:var(--plum); line-height:1; }
.stat-num em { font-style:italic; }
.stat-label { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }
.dot-grid { display:grid; grid-template-columns:repeat(25,1fr); gap:4px; margin:1.4rem auto 0; max-width:600px; }
.dot { aspect-ratio:1; border-radius:50%; background:rgba(196,120,138,.18); }
.dot.filled { background:var(--rose); }
.dot.current { background:var(--plum); animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.4); } }
.share { margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.reflection { margin-top:2.6rem; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.18rem; color:var(--plum); line-height:1.5; max-width:540px; margin-left:auto; margin-right:auto; }
.reflection-attr { font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:1rem; }

/* ============ LIBRARY ============ */
.lib-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; flex-wrap:wrap; gap:1rem 1.5rem; }
.lib-head h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,3.5vw,2.6rem); font-weight:300; color:var(--brown); flex-shrink:0; white-space:nowrap; }
.lib-head h1 em { font-style:italic; color:var(--rose); }
.lib-filters { display:flex; gap:.6rem; flex-wrap:wrap; }
.lib-filter { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid rgba(196,120,138,.25); background:#fff; border-radius:2rem; padding:.5rem 1.1rem; transition:all .25s; }
.lib-filter.active { background:var(--plum); color:#fff; border-color:var(--plum); }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.4rem; }
.lesson-card { background:#fff; border:1px solid rgba(196,120,138,.18); border-radius:10px; overflow:hidden; transition:all .3s; cursor:pointer; }
.lesson-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(74,37,48,.1); }
.lesson-thumb { aspect-ratio:16/10; background:linear-gradient(145deg,rgba(196,120,138,.18),rgba(125,63,82,.12)); position:relative; display:flex; align-items:center; justify-content:center; }
.lesson-thumb .play { width:46px; height:46px; border-radius:50%; background:rgba(250,246,244,.9); display:flex; align-items:center; justify-content:center; }
.lesson-thumb .play::after { content:''; width:0; height:0; border-left:11px solid var(--plum); border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.lesson-thumb .dur { position:absolute; bottom:.6rem; right:.7rem; background:rgba(46,26,32,.7); color:#fff; font-size:.68rem; padding:.2rem .6rem; border-radius:1rem; }
.lesson-thumb .donetag { position:absolute; top:.6rem; left:.7rem; background:var(--rose); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; }
.lesson-body { padding:1.1rem 1.2rem 1.3rem; }
.lesson-body .mod { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rose); margin-bottom:.4rem; }
.lesson-body .ttl { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--brown); line-height:1.2; }
.lesson-body .num { font-size:.74rem; color:var(--muted); margin-top:.35rem; }

/* ============ STUDIO ============ */
.studio-wrap { max-width:760px; margin:0 auto; padding:2.6rem 2rem; }
.studio-class { background:#fff; border:1px solid rgba(196,120,138,.2); border-radius:12px; padding:2rem; margin-bottom:1.2rem; display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; }
.studio-date { text-align:center; background:var(--blush); border-radius:10px; padding:1rem 1.2rem; min-width:84px; }
.studio-date .d { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; color:var(--plum); line-height:1; }
.studio-date .m { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }
.studio-info h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:400; color:var(--brown); }
.studio-info .meta { font-size:.82rem; color:var(--muted); margin-top:.4rem; }
.studio-info .seats { font-size:.74rem; color:var(--plum); margin-top:.6rem; display:inline-flex; align-items:center; gap:.4rem; }
.studio-info .seats.full { color:var(--muted); }
.studio-cta { text-align:right; }
.btn-book { background:var(--plum); color:#fff; border:none; padding:.8rem 1.6rem; border-radius:2rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; transition:all .3s; }
.btn-book:hover { background:var(--brown); }
.btn-book.booked { background:rgba(125,63,82,.12); color:var(--plum); }
.btn-waitlist { background:transparent; color:var(--plum); border:1.5px solid var(--rose); padding:.8rem 1.6rem; border-radius:2rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---- toast ---- */
.toast { position:fixed; bottom:6.5rem; left:50%; transform:translateX(-50%); background:var(--brown); color:var(--blush); padding:.9rem 1.6rem; border-radius:2rem; font-size:.82rem; z-index:50; box-shadow:0 12px 30px rgba(46,26,32,.3); display:flex; align-items:center; gap:.6rem; animation:toastin .3s ease; }
@keyframes toastin { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }

@media (max-width:800px) {
  .app-main { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .topnav-links { display:none; }
  .card-grid { grid-template-columns:1fr; gap:1.4rem; }
  .play-aside { order:-1; }
  .bottom-grid { grid-template-columns:1fr; }
  .dot-grid { grid-template-columns:repeat(20,1fr); }
  .stats { grid-template-columns:1fr; gap:1.2rem; }
  .studio-class { grid-template-columns:1fr; text-align:center; }
  .studio-cta { text-align:center; }
}
@media (min-width:801px) { .bottomnav { display:none; } }

/* ============================================================
   EXTENSIONS — goals intake · avatar menu · lesson player ·
   celebration · Bloom Check-In · referral · settings
   ============================================================ */
:root {
  --petal:#E7C9D1; --orchid:#BE3E72; --orchid-tint:rgba(190,62,114,.12);
  --champagne:#C8A96A; --champagne-deep:#A8884A; --champagne-tint:rgba(200,169,106,.16);
  --sage-deep:#5F7257;
}

/* ---- Intake: prominent Goals step ---- */
.goal-title { font-size:clamp(2.2rem,4.4vw,3rem); }
.goal-options { display:flex; flex-direction:column; gap:.9rem; margin-top:.6rem; max-width:560px; }
.goal-card { display:flex; align-items:flex-start; gap:1rem; text-align:left; padding:1.3rem 1.5rem; border-radius:12px; border:1.5px solid rgba(196,120,138,.28); background:#fff; transition:all .25s; }
.goal-card:hover { border-color:var(--rose); transform:translateY(-2px); box-shadow:0 14px 34px rgba(74,37,48,.08); }
.goal-card.sel { border-color:var(--plum); background:rgba(125,63,82,.04); }
.goal-mark { flex-shrink:0; width:18px; height:18px; margin-top:.25rem; border-radius:50%; border:1.5px solid var(--rose); transition:all .25s; }
.goal-card:hover .goal-mark { background:var(--petal); }
.goal-card.sel .goal-mark { background:var(--plum); border-color:var(--plum); box-shadow:inset 0 0 0 3px #fff; }
.goal-text { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.goal-label { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:400; color:var(--brown); line-height:1.25; display:block; }
.goal-sub { font-size:.84rem; font-weight:300; color:var(--muted); line-height:1.45; display:block; }
.signature { line-height:1.55; }
.building p em { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--plum); }

/* ---- Avatar menu ---- */
.avatar-wrap { position:relative; }
.avatar { border:none; }
.avatar-menu { position:absolute; right:0; top:48px; z-index:40; background:#fff; border:1px solid rgba(196,120,138,.2); border-radius:12px; box-shadow:0 18px 44px rgba(74,37,48,.16); padding:.5rem; min-width:210px; display:flex; flex-direction:column; }
.avatar-trigger { display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; cursor:pointer; }
.avatar-trigger::-webkit-details-marker { display:none; }
.am-head { padding:.7rem .9rem .8rem; border-bottom:1px solid rgba(196,120,138,.14); margin-bottom:.3rem; display:flex; flex-direction:column; }
.am-head strong { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.1rem; color:var(--brown); }
.am-head span { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rose); margin-top:.15rem; }
.avatar-menu-link, .avatar-menu-button { display:block; width:100%; min-height:44px; text-align:left; background:none; border:none; padding:.7rem .9rem; border-radius:8px; font-size:.86rem; color:var(--ink); text-decoration:none; transition:background .2s; }
.avatar-menu-link:hover, .avatar-menu-button:hover { background:var(--blush); color:var(--plum); }
.avatar-menu-link.privileged { color:var(--plum); }

/* ---- Full-screen overlay host ---- */
.app-overlay { min-height:100vh; background:var(--warm-white); animation:overlayIn .32s var(--ease, ease); }
@keyframes overlayIn { from { transform:translateY(12px); } to { transform:none; } }
.lesson-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2rem; background:rgba(250,246,244,.94); backdrop-filter:blur(12px); border-bottom:1px solid rgba(196,120,138,.15); }
.lesson-back { background:none; border:none; color:var(--plum); font-size:.86rem; letter-spacing:.02em; }
.lesson-crumb { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ---- Lesson player ---- */
.lesson-screen { min-height:100vh; }
.lesson-body-wrap { max-width:1000px; margin:0 auto; padding:1.8rem 2rem 4rem; }
.vstage { position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:linear-gradient(150deg,var(--brown) 0%,#311821 100%); display:flex; align-items:center; justify-content:center; }
.vstage-tag { position:absolute; top:1rem; left:1.1rem; background:rgba(250,246,244,.16); color:var(--blush); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:.3rem .8rem; border-radius:2rem; }
.vstage-play { position:relative; z-index:2; width:80px; height:80px; border-radius:50%; border:none; background:rgba(250,246,244,.92); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.vstage-play:hover { transform:scale(1.06); }
.vstage-play.subtle { background:rgba(250,246,244,.2); }
.vstage-triangle { width:0; height:0; border-left:22px solid var(--plum); border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:5px; }
.vstage-play.subtle .vstage-pausebars { display:flex; gap:6px; }
.vstage-pausebars i { width:6px; height:26px; background:var(--blush); display:block; border-radius:1px; }
.vstage-done { position:relative; z-index:2; text-align:center; color:var(--blush); }
.vstage-check { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:var(--rose); color:#fff; font-size:1.4rem; margin-bottom:.8rem; }
.vstage-done p { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.2rem; }
.vstage-bar { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; background:linear-gradient(0deg,rgba(46,26,32,.6),transparent); }
.vstage-time { font-size:.7rem; color:var(--blush); font-variant-numeric:tabular-nums; }
.vstage-track { flex:1; height:4px; border-radius:2px; background:rgba(242,232,228,.25); cursor:pointer; position:relative; }
.vstage-fill { height:100%; border-radius:2px; background:var(--rose); position:relative; }
.vstage-knob { position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:#fff; }
.vstage-quality { font-size:.6rem; letter-spacing:.1em; color:var(--blush); border:1px solid rgba(242,232,228,.4); border-radius:3px; padding:.05rem .35rem; }

.lesson-main { display:grid; grid-template-columns:1.5fr 1fr; gap:2.6rem; margin-top:2rem; }
.lesson-eyebrow { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rose); margin-bottom:.7rem; }
.lesson-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,2.7rem); font-weight:300; color:var(--brown); line-height:1.1; margin-bottom:1.1rem; }
.lesson-why { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.18rem; color:var(--plum); line-height:1.5; max-width:520px; }
.lesson-why-attr { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; margin-bottom:1.6rem; }
.lesson-meta { display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; font-size:.82rem; color:var(--muted); margin-bottom:1.8rem; }
.lesson-meta strong { color:var(--brown); font-weight:500; }
.streak-pill.small { margin:0; }
.lesson-actions { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.btn-primary.is-done { background:rgba(125,63,82,.12); color:var(--plum); border-color:transparent; }
.btn-primary:disabled { cursor:default; }
.lesson-hint { font-size:.8rem; color:var(--muted); font-style:italic; }
.lesson-side { display:flex; flex-direction:column; gap:1.2rem; }
.lesson-panel { background:#fff; border:1px solid rgba(196,120,138,.16); border-radius:10px; padding:1.4rem 1.5rem; }
.lesson-panel h3 { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:400; color:var(--brown); margin-bottom:1rem; }
.chapters { list-style:none; display:flex; flex-direction:column; }
.chapters li { display:flex; gap:1rem; padding:.6rem 0; border-bottom:1px dashed rgba(196,120,138,.16); font-size:.86rem; }
.chapters li:last-child { border-bottom:none; }
.chap-time { color:var(--rose); font-variant-numeric:tabular-nums; flex-shrink:0; width:42px; }
.chap-name { color:var(--ink); }
.companion { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.companion-icon { width:46px; height:58px; border-radius:4px; background:var(--blush); border:1px solid rgba(196,120,138,.3); display:flex; align-items:center; justify-content:center; font-size:.62rem; letter-spacing:.08em; color:var(--plum); flex-shrink:0; }
.companion-text { flex:1; min-width:140px; }
.companion-text h4 { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:500; color:var(--brown); }
.companion-text p { font-size:.8rem; color:var(--muted); line-height:1.55; margin-top:.2rem; }
.companion-actions { display:flex; gap:1.2rem; }
.lesson-modnote { font-size:.82rem; color:var(--sage-deep); background:rgba(139,157,131,.12); border-radius:8px; padding:.9rem 1.1rem; line-height:1.55; }
.lesson-edu { text-align:center; font-size:.74rem; font-weight:300; color:var(--muted); margin-top:2.6rem; }

/* ---- Module-completion celebration ---- */
.celebrate-overlay { position:fixed; inset:0; z-index:80; background:rgba(46,26,32,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:2rem; }
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti span { position:absolute; top:-24px; border-radius:1px; animation-name:confettiFall; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes confettiFall { to { transform:translateY(112vh) rotate(540deg); opacity:.35; } }
.celebrate-card { position:relative; z-index:2; background:var(--warm-white); border-radius:18px; max-width:460px; width:100%; padding:2.8rem 2.6rem 2.4rem; text-align:center; box-shadow:0 40px 90px rgba(46,26,32,.4); animation:celebratePop .4s var(--ease, ease); }
@keyframes celebratePop { from { transform:translateY(16px) scale(.96); } to { transform:none; } }
.celebrate-bloom { width:96px; height:96px; margin:0 auto .4rem; display:block; }
.celebrate-eyebrow { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--orchid); margin-bottom:.6rem; }
.celebrate-card h2 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:2.2rem; color:var(--brown); line-height:1.1; margin-bottom:.8rem; }
.celebrate-card h2 em { font-style:italic; color:var(--orchid); }
.celebrate-sub { font-size:.92rem; font-weight:300; line-height:1.7; color:var(--muted); margin-bottom:1.8rem; }
.celebrate-actions { display:flex; flex-direction:column; gap:.9rem; align-items:center; }

/* ---- Bloom Check-In (Atelier) ---- */
.champagne-eyebrow { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--champagne-deep); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; }
.champagne-eyebrow::before { content:''; width:28px; height:1px; background:var(--champagne-deep); display:block; }
.champagne-crumb { color:var(--champagne-deep); }
.checkin-body { max-width:980px; margin:0 auto; padding:2.4rem 2rem 4rem; }
.checkin-intro { max-width:620px; }
.checkin-intro h1, .checkin-submitted h1 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.2rem,4.6vw,3.2rem); color:var(--brown); line-height:1.08; margin-bottom:1.1rem; }
.checkin-intro h1 em, .checkin-submitted h1 em { font-style:italic; color:var(--champagne-deep); }
.checkin-lede { font-size:1.02rem; font-weight:300; line-height:1.7; color:var(--muted); margin-bottom:2rem; }
.checkin-frame { border:1px solid var(--champagne-tint); background:rgba(200,169,106,.07); border-radius:12px; padding:1.4rem 1.6rem; margin-bottom:1.8rem; }
.checkin-frame-label { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne-deep); margin-bottom:.25rem; }
.checkin-frame p:not(.checkin-frame-label) { font-size:.9rem; font-weight:300; color:var(--ink); line-height:1.55; margin-bottom:1rem; }
.checkin-frame p:last-child { margin-bottom:0; }
.trust-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.trust-chip { font-size:.74rem; color:var(--plum); background:rgba(125,63,82,.08); border:1px solid rgba(196,120,138,.2); border-radius:2rem; padding:.4rem 1rem; }
.consent { display:flex; gap:.8rem; align-items:flex-start; font-size:.86rem; font-weight:300; line-height:1.6; color:var(--ink); margin-bottom:1.8rem; cursor:pointer; }
.consent input { margin-top:.25rem; width:18px; height:18px; accent-color:var(--plum); flex-shrink:0; }
.checkin-actions { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.btn-primary:disabled { opacity:.45; }

.checkin-record { display:grid; grid-template-columns:1.3fr 1fr; gap:2.6rem; align-items:start; }
.checkin-prompt h2 { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:2rem; color:var(--brown); line-height:1.12; margin-bottom:.7rem; }
.prompt-ask { font-size:.94rem; font-weight:300; line-height:1.65; color:var(--muted); margin-bottom:1.4rem; }
.mode-toggle { display:inline-flex; gap:.3rem; background:rgba(255,255,255,.7); border:1px solid rgba(196,120,138,.2); border-radius:2rem; padding:.3rem; margin-bottom:1.4rem; }
.mode-toggle button { border:none; background:transparent; padding:.5rem 1.1rem; border-radius:2rem; font-family:'Jost',sans-serif; font-size:.76rem; color:var(--muted); }
.mode-toggle button.active { background:var(--plum); color:#fff; }
.upload-zone { border:1.5px dashed rgba(196,120,138,.4); border-radius:12px; background:rgba(196,120,138,.05); padding:2.4rem 1.6rem; text-align:center; cursor:pointer; transition:all .25s; margin-bottom:1.4rem; }
.upload-zone:hover { border-color:var(--rose); background:rgba(196,120,138,.09); }
.upload-zone.staged { border-style:solid; border-color:var(--plum); background:rgba(125,63,82,.05); }
.upload-zone p { font-size:.9rem; color:var(--ink); font-weight:300; }
.upload-icon { display:inline-block; width:38px; height:30px; border:1.5px solid var(--rose); border-radius:5px; position:relative; margin-bottom:.9rem; }
.upload-icon::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-60%); width:0; height:0; border-left:8px solid var(--rose); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.upload-check { display:inline-flex; width:38px; height:38px; border-radius:50%; background:var(--plum); color:#fff; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.8rem; }
.upload-hint { font-size:.76rem; color:var(--muted); display:block; margin-top:.4rem; }
.checkin-example { background:#fff; border:1px solid rgba(196,120,138,.16); border-radius:12px; padding:1.5rem; }
.example-label { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne-deep); margin-bottom:.8rem; }
.example-clip { position:relative; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:linear-gradient(150deg,var(--blush),rgba(125,63,82,.14)); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.example-play { position:relative; z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(250,246,244,.92); display:flex; align-items:center; justify-content:center; }
.example-play .vstage-triangle { border-left:15px solid var(--plum); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:3px; }
.example-tag { position:absolute; bottom:.6rem; left:.7rem; z-index:2; background:rgba(46,26,32,.62); color:#fff; font-size:.62rem; letter-spacing:.08em; padding:.2rem .6rem; border-radius:1rem; }
.example-note { font-size:.8rem; font-weight:300; color:var(--muted); line-height:1.55; margin-bottom:1.2rem; }
.example-checklist { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.example-checklist li { font-size:.82rem; color:var(--ink); padding-left:1.4rem; position:relative; line-height:1.45; }
.example-checklist li::before { content:'✓'; position:absolute; left:0; color:var(--sage-deep); }
.checkin-submitted { text-align:center; max-width:560px; margin:0 auto; }
.checkin-bloom { width:64px; height:64px; margin:0 auto 1.2rem; display:block; }
.retention-note { background:rgba(125,63,82,.05); border:1px solid rgba(196,120,138,.18); border-radius:10px; padding:1.2rem 1.4rem; font-size:.84rem; font-weight:300; color:var(--ink); line-height:1.6; margin:0 auto 1.8rem; max-width:480px; text-align:left; }
.retention-note .btn-text { margin-top:.6rem; display:inline-block; }

/* ---- Sherona response card (Program) ---- */
.response-card { text-align:left; max-width:560px; margin:2.6rem auto 0; background:#fff; border:1px solid var(--champagne-tint); border-radius:14px; padding:1.8rem; box-shadow:0 1px 0 var(--champagne) inset; }
.response-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap; }
.response-new { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--champagne-deep); padding:.25rem .7rem; border-radius:2rem; }
.response-card h3 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.5rem; color:var(--brown); margin-bottom:1.1rem; font-style:italic; }
.response-voice { display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.response-play { width:44px; height:44px; border-radius:50%; border:none; background:var(--plum); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.response-play .vstage-triangle { border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.response-wave { display:flex; align-items:center; gap:2px; flex:1; height:30px; }
.response-wave span { flex:1; background:rgba(196,120,138,.5); border-radius:1px; }
.response-dur { font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.response-note { font-size:.88rem; font-weight:300; font-style:italic; color:var(--plum); line-height:1.6; margin-bottom:1.1rem; }

/* ---- Referral + Settings ---- */
.account-screen { min-height:100vh; }
.account-body { max-width:680px; margin:0 auto; padding:2.4rem 2rem 4rem; }
.account-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(2.2rem,4.5vw,3rem); color:var(--brown); line-height:1.08; margin-bottom:.8rem; }
.account-title em { font-style:italic; color:var(--rose); }
.account-lede { font-size:1rem; font-weight:300; line-height:1.7; color:var(--muted); margin-bottom:2rem; }
.referral-code { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; background:linear-gradient(145deg,#fff,var(--blush)); border:1px solid rgba(196,120,138,.22); border-radius:12px; padding:1.4rem 1.6rem; margin-bottom:1rem; }
.rc-label { display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); margin-bottom:.3rem; }
.rc-code { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--plum); letter-spacing:.04em; }
.share-row { display:flex; gap:.7rem; margin-bottom:2rem; flex-wrap:wrap; }
.share-row button { flex:1; min-width:90px; background:#fff; border:1px solid rgba(196,120,138,.25); border-radius:2rem; padding:.7rem 1rem; font-size:.76rem; letter-spacing:.06em; color:var(--plum); transition:all .25s; }
.share-row button:hover { border-color:var(--rose); background:var(--blush); }
.referral-progress { background:#fff; border:1px solid rgba(196,120,138,.16); border-radius:12px; padding:1.4rem 1.6rem; margin-bottom:1.8rem; }
.rp-head { display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; color:var(--muted); margin-bottom:.8rem; }
.rp-head span:first-child { color:var(--brown); font-weight:500; }
.rp-track { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.rp-seg { height:8px; border-radius:4px; background:rgba(196,120,138,.18); }
.rp-seg.on { background:var(--rose); }
.referral-list { list-style:none; display:flex; flex-direction:column; }
.referral-list li { display:flex; align-items:center; gap:1rem; padding:.95rem 0; border-bottom:1px dashed rgba(196,120,138,.15); }
.referral-list li:last-child { border-bottom:none; }
.rl-dot { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.85rem; background:rgba(196,120,138,.14); border:1px dashed rgba(196,120,138,.35); }
.rl-dot.done { background:rgba(196,120,138,.16); border-style:solid; }
.rl-text { display:flex; flex-direction:column; }
.rl-text strong { font-size:.9rem; color:var(--brown); font-weight:500; }
.rl-text em { font-size:.78rem; color:var(--muted); font-style:normal; margin-top:.1rem; }

.set-group { padding:1.8rem 0; border-bottom:1px solid rgba(196,120,138,.14); }
.set-group:last-of-type { border-bottom:none; }
.set-group h3 { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:400; color:var(--brown); margin-bottom:.6rem; }
.set-help { font-size:.85rem; font-weight:300; color:var(--muted); line-height:1.6; margin-bottom:1.2rem; }
.budget-seg { display:flex; gap:.5rem; flex-wrap:wrap; }
.budget-seg button { flex:1; min-width:72px; background:#fff; border:1.5px solid rgba(196,120,138,.25); border-radius:2rem; padding:.8rem; font-size:.82rem; color:var(--plum); transition:all .25s; }
.budget-seg button:hover { border-color:var(--rose); }
.budget-seg button.active { background:var(--plum); border-color:var(--plum); color:#fff; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.85rem 0; }
.set-row.sub { padding-left:0; border-top:1px dashed rgba(196,120,138,.14); }
.set-row-text { display:flex; flex-direction:column; gap:.15rem; }
.set-row-text strong { font-size:.92rem; color:var(--brown); font-weight:500; }
.set-row-text span { font-size:.78rem; color:var(--muted); font-weight:300; line-height:1.5; }
.account-context { margin-bottom:0; }
.account-context .btn-text { margin-left:.35rem; }
.toggle { width:46px; height:26px; border-radius:2rem; border:none; background:rgba(196,120,138,.3); position:relative; flex-shrink:0; transition:background .25s; }
.toggle.on { background:var(--plum); }
.toggle-knob { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .25s; }
.toggle.on .toggle-knob { transform:translateX(20px); }
.time-input { font-family:'Jost',sans-serif; font-size:.86rem; color:var(--plum); border:1px solid rgba(196,120,138,.3); border-radius:8px; padding:.5rem .7rem; background:#fff; }
.btn-text.danger { color:#a23a4a; }
.signout { margin-top:2rem; background:none; border:1px solid rgba(196,120,138,.3); border-radius:2rem; padding:.85rem 2rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:all .25s; }
.signout:hover { border-color:var(--rose); color:var(--plum); }

/* ---- Session head (Practice) ---- */
.session-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; }
.session-head .card-eyebrow { margin:0; }
.session-budget { font-size:.78rem; color:var(--muted); }
.session-budget .btn-text { font-size:.78rem; }

/* ---- Library finale tag ---- */
.finaletag { position:absolute; top:.6rem; right:.7rem; background:var(--champagne-deep); color:#fff; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .55rem; border-radius:1rem; }

@media (max-width:800px) {
  .lesson-main { grid-template-columns:1fr; gap:1.8rem; }
  .checkin-record { grid-template-columns:1fr; gap:1.8rem; }
  .vstage { aspect-ratio:16/10; }
  .account-body { padding-inline:1.25rem; }
  .set-row { align-items:flex-start; flex-wrap:wrap; }
  .set-row-text { min-width:0; flex:1 1 12rem; }
  .set-row > .btn-text, .set-row > input[type="submit"] { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .confetti span, .vstage-fill, .dot.current, .spinner, .app-overlay { animation:none !important; }
}