:root {
  --cream: #FBF5EE; --sand: #F2E6DA; --sand-2: #EFE3D8; --line: #E6D6C8; --ink: #3A2A30; --ink-2: #5A454C; --muted: #7A6168;
  --terra: #A94B3F; --terra-d: #8A3A30; --blush: #F6E4DC; --blush-2: #FBEDE5; --sage: #5F7F66; --sage-d: #43604A; --sage-l: #E3ECE2;
  --honey: #F7E7CF; --honey-d: #7A5424; --amber: #E3A857; --lav: #E4E1F0; --lav-d: #4F4478; --plum: #EDE4F2; --plum-d: #6A4F82;
  --rose: #C0605A; --white: #FFFFFF; --shadow: 0 6px 24px rgba(90, 50, 40, .07);
  --serif: 'Fraunces', Georgia, serif; --sans: 'Figtree', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #EFE6DC; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--terra); }
a.logcta, a.avatar, a.card, a.dark, a.lrow, a.dept { text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* shell */
.shell { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--cream); position: relative; display: flex; flex-direction: column; }
.main { flex: 1; padding: 20px 20px 110px; display: flex; flex-direction: column; gap: 16px; }
.nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: calc(84px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--sand-2); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 20; }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8C7A80; text-decoration: none; font-size: 12px; font-weight: 600; min-height: 44px; }
.nav a.on { color: var(--terra); }
.side { display: none; }
@media (min-width: 960px) {
  .shell { max-width: none; flex-direction: row; background: var(--cream); }
  .nav { display: none; }
  .side { display: flex; flex-direction: column; gap: 24px; width: 232px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--sand-2); padding: 28px 18px; position: sticky; top: 0; height: 100vh; }
  .side .brand { font-family: var(--serif); font-size: 20px; font-weight: 600; padding: 0 10px; line-height: 1.2; }
  .side .brand span { color: var(--terra); display: block; }
  .side a { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 14px; text-decoration: none; font-weight: 600; color: #6B5A60; }
  .side a.on { background: var(--blush-2); color: var(--terra); }
  .main { padding: 36px 40px 48px; max-width: 880px; width: 100%; margin: 0 auto; }
  .main .grid-d2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.12) } }
@keyframes halo { 0% { transform: scale(.8); opacity: .55 } 100% { transform: scale(1.7); opacity: 0 } }
@keyframes ring { from { stroke-dashoffset: 339 } }
@keyframes grow { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes fillw { from { width: 0 } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
@keyframes burst { 0% { transform: translateX(0) scale(.4); opacity: 1 } 100% { transform: translateX(112px) scale(1); opacity: 0 } }
@keyframes wiggle { 0%, 86%, 100% { transform: rotate(0) } 89% { transform: rotate(-4deg) } 92% { transform: rotate(4deg) } 95% { transform: rotate(-2deg) } }
@keyframes shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px) } 20% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-50px) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes boxbreath { 0% { transform: scale(.62) } 40% { transform: scale(1) } 50% { transform: scale(1) } 90% { transform: scale(.62) } 100% { transform: scale(.62) } }
@keyframes idle { 0%, 100% { transform: scale(.66) } 50% { transform: scale(.72) } }
@keyframes ripple { 0% { transform: scale(.7); opacity: .5 } 100% { transform: scale(1.35); opacity: 0 } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(12px, -18px) } }
.rise { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.main > .rise:nth-child(2) { animation-delay: .06s } .main > .rise:nth-child(3) { animation-delay: .12s } .main > .rise:nth-child(4) { animation-delay: .18s }
.main > .rise:nth-child(5) { animation-delay: .24s } .main > .rise:nth-child(n+6) { animation-delay: .3s }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* primitives */
.card { background: var(--white); border-radius: 24px; padding: 18px; box-shadow: var(--shadow); }
.dark { background: var(--ink); color: var(--cream); border-radius: 24px; padding: 18px; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.btn { min-height: 52px; padding: 0 22px; border-radius: 26px; border: none; background: var(--terra); color: #fff; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .12s, background .2s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { background: #CDB3AA; cursor: default; }
.btn.block { width: 100%; }
.btn.light { background: var(--cream); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--terra); padding: 0 6px; min-height: 44px; }
.btn.dark { background: var(--ink); color: var(--cream); }
.btn.sm { min-height: 44px; font-size: 14px; padding: 0 18px; border-radius: 22px; }
.btn.outline { background: var(--white); color: var(--terra); border: 2px solid var(--terra); }
.iconbtn { width: 44px; height: 44px; border-radius: 22px; border: none; background: var(--sand); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid #D9A98F; background: var(--blush-2); color: var(--terra-d); font-weight: 600; font-size: 14px; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.h1 { font-size: 30px; line-height: 1.1; }
.serif { font-family: var(--serif); }
.orb { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6D59A, #E3A857 55%, #C9824A); animation: breathe 4.5s ease-in-out infinite; }
.orbwrap { position: relative; flex-shrink: 0; }
.orbwrap .halo { position: absolute; inset: 0; border-radius: 50%; background: var(--amber); animation: halo 3s ease-out infinite; }
.orbwrap .orb { position: absolute; inset: 8%; }
.input { min-height: 50px; border-radius: 16px; border: 1.5px solid var(--line); background: #FDFAF6; padding: 0 16px; font-size: 16px; width: 100%; }
textarea.input { padding: 14px 16px; min-height: 140px; resize: vertical; line-height: 1.5; }
.bar { height: 8px; border-radius: 4px; background: var(--sand); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; animation: fillw 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
.stat { border-radius: 20px; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.stat span { font-size: 12px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skeleton { height: 120px; border-radius: 24px; background: linear-gradient(110deg, #F4EBE2 30%, #FBF5EE 50%, #F4EBE2 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* toast + modal */
.toast { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%); width: calc(100% - 40px); max-width: 440px; padding: 14px 16px; border-radius: 18px; background: var(--ink); color: var(--cream); font-size: 14px; display: flex; gap: 10px; align-items: center; z-index: 50; animation: toastIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.modal-bg { position: fixed; inset: 0; background: rgba(40, 25, 30, .55); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--cream); width: 100%; max-width: 480px; border-radius: 28px 28px 0 0; padding: 24px 22px 32px; display: flex; flex-direction: column; gap: 14px; animation: rise .35s both; }
@media (min-width: 960px) { .modal-bg { align-items: center; } .modal { border-radius: 28px; } }
.emergency { border: 2px solid var(--terra); background: #FFF7F4; }

/* home */
.greet { padding-top: 6px; }
.avatar { width: 44px; height: 44px; border-radius: 22px; background: #F2D9CF; color: var(--terra-d); font-weight: 700; display: flex; align-items: center; justify-content: center; border: none; }
.ring-wrap { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.ring-wrap svg { display: block; }
.ring-wrap .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring { animation: ring 1.8s .3s cubic-bezier(.2, .8, .2, 1) both; }
.action { display: flex; gap: 12px; align-items: center; min-height: 56px; width: 100%; padding: 10px 14px; border-radius: 16px; border: 1.5px solid var(--sand-2); background: #FDFAF6; text-align: left; }
.action .dot { width: 26px; height: 26px; border-radius: 13px; background: #D8CBC0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; }
.action.on { background: var(--sage-l); border-color: var(--sage); }
.action.on .dot { background: var(--sage); }
.logcta { min-height: 64px; border-radius: 24px; border: 2px dashed #D9A98F; background: var(--blush-2); color: var(--terra-d); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; }
.bars { display: flex; align-items: flex-end; justify-content: space-between; height: 118px; gap: 8px; border-bottom: 1px solid var(--sand-2); }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: flex-end; height: 100%; }
.bars .b i { width: 100%; max-width: 28px; border-radius: 10px 10px 4px 4px; transform-origin: bottom; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.bars .b small { font-size: 11px; color: var(--muted); }
.days { display: flex; gap: 8px; } .days span { flex: 1; text-align: center; font-size: 12px; color: var(--muted); }
.pop-card { position: relative; overflow: hidden; border-radius: 24px; background: var(--amber); padding: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.pop-card .shine { position: absolute; inset: 0; background-image: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%); background-size: 200% 100%; animation: shimmer 3s linear infinite; pointer-events: none; }
.pop-card .bolt { width: 48px; height: 48px; border-radius: 16px; background: var(--cream); display: flex; align-items: center; justify-content: center; animation: wiggle 4s ease-in-out infinite; flex-shrink: 0; }
.affirm { border-radius: 24px; padding: 20px; background: var(--sage-l); }
.affirm p { margin: 6px 0 0; font-family: var(--serif); font-size: 20px; line-height: 1.35; color: #2F4434; }
.dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dept { min-height: 150px; border-radius: 22px; border: none; padding: 16px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--ink); transition: transform .15s; }
.dept:active { transform: scale(.97); }
.dept .ic { width: 40px; height: 40px; border-radius: 14px; background: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; }
.dept b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.dept small { font-size: 12px; font-weight: 600; }
.lrow { display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: 18px; background: var(--white); text-decoration: none; color: var(--ink); border: 1.5px solid var(--sand-2); }
.lrow.locked { opacity: .6; }

/* lesson */
.segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.segs div { display: flex; flex-direction: column; gap: 6px; }
.segs i { height: 5px; border-radius: 3px; background: var(--line); transition: background .3s; }
.segs span { font-size: 11px; font-weight: 600; text-align: center; color: #8C7A80; }
.segs .done i { background: var(--sage); } .segs .cur i { background: var(--terra); } .segs .cur span { color: var(--terra); }
.lesson-foot { position: sticky; bottom: 0; background: var(--cream); padding: 12px 0 20px; display: flex; gap: 10px; border-top: 1px solid var(--sand); margin-top: auto; }
@media (max-width: 959px) { .lesson-foot { bottom: 84px; } }
.swaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.swaps div { border-radius: 18px; background: var(--white); padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 16px rgba(90,50,40,.06); }
.swaps s { font-size: 13px; color: #9A7E86; } .swaps b { font-size: 14px; color: var(--sage-d); }
.opt { min-height: 56px; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--sand-2); background: var(--white); font-size: 15px; font-weight: 600; text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.opt.right { background: var(--sage-l); border-color: var(--sage); }
.opt.wrong { background: var(--blush); border-color: var(--terra); }
.opt.sel { background: var(--blush-2); border-color: var(--terra); }
.feedback { display: flex; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--ink); color: var(--cream); align-items: flex-start; font-size: 14px; line-height: 1.5; animation: rise .4s both; }
.feedback .orb { width: 24px; height: 24px; flex-shrink: 0; }
.celebrate { position: relative; width: 140px; height: 140px; margin: 24px auto 0; }
.celebrate .spark { position: absolute; left: 64px; top: 64px; width: 12px; height: 12px; }
.celebrate .spark i { position: absolute; inset: 0; border-radius: 6px; animation: burst 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.celebrate .check { position: absolute; inset: 10px; border-radius: 60px; background: var(--sage); display: flex; align-items: center; justify-content: center; animation: pop .7s cubic-bezier(.2, .8, .2, 1) both; }
.toggle { width: 52px; height: 30px; border-radius: 15px; background: #D8CBC0; position: relative; border: none; flex-shrink: 0; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: left .25s; }
.toggle[aria-checked="true"] { background: var(--sage); }
.toggle[aria-checked="true"]::after { left: 25px; }

/* log */
.stepper { display: flex; gap: 10px; }
.stepper button { width: 48px; height: 48px; border-radius: 24px; border: none; font-size: 22px; }
.moods { display: flex; gap: 8px; }
.moods button { flex: 1; min-height: 64px; border-radius: 16px; border: 2px solid var(--sand-2); background: #FDFAF6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 0; }
.moods button.on { border-color: var(--terra); background: var(--blush-2); }
.moods i { width: 18px; height: 18px; border-radius: 9px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--sand-2); background: #FDFAF6; font-size: 14px; font-weight: 600; }
.pill.on { background: var(--blush); border-color: var(--terra); color: var(--terra-d); }
.pill.on.sage { background: var(--sage-l); border-color: var(--sage); color: var(--sage-d); }

/* marie */
.chat { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 84%; padding: 12px 14px; font-size: 15px; line-height: 1.45; animation: rise .35s both; white-space: pre-wrap; }
.bubble.m { align-self: flex-start; background: var(--white); border-radius: 18px 18px 18px 6px; box-shadow: 0 2px 10px rgba(90,50,40,.05); }
.bubble.me { align-self: flex-end; background: var(--terra); color: #fff; border-radius: 18px 18px 6px 18px; }
.bubble.alert { background: #FFF7F4; border: 2px solid var(--terra); }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--white); }
.typing i { width: 7px; height: 7px; border-radius: 4px; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s } .typing i:nth-child(3) { animation-delay: .4s }
.composer { position: sticky; bottom: 84px; background: var(--cream); padding: 10px 0 8px; display: flex; gap: 8px; }
@media (min-width: 960px) { .composer { bottom: 0; } }
.composer .input { border-radius: 26px; }

/* mind */
.breath { border-radius: 28px; background: #2F4434; color: #EEF3EC; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.breath .stage { position: relative; width: 230px; height: 230px; display: flex; align-items: center; justify-content: center; }
.breath .rip { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #B8D1BC; animation: ripple 5s ease-out infinite; }
.breath .rip.b { animation-delay: 2.5s; }
.breath .ball { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #DDEBDD, #8FB592 60%, #5F7F66); animation: idle 5s ease-in-out infinite; }
.breath .ball.on { animation: boxbreath 10s ease-in-out infinite; }
.breath .lbl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #1F3024; }

/* quiz */
.garden { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.garden div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.garden i { width: 38px; height: 38px; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: #F4EBE2; }
.plus { position: fixed; right: 28px; top: 90px; font-weight: 800; font-size: 20px; color: var(--rose); animation: floatUp 1.4s ease-out both; pointer-events: none; z-index: 30; }
.flower { animation: spin 18s linear infinite; }

/* onboarding */
.onb { min-height: 100vh; display: flex; flex-direction: column; padding: 24px; position: relative; overflow: hidden; max-width: 480px; margin: 0 auto; background: var(--cream); }
.onb .blob { position: absolute; border-radius: 50%; opacity: .8; animation: drift 9s ease-in-out infinite; pointer-events: none; }
.onb .body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.dots { display: flex; gap: 6px; } .dots i { height: 6px; width: 6px; border-radius: 3px; background: var(--line); transition: width .3s; } .dots i.on { background: var(--terra); } .dots i.cur { width: 22px; }
.goal { min-height: 92px; border-radius: 20px; border: 2px solid var(--sand-2); background: var(--white); padding: 14px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; font-weight: 600; }
.consent { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 18px; border: 1.5px solid var(--sand-2); background: var(--white); }
.consent .box { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; border: 1.5px solid #CDBDB1; display: flex; align-items: center; justify-content: center; }
.consent.on { border-color: #B8D1BC; } .consent.on .box { background: var(--sage); border-color: var(--sage); }

/* journey */
.path { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 40px; }
.path::before { content: ''; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: linear-gradient(var(--sage) 0%, var(--sage) 8%, var(--line) 8%); }
.phase { position: relative; }
.phase .pin { position: absolute; left: -34px; top: 16px; width: 22px; height: 22px; border-radius: 11px; background: var(--line); border: 3px solid var(--cream); }
.phase.cur .pin { background: var(--terra); box-shadow: 0 0 0 6px rgba(169,75,63,.15); }
.phase button { width: 100%; text-align: left; border-radius: 20px; border: 1.5px solid var(--sand-2); background: var(--cream); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.phase.cur button { background: var(--white); border-color: #D9A98F; }

/* ---- lesson variety formats ---- */
.teaser { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--honey); border: 1px dashed rgba(154,106,31,.35); }
.fmt { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sage-l); color: var(--sage-d); }
.scene { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 20px; background: var(--sage-l); border-left: 4px solid var(--sage); }
.scene p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.myth { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 2px 10px rgba(74,57,64,.06); transition: background .3s, transform .3s; }
.myth.right { background: var(--sage-l); animation: flipin .45s ease; }
.myth.wrong { background: var(--blush); animation: flipin .45s ease; }
@keyframes flipin { from { transform: rotateX(70deg); opacity: .4 } to { transform: none; opacity: 1 } }
.recipe { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 2px 12px rgba(74,57,64,.07); }
.recipe ul, .recipe ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.built { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--sage-l); }
.built span:not(.eyebrow) { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.built span b { width: 22px; height: 22px; border-radius: 11px; background: var(--sage); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.xdays { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--honey); }
.xdays i { font-style: normal; width: 34px; height: 34px; border-radius: 17px; background: rgba(255,255,255,.7); color: var(--honey-d); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; animation: pop .4s both; }
.xdays i:first-child { background: var(--amber); color: #fff; }
@keyframes pop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
.milestone { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--honey); color: #5A3A12; font-size: 15px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .myth.right, .myth.wrong, .xdays i { animation: none; } }

/* ---- linear story-card lessons ---- */
.ticks { display: flex; gap: 3px; }
.ticks i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.ticks i.done { background: var(--terra); }
.ticks i.cur { background: linear-gradient(90deg, var(--terra) 50%, var(--line) 50%); }
.story-card { display: flex; flex-direction: column; gap: 14px; min-height: 52vh; padding: 24px 22px; border-radius: 28px; background: var(--white, #fff); box-shadow: 0 6px 28px rgba(74,57,64,.08); }
.story-card.dark-card { background: #3A2A2F; color: #FBF5EE; }
.story-card .big { margin: 0; font-size: 20px; line-height: 1.55; color: #4A3940; }
.story-card .myth { box-shadow: none; }
.story-card.enter { animation: cardIn .38s cubic-bezier(.2,.8,.2,1); }
.story-card.enter.back { animation: cardBack .38s cubic-bezier(.2,.8,.2,1); }
@keyframes cardIn { from { transform: translateX(48px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes cardBack { from { transform: translateX(-48px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .story-card.enter, .story-card.enter.back { animation: none; } }

/* ---- daily ring, inbox, recap ---- */
.bell { position: relative; }
.bell .dotn { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 5px; background: var(--terra); box-shadow: 0 0 0 2px var(--cream); }
.ringcard { display: flex; flex-direction: column; gap: 14px; }
.ring3.closed { animation: ringpulse 1.2s ease 1; }
@keyframes ringpulse { 40% { transform: scale(1.06) } }
.ringrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--cream); color: inherit; text-decoration: none; }
.ringrow .dot { width: 26px; height: 26px; border-radius: 13px; border: 2.5px solid var(--c); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ringrow.on .dot { background: var(--c); }
.ringrow.on b { color: var(--muted); }
.weekdots { display: flex; justify-content: space-between; padding: 0 4px; }
.weekdots span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.weekdots i { width: 14px; height: 14px; border-radius: 7px; border: 2px solid var(--line); }
.weekdots .on i { background: var(--terra); border-color: var(--terra); }
.lrow.unread { box-shadow: inset 3px 0 0 var(--terra); }
.story-card.recap { justify-content: center; gap: 16px; }
.story-card.recap .eyebrow { color: var(--terra); }
.story-card.dark-card.recap .eyebrow { color: #E3C9A8; }
.story-card.dark-card.recap .big { color: #F3E6D8; }
.recap-big { font-size: 38px; line-height: 1.1; }
.tone-honey { background: var(--honey); } .tone-sage { background: var(--sage-l); } .tone-blush { background: var(--blush); }
@media (prefers-reduced-motion: reduce) { .ring3.closed { animation: none; } .ring3 circle { transition: none !important; } }

/* ---- practitioner console ---- */
.pc { max-width: 1180px; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; min-height: 100vh; }
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-main { display: flex; flex-direction: column; gap: 14px; }
.pc-flash { padding: 12px 14px; border-radius: 14px; background: var(--sage-l); color: var(--sage-d); font-weight: 600; font-size: 14px; word-break: break-all; }
.pc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pc-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--sand); white-space: nowrap; }
.pc-table td { padding: 10px 12px; border-bottom: 1px solid var(--sand); vertical-align: top; }
.pc-table tr[data-member] { cursor: pointer; }
.pc-table tr[data-member]:hover, .pc-table tr[data-member]:focus { background: var(--cream); outline: none; }
.pc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 960px) { .pc-grid { grid-template-columns: 3fr 2fr; } }
.pc-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-radius: 14px; background: var(--cream); }
.pc-focus input[name^="note"] { grid-column: 1 / -1; }
.pc-focus select[name^="lesson"] { grid-column: 1 / -1; }
.pc-table td:first-child { white-space: nowrap; }

/* ---- care note, Blueprint, garden ---- */
.carenote { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--sage-l); }
.bp-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.garden-scene { width: 100%; height: auto; display: block; border-radius: 18px; }
@media print {
  .nav, .side, .noprint, .toast { display: none !important; }
  .shell, .main { max-width: none !important; background: #fff !important; }
  .card, .dark { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
  .dark { background: #fff !important; color: #222 !important; }
  .dark * { color: #222 !important; }
}
.pc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pc-stat { background: var(--white, #fff); box-shadow: 0 2px 10px rgba(74,57,64,.05); }
.pc-stat b { font-family: inherit; font-size: 28px; font-weight: 700; }
.pc-grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 960px) { .pc-grid2 { grid-template-columns: 1fr 1fr; } }
.pc-bar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 56px; gap: 10px; align-items: center; font-size: 13px; min-height: 24px; border-radius: 6px; }
.pc-bar:focus { outline: 2px solid var(--terra); outline-offset: 2px; }
.pc-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-bar-t { height: 10px; background: var(--sand); border-radius: 5px; overflow: hidden; }
.pc-bar-t i { display: block; height: 100%; background: var(--terra); border-radius: 0 4px 4px 0; }
.pc-bar-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-heat td { text-align: center; font-variant-numeric: tabular-nums; }
.pc-heat td:first-child, .pc-heat td:nth-child(2) { text-align: left; }
.pc-lrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.pc-lrow:hover, .pc-lrow:focus { background: var(--cream); outline: none; }