:root{
  color-scheme: light;
  --bg:#f8f3f8; --surface:#fffcfe; --lilac:#f3e9f2; --lilac2:#efe8f3;
  --plum:#846a80; --plum-deep:#6d5a6a; --ink:#4a3d48; --ink2:#6d5a6a;
  --teal:#1f6f78; --teal-soft:#d9ecec;
  --gold:#e8d3a6; --gold2:#f6e7c8; --brown:#7a5a2e;
  --line:#e6d9e4;
  --shadow:0 10px 30px -14px rgba(74,61,72,.28);
  --r-card:20px; --r-input:14px;
  --head:"Varela Round", "Rubik", system-ui, sans-serif;
  --body:"Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body); font-size:16px; line-height:1.55; color:var(--ink);
  background:#e9dde8;
  min-height:100dvh;
}
/* desktop backdrop: blurred lavender field */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("assets/backdrop.jpg") center/cover;
  filter:blur(18px) saturate(.8); transform:scale(1.1); opacity:.55}
.app{position:relative;z-index:1;max-width:430px;margin:0 auto;min-height:100dvh;background:var(--bg);
  box-shadow:0 0 60px rgba(74,61,72,.18); padding-bottom:96px; overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ti{font-size:22px;line-height:1}
h1,h2,h3{font-family:var(--head);font-weight:400;color:var(--ink);line-height:1.25}
.screen{display:none;padding:0 16px}
.screen.on{display:block;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- top ---------- */
.top{display:flex;align-items:center;gap:12px;padding:18px 0 6px}
.top img{height:42px;width:auto;object-fit:contain}
.top .hello{flex:1}
.top h1{font-size:23px}
.top p{font-size:15px;color:var(--ink2)}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:500;transition:transform .2s var(--ease),background .2s}
.pill-btn:active{transform:scale(.97)}
.btn-plum{background:var(--plum);color:#fff}
.btn-plum:hover{background:var(--plum-deep)}
.btn-ghost{background:var(--surface);color:var(--plum-deep);border:1.5px solid var(--line)}
.btn-gold{background:var(--gold);color:var(--brown)}

.thursday{display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:12px 16px;border-radius:var(--r-card);
  background:var(--gold2);color:var(--brown);width:100%;text-align:right;min-height:56px}
.thursday .ti{font-size:26px}
.thursday b{font-weight:600;display:block}
.thursday span{font-size:14px}
.thursday .ti-chevron-left{margin-inline-start:auto;font-size:20px}

/* ---------- journey map ---------- */
.map-head{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 2px}
.map-head h2{font-size:20px}
.map-head small{font-size:14px;color:var(--ink2)}
.map{position:relative;margin:0 -16px;}
.map svg{display:block;width:100%;height:auto}
.region-label{position:absolute;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;
  padding:3px 10px 3px 12px;border-radius:999px;white-space:nowrap}
.region-label .ti{font-size:16px}
.station{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center}
.station .dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-size:16px}
.st-done .dot{background:var(--teal);color:#fff}
.st-now .dot{background:var(--plum);color:#fff;width:44px;height:44px;font-size:18px;box-shadow:0 0 0 5px #fff}
.st-now::before{content:"";position:absolute;inset:-22px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,211,166,.95) 0%,rgba(232,211,166,.45) 45%,rgba(232,211,166,0) 70%);z-index:-1}
.st-lock .dot{background:var(--surface);color:#a693a3;border:2px dashed #d6c6d3}
.st-lock .dot .ti{font-size:17px}
.slabel{position:absolute;width:44%;transform:translateY(-50%);line-height:1.3}
.slabel small{display:block;font-size:13px;color:var(--ink2)}
.slabel b{font-weight:500;font-size:15px}
.slabel.lock b{color:#8f7b8c;font-weight:400}
.slabel.now small{color:var(--brown);font-weight:600}
.slabel.now b{font-family:var(--head);font-size:17px;font-weight:400}
.slabel.now{width:50%;transform:translateY(-22px)}
.now-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--plum);color:#fff;font-size:14.5px;font-weight:500;box-shadow:0 10px 20px -10px rgba(109,90,106,.8);transition:transform .2s var(--ease)}
.now-cta:active{transform:scale(.97)}
.now-cta .ti{font-size:15px}
.now-wait{display:inline-block;margin-top:6px;font-size:13px;color:var(--brown);background:var(--gold2);border-radius:999px;padding:4px 12px}
.slabel.r{text-align:right}
.slabel.l{text-align:left}
.butterfly{position:absolute;left:0;top:0;width:46px;height:56px;margin:-66px 0 0 -6px;pointer-events:none;z-index:3;will-change:transform}
.butterfly img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(122,90,46,.25))}
.butterfly.flying img{animation:flap .22s ease-in-out infinite alternate}
.butterfly.rest img{animation:breathe 4.5s ease-in-out infinite}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.55)}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- cards ---------- */
.card{background:var(--surface);border-radius:var(--r-card);padding:18px;margin-top:14px;box-shadow:var(--shadow)}
.next{background:var(--plum);color:#fff;box-shadow:0 18px 34px -18px rgba(109,90,106,.7)}
.next .kicker{font-size:14px;opacity:.9}
.next h3{color:#fff;font-size:21px;margin:4px 0 6px}
.next .meta{font-size:14px;opacity:.9;display:flex;align-items:center;gap:6px}
.next .pill-btn{background:#fff;color:var(--plum-deep);margin-top:14px;width:100%}
.next.waiting{background:var(--lilac2);color:var(--ink)}
.next.waiting h3{color:var(--ink)}
.next.waiting .pill-btn{display:none}
.progress-row{display:flex;align-items:center;gap:14px}
.ring{--p:64;width:64px;height:64px;border-radius:50%;flex:none;
  background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--teal-soft) 0);display:grid;place-items:center;transition:--p .6s}
.ring span{width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--head);font-size:16px}
.progress-row p{font-size:15px;color:var(--ink2)}
.progress-row b{color:var(--ink);font-weight:500}

.sec-title{display:flex;align-items:center;gap:8px;font-size:18px;margin-bottom:10px}
.sec-title .ti{color:var(--plum)}
.sec-title small{margin-inline-start:auto;font-family:var(--body);font-size:13px;color:var(--ink2)}
.goals{list-style:none;counter-reset:g}
.goals li{counter-increment:g;display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;font-size:15.5px}
.goals li+li{border-top:1px solid var(--lilac)}
.goals li::before{content:counter(g);width:28px;height:28px;border-radius:50%;background:var(--lilac);color:var(--plum-deep);display:grid;place-items:center;font-family:var(--head);font-size:14px}
.goals .today{display:block;color:var(--ink2);font-size:14px}
.vision{margin-top:10px;width:100%;text-align:right;border-radius:var(--r-input);background:var(--lilac);padding:12px 14px;font-size:15px;color:var(--ink2);min-height:48px}
.vision q{font-style:normal;color:var(--ink)}
.vision q::before{content:"״"}.vision q::after{content:"״"}
.vision strong{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--plum-deep);margin-bottom:4px}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;margin-top:14px}
.split .card{margin-top:0}
.zoom .when{font-family:var(--head);font-size:19px;margin:2px 0 10px}
.zoom .pill-btn{width:100%;min-height:46px;padding:0 10px;font-size:14px}
.diary .bars{display:flex;align-items:flex-end;gap:5px;height:58px;margin:8px 0 6px}
.diary .bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--teal);opacity:.85;min-height:4px}
.diary .bars i.zero{background:var(--teal-soft);opacity:1}
.diary p{font-size:13px;color:var(--ink2);line-height:1.35}
.mentor-row{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:14px 16px;border-radius:var(--r-card);background:var(--lilac2);text-align:right;min-height:56px}
.mentor-row .ti-sparkles{color:var(--plum)}
.mentor-row b{font-weight:500}
.mentor-row .ti-chevron-left{margin-inline-start:auto;font-size:20px;color:var(--ink2)}
.signoff{margin:22px 0 6px;text-align:center;color:var(--ink2);font-size:14px}

/* ---------- path / lessons ---------- */
.page-head{padding:20px 0 6px}
.page-head h1{font-size:24px}
.page-head p{color:var(--ink2);font-size:15px}
.module{background:var(--surface);border-radius:var(--r-card);margin-top:12px;box-shadow:var(--shadow);overflow:hidden}
.module>button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:right;min-height:60px}
.module .mi{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none}
.module.done .mi{background:var(--teal);color:#fff}
.module.now .mi{background:var(--plum);color:#fff}
.module.locked .mi{background:var(--lilac);color:#a693a3}
.module .mt{flex:1}
.module .mt b{display:block;font-weight:500}
.module .mt small{color:var(--ink2);font-size:13.5px}
.module.locked .mt b{color:#7f6b7c;font-weight:400}
.module .chev{transition:transform .3s var(--ease);color:var(--ink2);font-size:20px}
.module.open .chev{transform:rotate(180deg)}
.lessons{display:none;padding:0 16px 10px}
.module.open .lessons{display:block}
.lesson{display:flex;align-items:center;gap:10px;width:100%;text-align:right;padding:11px 0;min-height:48px;font-size:15px;border-top:1px solid var(--lilac)}
.lesson .ti{font-size:19px}
.lesson.d .ti{color:var(--teal)}
.lesson.d span{color:var(--ink2)}
.lesson.cur{font-weight:500;color:var(--plum-deep)}
.lesson.cur .go{margin-inline-start:auto;background:var(--plum);color:#fff;border-radius:999px;padding:4px 12px;font-size:13px}
.lesson.lk{color:#8f7b8c}
.lesson.lk em{margin-inline-start:auto;font-style:normal;font-size:12.5px;background:var(--gold2);color:var(--brown);border-radius:999px;padding:3px 10px;white-space:nowrap}

/* lesson view */
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--plum-deep);font-weight:500;margin-top:10px}
.lesson-view .mod{font-size:14px;color:var(--ink2);margin-top:4px}
.lesson-view h1{font-size:23px;margin:2px 0 14px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  background:url("assets/backdrop.jpg") center/cover}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,61,72,.15),rgba(74,61,72,.55))}
.video button{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;background:rgba(255,252,254,.92);z-index:1;display:grid;place-items:center;color:var(--plum)}
.video button .ti{font-size:30px;margin-inline-start:4px}
.video .dur{position:absolute;bottom:10px;left:12px;z-index:1;color:#fff;font-size:13px}
.caption{font-size:13px;color:var(--ink2);margin-top:6px}
.task{margin-top:16px;background:var(--gold2);border-radius:var(--r-card);padding:16px;color:var(--brown)}
.task b{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:4px}
.ws h2{font-size:19px;margin:22px 0 4px}
.ws>p{font-size:14.5px;color:var(--ink2);margin-bottom:6px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:15px}
.ws .field label:has(b){display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.field label b{width:30px;height:30px;border-radius:50%;background:var(--lilac);display:grid;place-items:center;font-family:var(--head);font-weight:400;color:var(--plum-deep);font-size:16px}
textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-input);padding:12px 14px;min-height:84px;resize:vertical;width:100%}
textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(132,106,128,.2)}
textarea::placeholder{color:#8a7787}
.helper{font-size:13px;color:var(--ink2)}
.done-btn{width:100%;margin-top:22px}
.done-btn.is-done{background:var(--teal)}

/* ---------- Q&A ---------- */
.answer-days{display:flex;gap:10px;align-items:flex-start;background:var(--lilac2);border-radius:var(--r-card);padding:12px 14px;font-size:14.5px;color:var(--ink2);margin-top:8px}
.answer-days .ti{color:var(--plum);font-size:20px;margin-top:2px}
.compose{margin-top:14px}
.vis{display:flex;flex-direction:column;gap:8px;margin-top:12px;border:0}
.vis legend{font-size:15px;margin-bottom:6px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-input);border:1.5px solid var(--line);cursor:pointer;min-height:48px}
.opt input{accent-color:var(--plum);width:20px;height:20px;margin-top:2px;flex:none}
.opt span small{display:block;font-size:13px;color:var(--ink2)}
.opt:has(input:checked){border-color:var(--plum);background:#f7eff6}
.compose .pill-btn{width:100%;margin-top:14px}
.board-title{font-size:18px;margin:24px 0 2px}
.post{background:var(--surface);border-radius:var(--r-card);padding:16px;margin-top:12px;box-shadow:var(--shadow)}
.post .who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.post .who b{color:var(--ink);font-weight:500}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-size:15px;flex:none;background:var(--lilac);color:var(--plum-deep)}
.av.anon{background:var(--lilac2);color:var(--ink2)}
.post .q{margin-top:10px;font-size:15.5px}
.reply{margin-top:12px;padding:12px 14px;border-radius:var(--r-input);background:#f2f8f8;border-inline-start:3px solid var(--teal);font-size:15px}
.reply b{display:flex;align-items:center;gap:6px;color:var(--teal);font-weight:500;font-size:14px;margin-bottom:2px}
.reply.wait{background:var(--gold2);border-color:var(--gold);color:var(--brown)}
.reply.wait b{color:var(--brown)}

/* ---------- success wall ---------- */
.celebrate-hero{margin:16px 0 0;border-radius:var(--r-card);padding:20px 18px;background:var(--gold2);position:relative;overflow:hidden}
.celebrate-hero h1{font-size:24px;color:var(--brown)}
.celebrate-hero p{color:var(--brown);font-size:15px;max-width:26ch}
.celebrate-hero img{position:absolute;left:14px;top:10px;width:62px;opacity:.95}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--lilac);border-radius:999px;padding:4px;margin-top:12px}
.seg button{min-height:42px;border-radius:999px;font-size:14.5px;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--plum-deep);font-weight:500;box-shadow:0 2px 8px rgba(74,61,72,.12)}
.win{background:var(--surface);border-radius:var(--r-card);padding:16px;margin-top:12px;box-shadow:var(--shadow)}
.win p{margin:8px 0 10px;font-size:15.5px}
.clap{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--lilac);font-size:15px;transition:transform .2s var(--ease)}
.clap:active{transform:scale(.94)}
.clap.on{background:var(--gold2);color:var(--brown)}
.win.new{animation:pop .6s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;width:100%;height:100%}

/* ---------- tab bar ---------- */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:40;max-width:430px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,252,254,.96);border-top:1px solid var(--line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(10px)}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;justify-content:center;font-size:12.5px;color:var(--ink2);border-radius:16px;position:relative}
.tabs button[aria-selected="true"]{color:var(--plum-deep);font-weight:500}
.tabs button[aria-selected="true"] .ti{background:var(--lilac);border-radius:999px;padding:3px 16px}
.tabs .badge{position:absolute;top:6px;left:calc(50% - 22px);width:9px;height:9px;border-radius:50%;background:#c9a24f;border:2px solid #fff}

/* ---------- sheet & toast ---------- */
.scrim{position:fixed;inset:0;background:rgba(74,61,72,.35);z-index:50;display:none}
.scrim.on{display:block;animation:fade .25s}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:430px;margin:0 auto;z-index:51;background:var(--bg);border-radius:24px 24px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .4s var(--ease);max-height:86dvh;overflow:auto}
.sheet.on{transform:none}
.grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.sheet h2{font-size:20px;display:flex;align-items:center;gap:8px}
.sheet .close{margin-inline-start:auto;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.bubble{max-width:86%;padding:11px 14px;border-radius:18px;margin-top:10px;font-size:15px}
.bubble.me{background:var(--plum);color:#fff;margin-inline-start:auto;border-end-end-radius:6px}
.bubble.bot{background:var(--surface);box-shadow:var(--shadow);border-end-start-radius:6px}
.chat{display:flex;flex-direction:column}
.sheet .row{display:flex;gap:8px;margin-top:14px}
.sheet .row input{flex:1;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:999px;padding:0 16px;min-height:48px;background:var(--surface);color:var(--ink)}
.sheet .row button{width:48px;height:48px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center}
.sheet .to-tz{width:100%;margin-top:12px}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-20px);opacity:0;z-index:70;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:999px;font-size:14.5px;transition:all .35s var(--ease);max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
:focus-visible{outline:3px solid rgba(31,111,120,.55);outline-offset:2px}

/* ---------- v1b additions ---------- */
.ahead{margin-top:4px;padding:12px 12px 8px;border-radius:var(--r-card);background:var(--lilac)}
.ahead-t{font-size:13.5px;color:var(--ink2)}
.ahead-list{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:6px}
.ahead-list::before{content:"";position:absolute;top:22px;left:12%;right:12%;border-top:2px dotted #cdb9c9}
.ahead-list button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13.5px;color:var(--ink2);min-height:66px;position:relative}
.ahead-list .ic{width:44px;height:44px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:#8f7b8c;position:relative}
.ahead-list .ic .ti{font-size:20px}
.ahead-list .ic .ti-lock{position:absolute;bottom:-2px;left:-2px;font-size:11px;background:var(--surface);border-radius:50%;padding:3px;color:#a693a3;box-shadow:0 0 0 1px var(--lilac)}
.read-btn{margin-inline-start:auto;font-family:var(--body);font-size:13.5px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--gold2);color:var(--brown);font-weight:500;position:relative}
.read-btn::after{content:"";position:absolute;inset:-5px 0}
.read-done{margin-inline-start:auto;font-family:var(--body);font-size:13.5px;color:var(--teal);font-weight:500}
.log-btn{margin-inline-start:auto;display:inline-flex;align-items:center;gap:2px;font-family:var(--body);font-size:13px;min-height:36px;padding:0 10px;border-radius:999px;background:var(--lilac);color:var(--plum-deep);font-weight:500;position:relative}
.log-btn .ti{font-size:15px;color:var(--plum-deep)}
.log-btn::after{content:"";position:absolute;inset:-5px -2px}
.diary .bars i{transition:height .7s var(--ease)}
.diary .bars i.today{background:var(--plum)}
/* ruled worksheet */
.ws textarea{border:0;border-radius:0;padding:0 2px;background:transparent repeating-linear-gradient(to bottom,transparent 0,transparent 33px,#dccbd8 33px,#dccbd8 34.5px,transparent 34.5px,transparent 38px);
  background-attachment:local;font-size:18px;line-height:38px;min-height:114px;resize:none;caret-color:var(--teal)}
.ws textarea:focus{box-shadow:none;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,#b89bb3 33px,#b89bb3 34.5px,transparent 34.5px,transparent 38px)}
.tz-note{margin:18px auto 0;width:fit-content;max-width:90%;background:#fffaf0;border-radius:6px;padding:10px 22px 8px;transform:rotate(-2deg);
  box-shadow:0 10px 22px -12px rgba(122,90,46,.45);font-family:"Amatic SC",var(--head);color:var(--plum-deep);text-align:center;animation:note .7s var(--ease)}
.tz-note span{display:block;font-size:34px;line-height:1.1}
.tz-note em{display:block;font-style:normal;font-size:28px;color:var(--brown);text-align:left}
@keyframes note{from{opacity:0;transform:rotate(-6deg) translateY(10px)}to{opacity:1;transform:rotate(-2deg)}}
/* goals ritual */
.ritual{position:fixed;inset:0;z-index:80;max-width:430px;margin:0 auto;background:#4a3d48;color:#f6e7c8;overflow:auto;animation:fade .4s var(--ease)}
.ritual::before{content:"";position:fixed;inset:0;max-width:430px;margin:0 auto;background:url("assets/backdrop.jpg") center/cover;opacity:.16;pointer-events:none}
.r-inner{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 32px;text-align:center}
.r-top{position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between}
.r-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#f6e7c8;background:rgba(255,252,254,.08)}
.ritual h2{color:#f6e7c8;font-size:22px;margin-top:6px}
.r-goals{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.45;color:#fff7ea;max-width:32ch}
.r-med{margin-top:18px;min-height:132px;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:21px;line-height:1.5;color:#fff7ea;max-width:28ch;transition:opacity .9s ease}
.r-med.fade{opacity:0}
.breath{margin:26px auto 18px;width:152px;height:152px;position:relative;display:grid;place-items:center;flex:none}
.breath svg{position:absolute;inset:0;transform:rotate(-90deg)}
.breath .track{fill:none;stroke:rgba(232,211,166,.2);stroke-width:2}
.breath .fill{fill:none;stroke:#e8d3a6;stroke-width:2.5;stroke-linecap:round}
.breath .core{width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(246,231,200,.3),rgba(232,211,166,.06));display:grid;place-items:center;transform:scale(.86)}
.breath.quiet .core{animation:breathe2 8s ease-in-out infinite}
@keyframes breathe2{0%,100%{transform:scale(.84)}50%{transform:scale(1.04)}}
.breath .core span{font-family:var(--head);font-size:26px;color:#f6e7c8}
.breath.med .core span{font-size:18px}
.r-choices{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.r-ghost{background:rgba(255,252,254,.1);color:#fff7ea;border:1.5px solid rgba(246,231,200,.35)}
.r-dur{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.r-dur button{min-height:44px;border-radius:999px;color:#e9dcc4;font-size:14.5px;border:1px solid rgba(246,231,200,.22)}
.r-dur button[aria-pressed="true"]{background:rgba(246,231,200,.18);color:#fff7ea;border-color:rgba(246,231,200,.5)}
.r-hint{font-size:13.5px;color:#d8c8d4}
.r-done p{font-family:var(--head);font-size:24px;color:#fff7ea;margin-bottom:14px;animation:fade .6s var(--ease)}
/* log sheet */
.lg{margin-top:16px}
.lg h3{font-size:16.5px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-size:15px;transition:background .2s,border-color .2s}
.chips button[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
.chips.nums{display:grid;grid-template-columns:repeat(5,1fr)}
.chips.nums button{padding:0;font-family:var(--head);font-size:17px}
.scale-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin-top:4px}

/* real lessons */
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#2f272e}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfallback{display:inline-block;margin-top:6px;font-size:13px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;min-height:32px;padding-top:4px}
.lesson-view h1{line-height:1.3}
.wtable{margin-top:14px;border:1.5px solid var(--line);border-radius:var(--r-input);overflow:hidden;background:var(--surface)}
.wt-row{display:grid;grid-template-columns:1fr 1fr}
.wt-row+.wt-row{border-top:1px solid var(--lilac)}
.wt-row>*+*{border-inline-start:1px solid var(--lilac)}
.wt-head span{background:var(--lilac);padding:8px 10px;font-size:13.5px;font-weight:500;color:var(--plum-deep);line-height:1.35}
.wt-preset{padding:10px;font-size:14.5px;line-height:1.4}
.ws .wtable textarea{border:0;border-radius:0;background:transparent;min-height:58px;padding:8px 10px;font-size:15.5px;line-height:1.45;width:100%}
.ws .wtable textarea:focus{background:#fbf6fa}
.wchecks{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.gold-note{display:flex;gap:8px;margin-top:18px;background:var(--gold2);color:var(--brown);border-radius:var(--r-card);padding:14px 16px;font-size:15px}
.gold-note .ti{font-size:20px;flex:none;margin-top:1px}
.lesson:not(.lk){cursor:pointer}
.rec-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:40px;font-size:14px;color:var(--plum-deep);font-weight:500}
.rec-link .ti{font-size:17px}
.rec-list{display:flex;flex-direction:column;margin-top:10px}
.rec{display:flex;align-items:center;gap:10px;min-height:48px;text-align:right;border-top:1px solid var(--lilac);font-size:15.5px}
.rec .ti{color:var(--plum);font-size:19px}
.rec.on{color:var(--plum-deep);font-weight:500}
#recPlayer .player{margin-top:10px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- real app additions: same tokens, same radius rule ---------- */
/* a past week she has not finished yet: open, not "done" */
.st-open .dot{background:var(--surface);color:var(--plum-deep);border:2px solid var(--plum)}
.map-head small{max-width:60%;text-align:left}

/* first screens */
.boot{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center}
.boot img{width:56px;animation:breathe 2.4s ease-in-out infinite}
.login{position:relative;z-index:1;max-width:430px;margin:0 auto;min-height:100dvh;background:var(--bg);box-shadow:0 0 60px rgba(74,61,72,.18);
  display:flex;flex-direction:column;padding:28px 16px calc(24px + env(safe-area-inset-bottom));overflow:hidden}
.login::before{content:"";position:absolute;inset:0 0 auto 0;height:300px;background:url("assets/backdrop.jpg") center/cover;opacity:.32;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent);pointer-events:none}
.login>*{position:relative}
.login-logo{height:56px;width:auto;object-fit:contain;align-self:center}
.login-hero{margin:30px 0 18px;text-align:center}
.login-hero img{width:62px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(122,90,46,.25));animation:breathe 4.5s ease-in-out infinite}
.login-hero h1{font-size:26px;margin-top:8px}
.login-hero p{color:var(--ink2);font-size:15.5px;margin-top:4px}
.login .card{margin-top:0}
.field input{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-input);padding:0 14px;min-height:52px;width:100%}
.field input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(132,106,128,.2)}
.field input.code{font-family:var(--head);font-size:26px;letter-spacing:.28em;text-align:center}
.login .pill-btn{width:100%;margin-top:14px}
.login-err{margin-top:10px;font-size:14.5px;color:var(--brown);background:var(--gold2);border-radius:var(--r-input);padding:10px 14px}
.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:8px;color:var(--plum-deep);font-size:14.5px;font-weight:500;text-decoration:none}
.link-btn .ti{font-size:18px}
.link-btn[disabled]{color:var(--ink2);font-weight:400;cursor:default}
.login-foot{margin-top:auto;padding-top:22px;text-align:center;color:var(--ink2);font-size:14px}

/* access ended, waiting and notes */
.notice{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:var(--r-card);background:var(--gold2);color:var(--brown);font-size:15px}
.notice .ti{font-size:20px;flex:none;margin-top:1px}
.notice b{display:block;font-weight:600}
.empty{margin-top:12px;padding:18px;border-radius:var(--r-card);background:var(--lilac);color:var(--ink2);font-size:15px;text-align:center}
.card-note{font-size:15px;color:var(--ink2)}
.card-cta{width:100%;margin-top:12px}
.zoom .zoom-join{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px;color:var(--teal);font-weight:500;text-decoration:none}
.zoom .zoom-join .ti{font-size:17px}
.reply audio{display:block;width:100%;height:40px;margin-top:8px}
.my-answers .lesson-t{font-size:16px;margin-top:18px}
.my-answers p{margin-top:8px;padding:10px 14px;border-radius:var(--r-input);background:var(--surface);font-size:15px;white-space:pre-wrap;box-shadow:var(--shadow)}
.status-line{display:flex;gap:8px;margin-top:18px;border-radius:var(--r-card);padding:14px 16px;font-size:15px;background:var(--lilac2);color:var(--ink2)}
.status-line.ok{background:var(--teal-soft);color:var(--teal)}
.status-line .ti{font-size:20px;flex:none;margin-top:1px}
.goal-row-t{font-family:var(--head);font-size:15.5px;color:var(--plum-deep);margin-top:16px}
.goal-row-t+.wtable{margin-top:6px}

/* lesson content cannot be selected. Her own answer fields always can. */
.protect{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.protect textarea,.protect input{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* a closed sheet is really gone: no focus inside it, nothing for a screen reader */
.sheet{visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s}
.sheet.on{visibility:visible;transition:transform .4s var(--ease),visibility 0s}

/* mentor conversation */
.bubble{white-space:pre-wrap;overflow-wrap:anywhere}
.bubble a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bubble.wait{color:var(--ink2)}
.bubble.wait i{display:inline-block;width:7px;height:7px;margin-inline-end:4px;border-radius:50%;background:var(--plum);animation:breathe2 1.4s ease-in-out infinite}
.bubble.wait i:nth-child(2){animation-delay:.2s}
.bubble.wait i:nth-child(3){animation-delay:.4s}
.bubble.safety{max-width:100%;width:100%;background:var(--gold2);color:var(--ink);box-shadow:inset 0 0 0 2px var(--gold);border-radius:var(--r-card);padding:16px;font-size:16.5px;line-height:1.6}
.bubble.safety a{font-weight:600;color:var(--brown)}
.mentor-hint{margin-top:10px;font-size:14.5px;color:var(--ink2)}
.mentor-left{margin-top:8px;font-size:13.5px;color:var(--ink2);text-align:center}
.sheet .row button:disabled{opacity:.55;cursor:default}