/* ===================== Design tokens ===================== */
:root{
  --bg-a:#eaf4ff;
  --bg-b:#dceeff;
  --bg-c:#e6f6ff;
  --primary:#8b7fd6;
  --primary-dark:#6c5ce7;
  --primary-soft:#e9e5fb;
  --mint:#6fcf9e;
  --mint-soft:#e1f6ec;
  --peach:#ff9d76;
  --peach-soft:#ffe8dc;
  --rose:#f492b0;
  --text:#2d2a3d;
  --text-soft:#6b6580;
  --text-faint:#9992ad;
  --card-bg:rgba(255,255,255,0.72);
  --card-border:rgba(255,255,255,0.9);
  --shadow-soft:0 10px 40px -12px rgba(108,92,231,0.25);
  --shadow-lift:0 20px 50px -15px rgba(108,92,231,0.35);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --font-head:'Quicksand', sans-serif;
  --font-body:'Nunito', sans-serif;
  --font-journal:'Dancing Script', cursive;
  --font-gothic:'UnifrakturCook', cursive;
  --paper-bg:#fdf8ec;
  --rule-line:#e2d8bd;
  --margin-line:#d98a8a;
  --ink-color:#2b2440;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg-a:#181328;
  --bg-b:#1c1a30;
  --bg-c:#20172c;
  --primary:#a79bf0;
  --primary-dark:#8b7fd6;
  --primary-soft:#312a52;
  --mint:#7fe0ac;
  --mint-soft:#1f3b30;
  --peach:#ffab84;
  --peach-soft:#3a2a24;
  --rose:#f7a9c4;
  --text:#f1eefb;
  --text-soft:#c6c1de;
  --text-faint:#8c85a8;
  --card-bg:rgba(38,32,58,0.72);
  --card-border:rgba(255,255,255,0.08);
  --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
  --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
  --paper-bg:#241f33;
  --rule-line:#382f4c;
  --margin-line:#a15a6a;
  --ink-color:#e7e0ff;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-a:#181328; --bg-b:#1c1a30; --bg-c:#20172c;
    --primary:#a79bf0; --primary-dark:#8b7fd6; --primary-soft:#312a52;
    --mint:#7fe0ac; --mint-soft:#1f3b30;
    --peach:#ffab84; --peach-soft:#3a2a24;
    --rose:#f7a9c4;
    --text:#f1eefb; --text-soft:#c6c1de; --text-faint:#8c85a8;
    --card-bg:rgba(38,32,58,0.72); --card-border:rgba(255,255,255,0.08);
    --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
    --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
    --paper-bg:#241f33; --rule-line:#382f4c; --margin-line:#a15a6a; --ink-color:#e7e0ff;
    color-scheme: dark;
  }
}

/* ===================== Color themes =====================
   "lavender" (above) is the default and needs no attribute. Each other theme
   defines its own light + dark + system-preference-dark variants, mirroring
   the lavender pattern exactly so the toggle continues to work per-theme. */
:root[data-palette="ocean"]{
  --bg-a:#e8f6f7; --bg-b:#dcf0f5; --bg-c:#e3f7fa;
  --primary:#3fa8b5; --primary-dark:#2c8a96; --primary-soft:#dcf0f0;
  --mint:#5fc9a8; --mint-soft:#dff5ec;
  --peach:#f6b26b; --peach-soft:#fdecd6;
  --rose:#7ec3e0;
  --text:#1f3a3d; --text-soft:#4f7175; --text-faint:#87a3a6;
  --card-bg:rgba(255,255,255,0.72); --card-border:rgba(255,255,255,0.9);
  --shadow-soft:0 10px 40px -12px rgba(44,138,150,0.25);
  --shadow-lift:0 20px 50px -15px rgba(44,138,150,0.35);
  --paper-bg:#f6fbfa; --rule-line:#cfe6e2; --margin-line:#5a9aa6; --ink-color:#1f3a3d;
}
:root[data-palette="ocean"][data-theme="dark"]{
  --bg-a:#0e2226; --bg-b:#122a2f; --bg-c:#0f2429;
  --primary:#5fc4d1; --primary-dark:#3fa8b5; --primary-soft:#1c3d41;
  --mint:#7fdcb9; --mint-soft:#1c3a30;
  --peach:#ffbf85; --peach-soft:#3a2c1e;
  --rose:#8fd3ee;
  --text:#e6f5f6; --text-soft:#b7d6d8; --text-faint:#7fa3a6;
  --card-bg:rgba(20,45,49,0.72); --card-border:rgba(255,255,255,0.08);
  --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
  --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
  --paper-bg:#16302f; --rule-line:#254745; --margin-line:#6fb0ba; --ink-color:#dff2f2;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="ocean"]:not([data-theme="light"]){
    --bg-a:#0e2226; --bg-b:#122a2f; --bg-c:#0f2429;
    --primary:#5fc4d1; --primary-dark:#3fa8b5; --primary-soft:#1c3d41;
    --mint:#7fdcb9; --mint-soft:#1c3a30;
    --peach:#ffbf85; --peach-soft:#3a2c1e;
    --rose:#8fd3ee;
    --text:#e6f5f6; --text-soft:#b7d6d8; --text-faint:#7fa3a6;
    --card-bg:rgba(20,45,49,0.72); --card-border:rgba(255,255,255,0.08);
    --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
    --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
    --paper-bg:#16302f; --rule-line:#254745; --margin-line:#6fb0ba; --ink-color:#dff2f2;
    color-scheme:dark;
  }
}

:root[data-palette="sunset"]{
  --bg-a:#fff1e6; --bg-b:#ffe4d6; --bg-c:#fff0e0;
  --primary:#e07a4e; --primary-dark:#c85f34; --primary-soft:#fbe3d4;
  --mint:#f2b75f; --mint-soft:#fdefda;
  --peach:#ff9d76; --peach-soft:#ffe8dc;
  --rose:#e8829a;
  --text:#3d2a24; --text-soft:#7a5c50; --text-faint:#ad8f80;
  --card-bg:rgba(255,255,255,0.72); --card-border:rgba(255,255,255,0.9);
  --shadow-soft:0 10px 40px -12px rgba(200,95,52,0.25);
  --shadow-lift:0 20px 50px -15px rgba(200,95,52,0.35);
  --paper-bg:#fdf6ee; --rule-line:#f0ddc8; --margin-line:#c9705a; --ink-color:#3d2a24;
}
:root[data-palette="sunset"][data-theme="dark"]{
  --bg-a:#2a1810; --bg-b:#301c12; --bg-c:#26160f;
  --primary:#f0955f; --primary-dark:#e07a4e; --primary-soft:#4a2e1e;
  --mint:#f5c785; --mint-soft:#3d2f1a;
  --peach:#ffab84; --peach-soft:#3a2a24;
  --rose:#f0a3b8;
  --text:#fbeee4; --text-soft:#dcbfab; --text-faint:#a68872;
  --card-bg:rgba(50,29,19,0.72); --card-border:rgba(255,255,255,0.08);
  --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
  --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
  --paper-bg:#331f14; --rule-line:#4a3222; --margin-line:#d68a68; --ink-color:#f7e6d8;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="sunset"]:not([data-theme="light"]){
    --bg-a:#2a1810; --bg-b:#301c12; --bg-c:#26160f;
    --primary:#f0955f; --primary-dark:#e07a4e; --primary-soft:#4a2e1e;
    --mint:#f5c785; --mint-soft:#3d2f1a;
    --peach:#ffab84; --peach-soft:#3a2a24;
    --rose:#f0a3b8;
    --text:#fbeee4; --text-soft:#dcbfab; --text-faint:#a68872;
    --card-bg:rgba(50,29,19,0.72); --card-border:rgba(255,255,255,0.08);
    --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
    --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
    --paper-bg:#331f14; --rule-line:#4a3222; --margin-line:#d68a68; --ink-color:#f7e6d8;
    color-scheme:dark;
  }
}

:root[data-palette="forest"]{
  --bg-a:#eef6ea; --bg-b:#e3f1dd; --bg-c:#eef7ec;
  --primary:#5f9463; --primary-dark:#457749; --primary-soft:#e1eee0;
  --mint:#8fc39a; --mint-soft:#e6f3e5;
  --peach:#d4a24a; --peach-soft:#f6ecd6;
  --rose:#c98f9a;
  --text:#243425; --text-soft:#546b53; --text-faint:#8ea08c;
  --card-bg:rgba(255,255,255,0.72); --card-border:rgba(255,255,255,0.9);
  --shadow-soft:0 10px 40px -12px rgba(69,119,73,0.25);
  --shadow-lift:0 20px 50px -15px rgba(69,119,73,0.35);
  --paper-bg:#f7faf3; --rule-line:#dde8d4; --margin-line:#7a9457; --ink-color:#243425;
}
:root[data-palette="forest"][data-theme="dark"]{
  --bg-a:#141f16; --bg-b:#182419; --bg-c:#111c13;
  --primary:#7fb185; --primary-dark:#5f9463; --primary-soft:#26362a;
  --mint:#a3d1a8; --mint-soft:#20362a;
  --peach:#e3bb6c; --peach-soft:#3a2f1c;
  --rose:#d3a3ac;
  --text:#e9f3e6; --text-soft:#c0d3bc; --text-faint:#8ba488;
  --card-bg:rgba(24,36,25,0.72); --card-border:rgba(255,255,255,0.08);
  --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
  --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
  --paper-bg:#1c2b1d; --rule-line:#2d402c; --margin-line:#8bb178; --ink-color:#e3f2e0;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="forest"]:not([data-theme="light"]){
    --bg-a:#141f16; --bg-b:#182419; --bg-c:#111c13;
    --primary:#7fb185; --primary-dark:#5f9463; --primary-soft:#26362a;
    --mint:#a3d1a8; --mint-soft:#20362a;
    --peach:#e3bb6c; --peach-soft:#3a2f1c;
    --rose:#d3a3ac;
    --text:#e9f3e6; --text-soft:#c0d3bc; --text-faint:#8ba488;
    --card-bg:rgba(24,36,25,0.72); --card-border:rgba(255,255,255,0.08);
    --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
    --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
    --paper-bg:#1c2b1d; --rule-line:#2d402c; --margin-line:#8bb178; --ink-color:#e3f2e0;
    color-scheme:dark;
  }
}

:root[data-palette="rose"]{
  --bg-a:#fdeef3; --bg-b:#fbe3ec; --bg-c:#fdf0f5;
  --primary:#d9738f; --primary-dark:#c05575; --primary-soft:#fbe1e8;
  --mint:#e6a4b8; --mint-soft:#fdecf1;
  --peach:#f0a0a8; --peach-soft:#fbe4e2;
  --rose:#f492b0;
  --text:#3d2530; --text-soft:#7a5c68; --text-faint:#ad8e98;
  --card-bg:rgba(255,255,255,0.72); --card-border:rgba(255,255,255,0.9);
  --shadow-soft:0 10px 40px -12px rgba(192,85,117,0.25);
  --shadow-lift:0 20px 50px -15px rgba(192,85,117,0.35);
  --paper-bg:#fdf6f8; --rule-line:#f2dde3; --margin-line:#c26a85; --ink-color:#3d2530;
}
:root[data-palette="rose"][data-theme="dark"]{
  --bg-a:#2a1620; --bg-b:#301a26; --bg-c:#26141d;
  --primary:#e592ab; --primary-dark:#d9738f; --primary-soft:#4a2534;
  --mint:#eab4c3; --mint-soft:#3d2530;
  --peach:#f0aab0; --peach-soft:#3a2226;
  --rose:#f7a9c4;
  --text:#fbe9f0; --text-soft:#d8b9c5; --text-faint:#a6889a;
  --card-bg:rgba(50,26,38,0.72); --card-border:rgba(255,255,255,0.08);
  --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
  --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
  --paper-bg:#331f2a; --rule-line:#4a2f3c; --margin-line:#d687a0; --ink-color:#f7e0e8;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="rose"]:not([data-theme="light"]){
    --bg-a:#2a1620; --bg-b:#301a26; --bg-c:#26141d;
    --primary:#e592ab; --primary-dark:#d9738f; --primary-soft:#4a2534;
    --mint:#eab4c3; --mint-soft:#3d2530;
    --peach:#f0aab0; --peach-soft:#3a2226;
    --rose:#f7a9c4;
    --text:#fbe9f0; --text-soft:#d8b9c5; --text-faint:#a6889a;
    --card-bg:rgba(50,26,38,0.72); --card-border:rgba(255,255,255,0.08);
    --shadow-soft:0 10px 40px -12px rgba(0,0,0,0.5);
    --shadow-lift:0 20px 60px -15px rgba(0,0,0,0.6);
    --paper-bg:#331f2a; --rule-line:#4a2f3c; --margin-line:#d687a0; --ink-color:#f7e0e8;
    color-scheme:dark;
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--bg-c), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, var(--bg-b), transparent 55%),
    var(--bg-a);
  min-height:100%;
  overflow-x:hidden;
  transition:background .5s ease, color .3s ease;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.brand-name{ font-family:var(--font-head); font-weight:700; }

button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; }

/* ===================== Background blobs =====================
   These used to be solid circles rasterized through filter:blur(60px) and
   animated forever — a continuous, expensive repaint fighting scroll/input
   for frame budget on every view. A radial-gradient bakes the same soft-edge
   glow into the paint itself (no blur filter needed), and will-change hints
   the compositor to promote them to their own layer. */
.bg-blobs{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%; opacity:.55;
  animation: float 22s ease-in-out infinite;
  will-change:transform;
}
.blob-1{ width:420px; height:420px; background:radial-gradient(circle at center, var(--primary) 0%, color-mix(in srgb, var(--primary) 40%, transparent) 55%, transparent 75%); top:-120px; left:-100px; animation-delay:0s;}
.blob-2{ width:380px; height:380px; background:radial-gradient(circle at center, var(--peach) 0%, color-mix(in srgb, var(--peach) 40%, transparent) 55%, transparent 75%); bottom:-140px; right:-80px; animation-delay:-7s;}
.blob-3{ width:300px; height:300px; background:radial-gradient(circle at center, var(--mint) 0%, color-mix(in srgb, var(--mint) 40%, transparent) 55%, transparent 75%); top:40%; left:60%; animation-delay:-14s;}
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.08); }
  66%{ transform:translate(-30px,20px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce){
  .blob, .brand-mark, .view{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ===================== Shell / layout ===================== */
.app-shell{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:20px 20px 60px; min-height:100vh; display:flex; flex-direction:column; }

.topbar{ display:flex; flex-direction:column; gap:16px; padding:6px 4px 22px; }
.topbar-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:8px; background:none; border:none; padding:2px; font-size:1.05rem; color:var(--text); }
.brand-mark{ font-size:1.5rem; display:inline-block; animation:sway 4s ease-in-out infinite; transform-origin:70% 100%; }
@keyframes sway{ 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);} }
.brand-name{ font-size:1.15rem; letter-spacing:.2px; }

.topnav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; background:var(--card-bg); border:1px solid var(--card-border); padding:5px; border-radius:999px; backdrop-filter:blur(10px); box-shadow:var(--shadow-soft); align-self:center; position:relative; z-index:50; }
.nav-btn{ border:none; background:transparent; padding:8px 16px; border-radius:999px; font-weight:700; font-size:.88rem; color:var(--text-soft); transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; white-space:nowrap; }
.nav-btn:hover{ color:var(--primary-dark); }
.nav-btn.active{ background:var(--primary); color:white; box-shadow:0 6px 16px -4px rgba(108,92,231,.5); }

/* ---- Grouped nav dropdowns ---- */
/* Menus need an opaque surface — the translucent card background let the page
   read straight through the dropdown. */
:root{ --menu-bg:#ffffff; }
:root[data-theme="dark"]{ --menu-bg:#2a2440; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --menu-bg:#2a2440; } }
.nav-group{ position:relative; }
.nav-group-btn{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ font-size:.7rem; line-height:1; transition:transform .2s ease; }
.nav-group.open .nav-caret{ transform:rotate(180deg); }
.nav-menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:210px; background:var(--menu-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lift); backdrop-filter:blur(14px);
  padding:6px; display:flex; flex-direction:column; gap:2px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-group.open .nav-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-menu-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  border:none; background:transparent; color:var(--text-soft); font-family:var(--font-body);
  font-weight:700; font-size:.85rem; padding:10px 12px; border-radius:12px; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
.nav-menu-item:hover{ background:var(--primary-soft); color:var(--primary-dark); }
.nav-menu-item.active{ background:var(--primary); color:#fff; }
.nav-menu-icon{ font-size:1rem; }
@media (max-width:640px){
  .nav-menu{ position:static; transform:none; min-width:0; box-shadow:none; border:none;
    background:transparent; backdrop-filter:none; padding:4px 0 0; display:none; }
  .nav-group.open .nav-menu{ display:flex; transform:none; }
  .nav-group{ width:100%; display:flex; flex-direction:column; align-items:center; }
}

.theme-toggle{ width:40px; height:40px; border-radius:50%; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:transform .3s ease; }
.theme-toggle:hover{ transform:rotate(20deg) scale(1.08); }

.settings-icon-btn{ width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--card-border); background:var(--card-bg); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.settings-icon-btn:hover{ color:inherit; transform:rotate(20deg) scale(1.08); }
.settings-icon-btn.active{ background:var(--primary); border-color:var(--primary); box-shadow:0 6px 16px -4px rgba(108,92,231,.5); }

.view-root{ flex:1; position:relative; }
.footer-note{ text-align:center; margin-top:34px; }
.footer-note p{ font-size:.8rem; color:var(--text-faint); }

/* ===================== Card ===================== */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
  padding:36px;
}
@media (max-width:640px){ .card{ padding:24px; border-radius:var(--radius-md); } }

/* ===================== View transition ===================== */
.view{ animation:viewIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0);} }
.view-exit{ animation:viewOut .25s ease forwards; }
@keyframes viewOut{ to{ opacity:0; transform:translateY(-10px);} }

/* ===================== Home ===================== */
.hero{ text-align:center; padding:10px 6px 8px; }
.hero-greeting{ font-size:2.4rem; margin:0 0 10px; }
@media (max-width:640px){ .hero-greeting{ font-size:1.9rem; } }
.hero-sub{ color:var(--text-soft); margin:0 0 28px; font-size:1.02rem; }

.plant-stage{ display:flex; justify-content:center; margin:6px 0 18px; }
.plant-wrap{ position:relative; width:180px; height:180px; cursor:pointer; transform-origin:50% 90%; }
.plant-wrap:hover{ filter:brightness(1.05); }
.plant-wrap.shaking{ animation:potShake .5s ease; }
.plant-leaf{ transform-box:fill-box; transform-origin:center; }
.plant-leaf.falling{ animation:leafFall .9s ease-in forwards; animation-delay:var(--fall-delay, 0ms); }
.seedling-sprout{ transform-box:fill-box; transform-origin:50% 100%; animation:seedlingSway 3.6s ease-in-out infinite; }
@keyframes seedlingSway{
  0%, 100% { transform:rotate(-3deg); }
  50% { transform:rotate(3deg); }
}
.fall-ghost{ transform-box:fill-box; transform-origin:50% 50%; animation:ghostFloat 3.2s ease-in-out infinite; }
@keyframes ghostFloat{
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
.season-fall-particle{ opacity:0; transform-box:fill-box; transform-origin:center; animation-name:seasonLeafFall; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes seasonLeafFall{
  0%{ transform:translateY(-10px) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.9; }
  100%{ transform:translateY(210px) rotate(140deg); opacity:0; }
}
.season-fall-snow{ animation-name:seasonSnowFall; }
@keyframes seasonSnowFall{
  0%{ transform:translate(0,-10px); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translate(6px, 95px); }
  90%{ opacity:.9; }
  100%{ transform:translate(-4px, 210px); opacity:0; }
}
@keyframes leafFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:.9; }
  100%{ transform:translate(var(--fall-x, 20px), 55px) rotate(140deg); opacity:0; }
}
@keyframes potShake{
  0%, 100% { transform:translateX(0) rotate(0deg); }
  15% { transform:translateX(-6px) rotate(-4deg); }
  30% { transform:translateX(5px) rotate(3deg); }
  45% { transform:translateX(-4px) rotate(-3deg); }
  60% { transform:translateX(3px) rotate(2deg); }
  75% { transform:translateX(-2px) rotate(-1deg); }
  90% { transform:translateX(1px) rotate(1deg); }
}
.plant-pot{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); }

.streak-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--peach-soft); color:var(--peach); font-weight:800; padding:8px 18px; border-radius:999px; font-size:.95rem; margin-bottom:22px; }
:root[data-theme="dark"] .streak-pill, :root:not([data-theme="light"]) .streak-pill{ color:#ffbe9a; }

.big-cta{
  border:none; background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:white; font-weight:800; font-size:1.08rem; padding:18px 40px; border-radius:999px;
  box-shadow:0 14px 30px -10px rgba(108,92,231,.55);
  transition: transform .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.big-cta:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 20px 36px -10px rgba(108,92,231,.65); }
.big-cta:active{ transform:translateY(0) scale(.98); }

.home-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
@media (max-width:640px){ .home-grid{ grid-template-columns:1fr; } }
.stat-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:18px; text-align:center; box-shadow:var(--shadow-soft); }
.stat-num{ font-family:var(--font-head); font-size:1.6rem; font-weight:700; color:var(--primary-dark); }
.stat-label{ color:var(--text-soft); font-size:.82rem; margin-top:2px; }

/* ===================== Check-in flow ===================== */
.checkin-wrap{ max-width:640px; margin:0 auto; }
.progress-row{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.progress-track{ flex:1; height:8px; border-radius:999px; background:var(--primary-soft); overflow:hidden; }
.progress-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--mint), var(--primary)); transition:width .45s cubic-bezier(.3,.8,.3,1); }
.progress-count{ font-size:.82rem; color:var(--text-soft); font-weight:700; white-space:nowrap; }
.exit-btn{ border:none; background:transparent; color:var(--text-faint); font-size:1.3rem; line-height:1; padding:4px 8px; border-radius:8px; }
.exit-btn:hover{ color:var(--text-soft); background:var(--primary-soft); }

.q-card{ text-align:center; }
.q-icon{ font-size:2.6rem; display:inline-block; margin-bottom:14px; animation:popIn .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn{ from{ transform:scale(.4) rotate(-8deg); opacity:0;} to{ transform:scale(1) rotate(0); opacity:1;} }
.q-prompt{ font-size:1.4rem; margin:0 0 6px; }
.q-sub{ color:var(--text-soft); margin:0 0 26px; font-size:.95rem; }

.choice-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; }
.choice-btn{
  border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text);
  padding:16px 26px; border-radius:var(--radius-md); font-weight:700; font-size:1rem; min-width:120px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.choice-btn .choice-emoji{ font-size:1.6rem; }
.choice-btn:hover{ transform:translateY(-3px); border-color:var(--primary); }
.choice-btn.selected{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 10px 24px -8px rgba(108,92,231,.35); transform:translateY(-2px) scale(1.03); }

.q-tip{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background:var(--mint-soft); border-left:4px solid var(--mint); border-radius:10px;
  padding:16px 18px; margin-top:18px; animation:fadeIn .35s ease;
}
.q-tip[hidden]{ display:none; }
.q-tip-icon{ font-size:1.3rem; }
.q-tip p{ margin:0; color:var(--text); font-size:.92rem; line-height:1.5; }
.q-tip-continue{ padding:10px 26px; font-size:.9rem; }

.scale-wrap{ margin:18px 0 8px; }
.scale-value{ font-family:var(--font-head); font-size:2.6rem; font-weight:700; color:var(--primary-dark); margin-bottom:6px; transition:transform .15s ease; }
.scale-emoji{ font-size:2.2rem; display:block; margin-bottom:10px; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:999px;
  background:linear-gradient(90deg, var(--mint), var(--primary));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:white;
  border:4px solid var(--primary-dark); box-shadow:0 4px 10px rgba(0,0,0,.2); cursor:pointer; margin-top:-1px;
  transition:transform .15s ease;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
input[type=range]::-moz-range-thumb{
  width:30px; height:30px; border-radius:50%; background:white; border:4px solid var(--primary-dark); cursor:pointer;
}
.scale-labels{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-faint); margin-top:8px; font-weight:700; }

textarea.note-input{
  width:100%; min-height:110px; border-radius:var(--radius-sm); border:2px solid var(--primary-soft);
  background:var(--card-bg); color:var(--text); padding:14px; font-family:inherit; font-size:1rem; resize:vertical;
}
textarea.note-input:focus{ outline:none; border-color:var(--primary); }
.optional-tag{ display:inline-block; font-size:.72rem; color:var(--text-faint); background:var(--primary-soft); padding:2px 10px; border-radius:999px; margin-bottom:10px; }

.nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:12px; }
.ghost-btn{ border:none; background:transparent; color:var(--text-soft); font-weight:700; padding:12px 18px; border-radius:999px; }
.ghost-btn:hover{ background:var(--primary-soft); color:var(--primary-dark); }
.next-btn{ border:none; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; font-weight:800; padding:14px 30px; border-radius:999px; box-shadow:0 10px 22px -8px rgba(108,92,231,.5); transition:transform .15s ease; }
.next-btn:hover{ transform:translateY(-2px); }
.next-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ===================== Completion screen ===================== */
.complete-wrap{ text-align:center; padding:20px 0 10px; }
.complete-stage{ position:relative; width:220px; height:220px; margin:0 auto 10px; }
.affirm{ font-size:1.5rem; margin:6px 0 6px; }
.affirm-sub{ color:var(--text-soft); margin-bottom:26px; }
.summary-chip-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:22px 0 30px; }
.summary-chip{ background:var(--mint-soft); color:var(--mint); font-weight:700; padding:8px 16px; border-radius:999px; font-size:.85rem; }
:root[data-theme="dark"] .summary-chip, :root:not([data-theme="light"]) .summary-chip{ color:#8ff0b8; }

/* sun character */
.sun-char{ position:absolute; inset:0; }
.sun-char svg{ width:100%; height:100%; animation:sunIn .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes sunIn{ from{ transform:scale(.3); opacity:0; } to{ transform:scale(1); opacity:1; } }
.sun-body{ animation:sunBounce 2.4s ease-in-out infinite; transform-origin:center; }
@keyframes sunBounce{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-6px) scale(1.02);} }
.sun-ray{ transform-origin:110px 110px; animation:rayspin 30s linear infinite; }
@keyframes rayspin{ to{ transform:rotate(360deg); } }
.sparkle{ animation:sparkle 1.6s ease-in-out infinite; transform-origin:center; }
.sparkle:nth-child(2){ animation-delay:.3s; }
.sparkle:nth-child(3){ animation-delay:.6s; }
@keyframes sparkle{ 0%,100%{ opacity:.2; transform:scale(.6);} 50%{ opacity:1; transform:scale(1.15);} }

.confetti-canvas{ position:fixed; inset:0; pointer-events:none; z-index:50; width:100%; height:100%; }

/* ===================== Dashboard ===================== */
.dash-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.dash-title{ font-size:1.5rem; margin:0; }
.dash-sub{ color:var(--text-soft); margin:2px 0 0; font-size:.92rem; }
.print-btn{ border:1px solid var(--card-border); background:var(--card-bg); color:var(--text); font-weight:700; padding:10px 18px; border-radius:999px; display:inline-flex; gap:8px; align-items:center; box-shadow:var(--shadow-soft); }
.print-btn:hover{ border-color:var(--primary); color:var(--primary-dark); }

.dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:760px){ .dash-grid{ grid-template-columns:1fr; } }

.chart-card canvas{ width:100% !important; max-height:260px; }

.completion-ring-row{ display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; height:100%; }
.ring{ width:120px; height:120px; }
.ring-label{ text-align:center; }
.ring-num{ font-family:var(--font-head); font-size:1.5rem; font-weight:700; color:var(--primary-dark); }
.ring-text{ font-size:.78rem; color:var(--text-soft); }

.heatmap-card .heatmap{ display:grid; grid-template-columns:repeat(auto-fill, 15px); gap:4px; margin-top:14px; }
.heat-cell{ width:15px; height:15px; border-radius:4px; background:var(--primary-soft); }
.heat-legend{ display:flex; align-items:center; gap:6px; margin-top:12px; font-size:.75rem; color:var(--text-faint); }
.heat-legend .heat-cell{ width:11px; height:11px; }

.notes-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; max-height:280px; overflow:auto; padding-right:4px; }
.note-item{ background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 14px; }

.suggestions-list{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.suggestion-item{ background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 14px; animation:viewIn .3s ease; }
.note-date{ font-size:.72rem; color:var(--text-faint); font-weight:800; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.note-text{ font-size:.92rem; color:var(--text); }
.empty-state{ text-align:center; padding:50px 20px; color:var(--text-soft); }
.empty-state .emoji{ font-size:2.4rem; display:block; margin-bottom:10px; }

/* ===================== Settings ===================== */
.settings-list{ display:flex; flex-direction:column; gap:14px; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; background:var(--primary-soft); border-radius:var(--radius-md); }
.setting-row div h4{ margin:0 0 3px; font-size:.98rem; }
.setting-row div p{ margin:0; font-size:.8rem; color:var(--text-soft); }
.setting-row.palette-row{ flex-direction:column; align-items:stretch; }
.palette-swatch-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.palette-swatch-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; border:2px solid transparent; background:transparent; padding:4px; border-radius:14px; }
.palette-swatch-btn.active{ border-color:var(--primary); background:var(--card-bg); }
.palette-swatch-preview{ width:44px; height:44px; border-radius:50%; box-shadow:0 4px 12px -4px rgba(0,0,0,.3); }
.palette-swatch-label{ font-size:.72rem; font-weight:700; color:var(--text-soft); }
.switch{ position:relative; width:50px; height:28px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider-switch{ position:absolute; inset:0; background:#c9c3e6; border-radius:999px; transition:.25s; cursor:pointer; }
.slider-switch:before{ content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:white; border-radius:50%; transition:.25s; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.switch input:checked + .slider-switch{ background:var(--primary); }
.switch input:checked + .slider-switch:before{ transform:translateX(22px); }

.buddy-detail{ margin-top:-4px; padding:16px 18px; background:var(--primary-soft); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:10px; }
.buddy-email-row{ display:flex; gap:10px; }
.buddy-email-input{ flex:1; padding:10px 14px; border-radius:10px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text); font-weight:600; }
.buddy-status{ margin:0; font-size:.8rem; color:var(--text-soft); }

.danger-btn{ border:1px solid #f0a; color:#e0457a; background:transparent; font-weight:700; padding:10px 18px; border-radius:999px; }
.danger-btn:hover{ background:#e0457a; color:white; }

/* ===================== Crisis overlay ===================== */
.crisis-overlay{ position:fixed; inset:0; background:rgba(20,15,35,.55); backdrop-filter:blur(6px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .3s ease; }
.crisis-overlay[hidden]{ display:none; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.crisis-card{ background:var(--bg-a); background:var(--card-bg); backdrop-filter:blur(20px); border:1px solid var(--card-border); border-radius:var(--radius-lg); max-width:460px; width:100%; padding:34px; text-align:center; box-shadow:var(--shadow-lift); animation:popIn .4s cubic-bezier(.34,1.56,.64,1); }
.crisis-icon{ font-size:2.4rem; margin-bottom:10px; }
.crisis-card h2{ font-size:1.25rem; margin:0 0 10px; }
.crisis-card p{ color:var(--text-soft); font-size:.92rem; margin-bottom:22px; }
.crisis-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.crisis-btn{ text-decoration:none; background:var(--primary-soft); color:var(--primary-dark); font-weight:800; padding:13px; border-radius:var(--radius-sm); display:flex; flex-direction:column; }
.crisis-btn span{ font-weight:600; font-size:.76rem; color:var(--text-soft); margin-top:2px; }
.crisis-btn.primary{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; }
.crisis-btn.primary span{ color:rgba(255,255,255,.85); }
.crisis-continue{ border:none; background:transparent; color:var(--text-faint); font-size:.85rem; text-decoration:underline; }

.donate-overlay{ position:fixed; inset:0; background:rgba(20,15,35,.55); backdrop-filter:blur(6px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .3s ease; }
.donate-overlay[hidden]{ display:none; }
.donate-card{ position:relative; background:var(--card-bg); backdrop-filter:blur(20px); border:1px solid var(--card-border); border-radius:var(--radius-lg); max-width:440px; width:100%; padding:34px; text-align:center; box-shadow:var(--shadow-lift); animation:popIn .4s cubic-bezier(.34,1.56,.64,1); }
.donate-close-btn{ position:absolute; top:14px; right:14px; }
.donate-icon{ font-size:2.4rem; margin-bottom:10px; }
.donate-card h2{ font-size:1.25rem; margin:0 0 10px; }
.donate-card p{ color:var(--text-soft); font-size:.92rem; margin-bottom:24px; line-height:1.6; }
.donate-actions{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.donate-cta{ text-decoration:none; justify-content:center; }
.donate-fineprint{ font-size:.76rem !important; color:var(--text-faint) !important; margin:16px 0 0 !important; line-height:1.5 !important; }

.auth-card{ text-align:center; }
.auth-subtitle{ color:var(--text-soft); font-size:.88rem; margin:0 0 18px; line-height:1.55; }
.auth-message{ font-size:.85rem; font-weight:700; padding:10px 14px; border-radius:var(--radius-sm); margin:0 0 16px; background:var(--mint-soft); color:var(--mint); }
.auth-message.error{ background:var(--peach-soft); color:var(--peach); }
.auth-form{ text-align:left; }
.auth-label{ font-family:var(--font-head); font-weight:700; font-size:.82rem; color:var(--text); display:block; margin:0 0 6px; }
.auth-form .journal-title-input{ margin-bottom:16px; }
.auth-submit-btn{ width:100%; margin-top:4px; }
.auth-forgot-btn{ font-size:.82rem; margin-top:10px; }
.auth-switch{ margin:18px 0 0; font-size:.86rem; color:var(--text-soft); }
.auth-switch-btn{ border:none; background:transparent; color:var(--primary-dark); font-weight:800; font-size:.86rem; text-decoration:underline; padding:2px 4px; }
.user-badge-btn{ max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===================== Terms of Service ===================== */
.tos-link{ border:none; background:transparent; color:var(--text-faint); font-size:.78rem; text-decoration:underline; padding:2px; margin-top:2px; }
.tos-link:hover{ color:var(--text-soft); }

.tos-overlay{ position:fixed; inset:0; background:rgba(20,15,35,.55); backdrop-filter:blur(6px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .3s ease; }
.tos-overlay[hidden]{ display:none; }
.tos-card{ background:var(--card-bg); backdrop-filter:blur(20px); border:1px solid var(--card-border); border-radius:var(--radius-lg); max-width:640px; width:100%; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lift); animation:popIn .4s cubic-bezier(.34,1.56,.64,1); }
.tos-header{ display:flex; align-items:center; justify-content:space-between; padding:26px 30px 0; flex-shrink:0; }
.tos-header h2{ margin:0; font-size:1.3rem; }
.tos-close-btn{ border:none; background:transparent; font-size:1.2rem; color:var(--text-faint); padding:6px 10px; border-radius:8px; line-height:1; }
.tos-close-btn:hover{ background:var(--primary-soft); color:var(--text-soft); }
.tos-body{ overflow-y:auto; padding:16px 30px 8px; color:var(--text-soft); font-size:.92rem; line-height:1.65; }
.tos-body h3{ font-family:var(--font-head); color:var(--text); font-size:1.02rem; margin:20px 0 6px; }
.tos-body h3:first-of-type{ margin-top:16px; }
.tos-body a{ color:var(--primary-dark); font-weight:700; }
.tos-updated{ font-weight:700; color:var(--text-faint); font-size:.8rem; margin:0 0 14px; text-transform:uppercase; letter-spacing:.4px; }
.tos-footer{ padding:18px 30px 26px; display:flex; justify-content:center; flex-shrink:0; border-top:1px solid var(--card-border); margin-top:6px; }
@media (max-width:640px){
  .tos-header{ padding:22px 20px 0; }
  .tos-body{ padding:14px 20px 8px; }
  .tos-footer{ padding:16px 20px 22px; }
}

/* ===================== Journal ===================== */
.journal-streak{ font-size:.85rem; padding:8px 16px; white-space:nowrap; }

.journal-compose{ position:relative; margin-bottom:24px; overflow:hidden; }
.journal-compose-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
#promptBtn{ font-size:1.08rem; }
.journal-date{ font-family:var(--font-head); font-size:1.1rem; font-weight:700; color:var(--primary-dark); letter-spacing:.2px; }

.journal-prompt{ background:var(--mint-soft); color:var(--text); border-left:4px solid var(--mint); padding:12px 16px; border-radius:10px; margin-bottom:16px; font-style:italic; }
.journal-prompt[hidden]{ display:none; }

.journal-title-input{ width:100%; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:12px 16px; font-family:var(--font-head); font-size:1.02rem; font-weight:700; color:var(--text); margin-bottom:14px; }
.journal-title-input:focus{ outline:none; border-color:var(--primary); }

.mood-tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.mood-tag-btn{ padding:9px 16px; border-radius:999px; border:2px solid var(--primary-soft); background:var(--card-bg); font-family:var(--font-body); font-size:.85rem; font-weight:700; color:var(--text-soft); display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.mood-tag-btn:hover{ transform:translateY(-2px); }
.mood-tag-btn.selected{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark); box-shadow:0 6px 16px -6px rgba(108,92,231,.5); }

.paper-wrap{ position:relative; }

.journal-textarea{
  width:100%; min-height:280px; resize:vertical; border:1px solid var(--card-border); outline:none;
  background-color:var(--paper-bg);
  background-image:
    linear-gradient(var(--margin-line), var(--margin-line)),
    repeating-linear-gradient(var(--paper-bg) 0px, var(--paper-bg) 34px, var(--rule-line) 35px, var(--paper-bg) 36px);
  background-repeat:no-repeat, repeat;
  background-position:46px 0, 0 0;
  background-size:2px 100%, 100% 36px;
  font-family:var(--font-body); font-size:1.05rem; line-height:36px; color:var(--ink-color);
  padding:8px 22px 20px 56px; border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
}
.journal-textarea::placeholder{ font-family:var(--font-body); font-size:1rem; color:var(--text-faint); opacity:.7; }

.journal-footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:16px; }
.ink-meter{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--text-soft); font-weight:700; }
.ink-bottle{ width:36px; height:22px; border:2px solid var(--primary); border-radius:4px; position:relative; overflow:hidden; background:var(--primary-soft); }
.ink-fill{ position:absolute; left:0; bottom:0; width:100%; height:4%; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); transition:height .5s ease; }

.seal-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,15,35,.25); backdrop-filter:blur(2px); border-radius:var(--radius-lg); z-index:6; animation:sealFadeOut .5s ease 1000ms forwards; }
.seal-overlay[hidden]{ display:none; }
@keyframes sealFadeOut{ to{ opacity:0; visibility:hidden; } }
.wax-seal{
  width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d1495b, #7c1c29 72%);
  box-shadow:0 14px 30px rgba(0,0,0,.4), inset 0 -6px 10px rgba(0,0,0,.35), inset 0 4px 10px rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-gothic); font-size:2.4rem; color:#f4d9b0; font-weight:400;
  animation:sealDrop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sealDrop{
  0%{ transform:translateY(-160px) scale(.5) rotate(-30deg); opacity:0; }
  60%{ transform:translateY(8px) scale(1.1) rotate(5deg); opacity:1; }
  100%{ transform:translateY(0) scale(1) rotate(0); }
}

.journal-entries-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.journal-entries-head h3{ margin:0; }
.journal-search{ border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:999px; padding:10px 18px; font-family:inherit; font-size:.88rem; color:var(--text); width:240px; max-width:100%; }
.journal-search:focus{ outline:none; border-color:var(--primary); }

.journal-entry-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:18px 22px; margin-bottom:12px; box-shadow:var(--shadow-soft); transition:transform .2s ease; animation:viewIn .35s ease; }
.journal-entry-card:hover{ transform:translateY(-2px); }
.entry-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.entry-card-date{ font-size:.72rem; color:var(--text-faint); font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.entry-card-title{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; margin-top:3px; color:var(--text); }
.entry-card-actions{ display:flex; gap:4px; flex-shrink:0; }
.icon-btn{ border:none; background:transparent; font-size:1rem; padding:7px 9px; border-radius:8px; opacity:.65; transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.icon-btn:hover{ opacity:1; background:var(--primary-soft); }
.entry-card-preview{ font-family:var(--font-body); font-size:.95rem; color:var(--text); margin:8px 0 6px; line-height:1.5; }
.entry-card-meta{ font-size:.72rem; color:var(--text-faint); font-weight:700; }
.entry-card-mood{ display:inline-block; font-family:var(--font-body); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px; color:var(--primary-dark); background:var(--primary-soft); padding:2px 9px; border-radius:999px; margin-right:6px; vertical-align:middle; }

.entry-editing{ outline:2px solid var(--primary); outline-offset:3px; }

/* ===================== Breathe ===================== */
.breathe-intro{ color:var(--text-soft); font-size:.95rem; line-height:1.6; margin:0 0 22px; max-width:56ch; }

.breath-pattern-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; margin:0 0 24px; }
.breath-pattern-card{ text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:16px 18px; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.breath-pattern-card:hover{ transform:translateY(-2px); border-color:var(--primary); }
.breath-pattern-card.selected{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 10px 24px -10px rgba(108,92,231,.4); }
.breath-pattern-name{ font-family:var(--font-head); font-weight:700; font-size:1rem; margin-bottom:4px; color:var(--text); }
.breath-pattern-timing{ font-size:.76rem; font-weight:800; color:var(--primary-dark); letter-spacing:1.5px; margin-bottom:6px; }
.breath-pattern-desc{ font-size:.82rem; color:var(--text-soft); line-height:1.4; }

.breath-section-label{ font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--text); margin:0 0 12px; }
.breath-duration-row{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.breath-duration-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); padding:10px 22px; border-radius:999px; font-weight:700; color:var(--text); transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.breath-duration-btn:hover{ border-color:var(--primary); }
.breath-duration-btn.selected{ border-color:var(--primary); background:var(--primary); color:#fff; }

.breathe-footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:10px; }

.breath-stage{ position:relative; width:250px; height:250px; margin:8px auto 20px; display:flex; align-items:center; justify-content:center; }
.breath-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.breath-ring-bg{ fill:none; stroke:var(--primary-soft); stroke-width:6; }
.breath-ring-fg{ fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round; }
.breath-orb{ position:relative; width:140px; height:140px; border-radius:50%; filter:drop-shadow(0 0 34px var(--primary)); }
.breath-orb svg{ position:absolute; inset:0; width:100%; height:100%; }
.breath-count{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--font-head); font-weight:800; font-size:2.1rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.breath-label{ text-align:center; font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:var(--text); margin:4px 0 10px; min-height:1.6em; }
.breath-session-meta{ display:flex; justify-content:center; gap:22px; font-size:.85rem; color:var(--text-soft); font-weight:700; margin-bottom:20px; }

@media (max-width:640px){
  .breath-stage{ width:210px; height:210px; }
  .breath-orb{ width:120px; height:120px; }
}

/* ===================== Misc ===================== */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--text); color:var(--bg-a); padding:12px 22px; border-radius:999px; font-weight:700; font-size:.88rem; opacity:0; transition:background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease, opacity .35s ease; z-index:90; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== Translate widget ===================== */
/* Google's own banner/toolbar would push the whole page down and look out
   of place next to the rest of this UI, so it's suppressed in favour of the
   plain 🌐 button below — the underlying widget still does the translating. */
.goog-hidden, #google_translate_element{ display:none !important; }
.goog-te-banner-frame.skiptranslate{ display:none !important; }
/* Google renames the banner's own class on every release, but the iframe id
   it generates has kept the ".container" suffix for years — a steadier hook. */
iframe.skiptranslate[id$=".container"]{ display:none !important; }
body{ top:0 !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

.translate-fab-wrap{ position:fixed; right:20px; bottom:20px; z-index:60; }
.translate-fab{ width:48px; height:48px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-size:1.35rem; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lift); transition:transform .15s ease; }
.translate-fab:hover{ transform:translateY(-2px) scale(1.05); }
.translate-fab:active{ transform:translateY(0) scale(.97); }
.translate-menu{ position:absolute; right:0; bottom:60px; width:200px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lift); padding:8px; backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:2px; }
.translate-menu[hidden]{ display:none; }
.translate-menu-item{ display:block; width:100%; text-align:left; border:none; background:transparent; color:var(--text); font-family:var(--font-body); font-weight:700; font-size:.86rem; padding:9px 12px; border-radius:var(--radius-sm); }
.translate-menu-item:hover{ background:var(--primary-soft); color:var(--primary-dark); }
.translate-menu-item.active{ background:var(--primary-soft); color:var(--primary-dark); }
.translate-menu-note{ margin:6px 2px 0; padding-top:8px; border-top:1px solid var(--card-border); font-size:.66rem; line-height:1.4; color:var(--text-faint); }

@media (max-width:640px){
  .translate-fab-wrap{ right:14px; bottom:14px; }
}

/* ===================== Unified nav actions ===================== */
.topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.login-btn{ border:1px solid var(--card-border); background:var(--card-bg); color:var(--text); font-weight:700; padding:10px 20px; border-radius:999px; box-shadow:var(--shadow-soft); transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; white-space:nowrap; }
.login-btn:hover{ border-color:var(--primary); color:var(--primary-dark); transform:translateY(-1px); }

.donate-btn{ border:none; background:linear-gradient(135deg, var(--peach), var(--rose)); color:#fff; font-weight:800; padding:10px 20px; border-radius:999px; box-shadow:0 10px 22px -10px rgba(255,157,118,.6); transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; white-space:nowrap; }
.donate-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(255,157,118,.7); }

/* ===================== Relax sub-nav ===================== */
.relax-subnav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:18px; }
.relax-subtab-btn, .sleep-subtab-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; padding:9px 16px; border-radius:999px; font-size:.85rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; white-space:nowrap; }
.relax-subtab-btn:hover, .sleep-subtab-btn:hover{ border-color:var(--primary); color:var(--primary-dark); }
.relax-subtab-btn.active, .sleep-subtab-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 16px -4px rgba(108,92,231,.5); }

/* ===================== Sleep Room ===================== */
/* An interactive bedroom. The bean makes the bed, then reacts to whatever the
   user does to the room — lights, curtains, TV, fan, door and so on. The room
   is authored at a fixed 640x240 and scaled to fit, so every prop position and
   walk target below is in "room units" measured from the centre of the room.
   The scene keeps its own fixed night palette rather than theme tokens, since
   it reads as a dark room in both light and dark mode. */
.sleep-anim-stage{
  position:relative; width:100%; max-width:640px; height:240px; margin:8px auto 16px;
  border-radius:var(--radius-md); overflow:hidden;
  background:linear-gradient(180deg, #181341 0%, #221b52 46%, #2b2363 100%);
  box-shadow:var(--shadow-soft);
}
.sleep-room{ position:absolute; left:50%; bottom:0; width:640px; height:240px; margin-left:-320px; transform-origin:bottom center; }

.sleep-floor{ position:absolute; left:0; right:0; bottom:0; height:36px; background:linear-gradient(180deg,#3a2f70,#302867); z-index:1; }
.sleep-floor::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:rgba(255,255,255,.10); }

.sleep-star{ position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; animation:sleepStarTwinkle 3.2s ease-in-out infinite; }
.sleep-star.s1{ top:26px; left:250px; }
.sleep-star.s2{ top:52px; left:300px; animation-delay:.7s; }
.sleep-star.s3{ top:20px; left:352px; animation-delay:1.4s; }
.sleep-star.s4{ top:64px; left:214px; width:2px; height:2px; animation-delay:2.1s; }
.sleep-star.s5{ top:38px; left:404px; width:2px; height:2px; animation-delay:1.1s; }
@keyframes sleepStarTwinkle{ 0%,100%{ opacity:.25; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.2); } }

/* ---------- room props ---------- */
.rp{ position:absolute; z-index:2; }
.rp-click{ cursor:pointer; }

/* door — centre -288 */
.rp-door{ left:4px; bottom:36px; width:56px; height:104px; perspective:340px; }
.door-frame{ position:absolute; inset:0; border-radius:4px 4px 0 0; background:#241c4e; box-shadow:inset 0 0 0 3px #4a3d8f; }
.door-panel{ position:absolute; left:3px; top:3px; right:3px; bottom:0; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#6b5cbf,#54479c); transform-origin:left center; transition:transform .55s cubic-bezier(.3,.7,.4,1); }
.door-knob{ position:absolute; right:6px; top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#ffdc8a; }
.rp-door.open .door-panel{ transform:rotateY(-68deg); }
.door-light{ position:absolute; left:6px; top:6px; right:6px; bottom:0; border-radius:3px 3px 0 0; background:linear-gradient(180deg,rgba(255,236,190,.5),rgba(255,236,190,.12)); opacity:0; transition:opacity .5s ease; }
.rp-door.open .door-light{ opacity:1; }

/* tv — centre -196 */
.rp-tv{ left:86px; bottom:36px; width:68px; height:56px; }
.tv-screen{ position:absolute; left:0; top:0; width:68px; height:42px; border-radius:5px; background:#1d1743; box-shadow:inset 0 0 0 3px #4a3d8f; transition:background .3s ease; }
.rp-tv.on .tv-screen{ background:#cfe4ff; animation:tvFlicker .55s steps(2) infinite; }
@keyframes tvFlicker{ 0%{ background:#cfe4ff; } 50%{ background:#a9cdff; } 100%{ background:#dcecff; } }
.tv-stand{ position:absolute; left:26px; top:42px; width:16px; height:8px; background:#4a3d8f; border-radius:0 0 3px 3px; }
.tv-foot{ position:absolute; left:16px; top:50px; width:36px; height:5px; background:#4a3d8f; border-radius:3px; }

/* nightstand — centre -130 */
.rp-stand{ left:154px; bottom:36px; width:72px; height:44px; }
.stand-top{ position:absolute; left:0; top:0; width:72px; height:8px; border-radius:4px; background:#7a6cd0; }
.stand-body{ position:absolute; left:5px; top:8px; width:62px; bottom:0; background:#5f52b4; border-radius:0 0 4px 4px; }
.stand-body::after{ content:''; position:absolute; left:12px; right:12px; top:12px; height:3px; border-radius:2px; background:rgba(255,255,255,.25); }

/* lamp — centre -148, sits on the nightstand */
.rp-lamp{ left:155px; bottom:80px; width:34px; height:40px; }
.lamp-shade{ position:absolute; left:0; top:0; width:34px; height:20px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#8a7ada,#6a5cc0); clip-path:polygon(18% 0, 82% 0, 100% 100%, 0 100%); transition:background .3s ease; }
.rp-lamp.on .lamp-shade{ background:linear-gradient(180deg,#ffe6a8,#ffc65c); }
.lamp-stem{ position:absolute; left:15px; top:20px; width:4px; height:14px; background:#7a6cd0; }
.lamp-foot{ position:absolute; left:8px; top:34px; width:18px; height:5px; border-radius:3px; background:#7a6cd0; }

/* alarm clock — centre -124 */
.rp-clock{ left:183px; bottom:80px; width:26px; height:18px; border-radius:4px; background:#4a3d8f; box-shadow:inset 0 0 0 2px #6b5cbf; display:flex; align-items:center; justify-content:center; }
.clock-face{ font-family:var(--font-head); font-weight:800; font-size:.42rem; color:#ff9a8a; letter-spacing:.3px; }
.rp-clock.ringing{ animation:clockShake .12s linear infinite; }
@keyframes clockShake{ 0%,100%{ transform:translateX(-1.5px) rotate(-2deg); } 50%{ transform:translateX(1.5px) rotate(2deg); } }
.clock-bell{ position:absolute; top:-9px; width:8px; height:8px; border-radius:50% 50% 0 0; background:#6b5cbf; }
.clock-bell.l{ left:1px; } .clock-bell.r{ right:1px; }

/* phone — centre -104 */
.rp-phone{ left:209px; bottom:80px; width:14px; height:22px; border-radius:3px; background:#3a2f70; box-shadow:inset 0 0 0 1.5px #6b5cbf; }
.phone-screen{ position:absolute; inset:2px; border-radius:2px; background:#241c4e; transition:background .3s ease; }
.rp-phone.on .phone-screen{ background:linear-gradient(180deg,#eaf4ff,#b9d8ff); }

/* fan — centre 120 */
.rp-fan{ left:418px; bottom:36px; width:44px; height:64px; }
.fan-cage{ position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; background:#332a66; box-shadow:inset 0 0 0 3px #6b5cbf; }
.fan-blades{ position:absolute; left:8px; top:8px; width:28px; height:28px; border-radius:50%; background:conic-gradient(#8a7ada 0 25%, #5f52b4 0 50%, #8a7ada 0 75%, #5f52b4 0); }
.rp-fan.on .fan-blades{ animation:fanSpin .32s linear infinite; }
@keyframes fanSpin{ to{ transform:rotate(360deg); } }
.fan-pole{ position:absolute; left:20px; top:44px; width:4px; height:14px; background:#6b5cbf; }
.fan-foot{ position:absolute; left:10px; top:58px; width:24px; height:5px; border-radius:3px; background:#6b5cbf; }

/* thermostat — centre 176, on the wall */
.rp-thermo{ left:481px; bottom:118px; width:30px; height:38px; border-radius:5px; background:#3a2f70; box-shadow:inset 0 0 0 2px #6b5cbf; display:flex; align-items:center; justify-content:center; }
.thermo-read{ font-family:var(--font-head); font-weight:800; font-size:.5rem; color:#cfc6ff; transition:color .3s ease; }
.rp-thermo.hot .thermo-read{ color:#ff9a6b; }
.rp-thermo.cold .thermo-read{ color:#7fd4ff; }

/* window + curtains — centre 250 */
.rp-window{ left:522px; bottom:112px; width:96px; height:74px; }
.win-pane{ position:absolute; left:10px; top:0; width:76px; height:62px; border-radius:8px; overflow:hidden; background:linear-gradient(180deg, rgba(126,160,255,.20), rgba(126,160,255,.06)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); }
.win-pane::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:rgba(255,255,255,.18); }
.win-pane::after{ content:''; position:absolute; top:50%; left:0; right:0; height:2px; margin-top:-1px; background:rgba(255,255,255,.18); }
.win-moon{ position:absolute; top:3px; right:6px; font-size:1.15rem; line-height:1; filter:drop-shadow(0 0 8px rgba(255,238,190,.6)); }
.win-rod{ position:absolute; left:0; top:-5px; width:96px; height:4px; border-radius:2px; background:#7a6cd0; }
.curtain{ position:absolute; top:-2px; width:44px; height:70px; background:linear-gradient(180deg,#8578e6,#5546b5); box-shadow:inset -4px 0 0 rgba(0,0,0,.12); transition:transform .5s cubic-bezier(.3,.7,.4,1); }
.curtain.l{ left:4px; border-radius:3px 0 6px 3px; transform-origin:left center; }
.curtain.r{ right:4px; border-radius:0 3px 3px 6px; transform-origin:right center; }
.rp-window.open .curtain{ transform:scaleX(.28); }
.win-glow{ position:absolute; left:10px; top:0; width:76px; height:62px; border-radius:8px; background:radial-gradient(ellipse at center, rgba(210,232,255,.85), rgba(210,232,255,.15) 70%); opacity:0; transition:opacity .5s ease; pointer-events:none; }
.rp-window.open .win-glow{ opacity:1; }

/* light spill from whatever is switched on */
.room-glow{ position:absolute; bottom:0; border-radius:50%; opacity:0; transition:opacity .55s ease; pointer-events:none; z-index:8; }
.room-glow.on{ opacity:1; }
.glow-lamp{ left:60px; width:230px; height:150px; background:radial-gradient(ellipse at center bottom, rgba(255,214,130,.34), transparent 70%); }
.glow-tv{ left:20px; width:230px; height:130px; background:radial-gradient(ellipse at center bottom, rgba(150,200,255,.30), transparent 70%); }
.glow-phone{ left:150px; width:150px; height:110px; background:radial-gradient(ellipse at center bottom, rgba(200,228,255,.34), transparent 70%); }
.glow-window{ left:430px; width:250px; height:170px; background:radial-gradient(ellipse at center bottom, rgba(200,225,255,.26), transparent 70%); }
.glow-door{ left:0; width:180px; height:150px; background:radial-gradient(ellipse at center bottom, rgba(255,236,190,.26), transparent 70%); }

/* ---------- the bed ---------- */
.sleep-bed{ position:absolute; bottom:36px; left:50%; margin-left:-80px; width:160px; height:58px; z-index:2; transform:translateX(var(--px,0px)); }
.bed-leg{ position:absolute; bottom:0; width:10px; height:9px; background:#4d4291; border-radius:0 0 3px 3px; }
.bed-leg.l{ left:16px; } .bed-leg.r{ right:12px; }
.bed-frame{ position:absolute; left:6px; right:0; bottom:8px; height:17px; background:linear-gradient(180deg,#7a6cd0,#5f52b4); border-radius:5px; }
.bed-mattress{ position:absolute; left:9px; right:3px; bottom:20px; height:23px; background:linear-gradient(180deg,#f7f3ff,#ded5f4); border-radius:7px 7px 3px 3px; box-shadow:0 2px 0 rgba(0,0,0,.10); }
.bed-headboard{ position:absolute; left:0; bottom:8px; width:15px; height:70px; background:linear-gradient(180deg,#9a8ceb,#6e61c4); border-radius:7px 7px 2px 2px; }

.sleep-pillow{
  position:absolute; bottom:74px; left:50%; margin-left:-22px; width:44px; height:20px; z-index:3;
  border-radius:11px; background:linear-gradient(180deg,#fffdf8,#ede5d5); box-shadow:0 2px 0 rgba(0,0,0,.10);
  transform:translateX(var(--px,0px)) translateY(var(--py,0px)) rotate(var(--pr,0deg));
}
.sleep-pillow.fluff{ animation:pillowFluff .5s ease; }
@keyframes pillowFluff{ 0%,100%{ transform:translateX(var(--px,0px)) translateY(var(--py,0px)) scale(1); } 50%{ transform:translateX(var(--px,0px)) translateY(calc(var(--py,0px) - 8px)) scale(1.18,1.3); } }
.sleep-pillow.hidden{ opacity:0; }

.sleep-bundle{
  position:absolute; bottom:38px; left:50%; margin-left:-20px; width:40px; height:22px; z-index:5;
  border-radius:11px; background:linear-gradient(180deg,#7d6fe0,#5a4fb5); box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);
  transform:translateX(var(--px,0px));
}
.sleep-bundle.gone{ opacity:0; transform:translateX(var(--px,0px)) scale(.55); }

.sleep-blanket{
  position:absolute; bottom:46px; left:50%; margin-left:-30px; width:110px; height:38px; z-index:6;
  border-radius:6px 6px 9px 9px; background:linear-gradient(180deg,#8578e6 0%,#6c5ce7 42%,#5546b5 100%);
  box-shadow:inset 0 7px 0 rgba(255,255,255,.16);
  transform-origin:right bottom; transform:scaleX(.4) scaleY(.5); opacity:0;
  transition:transform .7s cubic-bezier(.34,1.25,.64,1), opacity .35s ease;
}
.sleep-blanket.placed{ opacity:1; transform:scaleX(.4) scaleY(1); }
.sleep-blanket.tucked{ transform:scaleX(1) scaleY(1); }
.sleep-blanket.chin{ transform:scaleX(1.12) scaleY(1.22); }
.sleep-blanket.overhead{ transform:scaleX(1.42) scaleY(1.52); }
.sleep-blanket.kicked{ transform:scaleX(.34) scaleY(.82) translateX(10px) rotate(4deg); }
.sleep-blanket.flapping{ animation:blanketFlap .6s ease-in-out infinite; }
@keyframes blanketFlap{
  0%,100%{ transform:scaleX(1) scaleY(1) skewX(0deg); }
  35%{ transform:scaleX(.96) scaleY(1.16) skewX(-7deg); }
  70%{ transform:scaleX(1.02) scaleY(1.06) skewX(4deg); }
}

/* ---------- the bean ---------- */
.sleep-bean{ position:absolute; bottom:36px; left:50%; margin-left:-24px; width:48px; height:42px; z-index:4; transform:translateX(var(--bx,0px)); }
.bean-shadow{ position:absolute; left:50%; bottom:-5px; width:46px; height:9px; margin-left:-23px; border-radius:50%; background:rgba(0,0,0,.30); transition:opacity .4s ease; }
.bean-bob{ position:absolute; inset:0; }
.sleep-bean.walking .bean-bob{ animation:beanBob .46s ease-in-out infinite; }
.sleep-bean.running .bean-bob{ animation:beanBob .26s ease-in-out infinite; }
@keyframes beanBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

/* A soft rounded square rather than an egg — reads more like a little character
   and less like a blob. The px radii keep the corners square-ish even when the
   lying/squash poses scale him. */
.bean-body{
  position:absolute; inset:0; border-radius:16px 16px 12px 12px;
  background:linear-gradient(168deg,#ffeaad 0%,#ffd579 52%,#f9c052 100%);
  box-shadow:inset -4px -5px 0 rgba(180,120,20,.10), inset 3px 3px 0 rgba(255,255,255,.32), 0 3px 8px rgba(0,0,0,.20);
  transform-origin:center bottom; transition:transform .5s ease, border-radius .5s ease;
}
/* soft sheen across the top-left corner */
.bean-body::before{
  content:''; position:absolute; left:5px; top:4px; width:15px; height:9px;
  border-radius:8px; background:rgba(255,255,255,.42); transform:rotate(-16deg); pointer-events:none;
}
/* the cap sits flatter now that the head has a squarer crown */
.bean-cap{ position:absolute; top:-13px; left:3px; width:42px; height:17px; border-radius:13px 13px 5px 5px; background:linear-gradient(180deg,#ffa6b6,#ed7387); transform:rotate(-5deg); transition:transform .5s ease; }
.bean-cap::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:6px; border-radius:4px; background:#fff6f7; }
.bean-pom{ position:absolute; top:-7px; right:-8px; width:13px; height:13px; border-radius:50%; background:#fff6f7; }

.bean-eye{ position:absolute; top:15px; width:9px; height:10px; background:#4a3a1c; border-radius:46% 46% 50% 50%; transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; }
.bean-eye.left{ left:11px; } .bean-eye.right{ left:28px; }
.bean-eye::after{ content:''; position:absolute; top:1.5px; right:1.5px; width:3.5px; height:3.5px; border-radius:50%; background:#fff; opacity:.96; }
.bean-eye::before{ content:''; position:absolute; bottom:1.5px; left:1.5px; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.55; }
.bean-brow{ position:absolute; top:9px; width:9px; height:2.5px; border-radius:2px; background:#4a3a1c; opacity:0; transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; }
.bean-brow.left{ left:11px; } .bean-brow.right{ left:28px; }
.bean-blush{ position:absolute; top:25px; width:9px; height:5px; border-radius:4px; background:#ff9781; opacity:.6; }
.bean-blush.left{ left:3px; } .bean-blush.right{ left:36px; }
.bean-mouth{ position:absolute; top:26px; left:20px; width:8px; height:5px; border:1.7px solid #4a3a1c; border-top:none; border-radius:0 0 8px 8px; transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease; }

/* stubby mitten arms and little booted feet */
.bean-arm{ position:absolute; top:21px; width:6px; height:14px; border-radius:3px 3px 4px 4px; background:#eaa93c; transform-origin:top center; transition:opacity .3s ease, transform .3s ease; }
.bean-arm::after{ content:''; position:absolute; left:-1px; bottom:-2px; width:8px; height:7px; border-radius:4px; background:#eaa93c; }
.bean-arm.back{ left:-1px; } .bean-arm.front{ right:-1px; }
.bean-leg{ position:absolute; bottom:-8px; width:7px; height:9px; border-radius:3px 3px 2px 2px; background:#e8a838; transform-origin:top center; transition:opacity .3s ease; }
.bean-leg::after{ content:''; position:absolute; left:-1.5px; bottom:-3px; width:10px; height:6px; border-radius:4px 5px 3px 3px; background:#d99a2c; }
.bean-leg.back{ left:12px; } .bean-leg.front{ right:12px; }
.sleep-bean.walking .bean-arm.back{ animation:beanSwing .46s ease-in-out infinite alternate; }
.sleep-bean.walking .bean-arm.front{ animation:beanSwing .46s ease-in-out infinite alternate-reverse; }
.sleep-bean.walking .bean-leg.back{ animation:beanStep .46s ease-in-out infinite alternate; }
.sleep-bean.walking .bean-leg.front{ animation:beanStep .46s ease-in-out infinite alternate-reverse; }
.sleep-bean.running .bean-arm.back{ animation:beanSwingBig .26s ease-in-out infinite alternate; }
.sleep-bean.running .bean-arm.front{ animation:beanSwingBig .26s ease-in-out infinite alternate-reverse; }
.sleep-bean.running .bean-leg.back{ animation:beanStepBig .26s ease-in-out infinite alternate; }
.sleep-bean.running .bean-leg.front{ animation:beanStepBig .26s ease-in-out infinite alternate-reverse; }
@keyframes beanSwing{ from{ transform:rotate(-24deg); } to{ transform:rotate(24deg); } }
@keyframes beanStep{ from{ transform:rotate(-20deg); } to{ transform:rotate(20deg); } }
@keyframes beanSwingBig{ from{ transform:rotate(-46deg); } to{ transform:rotate(46deg); } }
@keyframes beanStepBig{ from{ transform:rotate(-38deg); } to{ transform:rotate(38deg); } }
.sleep-bean.running .bean-body{ transform:rotate(9deg); }

/* dragging furniture during the opening */
.sleep-bean.dragging .bean-body{ transform:rotate(7deg); }
.sleep-bean.dragging .bean-arm.back{ animation:none; transform:rotate(-108deg); }

/* moods */
.sleep-bean.annoyed .bean-brow{ opacity:1; }
.sleep-bean.annoyed .bean-brow.left{ transform:rotate(22deg); }
.sleep-bean.annoyed .bean-brow.right{ transform:rotate(-22deg); }
.sleep-bean.annoyed .bean-mouth{ border-radius:9px 9px 0 0; border-top:1.6px solid #4b3a17; border-bottom:none; height:4px; top:27px; }
.sleep-bean.happy .bean-eye{ height:4px; border-radius:4px 4px 1px 1px; top:17px; }
.sleep-bean.happy .bean-eye::after, .sleep-bean.happy .bean-eye::before{ opacity:0; }
.sleep-bean.happy .bean-mouth{ width:11px; height:6px; left:18px; }
.sleep-bean.surprised .bean-eye{ width:10px; height:11px; top:13px; }
.sleep-bean.surprised .bean-mouth{ width:6px; height:6px; border-radius:50%; border:1.6px solid #4b3a17; left:21px; }

/* reaching up to flick a switch */
.sleep-bean.reach .bean-arm{ animation:none; }
.sleep-bean.reach .bean-arm.front{ transform:rotate(158deg); }
.sleep-bean.reach .bean-arm.back{ transform:rotate(-14deg); }
/* both arms up, clinging on */
.sleep-bean.grip .bean-arm{ animation:none; }
.sleep-bean.grip .bean-arm.front{ transform:rotate(150deg); }
.sleep-bean.grip .bean-arm.back{ transform:rotate(-150deg); }

.sleep-bean.shake{ animation:beanShakeHead .5s ease-in-out 2; }
@keyframes beanShakeHead{ 0%,100%{ transform:translateX(var(--bx,0px)) rotate(0deg); } 25%{ transform:translateX(calc(var(--bx,0px) - 3px)) rotate(-7deg); } 75%{ transform:translateX(calc(var(--bx,0px) + 3px)) rotate(7deg); } }

.sleep-bean.jump{ animation:beanJump .45s cubic-bezier(.3,1.4,.6,1); }
@keyframes beanJump{ 0%,100%{ transform:translateX(var(--bx,0px)) translateY(0); } 40%{ transform:translateX(var(--bx,0px)) translateY(-26px); } }

/* in bed */
.sleep-bean.in-bed .bean-shadow{ opacity:0; }
.sleep-bean.in-bed .bean-arm, .sleep-bean.in-bed .bean-leg{ opacity:0; }
/* poses that happen on top of the covers have to out-rank the blanket, or the
   arms and the carried pillow disappear behind it */
.sleep-bean.grip, .sleep-bean.hideface, .sleep-bean.hugging, .sleep-bean.fanning{ z-index:7; }
.sleep-bean.in-bed.grip .bean-arm, .sleep-bean.in-bed.fanning .bean-arm{ opacity:1; }
.sleep-bean.in-bed.grip .bean-body{ transform:scaleX(1.10) scaleY(.92); }
.sleep-bean.lying .bean-body{ transform:scaleX(1.24) scaleY(.78); border-radius:15px 15px 11px 11px; }
.sleep-bean.lying .bean-cap{ transform:rotate(-15deg) translate(-3px,2px); }
.sleep-bean.asleep .bean-eye{ top:17px; width:9px; height:2.5px; border-radius:3px 3px 1px 1px; }
.sleep-bean.asleep .bean-eye::after, .sleep-bean.asleep .bean-eye::before{ opacity:0; }
.sleep-bean.asleep .bean-mouth{ top:27px; left:21px; width:5px; height:3px; }
.sleep-bean.breathing .bean-body{ animation:beanBreathe 3.4s ease-in-out infinite; }
@keyframes beanBreathe{
  0%,100%{ transform:scaleX(1.24) scaleY(.78); }
  50%{ transform:scaleX(1.27) scaleY(.83); }
}
/* rolled over and properly out — deeper, slower, with a little snuffle */
.sleep-bean.snoring .bean-body{ animation:beanSnore 3.8s ease-in-out infinite; }
@keyframes beanSnore{
  0%,100%{ transform:scaleX(1.26) scaleY(.76) rotate(-3deg); }
  45%{ transform:scaleX(1.32) scaleY(.88) rotate(-3deg); }
}
.sleep-bean.snoring .bean-cap{ transform:rotate(-24deg) translate(-5px,3px); }
.sleep-bean.snoring .bean-mouth{ width:7px; height:5px; border-radius:50%; border:1.6px solid #4b3a17; }

/* earmuffs */
.bean-muff{ position:absolute; top:12px; width:11px; height:14px; border-radius:6px; background:#ff9fb0; opacity:0; transform:scale(.4); transition:background-color .3s cubic-bezier(.34,1.4,.64,1), border-color .3s cubic-bezier(.34,1.4,.64,1), color .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s cubic-bezier(.34,1.4,.64,1), transform .3s cubic-bezier(.34,1.4,.64,1), opacity .3s cubic-bezier(.34,1.4,.64,1); }
.bean-muff.l{ left:-5px; } .bean-muff.r{ right:-5px; }
.bean-muff-band{ position:absolute; top:-3px; left:6px; right:6px; height:12px; border-radius:12px 12px 0 0; border:3px solid #ff9fb0; border-bottom:none; opacity:0; transform:scaleY(.4); transform-origin:bottom; transition:background-color .3s cubic-bezier(.34,1.4,.64,1), border-color .3s cubic-bezier(.34,1.4,.64,1), color .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s cubic-bezier(.34,1.4,.64,1), transform .3s cubic-bezier(.34,1.4,.64,1), opacity .3s cubic-bezier(.34,1.4,.64,1); }
.sleep-bean.earmuffs .bean-muff, .sleep-bean.earmuffs .bean-muff-band{ opacity:1; transform:none; }

/* sweat drops when it's too warm */
.bean-sweat{ position:absolute; top:4px; right:-2px; width:7px; height:9px; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; background:#8fd4ff; opacity:0; }
.sleep-bean.sweaty .bean-sweat{ animation:sweatDrip 1.5s ease-in infinite; }
@keyframes sweatDrip{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 20%{ opacity:1; } 100%{ opacity:0; transform:translateY(20px) scale(1); } }

/* the pillow he carries about for fanning / hiding */
.bean-prop-pillow{ position:absolute; top:6px; left:-16px; width:34px; height:16px; border-radius:9px; background:linear-gradient(180deg,#fffdf8,#ede5d5); box-shadow:0 2px 0 rgba(0,0,0,.10); opacity:0; transform-origin:right center; transition:opacity .2s ease; }
.sleep-bean.fanning .bean-prop-pillow{ opacity:1; animation:pillowWave .45s ease-in-out infinite alternate; }
@keyframes pillowWave{ from{ transform:rotate(-18deg); } to{ transform:rotate(24deg); } }
.sleep-bean.hideface .bean-prop-pillow{ opacity:1; top:8px; left:6px; width:38px; height:24px; transform:rotate(-4deg); }
.sleep-bean.hugging .bean-prop-pillow{ opacity:1; top:14px; left:4px; width:36px; height:20px; transform:rotate(-8deg); }

/* zzz — grows the longer he's been under */
.bean-zzz{ position:absolute; top:-18px; left:-4px; width:44px; height:44px; pointer-events:none; }
.bean-zzz span{ position:absolute; left:0; bottom:0; font-family:var(--font-head); font-weight:800; color:#fff; opacity:0; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.bean-zzz span:nth-child(1){ font-size:.72rem; }
.bean-zzz span:nth-child(2){ font-size:.92rem; }
.bean-zzz span:nth-child(3){ font-size:1.12rem; }
.sleep-bean.asleep .bean-zzz span{ animation:zzzFloat 3s ease-out infinite; }
.sleep-bean.asleep .bean-zzz span:nth-child(2){ animation-delay:1s; }
.sleep-bean.asleep .bean-zzz span:nth-child(3){ animation-delay:2s; }
.sleep-bean.depth-1 .bean-zzz{ transform:scale(1.25); }
.sleep-bean.depth-2 .bean-zzz{ transform:scale(1.5); }
.sleep-bean.depth-3 .bean-zzz{ transform:scale(1.8); }
.bean-zzz{ transition:transform .8s ease; transform-origin:left bottom; }
@keyframes zzzFloat{
  0%{ opacity:0; transform:translate(0,0) scale(.6) rotate(-8deg); }
  15%{ opacity:1; }
  70%{ opacity:.9; }
  100%{ opacity:0; transform:translate(22px,-32px) scale(1.15) rotate(10deg); }
}

/* speech / thought bubbles ride above the bean on their own layer */
.bean-hud{ position:absolute; bottom:36px; left:50%; margin-left:-24px; width:48px; height:42px; z-index:10; pointer-events:none; transform:translateX(var(--bx,0px)); }
.bean-emote{
  position:absolute; top:-34px; left:50%; margin-left:-16px; width:32px; height:32px; border-radius:50%;
  background:#fffdf8; box-shadow:0 4px 10px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
  font-size:1rem; opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.6,.64,1);
}
.bean-emote.show{ opacity:1; transform:scale(1); }
.bean-emote::after{ content:''; position:absolute; bottom:-4px; left:50%; margin-left:-6px; width:8px; height:8px; border-radius:50%; background:#fffdf8; }

.dream-bubble{
  position:absolute; top:-58px; left:26px; padding:8px 12px; border-radius:16px; background:#fffdf8;
  box-shadow:0 6px 14px rgba(0,0,0,.32); font-size:1.05rem; white-space:nowrap;
  opacity:0; transform:scale(.5) translateY(8px); transform-origin:bottom left;
  transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.5,.64,1);
}
.dream-bubble::before{ content:''; position:absolute; bottom:-7px; left:8px; width:9px; height:9px; border-radius:50%; background:#fffdf8; }
.dream-bubble::after{ content:''; position:absolute; bottom:-14px; left:1px; width:5px; height:5px; border-radius:50%; background:#fffdf8; }
.dream-bubble.show{ opacity:1; transform:scale(1) translateY(0); }

/* ---------- the control strip ---------- */
.sleep-controls{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 18px; }
.sleep-ctrl-btn{
  border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft);
  font-family:var(--font-body); font-weight:700; font-size:.78rem; padding:7px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px; transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease; white-space:nowrap;
}
.sleep-ctrl-btn:hover{ border-color:var(--primary); color:var(--primary-dark); transform:translateY(-1px); }
.sleep-ctrl-btn.on{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 14px -6px rgba(108,92,231,.6); }
.sleep-hint{ text-align:center; color:var(--text-faint); font-size:.8rem; margin:0 0 18px; }

@media (max-width:640px){
  .sleep-ctrl-btn{ font-size:.72rem; padding:6px 11px; }
}

/* ---------- nightly checklist ---------- */
.sleep-check-card{ border-top:1px solid var(--card-border); margin-top:26px; padding-top:22px; }
.sleep-check-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sleep-check-title{ font-family:var(--font-head); font-weight:800; font-size:1.12rem; color:var(--text); margin:0; }
.sleep-check-count{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--primary-dark); background:var(--primary-soft); padding:4px 12px; border-radius:999px; white-space:nowrap; }
.sleep-check-sub{ color:var(--text-soft); font-size:.9rem; line-height:1.55; margin:6px 0 14px; max-width:60ch; }
.sleep-check-bar{ height:7px; border-radius:999px; background:var(--primary-soft); overflow:hidden; margin-bottom:16px; }
.sleep-check-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--mint)); transition:width .45s cubic-bezier(.34,1.2,.64,1); }

.sleep-check-list{ display:flex; flex-direction:column; gap:8px; }
.sleep-check-item{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  background:var(--primary-soft); border-radius:var(--radius-sm); padding:11px 14px;
  transition:background .18s ease, opacity .18s ease;
}
.sleep-check-item:hover{ background:var(--primary-soft); filter:brightness(1.04); }
.sleep-check-item input[type=checkbox]{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--primary); cursor:pointer; flex-shrink:0; }
.sleep-check-item span{ font-size:.94rem; line-height:1.45; color:var(--text); }
.sleep-check-item.done{ opacity:.68; }
.sleep-check-item.done span{ text-decoration:line-through; color:var(--text-faint); }

.sleep-check-cheer{
  margin:14px 0 0; padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--mint-soft); border-left:4px solid var(--mint);
  font-family:var(--font-head); font-weight:700; font-size:.94rem; color:var(--text);
  animation:viewIn .35s ease;
}
.sleep-check-cheer[hidden]{ display:none; }

/* ===================== Mindful Minutes ===================== */
.mr-shell{ display:flex; flex-direction:column; gap:14px; }
.mr-top-row{ display:flex; justify-content:space-between; align-items:center; max-width:720px; margin:0 auto; gap:10px; flex-wrap:wrap; width:100%; }
.mr-total-stars{ font-weight:800; color:var(--text); background:var(--primary-soft); padding:6px 14px; border-radius:999px; font-size:.9rem; white-space:nowrap; }
.mr-canvas-wrap{ position:relative; width:100%; max-width:720px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); }
.mr-canvas{ display:block; width:100%; aspect-ratio:16/9; touch-action:none; background:#bfe3ff; }
.mr-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(20,18,35,.74); backdrop-filter:blur(6px); color:#fff; text-align:center; padding:20px; }
.mr-overlay[hidden]{ display:none; }
.mr-overlay h3{ margin:0; font-size:1.5rem; font-family:var(--font-head); }
.mr-stars-row{ display:flex; gap:10px; font-size:2.2rem; }
.mr-stars-row .dim{ opacity:.28; filter:grayscale(1); }
.mr-overlay-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mr-overlay-actions .ghost-btn{ color:#fff; }
.mr-overlay-actions .ghost-btn:hover{ background:rgba(255,255,255,0.18); color:#fff; }
.mr-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:720px; margin:0 auto; width:100%; }
.mr-dpad{ display:flex; gap:10px; }
.mr-ctrl-btn{ width:56px; height:56px; border-radius:50%; border:none; background:var(--primary-soft); color:var(--primary-dark); font-size:1.3rem; font-weight:800; box-shadow:var(--shadow-soft); user-select:none; touch-action:none; }
.mr-ctrl-btn:active{ transform:scale(.92); background:var(--primary); color:#fff; }
.mr-jump-btn{ width:68px; height:68px; border-radius:50%; border:none; background:var(--mint-soft); color:var(--mint); font-size:1.5rem; font-weight:800; box-shadow:var(--shadow-soft); user-select:none; touch-action:none; }
.mr-jump-btn:active{ transform:scale(.92); background:var(--mint); color:#fff; }

/* ===================== Retro Space Shooter ===================== */
.sd-menu-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.sd-menu-panel{ flex:1 1 220px; background:#0a0712; border:2px solid #2b2140; border-radius:var(--radius-md); padding:16px; text-align:center; color:#c9d3e8; }
.sd-menu-panel h4{ margin:0 0 10px; font-family:'Press Start 2P', var(--font-head); font-size:.7rem; letter-spacing:1px; color:#2de2ff; }
.sd-menu-panel .big-cta{ width:100%; margin-bottom:10px; }
.sd-menu-panel .ghost-btn{ width:100%; }
.sd-highscore-val{ font-family:'Press Start 2P', var(--font-head); font-size:1.3rem; color:#ffb400; margin:0 0 14px; }
.sd-help-note{ text-align:left; font-size:.9rem; line-height:1.5; }
.sd-help-note p{ margin:0; }

.sd-shell{ display:flex; flex-direction:column; gap:12px; }
.sd-hud{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:420px; margin:0 auto; width:100%; flex-wrap:wrap; font-family:'Press Start 2P', monospace; font-size:.6rem; color:#eaf2ff; }
.sd-hud-lives{ letter-spacing:2px; color:#2de2ff; }
.sd-pause-btn, .sd-mute-btn{ padding:4px 10px; font-size:.85rem; }
.sd-canvas-wrap{ position:relative; width:100%; max-width:420px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; box-shadow:0 0 0 6px #000, 0 0 0 9px #201a2c; }
.sd-canvas{ display:block; width:100%; aspect-ratio:22/31; touch-action:none; background:#05050a; image-rendering:pixelated; }
.sd-scanlines{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0px, rgba(0,0,0,.25) 1px, transparent 2px, transparent 3px); mix-blend-mode:multiply; }
.sd-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(5,5,10,.88); backdrop-filter:blur(6px); color:#fff; text-align:center; padding:20px; }
.sd-overlay[hidden]{ display:none; }
.sd-overlay h3{ margin:0; font-family:'Press Start 2P', var(--font-head); font-size:1rem; color:#2de2ff; }
.sd-final-score{ font-family:'Press Start 2P', var(--font-head); font-size:.85rem; color:#ffb400; }
.sd-new-high{ font-family:'Press Start 2P', var(--font-head); font-size:.7rem; color:#4dff6a; }
.sd-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:420px; margin:0 auto; width:100%; }
.sd-dpad{ display:grid; grid-template-columns:52px 52px 52px; grid-template-rows:52px 52px; gap:6px; }
.sd-dpad-up{ grid-column:2; grid-row:1; }
.sd-dpad-left{ grid-column:1; grid-row:2; }
.sd-dpad-right{ grid-column:3; grid-row:2; }
.sd-dpad-down{ grid-column:2; grid-row:2; }
.sd-fire-btn{ width:70px; height:70px; border-radius:50%; border:none; background:radial-gradient(circle at 35% 30%, #ff6f9c, #ff3d7f 70%); color:#2a0414; font-family:'Press Start 2P', monospace; font-size:.55rem; box-shadow:0 5px 0 #7a1f42; user-select:none; touch-action:none; }
.sd-fire-btn:active{ transform:translateY(3px); box-shadow:none; }

.mr-map{ display:flex; flex-direction:column; gap:16px; }
.mr-world{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:18px 20px; }
.mr-world-title{ display:flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:800; font-size:1.1rem; margin:0 0 12px; color:var(--text); }
.mr-level-row{ display:flex; flex-wrap:wrap; gap:12px; }
.mr-level-node{ display:flex; flex-direction:column; align-items:center; gap:6px; width:80px; padding:12px 8px; border-radius:var(--radius-sm); border:2px solid var(--primary-soft); background:var(--card-bg); font-weight:700; color:var(--text); transition:transform .18s ease, border-color .18s ease; }
.mr-level-node:hover:not(.locked){ border-color:var(--primary); transform:translateY(-2px); }
.mr-level-node.locked{ opacity:.45; cursor:not-allowed; }
.mr-level-node .mr-node-id{ font-size:1.05rem; }
.mr-level-node .mr-node-stars{ font-size:.78rem; letter-spacing:1px; color:#e8a521; }
@media (max-width:640px){ .mr-level-node{ width:70px; padding:10px 6px; } }

.learn-node{ width:104px; }
.learn-node .mr-node-id{ font-size:1.4rem; }
.learn-node-label{ font-size:.72rem; letter-spacing:0; color:var(--text-soft); line-height:1.25; text-align:center; }
@media (max-width:640px){ .learn-node{ width:92px; } }

.learn-dots{ display:flex; justify-content:center; gap:8px; margin-bottom:14px; }
.learn-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary-soft); }
.learn-dot.active{ background:var(--primary); transform:scale(1.2); }
.learn-dot.done{ background:var(--mint); }
.learn-step-body{ max-width:520px; margin:0 auto; text-align:center; }
.learn-choice-btn.learn-correct{ border-color:var(--mint); background:var(--mint-soft); }
.learn-choice-btn.learn-incorrect{ border-color:var(--peach); background:var(--peach-soft); }
.learn-practice-timer{ font-family:var(--font-head); font-weight:800; font-size:2.6rem; color:var(--primary-dark); margin:18px 0; }

.mr-char-label{ font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--text-soft); margin:0 0 8px; text-align:left; }
.mr-char-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.mr-char-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; width:72px; padding:10px 6px; border-radius:var(--radius-sm); border:2px solid var(--primary-soft); background:var(--card-bg); font-weight:700; font-size:.72rem; color:var(--text); transition:transform .18s ease, border-color .18s ease; }
.mr-char-btn:hover:not(.locked){ border-color:var(--primary); transform:translateY(-2px); }
.mr-char-btn.selected{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 8px 18px -8px rgba(108,92,231,.4); }
.mr-char-btn.locked{ opacity:.45; cursor:not-allowed; }
.mr-char-swatch{ width:28px; height:28px; border-radius:50%; box-shadow:inset 0 -3px 0 rgba(0,0,0,0.15); }
.mr-char-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.boredom-intro-icon{ font-size:2.4rem; margin-bottom:8px; }
.boredom-meta{ color:var(--text-soft); font-weight:700; font-size:.88rem; margin:0 0 14px; text-align:center; }
.boredom-prompt-box{
  font-family:var(--font-head); font-weight:700; font-size:1.35rem; line-height:1.5;
  color:var(--text); max-width:52ch; margin:0 auto 20px; padding:22px 28px;
  background:var(--mint-soft); border-left:4px solid var(--mint); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); animation:fadeIn .35s ease;
}
@media (max-width:640px){ .boredom-prompt-box{ font-size:1.1rem; padding:16px 20px; } }
.boredom-hint{ margin:-6px 0 6px; }

.mm-card{ text-align:center; }
.mm-title{ text-align:center; font-size:1.7rem; margin:0 0 10px; }
.mm-card .breathe-intro{ text-align:left; max-width:520px; margin-left:auto; margin-right:auto; }
.mm-card .streak-pill{ display:inline-flex; }
.mm-label{ font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--text); margin:0 0 8px; display:block; text-align:center; }
.mm-card .journal-title-input{ max-width:420px; margin-left:auto; margin-right:auto; }
.mm-duration-row{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:10px; }
.mm-duration-display{ font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--primary-dark); min-width:90px; text-align:center; }
.mm-duration-input{
  font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--primary-dark);
  width:110px; text-align:center; border:2px solid var(--primary-soft); background:var(--card-bg);
  border-radius:12px; padding:8px 4px;
}
.mm-duration-input:focus{ outline:none; border-color:var(--primary); }
.mm-duration-input::-webkit-outer-spin-button, .mm-duration-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mm-duration-input[type=number]{ -moz-appearance:textfield; }

.mm-session{ text-align:center; }
.mm-phase-label{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--primary-dark); margin:0 0 6px; }
.mm-task-name{ margin:0 0 10px; font-size:1.3rem; }
.mm-time-display{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--font-head); font-weight:800; font-size:2.4rem; color:var(--primary-dark); }
.mm-hint{ color:var(--text-soft); font-size:.95rem; margin:6px 0 4px; }
.mm-break-links{ margin:10px 0 4px; }

.mm-todo-input-row{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; justify-content:center; }
.mm-todo-input-row input{ flex:1; min-width:220px; max-width:420px; margin-bottom:0; }
.mm-todo-list{ display:flex; flex-direction:column; gap:8px; text-align:left; max-width:480px; margin:0 auto; }
.mm-todo-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--primary-soft); border-radius:var(--radius-sm); padding:10px 14px; animation:viewIn .3s ease; }
.mm-todo-check{ display:flex; align-items:center; gap:10px; cursor:pointer; flex:1; }
.mm-todo-check input[type=checkbox]{ width:18px; height:18px; accent-color:var(--primary); cursor:pointer; flex-shrink:0; }
.mm-todo-check span{ font-size:.94rem; color:var(--text); }
.mm-todo-item.done{ opacity:.7; }
.mm-todo-item.done .mm-todo-check span{ text-decoration:line-through; color:var(--text-faint); }

.landing-affirmation{
  font-family:var(--font-head); font-weight:800; font-size:1.5rem; line-height:1.35;
  color:var(--primary-dark); max-width:56ch; margin:4px auto 22px; padding:14px 26px;
  background:var(--primary-soft); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
}
@media (max-width:640px){ .landing-affirmation{ font-size:1.2rem; padding:12px 18px; } }
.landing-affirmation.pulse{ animation:affirmFade .6s ease; }
@keyframes affirmFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
:root[data-theme="dark"] .landing-affirmation, :root:not([data-theme="light"]) .landing-affirmation{ color:#c9c2f5; }

.landing-page-body{ max-width:62ch; margin:0 auto; color:var(--text-soft); font-size:1.02rem; line-height:1.75; text-align:left; padding:10px 4px; }
.landing-page-body h3{ font-family:var(--font-head); color:var(--text); margin:22px 0 8px; }
.landing-page-body h3:first-child{ margin-top:0; }
.landing-page-body a{ color:var(--primary-dark); font-weight:700; }

.footer-emergency{ max-width:56ch; margin:4px auto 0 !important; }

.radio-station-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin:18px 0 22px; }
.radio-station-card{ text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:18px; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; display:flex; flex-direction:column; gap:2px; }
.radio-station-card:hover{ transform:translateY(-2px); border-color:var(--primary); }
.radio-station-card.playing{ border-color:var(--mint); background:var(--mint-soft); box-shadow:0 10px 24px -10px rgba(111,207,158,.4); }
.radio-station-icon{ font-size:1.6rem; margin-bottom:4px; }
.radio-station-name{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--text); }
.radio-station-desc{ font-size:.82rem; color:var(--text-soft); line-height:1.4; margin:2px 0 8px; }
.radio-station-status{ font-size:.76rem; font-weight:800; color:var(--primary-dark); }
.radio-station-card.playing .radio-station-status{ color:var(--mint); }
:root[data-theme="dark"] .radio-station-card.playing .radio-station-status,
:root:not([data-theme="light"]) .radio-station-card.playing .radio-station-status{ color:#8ff0b8; }

.radio-volume-row{ display:flex; align-items:center; gap:12px; max-width:320px; }
.radio-volume-row input[type=range]{ flex:1; }

/* ===================== Mindful Spaces ===================== */
.space-mode-toggle{ display:flex; gap:8px; margin:0 0 18px; }
.space-mode-btn{ flex:1; border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; padding:11px 14px; border-radius:999px; font-size:.88rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.space-mode-btn:hover{ border-color:var(--primary); color:var(--primary-dark); }
.space-mode-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 16px -4px rgba(108,92,231,.5); }
.space-stage{ position:relative; width:100%; height:340px; border-radius:var(--radius-md); overflow:hidden; margin:4px 0 18px; box-shadow:0 14px 34px -14px rgba(0,0,0,.45); }
.space-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.space-video-wrap{ position:absolute; inset:0; overflow:hidden; background:#000; }
.space-video-wrap iframe{ position:absolute; border:0; pointer-events:none; }
.space-video-error{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--text-soft); font-size:.9rem; }
.space-overlay{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events:none; }
.space-title{ margin:0; font-weight:800; font-size:1.15rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45); }
.space-tagline{ margin:2px 0 0; font-size:.85rem; color:#fff; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.45); }
.space-controls{ position:absolute; top:14px; right:14px; display:flex; gap:8px; }
.space-icon-btn{ width:38px; height:38px; border-radius:50%; border:none; background:rgba(0,0,0,.35); color:#fff; font-size:1.1rem; backdrop-filter:blur(6px); transition:background .2s ease, transform .2s ease; }
.space-icon-btn:hover{ background:rgba(0,0,0,.5); transform:translateY(-1px); }
.space-icon-btn.active{ background:var(--primary); }

.space-picker{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.space-pick-btn{ display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:10px 14px; font-size:1.3rem; min-width:84px; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.space-pick-btn span{ font-size:.7rem; font-weight:700; color:var(--text-soft); }
.space-pick-btn:hover{ border-color:var(--primary); transform:translateY(-2px); }
.space-pick-btn.active{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 8px 20px -8px rgba(108,92,231,.4); }
.space-pick-btn.active span{ color:var(--primary-dark); }
@media (max-width:640px){ .space-stage{ height:240px; } }

/* ===================== Meditation ===================== */
.meditation-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin:18px 0 4px; }
.meditation-card{ text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:18px; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.meditation-card:hover{ transform:translateY(-2px); border-color:var(--primary); }
.meditation-card-icon{ font-size:1.6rem; margin-bottom:4px; }
.meditation-card-name{ font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--text); }
.meditation-card-duration{ font-size:.76rem; font-weight:800; color:var(--primary-dark); letter-spacing:.5px; margin:2px 0 6px; }
.meditation-card-desc{ font-size:.82rem; color:var(--text-soft); line-height:1.4; }

.meditation-stage{ display:flex; justify-content:center; margin:14px 0 8px; }
.meditation-orb{
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--mint), var(--primary));
  box-shadow:0 0 60px -6px var(--primary);
  animation:meditationPulse 6s ease-in-out infinite;
}
@keyframes meditationPulse{ 0%,100%{ transform:scale(1); opacity:.92; } 50%{ transform:scale(1.12); opacity:1; } }
.meditation-caption{ text-align:center; font-family:var(--font-head); font-size:1.15rem; color:var(--text); min-height:2.8em; max-width:52ch; margin:16px auto 0; line-height:1.5; }

/* ===================== Resources ===================== */
.resources-crisis-row{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin-top:14px; }

/* ===================== Mindless Moments ===================== */
.mindless-locked-note{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--primary-soft); border-radius:var(--radius-md); padding:16px 20px; margin:16px 0 4px; }
.mindless-locked-note p{ margin:0; font-weight:700; color:var(--text); font-size:.92rem; }

.mindless-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:14px; margin-top:20px; }
.mindless-card{ border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:20px 14px; text-align:center; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.mindless-card:not(.locked):hover{ transform:translateY(-2px); border-color:var(--primary); box-shadow:var(--shadow-soft); }
.mindless-card-icon{ font-size:1.8rem; margin-bottom:8px; }
.mindless-card-name{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); }
.mindless-card.locked{ opacity:.55; cursor:not-allowed; }
.mindless-card.locked .mindless-card-name{ color:var(--text-faint); }
.mindless-grid-featured{ grid-template-columns:repeat(auto-fit, minmax(140px,220px)); margin-top:14px; }
.mindless-grid-featured .mindless-card{ border-color:var(--primary); box-shadow:var(--shadow-soft); }
.mindless-grid-featured .mindless-card:not(.locked):hover{ box-shadow:var(--shadow-lift); }

/* ---- Shared game shell ---- */
.mindless-game-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.mindless-game-status{ text-align:center; color:var(--text-soft); font-weight:700; margin:10px 0 4px; }
.mindless-game-controls{ display:flex; justify-content:center; gap:12px; margin-top:22px; flex-wrap:wrap; }

.mindless-mode-row{ display:flex; gap:8px; justify-content:center; margin-bottom:14px; }
.mindless-mode-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; padding:8px 16px; border-radius:999px; font-size:.85rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.mindless-mode-btn:hover{ border-color:var(--primary); }
.mindless-mode-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---- Tic-Tac-Toe ---- */
.ttt-board{ display:grid; grid-template-columns:repeat(3, 80px); grid-template-rows:repeat(3, 80px); gap:8px; margin:20px auto; justify-content:center; }
.ttt-cell{ font-size:2rem; font-weight:800; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:12px; color:var(--primary-dark); transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.ttt-cell:not(:disabled):hover{ border-color:var(--primary); }

/* ---- Connect Four ---- */
.c4-cols{ display:grid; grid-template-columns:repeat(7, 44px); gap:6px; justify-content:center; margin:16px auto 6px; }
.c4-col-btn{ border:none; background:var(--primary-soft); color:var(--primary-dark); border-radius:8px; padding:6px 0; font-weight:800; }
.c4-col-btn:disabled{ opacity:.4; }
.c4-board{ display:grid; grid-template-columns:repeat(7, 44px); gap:6px; background:var(--primary-dark); padding:10px; border-radius:16px; justify-content:center; margin:0 auto; width:max-content; }
.c4-cell{ width:44px; height:44px; border-radius:50%; background:var(--card-bg); }
.c4-cell.filled-R{ background:#e0457a; }
.c4-cell.filled-Y{ background:#ffd76b; }
/* the newest piece drops in from above its column and settles with a small bounce */
.c4-cell.c4-falling{ animation:c4Fall .44s cubic-bezier(.5,.02,.62,.6); }
@keyframes c4Fall{
  0%{ transform:translateY(var(--c4-fall,-160px)); }
  62%{ transform:translateY(0); animation-timing-function:cubic-bezier(.3,0,.5,1); }
  78%{ transform:translateY(-9px); }
  90%{ transform:translateY(0); }
  96%{ transform:translateY(-3px); }
  100%{ transform:translateY(0); }
}

/* ---- 2048 ---- */
.g2048-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.g2048-score{ font-weight:800; color:var(--primary-dark); }
/* Tiles float on their own layer above a static grid so they can slide between
   cells; a step is one 70px cell plus the 8px gap. */
.g2048-board{ position:relative; width:324px; height:324px; box-sizing:border-box; background:var(--primary-soft); padding:10px; border-radius:16px; margin:0 auto; outline:none; }
.g2048-bg{ position:absolute; inset:10px; display:grid; grid-template-columns:repeat(4, 70px); grid-template-rows:repeat(4, 70px); gap:8px; }
.g2048-bg-cell{ border-radius:10px; background:var(--card-bg); }
.g2048-tiles{ position:absolute; inset:10px; }
.g2048-tile{
  position:absolute; top:0; left:0; width:70px; height:70px;
  transition:transform .13s cubic-bezier(.3,.7,.4,1); will-change:transform;
}
.g2048-tile.g2048-merging{ z-index:1; }
.g2048-tile.g2048-pop{ z-index:2; }
.g2048-tile-in{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border-radius:10px; background:var(--card-bg); font-weight:800; font-size:1.3rem; color:var(--text);
}
.g2048-pop .g2048-tile-in{ animation:g2048Pop .19s ease; }
.g2048-new .g2048-tile-in{ animation:g2048Appear .19s ease; }
@keyframes g2048Pop{ 0%{ transform:scale(.62); } 62%{ transform:scale(1.16); } 100%{ transform:scale(1); } }
@keyframes g2048Appear{ from{ transform:scale(0); } to{ transform:scale(1); } }
.g2048-tile-in.v-2{ background:#eee4da; color:#5c4a3a; }
.g2048-tile-in.v-4{ background:#ede0c8; color:#5c4a3a; }
.g2048-tile-in.v-8{ background:#f2b179; color:#fff; }
.g2048-tile-in.v-16{ background:#f59563; color:#fff; }
.g2048-tile-in.v-32{ background:#f67c5f; color:#fff; }
.g2048-tile-in.v-64{ background:#f65e3b; color:#fff; }
.g2048-tile-in.v-128{ background:#edcf72; color:#fff; font-size:1.1rem; }
.g2048-tile-in.v-256{ background:#edcc61; color:#fff; font-size:1.1rem; }
.g2048-tile-in.v-512{ background:#edc850; color:#fff; font-size:1.1rem; }
.g2048-tile-in.v-1024{ background:#edc53f; color:#fff; font-size:1rem; }
.g2048-tile-in.v-2048{ background:#edc22e; color:#fff; font-size:1rem; }

/* ---- Memory Match ---- */
.memory-grid{ display:grid; grid-template-columns:repeat(4, 64px); gap:8px; margin:20px auto; justify-content:center; }
.memory-card{ width:64px; height:64px; border-radius:10px; border:2px solid var(--primary-soft); background:var(--primary); font-size:1.6rem; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.memory-card.flipped{ background:var(--card-bg); }
.memory-card.matched{ background:var(--mint-soft); border-color:var(--mint); opacity:.75; }

/* ---- Word Search ---- */
.ws-layout{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.ws-grid{ display:grid; gap:2px; }
.ws-cell{ width:30px; height:30px; background:var(--card-bg); border:1px solid var(--card-border); font-weight:700; font-size:.8rem; color:var(--text); display:flex; align-items:center; justify-content:center; }
.ws-cell.selecting{ background:var(--primary); color:#fff; }
.ws-cell.found{ background:var(--mint-soft); color:var(--mint); }
.ws-wordlist{ display:flex; flex-direction:column; gap:8px; min-width:140px; }
.ws-word{ font-weight:700; color:var(--text-soft); }
.ws-word.found{ text-decoration:line-through; color:var(--mint); }

/* ---- Sudoku ---- */
.sudoku-board{ display:grid; grid-template-columns:repeat(9, 34px); grid-template-rows:repeat(9, 34px); margin:16px auto; justify-content:center; background:var(--text); padding:2px; gap:1px; border-radius:8px; width:max-content; }
.sudoku-cell{ background:var(--card-bg); border:none; font-weight:800; font-size:.95rem; color:var(--text); display:flex; align-items:center; justify-content:center; }
.sudoku-cell.given{ color:var(--text-faint); background:var(--primary-soft); }
.sudoku-cell.selected{ background:var(--primary-soft); outline:2px solid var(--primary); outline-offset:-2px; }
.sudoku-cell.wrong{ color:#e0457a; }
.sudoku-cell.bl{ border-left:2px solid var(--text); }
.sudoku-cell.bt{ border-top:2px solid var(--text); }
.sudoku-cell.br{ border-right:2px solid var(--text); }
.sudoku-cell.bb{ border-bottom:2px solid var(--text); }
.sudoku-numpad{ display:flex; gap:6px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.sudoku-num-btn{ width:34px; height:34px; border-radius:8px; border:2px solid var(--primary-soft); background:var(--card-bg); font-weight:800; color:var(--text); }

/* ---- Solitaire ---- */
.sol-top-row{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:16px 0 24px; }
.sol-stock-waste{ display:flex; gap:10px; }
.sol-foundations{ display:flex; gap:10px; }
.sol-pile-btn{ border:none; background:none; padding:0; }
.sol-card{ width:52px; height:74px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; box-shadow:var(--shadow-soft); }
.sol-card.back{ background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.sol-card.face{ background:#fdfaf3; border:1px solid var(--card-border); }
.sol-card.face.red{ color:#c0334d; }
.sol-card.face.black{ color:#2b2440; }
.sol-card.empty{ background:transparent; border:2px dashed var(--primary-soft); color:var(--text-faint); }
.sol-card.selected{ outline:3px solid var(--mint); outline-offset:-3px; }
.sol-tableau{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.sol-tableau-col{ border:none; background:none; padding:0; width:52px; }
.sol-stack{ position:relative; min-height:220px; }

/* ---- Jigsaw ---- */
.jigsaw-board{ display:grid; gap:0; margin:16px auto; justify-content:center; border:3px solid var(--primary); border-radius:8px; overflow:hidden; width:max-content; }
.jigsaw-piece{ width:70px; height:70px; border:1px solid rgba(255,255,255,.25); padding:0; cursor:pointer; }
.jigsaw-piece.selected{ outline:3px solid var(--mint); outline-offset:-3px; }
.jigsaw-piece.correct{ box-shadow:inset 0 0 0 2px rgba(111,207,158,.6); }

/* ---- Doodle Pad ---- */
.paint-prompt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--primary-soft); border-radius:var(--radius-md); padding:12px 18px; margin:14px 0; }
.paint-prompt-text{ margin:0; font-family:var(--font-head); font-weight:700; color:var(--text); font-size:.95rem; }
.paint-canvas-wrap{ width:100%; max-width:760px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--card-border); }
.paint-canvas{ display:block; width:100%; aspect-ratio:760/480; touch-action:none; background:#fff; cursor:crosshair; }
.paint-toolbar{ margin-top:18px; }
.paint-size-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.paint-size-btn{ width:38px; height:38px; border-radius:50%; border:2px solid var(--primary-soft); background:var(--card-bg); display:flex; align-items:center; justify-content:center; transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.paint-size-btn:hover{ border-color:var(--primary); }
.paint-size-btn.active{ border-color:var(--primary); background:var(--primary-soft); }
.paint-size-dot{ border-radius:50%; background:var(--text); display:block; }
.paint-tool-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; padding:8px 16px; border-radius:999px; font-size:.85rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.paint-tool-btn:hover{ border-color:var(--primary); }
.paint-tool-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.paint-palette{ display:flex; flex-direction:column; gap:8px; max-width:420px; margin:0 auto; }
.paint-color-row{ display:flex; align-items:center; gap:10px; }
.paint-group-label{ width:64px; flex:none; font-family:var(--font-head); font-weight:800; font-size:.66rem; letter-spacing:.4px; text-transform:uppercase; color:var(--text-faint); }
.paint-swatch-row{ display:flex; gap:6px; flex-wrap:wrap; }
.paint-swatch{ width:28px; height:28px; border-radius:50%; border:2px solid var(--card-border); box-shadow:0 1px 3px rgba(0,0,0,.15); transition:transform .15s ease; padding:0; }
.paint-swatch:hover{ transform:scale(1.12); }
.paint-swatch.active{ border-color:var(--text); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary); }

/* ---- Sketch Studio ---- */
.ss-mode-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-top:18px; }
.ss-mode-card{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:18px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ss-mode-card:hover{ transform:translateY(-2px); border-color:var(--primary); box-shadow:var(--shadow-soft); }
.ss-mode-icon{ font-size:1.7rem; }
.ss-mode-name{ font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.ss-mode-blurb{ font-size:.82rem; color:var(--text-soft); line-height:1.45; }

.ss-back-btn{ margin-bottom:6px; }
.ss-prompt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--primary-soft); border-radius:var(--radius-md); padding:14px 18px; margin:12px 0; }
.ss-prompt-kicker{ display:block; font-family:var(--font-head); font-weight:800; font-size:.68rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-faint); }
.ss-prompt-text{ margin:4px 0 0; font-family:var(--font-head); font-weight:700; font-size:1.12rem; color:var(--text); }
/* Only the single-word guess targets get title-cased — full sentences must not. */
.ss-prompt-text.ss-word{ text-transform:capitalize; }
.ss-step-pill{ font-family:var(--font-head); font-weight:800; font-size:.78rem; color:#fff; background:var(--primary); padding:6px 14px; border-radius:999px; white-space:nowrap; }
.ss-note{ font-size:.84rem; color:var(--text-soft); margin:0 0 12px; line-height:1.5; }

.ss-canvas-wrap{ width:100%; max-width:700px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--card-border); }
.ss-canvas{ display:block; width:100%; aspect-ratio:700/440; touch-action:none; background:#fff; cursor:crosshair; }

.ss-toolbar{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:16px; }
.ss-tool-group{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }

.ss-guess-panel:empty{ display:none; }
.ss-status{ text-align:center; font-weight:700; color:var(--text-soft); margin:16px 0 0; }
.ss-guess-result{ margin-top:16px; padding:16px 18px; border-radius:var(--radius-md); background:var(--primary-soft); border-left:4px solid var(--primary); }
.ss-guess-result.correct{ background:var(--mint-soft); border-left-color:var(--mint); }
.ss-guess-line{ margin:0; font-size:1rem; color:var(--text); }
.ss-guess-line strong{ text-transform:capitalize; }
.ss-guess-conf{ font-size:.84rem; color:var(--text-soft); font-weight:700; }
.ss-guess-alts{ margin:8px 0 0; font-size:.84rem; color:var(--text-soft); }

@media print{
  .bg-blobs, .topbar, .footer-note, .print-btn, .confetti-canvas{ display:none !important; }
  body{ background:white; }
  .card{ box-shadow:none; border:1px solid #ddd; }
}

/* ===================== Zen Garden (pixel art) ===================== */
.zen-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.zen-lede{ color:var(--text-soft); font-size:.92rem; line-height:1.6; margin:0; max-width:64ch; }
.zen-plot-tag{ font-family:var(--font-head); font-weight:800; font-size:.76rem; letter-spacing:.4px; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); padding:8px 16px; border-radius:999px; white-space:nowrap; }

.zen-stage{ margin-bottom:16px; }
.zen-canvas-wrap{ position:relative; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--card-border); line-height:0; background:#6b6961; }
/* pixelated is the whole point — the art is authored at 384x224 */
.zen-canvas{ display:block; width:100%; height:auto; aspect-ratio:12/7; max-height:calc(100vh - 240px);
  image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; }

.zen-keyhint{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px 0 0; font-size:.78rem; color:var(--text-soft); }
.zen-keyhint kbd{ font-family:var(--font-body); font-weight:800; font-size:.72rem; background:var(--primary-soft); color:var(--primary-dark); border-radius:6px; padding:3px 7px; margin-right:2px; }

.zen-layout{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:14px; align-items:start; }
.card.zen-wide{ width:min(1400px, calc(100vw - 32px)); margin-left:50%; transform:translateX(-50%); }
.zen-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.zen-panel{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow-soft); }
.zen-panel-title{ font-family:var(--font-head); font-weight:800; font-size:.8rem; letter-spacing:.6px; text-transform:uppercase; color:var(--primary-dark); margin:0 0 12px; }

.zen-cats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.zen-cat{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-family:var(--font-body); font-weight:700; font-size:.72rem; padding:5px 11px; border-radius:999px; transition:background-color .18s ease, border-color .18s ease, color .18s ease; }
.zen-cat:hover{ border-color:var(--primary); }
.zen-cat.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.zen-palette{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:8px; }
.zen-item{ display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:8px 4px; transition:border-color .15s ease, transform .15s ease; }
.zen-item:hover:not(.locked){ border-color:var(--primary); transform:translateY(-2px); }
.zen-item.active{ border-color:var(--primary); background:var(--primary-soft); }
.zen-item.locked{ opacity:.45; cursor:not-allowed; }
.zen-thumb{ width:32px; height:32px; image-rendering:pixelated; image-rendering:crisp-edges; }
.zen-item-name{ font-family:var(--font-body); font-weight:700; font-size:.64rem; color:var(--text-soft); text-align:center; line-height:1.2; }
.zen-sel{ margin:12px 0 0; font-size:.78rem; color:var(--text-soft); line-height:1.5; }

.zen-points{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--text); }
.zen-level-bar{ height:8px; border-radius:999px; background:var(--primary-soft); overflow:hidden; margin:10px 0 8px; }
.zen-level-fill{ height:100%; background:linear-gradient(90deg,var(--mint),var(--primary)); border-radius:999px; transition:width .4s ease; }
.zen-points-note{ margin:0; font-size:.74rem; color:var(--text-faint); line-height:1.5; }
.zen-seed-count{ margin:8px 0 0; font-size:.78rem; font-weight:700; color:var(--text-soft); }

.zen-atmo-label{ font-family:var(--font-head); font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin:10px 0 6px; }
.zen-atmo-row{ display:flex; flex-wrap:wrap; gap:6px; }
.zen-atmo-btn{ border:2px solid var(--card-border); background:var(--card-bg); color:var(--text-soft); font-family:var(--font-body); font-weight:700; font-size:.7rem; padding:5px 10px; border-radius:999px; }
.zen-atmo-btn:hover{ border-color:var(--primary); }
.zen-atmo-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.zen-quest{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--card-border); }
.zen-quest:last-child{ border-bottom:none; }
.zen-quest-label{ font-size:.78rem; color:var(--text); }
.zen-quest.done .zen-quest-label{ color:var(--mint); }
.zen-quest-count{ font-family:var(--font-head); font-weight:800; font-size:.72rem; color:var(--text-faint); white-space:nowrap; }

.zen-under{ display:flex; flex-wrap:wrap; gap:8px; }
.zen-tool{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-family:var(--font-body); font-weight:700; font-size:.76rem; padding:8px 14px; border-radius:999px; transition:border-color .18s ease, background-color .18s ease, color .18s ease; }
.zen-tool:hover{ border-color:var(--primary); }
.zen-tool.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.zen-activity{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:16px 18px; margin-top:14px; box-shadow:var(--shadow-soft); }
.zen-act-head{ display:flex; align-items:center; justify-content:space-between; }
.zen-act-head h4{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.zen-act-x{ border:none; background:transparent; color:var(--text-faint); font-size:1rem; padding:4px 8px; border-radius:8px; }
.zen-act-sub{ font-size:.84rem; color:var(--text-soft); margin:8px 0 12px; line-height:1.55; }
.zen-act-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.zen-act-input{ flex:1; min-width:180px; margin-bottom:0; }
.zen-act-timer{ text-align:center; margin-top:14px; }
.zen-act-timer span{ font-family:var(--font-head); font-weight:800; font-size:1.8rem; color:var(--primary-dark); }
.zen-act-empty{ color:var(--text-faint); font-size:.82rem; }
.zen-leaf-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.zen-leaf{ font-size:.76rem; background:var(--mint-soft); color:var(--text); padding:5px 11px; border-radius:999px; }
.zen-breath-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0; }
.zen-breath-orb{ width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--mint), var(--primary)); }
.zen-breath-word{ font-family:var(--font-head); font-weight:700; color:var(--text-soft); }

/* ---- coins, bag and Willow's store ---- */
.zen-head-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zen-purse-tag{ font-family:var(--font-head); font-weight:800; font-size:.76rem; letter-spacing:.4px; color:#6b4a12; background:linear-gradient(135deg,#ffe08a,#f5c14a); border:1px solid rgba(140,100,20,.25); padding:8px 16px; border-radius:999px; white-space:nowrap; }

.zen-hud{ position:absolute; top:8px; left:8px; display:flex; gap:6px; flex-wrap:wrap; pointer-events:none; }
.zen-hud span{ font-family:var(--font-head); font-weight:800; font-size:.7rem; color:#fff; background:rgba(22,28,18,.55); border-radius:999px; padding:4px 10px; backdrop-filter:blur(3px); }
.zen-hud .zen-hud-ready{ background:rgba(90,140,40,.75); }
.zen-hud .zen-hud-buff{ background:rgba(150,90,30,.7); }

.zen-backpack-fab{ position:absolute; right:10px; bottom:10px; z-index:2; width:44px; height:44px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(0,0,0,.45); transition:transform .15s ease; }
.zen-backpack-fab:hover{ transform:translateY(-2px) scale(1.05); }
.zen-backpack-fab:active{ transform:translateY(0) scale(.97); }

.zen-item-emoji{ font-size:1.5rem; line-height:1; }
.zen-bag-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(50px,1fr)); gap:6px; }
.zen-slot{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); transition:border-color .15s ease, transform .15s ease; }
.zen-slot:hover{ border-color:var(--primary); transform:translateY(-2px); }
.zen-slot.active{ border-color:var(--primary); background:var(--primary-soft); }
.zen-slot-ic{ font-size:1.3rem; line-height:1; }
.zen-slot-n{ position:absolute; right:2px; bottom:1px; font-family:var(--font-head); font-weight:800; font-size:.62rem; color:var(--text-soft); }
.zen-bag-note{ margin:10px 0 0; font-size:.72rem; color:var(--text-faint); }
.zen-item-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--card-border); }
.zen-item-actions .zen-sel{ flex:1 1 100%; margin:0 0 4px; }
.zen-mini{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-family:var(--font-body); font-weight:800; font-size:.7rem; padding:5px 11px; border-radius:999px; white-space:nowrap; transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.zen-mini:hover:not(:disabled){ border-color:var(--primary); background:var(--primary-soft); }
.zen-mini:disabled{ opacity:.4; cursor:not-allowed; }

.zen-shop{ position:absolute; inset:0; background:rgba(20,24,16,.55); backdrop-filter:blur(4px); display:flex; align-items:stretch; justify-content:center; padding:10px; z-index:3; }
.zen-shop[hidden]{ display:none; }
.zen-shop-card{ width:100%; max-width:720px; overflow-y:auto; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lift); padding:14px 16px; backdrop-filter:blur(10px); }
.zen-shop-top{ display:flex; align-items:flex-start; gap:10px; }
.zen-shop-titles{ flex:1; min-width:0; }
.zen-shop-top h4{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.zen-shop-sub{ margin:5px 0 0; font-size:.76rem; color:var(--text-soft); line-height:1.5; }
.zen-shop-purse{ font-family:var(--font-head); font-weight:800; font-size:.8rem; color:#6b4a12; background:linear-gradient(135deg,#ffe08a,#f5c14a); padding:6px 13px; border-radius:999px; white-space:nowrap; }
.zen-shop-tabs{ display:flex; gap:6px; margin:12px 0 10px; }
.zen-shop-tab{ flex:1; border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-family:var(--font-head); font-weight:800; font-size:.8rem; padding:7px 12px; border-radius:999px; }
.zen-shop-tab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.zen-goods{ display:flex; flex-direction:column; gap:7px; }
.zen-good{ display:flex; align-items:center; gap:10px; border:1px solid var(--card-border); background:var(--primary-soft); border-radius:var(--radius-sm); padding:8px 11px; }
.zen-good.out{ opacity:.45; }
.zen-good.owned{ background:var(--mint-soft); }
.zen-good-ic{ font-size:1.5rem; line-height:1; }
.zen-good-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.zen-good-name{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--text); }
.zen-good-meta{ font-size:.7rem; color:var(--text-soft); line-height:1.4; }
.zen-good-side{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
.zen-good-price{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--text); white-space:nowrap; }
.zen-good-stock{ font-size:.66rem; color:var(--text-faint); white-space:nowrap; }
.zen-good-btns{ display:flex; gap:4px; margin-top:2px; }
.zen-tagsale{ font-style:normal; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--rose); padding:2px 6px; border-radius:999px; }
.zen-taghot{ font-style:normal; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--peach); padding:2px 6px; border-radius:999px; }
.zen-qty{ font-style:normal; font-weight:800; color:var(--text-faint); }
.zen-up{ color:var(--mint); }
.zen-down{ color:var(--rose); }
.zen-shop-total{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--card-border); font-size:.82rem; color:var(--text-soft); }
.zen-shop-foot{ margin:12px 0 0; font-size:.7rem; color:var(--text-faint); }
.zen-shop-foot kbd{ font-family:var(--font-body); font-weight:800; font-size:.66rem; background:var(--primary-soft); color:var(--primary-dark); border-radius:5px; padding:2px 5px; }
.zen-shop-soon{ margin:12px 0 0; font-size:.7rem; color:var(--text-faint); line-height:1.6; }
.zen-shop-soon em{ font-style:normal; font-weight:800; color:var(--primary-dark); }

.zen-chest{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.zen-chest-col{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.zen-chest-col h5{ margin:0; font-family:var(--font-head); font-weight:800; font-size:.78rem; color:var(--primary-dark); }
.zen-chest-col h5 em{ font-style:normal; font-weight:700; color:var(--text-faint); }

.zen-recipes{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.zen-recipe{ border:1px solid var(--card-border); background:var(--primary-soft); border-radius:var(--radius-sm); padding:9px 11px; }
.zen-recipe.locked{ opacity:.5; }
.zen-recipe-head{ display:flex; align-items:center; gap:10px; }
.zen-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.zen-chip{ font-size:.66rem; font-weight:700; color:var(--text-soft); background:var(--card-bg); border:1px solid var(--card-border); padding:3px 8px; border-radius:999px; }
.zen-chip.ok{ color:#1f6b45; background:var(--mint-soft); border-color:transparent; }
:root[data-theme="dark"] .zen-chip.ok{ color:var(--mint); }

@media (max-width:900px){
  .zen-layout{ grid-template-columns:1fr; }
  .card.zen-wide{ width:auto; margin-left:0; transform:none; }
  .zen-chest{ grid-template-columns:1fr; }
  .zen-shop{ padding:6px; }
  .zen-shop-card{ padding:11px 12px; }
}

/* ===================== My Quizzes ===================== */
.quiz-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.quiz-h2{ margin:0 0 6px; }
.quiz-sub{ margin:0; max-width:56ch; color:var(--text-soft); font-size:.92rem; line-height:1.6; }

.quiz-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:16px; }
.quiz-set-card{ display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease; }
.quiz-set-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.quiz-set-cover{ width:100%; height:120px; object-fit:cover; display:block; background:var(--primary-soft); }
.quiz-set-cover-blank{ display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.quiz-set-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.quiz-set-title{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.quiz-set-desc{ margin:0; font-size:.82rem; color:var(--text-soft); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.quiz-set-meta{ margin:0; font-size:.72rem; font-weight:700; color:var(--text-faint); }
.quiz-set-actions{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.quiz-set-actions .next-btn{ padding:10px 18px; font-size:.82rem; flex:1; }
.quiz-set-actions .ghost-btn{ padding:10px 14px; font-size:.82rem; }
.quiz-del-btn{ border:none; background:transparent; color:var(--text-faint); font-size:.9rem; padding:8px 10px; border-radius:999px; }
.quiz-del-btn:hover{ background:var(--peach-soft); color:var(--rose); }

/* ---- editor ---- */
.quiz-edit-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.quiz-local-tag{ font-size:.7rem; font-weight:700; color:var(--text-faint); background:var(--primary-soft); padding:5px 12px; border-radius:999px; white-space:nowrap; }
.quiz-set-fields{ margin-bottom:22px; }
.quiz-field-label{ display:block; font-family:var(--font-head); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin:0 0 6px; }
.quiz-desc-input{ width:100%; min-height:64px; resize:vertical; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:12px 16px; font-family:var(--font-body); font-size:.9rem; color:var(--text); }
.quiz-desc-input:focus{ outline:none; border-color:var(--primary); }

.quiz-cards-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; flex-wrap:wrap; }
.quiz-panel-title{ margin:0; font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--text); }
.quiz-card-count{ color:var(--text-faint); font-weight:700; }
.quiz-cards-empty{ color:var(--text-soft); font-size:.86rem; background:var(--primary-soft); border-radius:var(--radius-sm); padding:16px; text-align:center; }
.quiz-cards{ display:flex; flex-direction:column; gap:14px; }
.quiz-edit-foot{ margin-top:18px; text-align:center; }

.quiz-card-editor{ border:1px solid var(--card-border); background:var(--card-bg); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow-soft); }
.quiz-card-editor-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.quiz-card-num{ font-family:var(--font-head); font-weight:800; font-size:.78rem; color:var(--primary-dark); }
.quiz-card-del{ border:none; background:transparent; color:var(--text-faint); font-size:.85rem; padding:6px 9px; border-radius:999px; }
.quiz-card-del:hover{ background:var(--peach-soft); color:var(--rose); }
.quiz-card-sides{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quiz-side-editor{ display:flex; flex-direction:column; gap:8px; background:var(--primary-soft); border-radius:var(--radius-sm); padding:10px 12px; min-width:0; }
.quiz-side-label{ font-family:var(--font-head); font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:var(--primary-dark); }
.quiz-side-text{ width:100%; min-height:56px; resize:vertical; border:1px solid var(--card-border); background:var(--card-bg); border-radius:8px; padding:8px 10px; font-family:var(--font-body); font-size:.84rem; color:var(--text); }
.quiz-side-text:focus{ outline:none; border-color:var(--primary); }

.quiz-photo-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.quiz-photo-thumb{ position:relative; width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid var(--card-border); }
.quiz-photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.quiz-photo-thumb-actions{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px; background:rgba(20,16,30,.45); opacity:0; transition:opacity .15s ease; }
.quiz-photo-thumb:hover .quiz-photo-thumb-actions, .quiz-photo-thumb:focus-within .quiz-photo-thumb-actions{ opacity:1; }
.quiz-photo-mini{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:none; background:rgba(255,255,255,.92); color:var(--text); font-size:.7rem; cursor:pointer; }
.quiz-photo-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:56px; height:56px; border-radius:8px; border:2px dashed var(--card-border); background:var(--card-bg); color:var(--text-faint); font-size:1.1rem; cursor:pointer; text-align:center; }
.quiz-photo-add:hover{ border-color:var(--primary); color:var(--primary-dark); }
.quiz-photo-add span{ font-size:.56rem; font-weight:700; line-height:1; }

/* ---- study mode ---- */
.quiz-study-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.quiz-study-title{ font-family:var(--font-head); font-weight:800; font-size:.92rem; color:var(--text); text-align:center; flex:1; }
.quiz-study-progress{ text-align:center; margin:0 0 18px; font-size:.78rem; font-weight:700; color:var(--text-faint); }

.quiz-flip-outer{ perspective:1600px; max-width:520px; margin:0 auto; }
.quiz-flip-card{ position:relative; display:block; width:100%; min-height:300px; border:none; background:transparent; padding:0; cursor:pointer; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.2,.2,1); }
.quiz-flip-card.is-flipped{ transform:rotateY(180deg); }
.quiz-flip-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--radius-md); border:1px solid var(--card-border); background:var(--card-bg); box-shadow:var(--shadow-soft); padding:24px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; overflow-y:auto; }
.quiz-flip-face-back{ transform:rotateY(180deg); }
.quiz-flip-side-tag{ font-family:var(--font-head); font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.6px; color:var(--primary-dark); background:var(--primary-soft); padding:4px 12px; border-radius:999px; }
.quiz-flip-photos{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:100%; }
.quiz-flip-photos img{ max-width:100%; max-height:170px; border-radius:var(--radius-sm); object-fit:contain; box-shadow:var(--shadow-soft); }
.quiz-flip-text{ margin:0; font-size:1.02rem; color:var(--text); line-height:1.5; white-space:pre-wrap; }
.quiz-flip-empty{ color:var(--text-faint); font-style:italic; font-size:.86rem; }
.quiz-flip-hint{ text-align:center; margin:12px 0 0; font-size:.72rem; color:var(--text-faint); }

.quiz-study-nav{ display:flex; justify-content:center; gap:12px; margin-top:20px; }

@media (max-width:640px){
  .quiz-card-sides{ grid-template-columns:1fr; }
  .quiz-flip-face{ padding:18px 14px; }
  .quiz-flip-card{ min-height:340px; }
}

/* ===================== Fitness & Movement ===================== */
.fit-disclaimer{ font-size:.8rem; color:var(--text-soft); background:var(--peach-soft); border-left:4px solid var(--peach); border-radius:var(--radius-sm); padding:12px 16px; margin:14px 0; line-height:1.5; }

.fit-activity-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:12px; margin:14px 0 18px; }
.fit-activity-card{ display:flex; flex-direction:column; align-items:center; gap:6px; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:16px 10px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.fit-activity-card:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.fit-activity-icon{ font-size:1.6rem; }
.fit-activity-name{ font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--text); text-align:center; }

.fit-quicklinks{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

.fit-cart-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--mint-soft); border-radius:var(--radius-md); padding:14px 18px; margin-top:18px; }
.fit-cart-banner span{ font-weight:700; color:var(--text); font-size:.9rem; }

.fit-gymtype-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin:14px 0; }
.fit-gymtype-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:14px 16px; transition:border-color .2s ease, transform .2s ease; }
.fit-gymtype-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.fit-gymtype-name{ font-family:var(--font-head); font-weight:800; font-size:.92rem; color:var(--text); }
.fit-gymtype-sub{ font-size:.78rem; color:var(--text-soft); }

.fit-cart-list{ margin-top:18px; background:var(--primary-soft); border-radius:var(--radius-md); padding:14px 18px; }
.fit-cart-title{ margin:0 0 8px; font-family:var(--font-head); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); }
.fit-cart-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:.88rem; color:var(--text); }
.fit-cart-muscle{ color:var(--text-faint); font-size:.78rem; }

.fit-body-toggle{ display:flex; gap:8px; justify-content:center; margin:14px 0; }
.fit-toggle-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; padding:8px 20px; border-radius:999px; font-size:.85rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.fit-toggle-btn.active{ background:var(--mx-ink); border-color:var(--mx-ink); color:#fff; }

/* ---- Muscle Explorer ----
   Flat-graphic chart styling: a solid charcoal body with the muscles as bold
   colour blocks separated by white lines, rather than tinted overlays on skin. */
:root{ --mx-body:#4d4d55; --mx-sep:#ffffff; --mx-ink:#4a7c59; --mx-panel:#ffffff; --mx-line:rgba(0,0,0,.10); }
:root[data-theme="dark"]{ --mx-body:#6a6a78; --mx-sep:#f7f7fb; --mx-ink:#7fbf94; --mx-panel:rgba(255,255,255,.05); --mx-line:rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --mx-body:#6a6a78; --mx-sep:#f7f7fb; --mx-ink:#7fbf94; --mx-panel:rgba(255,255,255,.05); --mx-line:rgba(255,255,255,.12); } }

/* The card itself widens for the explorer — widening only its contents left
   them hanging past the card's background instead of centred on it. */
.card.fit-wide{ width:min(1180px, calc(100vw - 40px)); margin-left:50%; transform:translateX(-50%); }
.mx-shell{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.mx-main{ min-width:0; }
.mx-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mx-back{ padding-left:0; }
.mx-heading{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--text); margin:6px 0 4px; }
.mx-sub{ margin:0; color:var(--text-soft); font-size:.88rem; }
.mx-tip-badge{ margin:0; background:var(--mint-soft); color:var(--text); border-radius:14px; padding:10px 16px; font-size:.8rem; max-width:230px; line-height:1.45; }

.mx-figures{ display:flex; gap:6px; justify-content:center; align-items:flex-start; }
.mx-figure{ flex:1 1 0; min-width:0; max-width:420px; }
.mx-svg{ width:100%; height:auto; display:block; overflow:visible; shape-rendering:geometricPrecision; }

.mx-base > *{ fill:var(--mx-body); }

.mx-muscle{ cursor:pointer; }
.mx-muscle > *{ fill:var(--mx-c); stroke:var(--mx-sep); stroke-width:1.8; stroke-linejoin:round; transition:filter .15s ease; }
.mx-muscle.hot > *, .mx-muscle.highlight > *{ filter:brightness(1.18); }
.mx-muscle.selected > *{ stroke:var(--text); stroke-width:2.6; }
/* White separations between bellies — what gives the chart its crisp edges. */
.mx-detail{ fill:none; stroke:var(--mx-sep); stroke-width:1.6; stroke-linecap:round; pointer-events:none; }

.mx-label{ cursor:pointer; }
.mx-chip{ fill:var(--menu-bg); stroke:var(--mx-line); stroke-width:1; transition:fill .15s ease; }
.mx-dot{ fill:var(--mx-c); }
.mx-chip-text{ font-family:var(--font-body); font-weight:700; font-size:10.5px; fill:var(--text); }
.mx-leader{ fill:none; stroke:var(--mx-line); stroke-width:1.1; }
.mx-label.hot .mx-chip, .mx-label.highlight .mx-chip{ fill:var(--primary-soft); }
.mx-label.selected .mx-chip{ fill:var(--mx-c); }
.mx-label.selected .mx-chip-text{ fill:#2b2440; }
.mx-leader-tip{ fill:var(--mx-line); }
.mx-leader-g.hot .mx-leader, .mx-leader-g.selected .mx-leader{ stroke:var(--mx-c); stroke-width:1.8; }
.mx-leader-g.hot .mx-leader-tip, .mx-leader-g.selected .mx-leader-tip{ fill:var(--mx-c); }

.mx-foot-tip{ background:var(--mint-soft); border-radius:14px; padding:12px 18px; font-size:.84rem; color:var(--text); margin:14px 0 0; line-height:1.5; }

.mx-common{ margin-top:18px; border-top:1px solid var(--card-border); padding-top:16px; }
.mx-common-title{ font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); margin:0 0 2px; }
.mx-common-sub{ margin:0 0 12px; font-size:.82rem; color:var(--text-soft); }
.mx-common-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.mx-common-btn{ display:flex; flex-direction:column; gap:3px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:11px 14px; transition:border-color .2s ease, background-color .2s ease; }
.mx-common-btn:hover{ border-color:var(--primary); }
.mx-common-btn.active{ border-color:var(--mx-ink); background:var(--mint-soft); }
.mx-common-name{ font-family:var(--font-head); font-weight:800; font-size:.86rem; color:var(--text); }
.mx-common-desc{ font-size:.74rem; color:var(--text-soft); line-height:1.4; }

.mx-panel{ position:sticky; top:16px; background:var(--mx-panel); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-soft); max-height:calc(100vh - 32px); overflow-y:auto; }
.mx-panel-head{ display:flex; align-items:center; justify-content:space-between; }
.mx-icon-btn{ width:32px; height:32px; border-radius:50%; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text-soft); font-size:1rem; display:flex; align-items:center; justify-content:center; }
.mx-icon-btn:hover{ color:var(--text); border-color:var(--primary); }
.mx-fav-btn.faved{ color:var(--rose); border-color:var(--rose); }

.mx-panel-title-row{ display:flex; gap:12px; align-items:flex-start; margin:14px 0 18px; }
.mx-panel-badge{ flex:none; width:46px; height:46px; border-radius:50%; background:color-mix(in srgb, var(--mx-c) 30%, transparent); color:var(--mx-c); display:flex; align-items:center; justify-content:center; }
.mx-panel-badge svg{ width:26px; height:26px; }
.mx-panel-title{ margin:0 0 4px; font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--text); }
.mx-panel-desc{ margin:0; font-size:.8rem; color:var(--text-soft); line-height:1.5; }
.mx-panel-section{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--mx-ink); margin:0 0 10px; }

.mx-ex-list{ display:flex; flex-direction:column; }
.mx-ex-row{ border-bottom:1px solid var(--card-border); padding:10px 0; }
.mx-ex-row:last-child{ border-bottom:none; }
.mx-ex-main{ display:flex; align-items:center; gap:10px; }
.mx-ex-thumb{ flex:none; width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--mx-c) 26%, transparent); color:var(--mx-c); display:flex; align-items:center; justify-content:center; }
.mx-picto{ width:24px; height:24px; }
.mx-ex-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left; background:none; border:none; padding:0; }
.mx-ex-name{ font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--text); }
.mx-ex-meta{ font-size:.74rem; color:var(--text-soft); }
.mx-ex-targets{ font-size:.7rem; color:var(--text-faint); }
.mx-ex-actions{ flex:none; display:flex; align-items:center; gap:6px; }
.mx-ex-chevron{ color:var(--text-faint); font-size:1rem; }
.mx-ex-add{ width:28px; height:28px; border-radius:8px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text-soft); font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mx-ex-add:hover{ border-color:var(--mx-ink); color:var(--mx-ink); }
.mx-ex-add.added{ background:var(--mint); border-color:var(--mint); color:#fff; }
.mx-ex-detail{ padding:10px 0 4px; }

.mx-more-btn{ width:100%; margin-top:12px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text-soft); font-weight:700; font-size:.8rem; padding:10px; border-radius:999px; }
.mx-more-btn:hover{ border-color:var(--primary); color:var(--text); }

.mx-panel-empty{ text-align:center; padding:30px 10px; }
.mx-panel-empty-icon{ font-size:1.8rem; }
.mx-panel-empty-title{ font-family:var(--font-head); font-weight:800; color:var(--text); margin:10px 0 6px; }
.mx-panel-empty-body{ font-size:.82rem; color:var(--text-soft); line-height:1.5; margin:0; }

/* Both figures fit side by side above this width, so the Front/Back switch
   is only needed once they have to be shown one at a time. */
.mx-toggle{ display:none; }
@media (max-width:1080px){
  .mx-shell{ grid-template-columns:minmax(0,1fr); }
  .mx-panel{ position:static; max-height:none; }
}
@media (max-width:820px){
  .mx-toggle{ display:flex; }
  .mx-figure{ display:none; max-width:none; }
  .mx-figure.active{ display:block; }
  .mx-tip-badge{ max-width:none; }
}

.fit-exercise-list{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.fit-exercise-card{ border:1px solid var(--card-border); background:var(--card-bg); border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow-soft); }
.fit-exercise-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fit-exercise-name{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1.02rem; color:var(--text); }
.fit-diff-badge{ font-family:var(--font-head); font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; padding:4px 12px; border-radius:999px; color:#fff; white-space:nowrap; }
.fit-diff-mint{ background:var(--mint); }
.fit-diff-primary{ background:var(--primary); }
.fit-diff-rose{ background:var(--rose); }
.fit-exercise-meta{ margin:8px 0 12px; font-size:.82rem; color:var(--text-soft); }
.fit-exercise-label{ margin:12px 0 4px; font-family:var(--font-head); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); }
.fit-exercise-steps{ margin:0; padding-left:20px; font-size:.86rem; color:var(--text); line-height:1.6; }
.fit-exercise-list-plain{ margin:0; padding-left:20px; font-size:.86rem; color:var(--text-soft); line-height:1.6; }
.fit-add-btn{ margin-top:16px; width:100%; }
.fit-add-btn.added{ background:linear-gradient(135deg, var(--mint), #4fae7e); }

.fit-slider-row{ margin:16px 0; }
.fit-slider-label{ display:flex; justify-content:space-between; font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); margin-bottom:8px; }
.fit-suggestion{ margin-top:20px; background:var(--mint-soft); border-radius:var(--radius-md); padding:16px 20px; border-left:4px solid var(--mint); }
.fit-suggestion-title{ margin:0 0 6px; font-family:var(--font-head); font-weight:800; color:var(--text); }
.fit-suggestion-body{ margin:0; font-size:.88rem; color:var(--text-soft); line-height:1.5; }

.fit-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.fit-chip{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; padding:8px 16px; border-radius:999px; font-size:.82rem; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.fit-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.fit-week-stats{ margin-top:14px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:8px 20px; }
.fit-week-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--card-border); font-weight:700; color:var(--text); }
.fit-week-row:last-child{ border-bottom:none; }
.fit-week-total{ color:var(--primary-dark); }

.fit-saved-icon{ font-size:2.4rem; text-align:center; margin-top:10px; }

/* ===================== Mindful Cooking ===================== */
.cook-recipe-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-top:16px; }
.cook-recipe-card{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:18px 20px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cook-recipe-card:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.cook-recipe-icon{ font-size:1.8rem; }
.cook-recipe-name{ font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.cook-recipe-blurb{ font-size:.82rem; color:var(--text-soft); line-height:1.45; }
.cook-recipe-meta{ font-size:.72rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }

.cook-ingredient-list{ display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.cook-ingredient-item{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--card-border); font-size:.92rem; color:var(--text); cursor:pointer; }
.cook-ingredient-item:last-child{ border-bottom:none; }
.cook-ingredient-item.checked span{ text-decoration:line-through; color:var(--text-faint); }
.cook-ingredient-check{ width:19px; height:19px; accent-color:var(--primary); flex-shrink:0; }

.cook-progress-track{ height:8px; border-radius:999px; background:var(--primary-soft); overflow:hidden; margin:16px 0 10px; }
.cook-progress-fill{ height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-dark)); border-radius:999px; transition:width .3s ease; }
.cook-step-count{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin:0 0 18px; }
.cook-step-text{ text-align:center; font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--text); line-height:1.5; max-width:52ch; margin:0 auto 10px; padding:20px 10px; }
@media (max-width:640px){ .cook-step-text{ font-size:1.1rem; } }

/* ---- Guided flows (Yoga & Stretching) ---- */
.flow-list{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.flow-card{ display:flex; align-items:flex-start; gap:14px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:16px 18px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.flow-card:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.flow-card-icon{ font-size:1.7rem; flex:none; line-height:1; }
.flow-card-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.flow-card-name{ font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.flow-card-blurb{ font-size:.84rem; color:var(--text-soft); line-height:1.5; }
.flow-card-meta{ font-size:.74rem; font-weight:700; color:var(--text-faint); margin-top:3px; }

.flow-summary{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--primary-dark); margin:0 0 14px; }
.flow-pose-list{ display:flex; flex-direction:column; }
.flow-pose-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--card-border); }
.flow-pose-row:last-child{ border-bottom:none; }
.flow-pose-num{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--primary-soft); color:var(--primary-dark); font-weight:800; font-size:.76rem; display:flex; align-items:center; justify-content:center; }
.flow-pose-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.flow-pose-name{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); }
.flow-pose-name em{ font-style:italic; font-weight:600; color:var(--text-faint); font-size:.82rem; }
.flow-pose-note{ font-size:.8rem; color:var(--text-soft); line-height:1.5; }
.flow-pose-time{ flex:none; font-weight:800; font-size:.8rem; color:var(--text-faint); }

.flow-step-count{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:.9rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin:14px 0 0; }
.flow-pose-title{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:2.1rem; color:var(--text); margin:8px 0 3px; }
.flow-pose-sanskrit{ text-align:center; font-style:italic; color:var(--text-faint); font-size:1.05rem; margin:0 0 6px; }
.flow-cue{ text-align:center; font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--primary-dark); margin:18px auto 10px; max-width:40ch; line-height:1.45; }
.flow-note{ text-align:center; font-size:1.05rem; color:var(--text-soft); line-height:1.65; margin:0 auto; max-width:48ch; }
@media (max-width:640px){
  .flow-pose-title{ font-size:1.7rem; }
  .flow-cue{ font-size:1.12rem; }
  .flow-note{ font-size:.98rem; }
}

/* Pose drawing sits beside the hold timer so you can check the shape at a glance. */
.flow-stage{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin-top:10px; }
.flow-pose-art{ width:210px; max-width:46vw; }
.pose-art{ width:100%; height:auto; display:block; }
.pose-ground{ stroke:var(--card-border); stroke-width:2.5; stroke-linecap:round; }
.pose-figure circle{ fill:var(--primary-dark); }
.pose-figure path{ fill:none; stroke:var(--primary-dark); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; }
.flow-pose-thumb{ flex:none; width:56px; }
.flow-pose-thumb .pose-art{ width:56px; }
.flow-pose-thumb .pose-figure path{ stroke-width:7; }
@media (max-width:640px){ .flow-stage{ gap:12px; } .flow-pose-art{ width:150px; } }

/* ---- The day's workout builder ---- */
.fit-wk-panel{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:16px 18px; margin-top:16px; }
.fit-wk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.fit-wk-title{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.fit-wk-count{ font-size:.76rem; font-weight:700; color:var(--text-faint); }
.fit-empty-note{ font-size:.84rem; color:var(--text-faint); margin:6px 0; }

.fit-wk-list{ display:flex; flex-direction:column; }
.fit-wk-row{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--card-border); }
.fit-wk-row:last-child{ border-bottom:none; }
.fit-wk-num{ flex:none; width:23px; height:23px; border-radius:50%; background:var(--primary-soft); color:var(--primary-dark); font-weight:800; font-size:.74rem; display:flex; align-items:center; justify-content:center; }
.fit-wk-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fit-wk-name{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); }
.fit-wk-meta{ font-size:.75rem; color:var(--text-soft); }

.fit-wk-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.fit-wk-actions .ghost-btn{ font-size:.82rem; padding:9px 14px; border:1px solid var(--card-border); }
.fit-wk-actions .ghost-btn:hover{ border-color:var(--primary); }

.fit-picker{ margin-top:14px; max-height:300px; overflow-y:auto; border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:10px 12px; }
.fit-pick-group + .fit-pick-group{ margin-top:12px; }
.fit-pick-label{ font-family:var(--font-head); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin:0 0 5px; }
.fit-pick-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:transparent; padding:8px 6px; border-radius:9px; color:var(--text); font-family:var(--font-body); font-weight:700; font-size:.84rem; transition:background-color .15s ease; }
.fit-pick-item:hover{ background:var(--primary-soft); }
.fit-pick-item > span:first-child{ flex:1; min-width:0; }
.fit-pick-meta{ font-weight:600; font-size:.72rem; color:var(--text-faint); white-space:nowrap; }
.fit-pick-add{ flex:none; width:22px; height:22px; border-radius:7px; background:var(--primary-soft); color:var(--primary-dark); font-weight:800; display:flex; align-items:center; justify-content:center; }

.fit-own-row{ display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.fit-own-row .journal-title-input{ flex:1; min-width:180px; }

.fit-saved-list{ display:flex; flex-direction:column; }
.fit-saved-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--card-border); }
.fit-saved-row:last-child{ border-bottom:none; }
.fit-saved-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fit-saved-actions{ flex:none; display:flex; align-items:center; gap:4px; }
.fit-saved-actions .ghost-btn{ padding:7px 14px; font-size:.8rem; }

/* ---- Mindful Cooking meal sections ---- */
.cook-subnav{ margin:18px 0 6px; }
.cook-plan{ margin-top:22px; border-top:1px solid var(--card-border); padding-top:18px; }
.cook-plan-title{ font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); margin:0 0 2px; }
.cook-plan-sub{ margin:0 0 12px; font-size:.84rem; color:var(--text-soft); }
.cook-plan-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.cook-plan-btn{ display:flex; flex-direction:column; gap:3px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:11px 14px; transition:border-color .2s ease, transform .2s ease; }
.cook-plan-btn:hover{ border-color:var(--primary); transform:translateY(-2px); }
.cook-plan-label{ font-family:var(--font-head); font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); }
.cook-plan-name{ font-family:var(--font-head); font-weight:700; font-size:.86rem; color:var(--text); line-height:1.35; }

/* ---- Sleep sub-tabs ---- */
.sleep-tip-top{ margin-bottom:6px; }
.sleep-subnav{ margin:18px 0 4px; }

/* ---- Storytime ---- */
.story-hero{ text-align:center; }
.story-scene{ width:100%; max-width:420px; height:auto; display:block; margin:0 auto 16px; border-radius:14px; box-shadow:var(--shadow-soft); }
.story-hero-line{ color:var(--text-soft); font-size:.95rem; line-height:1.6; max-width:46ch; margin:0 auto 18px; }
.story-h{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--text); margin:12px 0 4px; }
.story-sub{ font-size:.86rem; color:var(--text-soft); margin:0 0 14px; line-height:1.55; }

.story-cat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:14px; }
.story-cat-card{ display:flex; flex-direction:column; gap:4px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:16px 18px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.story-cat-card:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.story-cat-icon{ font-size:1.6rem; }
.story-cat-name{ font-family:var(--font-head); font-weight:800; font-size:.96rem; color:var(--text); }
.story-cat-blurb{ font-size:.8rem; color:var(--text-soft); line-height:1.5; }

.story-list{ display:flex; flex-direction:column; gap:10px; }
.story-card{ display:flex; align-items:flex-start; gap:14px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:15px 18px; transition:border-color .2s ease, transform .2s ease; }
.story-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.story-card-icon{ font-size:1.5rem; flex:none; line-height:1; }
.story-card-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.story-card-title{ font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.story-card-blurb{ font-size:.84rem; color:var(--text-soft); line-height:1.5; }
.story-card-meta{ font-size:.74rem; font-weight:700; color:var(--text-faint); margin-top:2px; }

.story-title{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--text); margin:10px 0 12px; }
.story-page-count{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin:0 0 16px; }
.story-text{ font-size:1.12rem; line-height:1.95; color:var(--text); max-width:60ch; margin:0 auto 16px; }
.story-done-icon{ font-size:2.2rem; text-align:center; margin-top:12px; }
.story-reflect-q{ text-align:center; font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--text); margin:20px 0 12px; }
.story-reflect-row{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.story-reflect-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; font-size:.85rem; padding:10px 16px; border-radius:999px; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.story-reflect-btn:hover{ border-color:var(--primary); }
.story-reflect-btn.active{ background:var(--mint); border-color:var(--mint); color:#fff; }

.story-choice-col{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin:20px auto 0; }
.story-choice-btn{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text); font-family:var(--font-head); font-weight:700; font-size:.98rem; padding:14px 20px; border-radius:var(--radius-md); text-align:left; transition:border-color .2s ease, transform .2s ease, background-color .2s ease; }
.story-choice-btn:hover{ border-color:var(--primary); background:var(--primary-soft); transform:translateX(3px); }
.story-ending-tag{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.6px; color:var(--mint); margin:0 0 14px; }

.story-draw-prompt{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--primary-dark); margin:14px 0 6px; }
.story-canvas-wrap{ max-width:640px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--card-border); }
.story-canvas{ display:block; width:100%; aspect-ratio:640/360; touch-action:none; background:#fffdf7; cursor:crosshair; }
.story-draw-tools{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:14px; }
.story-swatch{ width:30px; height:30px; border-radius:50%; border:2px solid var(--card-border); padding:0; transition:transform .15s ease; }
.story-swatch:hover{ transform:scale(1.12); }
.story-swatch.active{ border-color:var(--text); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary); }
.story-clear{ font-size:.82rem; padding:8px 16px; }
.story-draw-img{ display:block; width:100%; max-width:420px; margin:0 auto 20px; border-radius:var(--radius-md); border:1px solid var(--card-border); box-shadow:var(--shadow-soft); }

.story-mood-row{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:6px; }
.story-mood-btn{ display:flex; align-items:center; gap:7px; border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text-soft); font-weight:700; font-size:.86rem; padding:10px 16px; border-radius:999px; transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.story-mood-btn:hover{ border-color:var(--primary); }
.story-mood-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.story-mood-emoji{ font-size:1.05rem; }
.story-rec{ margin-top:18px; }
.story-rec-line{ text-align:center; font-family:var(--font-head); font-weight:700; color:var(--text); margin:0 0 12px; }
.story-rec-card{ border-color:var(--mint); }
@media (max-width:640px){ .story-text{ font-size:1.04rem; line-height:1.85; } .story-title{ font-size:1.3rem; } }

/* ---- Colouring pages ---- */
:root{ --ss-paper:#fffdf7; --ss-ink:#2b2440; }
:root[data-theme="dark"]{ --ss-paper:#f4f1e8; --ss-ink:#2b2440; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ss-paper:#f4f1e8; --ss-ink:#2b2440; } }

.ss-colour-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-top:16px; }
.ss-colour-card{ display:flex; flex-direction:column; gap:5px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:12px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ss-colour-card:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.ss-colour-thumb{ display:block; background:var(--ss-paper); border-radius:var(--radius-sm); overflow:hidden; padding:6px; }
.ss-colour-thumb .ss-colour-svg{ pointer-events:none; }
.ss-colour-name{ font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--text); margin-top:4px; }
.ss-colour-blurb{ font-size:.78rem; color:var(--text-soft); line-height:1.45; }
.ss-colour-meta{ font-size:.72rem; font-weight:700; color:var(--mint); }

.ss-colour-stage{ background:var(--ss-paper); border-radius:var(--radius-md); padding:14px; margin:14px auto 0; max-width:520px; box-shadow:var(--shadow-soft); border:1px solid var(--card-border); }
.ss-colour-svg{ width:100%; height:auto; display:block; }
.ss-region{ stroke:var(--ss-ink); stroke-width:2; stroke-linejoin:round; transition:fill .12s ease; }
.ss-colour-stage .ss-region{ cursor:pointer; }
.ss-colour-stage .ss-region:hover{ stroke-width:3; }

.ss-colour-palette{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.ss-colour-swatch{ width:32px; height:32px; border-radius:50%; border:2px solid var(--card-border); padding:0; box-shadow:0 1px 3px rgba(0,0,0,.15); transition:transform .15s ease; }
.ss-colour-swatch:hover{ transform:scale(1.12); }
.ss-colour-swatch.active{ border-color:var(--text); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary); }

/* ---- Environment ---- */
.env-progress{ margin:16px 0 18px; }
.env-progress-count{ display:block; font-family:var(--font-head); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin-bottom:7px; }
.env-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px; }
.env-card{ position:relative; display:flex; align-items:flex-start; gap:12px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:15px 17px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.env-card:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.env-card.done{ border-color:var(--mint); background:var(--mint-soft); }
.env-card-icon{ font-size:1.5rem; flex:none; line-height:1; }
.env-card-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.env-card-name{ font-family:var(--font-head); font-weight:800; font-size:.94rem; color:var(--text); }
.env-card-blurb{ font-size:.8rem; color:var(--text-soft); line-height:1.5; }
.env-card-tick{ position:absolute; top:10px; right:12px; color:var(--mint); font-weight:800; }

.env-detail-head{ display:flex; align-items:center; gap:12px; margin:12px 0 10px; }
.env-detail-icon{ font-size:2rem; }
.env-detail-title{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1.35rem; color:var(--text); }
.env-why{ font-size:.95rem; color:var(--text-soft); line-height:1.7; background:var(--primary-soft); border-radius:var(--radius-md); padding:14px 18px; margin:0 0 6px; }
.env-reflect{ margin-top:18px; }
.env-reflect-q{ display:block; font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--text); margin-bottom:8px; }
.env-cheer{ margin-top:18px; background:var(--mint-soft); border-left:4px solid var(--mint); border-radius:var(--radius-sm); padding:12px 16px; font-size:.88rem; color:var(--text); }

.env-notes{ margin-top:24px; border-top:1px solid var(--card-border); padding-top:16px; }
.env-notes-title{ font-family:var(--font-head); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin:0 0 10px; }
.env-note-row{ display:flex; flex-direction:column; gap:2px; padding:9px 0; border-bottom:1px solid var(--card-border); }
.env-note-row:last-child{ border-bottom:none; }
.env-note-meta{ font-size:.72rem; font-weight:700; color:var(--text-faint); }
.env-note-text{ font-size:.88rem; color:var(--text); line-height:1.55; }

/* ---- Nutrition Log ---- */
.nut-disclaimer{ background:var(--peach-soft); border-left:4px solid var(--peach); border-radius:var(--radius-md); padding:16px 20px; margin:14px 0 20px; }
.nut-disc-title{ font-family:var(--font-head); font-weight:800; font-size:.92rem; color:var(--text); margin:0 0 8px; }
.nut-disclaimer p{ font-size:.86rem; color:var(--text-soft); line-height:1.6; margin:0 0 8px; }
.nut-disclaimer p:last-child{ margin-bottom:0; }
.nut-disc-src{ font-size:.78rem !important; color:var(--text-faint) !important; font-style:italic; }

.nut-totals{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:18px 22px; }
.nut-total-main{ display:flex; flex-direction:column; }
.nut-total-num{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; line-height:1; color:var(--primary-dark); }
.nut-total-label{ font-size:.78rem; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }
.nut-macros{ display:flex; gap:14px; flex-wrap:wrap; margin-left:auto; }
.nut-macro{ display:flex; flex-direction:column; align-items:center; min-width:64px; padding:8px 12px; border-radius:var(--radius-sm); }
.nut-macro-protein{ background:color-mix(in srgb, #4361ee 16%, transparent); }
.nut-macro-carbs{ background:color-mix(in srgb, #8dc63f 18%, transparent); }
.nut-macro-fat{ background:color-mix(in srgb, #f7941e 18%, transparent); }
.nut-macro-num{ font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--text); }
.nut-macro-label{ font-size:.72rem; font-weight:700; color:var(--text-soft); }

.nut-water{ margin-top:16px; background:color-mix(in srgb, #7ec8e3 14%, transparent); border-radius:var(--radius-md); padding:16px 20px; }
.nut-water-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.nut-water-title{ font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--text); }
.nut-water-amount{ font-size:.84rem; font-weight:700; color:var(--text-soft); }
.nut-water-glasses{ display:flex; gap:6px; margin:10px 0 12px; font-size:1.15rem; }
.nut-glass{ opacity:.4; }
.nut-glass.filled{ opacity:1; }
.nut-water-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.nut-water-btns .ghost-btn{ font-size:.8rem; padding:8px 14px; border:1px solid var(--card-border); }

.nut-add-row{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.nut-meals{ display:flex; flex-direction:column; gap:14px; }
.nut-meal{ border:1px solid var(--card-border); border-radius:var(--radius-md); padding:14px 18px; background:var(--card-bg); }
.nut-meal-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.nut-meal-name{ font-family:var(--font-head); font-weight:800; font-size:.94rem; color:var(--text); }
.nut-meal-kcal{ font-size:.8rem; font-weight:700; color:var(--text-faint); }
.nut-item-list{ display:flex; flex-direction:column; }
.nut-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--card-border); }
.nut-item:last-child{ border-bottom:none; }
.nut-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.nut-item-name{ font-weight:700; font-size:.88rem; color:var(--text); }
.nut-item-meta{ font-size:.74rem; color:var(--text-faint); }
.nut-item-kcal{ font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--primary-dark); white-space:nowrap; }
.nut-empty{ font-size:.82rem; color:var(--text-faint); margin:4px 0 8px; }
.nut-meal-add{ font-size:.8rem; padding:7px 0; }

.nut-results{ display:flex; flex-direction:column; max-height:420px; overflow-y:auto; margin-top:12px; }
.nut-result{ display:flex; align-items:center; gap:12px; text-align:left; border:none; background:transparent; border-bottom:1px solid var(--card-border); padding:11px 8px; border-radius:8px; transition:background-color .15s ease; }
.nut-result:hover{ background:var(--primary-soft); }
.nut-result-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nut-result-name{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); }
.nut-result-meta{ font-size:.74rem; color:var(--text-faint); }
.nut-result-kcal{ font-family:var(--font-head); font-weight:800; color:var(--primary-dark); white-space:nowrap; }

.nut-qty-row{ display:flex; align-items:center; gap:10px; justify-content:center; }
.nut-preview{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:16px 20px; margin-top:16px; }
.nut-custom-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:12px; margin-top:12px; }

.nut-file-btn{ cursor:pointer; display:inline-flex; align-items:center; }
.nut-cam-wrap{ margin:12px 0; }
.nut-cam-video{ width:100%; max-width:420px; border-radius:var(--radius-md); display:block; margin-bottom:12px; background:#000; }

.nut-week-bars{ display:flex; align-items:flex-end; gap:8px; height:110px; margin-bottom:14px; }
.nut-week-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
.nut-week-bar{ width:100%; min-height:3px; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius:6px 6px 0 0; }
.nut-week-day{ font-size:.68rem; font-weight:700; color:var(--text-faint); }
.nut-avg-row{ display:flex; flex-wrap:wrap; gap:14px; }
.nut-avg{ display:flex; flex-direction:column; min-width:70px; }
.nut-avg-num{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--text); }
.nut-avg-label{ font-size:.72rem; font-weight:700; color:var(--text-faint); }
@media (max-width:640px){ .nut-macros{ margin-left:0; } .nut-total-num{ font-size:2rem; } }

/* ---- Nutrition Log ---- */
.nut-disclaimer{ background:var(--primary-soft); border-left-color:var(--primary); }

.nut-totals{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:18px 22px; margin:18px 0; }
.nut-total-main{ display:flex; flex-direction:column; }
.nut-total-num{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; line-height:1; color:var(--primary-dark); }
.nut-total-label{ font-size:.8rem; color:var(--text-faint); font-weight:700; margin-top:4px; }
.nut-macro-row{ display:flex; gap:10px; flex-wrap:wrap; }
.nut-macro{ display:flex; flex-direction:column; align-items:center; min-width:74px; padding:10px 14px; border-radius:var(--radius-sm); }
.nut-macro-p{ background:color-mix(in srgb, var(--mint) 22%, transparent); }
.nut-macro-c{ background:color-mix(in srgb, var(--peach) 22%, transparent); }
.nut-macro-f{ background:color-mix(in srgb, var(--primary) 20%, transparent); }
.nut-macro-num{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--text); }
.nut-macro-label{ font-size:.72rem; color:var(--text-soft); font-weight:700; }

.nut-water{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:16px 20px; margin-bottom:18px; }
.nut-water-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.nut-water-title{ font-family:var(--font-head); font-weight:800; color:var(--text); }
.nut-water-count{ font-size:.8rem; font-weight:700; color:var(--text-faint); }
.nut-water-glasses{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.nut-glass{ width:34px; height:34px; border-radius:9px; border:2px solid var(--primary-soft); background:var(--card-bg); font-size:1rem; filter:grayscale(1); opacity:.5; transition:opacity .15s ease, filter .15s ease, border-color .15s ease; }
.nut-glass.filled{ filter:none; opacity:1; border-color:var(--primary); background:var(--primary-soft); }
.nut-water-btns{ display:flex; gap:8px; }
.nut-water-btns .ghost-btn{ padding:8px 16px; font-size:.82rem; border:1px solid var(--card-border); }

.nut-meals{ display:flex; flex-direction:column; gap:14px; }
.nut-meal{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:14px 18px; }
.nut-meal-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.nut-meal-title{ font-family:var(--font-head); font-weight:800; font-size:.98rem; color:var(--text); }
.nut-meal-kcal{ font-size:.82rem; font-weight:700; color:var(--text-faint); }
.nut-item-list{ display:flex; flex-direction:column; margin-top:8px; }
.nut-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--card-border); }
.nut-item:last-child{ border-bottom:none; }
.nut-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nut-item-name{ font-weight:700; font-size:.9rem; color:var(--text); }
.nut-item-meta{ font-size:.74rem; color:var(--text-soft); }
.nut-empty{ font-size:.84rem; color:var(--text-faint); margin:8px 0; }
.nut-add-btn{ margin-top:10px; font-size:.82rem; padding:8px 16px; border:1px dashed var(--card-border); }
.nut-add-btn:hover{ border-color:var(--primary); border-style:solid; }
.nut-footnote{ font-size:.76rem; color:var(--text-faint); text-align:center; margin-top:18px; line-height:1.5; }

.nut-cat-row{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.nut-results{ display:flex; flex-direction:column; margin-top:8px; max-height:420px; overflow-y:auto; }
.nut-result{ display:flex; align-items:center; gap:12px; text-align:left; border:none; background:transparent; border-bottom:1px solid var(--card-border); padding:11px 6px; transition:background-color .15s ease; }
.nut-result:hover{ background:var(--primary-soft); }
.nut-result-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nut-result-name{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); }
.nut-result-meta{ font-size:.74rem; color:var(--text-soft); }
.nut-result-kcal{ flex:none; font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--primary-dark); }
.nut-result-kcal small{ font-size:.62rem; font-weight:700; color:var(--text-faint); margin-left:2px; }

.nut-serving-base{ font-size:.86rem; color:var(--text-soft); margin:0; }
.nut-serving-row{ display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; }
.nut-step{ width:40px; padding:10px 0; font-size:1.1rem; font-weight:800; border:2px solid var(--primary-soft); }
.nut-serving-unit{ font-size:.86rem; color:var(--text-soft); font-weight:700; }
.nut-preview{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.nut-preview-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 6px; }
.nut-preview-num{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--text); }
.nut-preview-label{ font-size:.7rem; color:var(--text-soft); font-weight:700; }


.nut-week-bars{ display:flex; align-items:flex-end; gap:8px; height:110px; margin-bottom:14px; }
.nut-week-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
.nut-week-bar{ width:100%; min-height:3px; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius:6px 6px 0 0; }
.nut-week-day{ font-size:.68rem; font-weight:700; color:var(--text-faint); }
.nut-avg-row{ display:flex; flex-wrap:wrap; gap:14px; }
.nut-avg{ display:flex; flex-direction:column; min-width:70px; }
.nut-avg-num{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--text); }
.nut-avg-label{ font-size:.72rem; font-weight:700; color:var(--text-faint); }
@media (max-width:640px){ .nut-macros{ margin-left:0; } .nut-total-num{ font-size:2rem; } }

/* ---- Nutrition Log ---- */
.nut-disclaimer{ background:var(--primary-soft); border-left-color:var(--primary); }

.nut-totals{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:18px 22px; margin:18px 0; }
.nut-total-main{ display:flex; flex-direction:column; }
.nut-total-num{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; line-height:1; color:var(--primary-dark); }
.nut-total-label{ font-size:.8rem; color:var(--text-faint); font-weight:700; margin-top:4px; }
.nut-macro-row{ display:flex; gap:10px; flex-wrap:wrap; }
.nut-macro{ display:flex; flex-direction:column; align-items:center; min-width:74px; padding:10px 14px; border-radius:var(--radius-sm); }
.nut-macro-p{ background:color-mix(in srgb, var(--mint) 22%, transparent); }
.nut-macro-c{ background:color-mix(in srgb, var(--peach) 22%, transparent); }
.nut-macro-f{ background:color-mix(in srgb, var(--primary) 20%, transparent); }
.nut-macro-num{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--text); }
.nut-macro-label{ font-size:.72rem; color:var(--text-soft); font-weight:700; }

.nut-water{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:16px 20px; margin-bottom:18px; }
.nut-water-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.nut-water-title{ font-family:var(--font-head); font-weight:800; color:var(--text); }
.nut-water-count{ font-size:.8rem; font-weight:700; color:var(--text-faint); }
.nut-water-glasses{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.nut-glass{ width:34px; height:34px; border-radius:9px; border:2px solid var(--primary-soft); background:var(--card-bg); font-size:1rem; filter:grayscale(1); opacity:.5; transition:opacity .15s ease, filter .15s ease, border-color .15s ease; }
.nut-glass.filled{ filter:none; opacity:1; border-color:var(--primary); background:var(--primary-soft); }
.nut-water-btns{ display:flex; gap:8px; }
.nut-water-btns .ghost-btn{ padding:8px 16px; font-size:.82rem; border:1px solid var(--card-border); }

.nut-meals{ display:flex; flex-direction:column; gap:14px; }
.nut-meal{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-md); padding:14px 18px; }
.nut-meal-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.nut-meal-title{ font-family:var(--font-head); font-weight:800; font-size:.98rem; color:var(--text); }
.nut-meal-kcal{ font-size:.82rem; font-weight:700; color:var(--text-faint); }
.nut-item-list{ display:flex; flex-direction:column; margin-top:8px; }
.nut-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--card-border); }
.nut-item:last-child{ border-bottom:none; }
.nut-item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nut-item-name{ font-weight:700; font-size:.9rem; color:var(--text); }
.nut-item-meta{ font-size:.74rem; color:var(--text-soft); }
.nut-empty{ font-size:.84rem; color:var(--text-faint); margin:8px 0; }
.nut-add-btn{ margin-top:10px; font-size:.82rem; padding:8px 16px; border:1px dashed var(--card-border); }
.nut-add-btn:hover{ border-color:var(--primary); border-style:solid; }
.nut-footnote{ font-size:.76rem; color:var(--text-faint); text-align:center; margin-top:18px; line-height:1.5; }

.nut-cat-row{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.nut-results{ display:flex; flex-direction:column; margin-top:8px; max-height:420px; overflow-y:auto; }
.nut-result{ display:flex; align-items:center; gap:12px; text-align:left; border:none; background:transparent; border-bottom:1px solid var(--card-border); padding:11px 6px; transition:background-color .15s ease; }
.nut-result:hover{ background:var(--primary-soft); }
.nut-result-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.nut-result-name{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--text); }
.nut-result-meta{ font-size:.74rem; color:var(--text-soft); }
.nut-result-kcal{ flex:none; font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--primary-dark); }
.nut-result-kcal small{ font-size:.62rem; font-weight:700; color:var(--text-faint); margin-left:2px; }

.nut-serving-base{ font-size:.86rem; color:var(--text-soft); margin:0; }
.nut-serving-row{ display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; }
.nut-step{ width:40px; padding:10px 0; font-size:1.1rem; font-weight:800; border:2px solid var(--primary-soft); }
.nut-serving-unit{ font-size:.86rem; color:var(--text-soft); font-weight:700; }
.nut-preview{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.nut-preview-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 6px; }
.nut-preview-num{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--text); }
.nut-preview-label{ font-size:.7rem; color:var(--text-soft); font-weight:700; }

@media (max-width:640px){ .nut-preview{ grid-template-columns:repeat(2,1fr); } .nut-total-num{ font-size:2rem; } }

.nut-progress-card{ margin-bottom:18px; }
.nut-prog-today{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; margin-bottom:18px; }
.nut-prog-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 6px; }
.nut-prog-num{ font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--text); }
.nut-prog-label{ font-size:.7rem; color:var(--text-soft); font-weight:700; }
.nut-prog-bars{ display:flex; gap:8px; align-items:flex-end; height:130px; }
.nut-prog-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.nut-prog-bar-track{ flex:1; width:100%; display:flex; align-items:flex-end; background:var(--primary-soft); border-radius:8px; overflow:hidden; }
.nut-prog-bar{ width:100%; background:linear-gradient(180deg, var(--primary), var(--primary-dark)); border-radius:8px 8px 0 0; min-height:2px; transition:height .3s ease; }
.nut-prog-bar-day{ font-size:.66rem; font-weight:700; color:var(--text-faint); white-space:nowrap; }
.nut-prog-avg{ text-align:center; font-size:.84rem; color:var(--text-soft); margin:14px 0 0; }

/* ---- Calorie targets ---- */
.nut-targets-link{ display:flex; justify-content:center; margin:-4px 0 16px; }
.nut-targets-link .ghost-btn{ border:1px solid var(--card-border); font-size:.84rem; padding:9px 18px; }
.nut-targets-link .ghost-btn:hover{ border-color:var(--primary); }

.nut-goal-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden; margin:10px auto 4px; max-width:200px; }
.nut-goal-fill{ height:100%; background:#fff; border-radius:999px; transition:width .3s ease; }
.nut-goal-left{ display:block; font-size:.74rem; font-weight:700; opacity:.85; }

.nut-unit-row{ display:flex; gap:8px; justify-content:center; margin:14px 0 18px; flex-wrap:wrap; }
.nut-field-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:14px; margin-top:6px; }
.nut-field{ display:flex; flex-direction:column; }
.nut-field .mm-label{ text-align:left; }
.nut-field .mm-duration-input{ width:100%; }
.nut-split-row{ display:flex; align-items:center; gap:8px; }
.nut-split-row .mm-duration-input{ width:70px; }
.nut-unit{ font-weight:700; font-size:.82rem; color:var(--text-faint); }

.nut-activity-col{ display:flex; flex-direction:column; gap:8px; }
.nut-activity-btn{ display:flex; flex-direction:column; gap:2px; text-align:left; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-sm); padding:11px 15px; transition:border-color .2s ease, background-color .2s ease; }
.nut-activity-btn:hover{ border-color:var(--primary); }
.nut-activity-btn.active{ border-color:var(--primary); background:var(--primary-soft); }
.nut-activity-name{ font-family:var(--font-head); font-weight:800; font-size:.88rem; color:var(--text); }
.nut-activity-sub{ font-size:.76rem; color:var(--text-soft); }

.nut-results{ margin-top:24px; }
.nut-bmr-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-bottom:18px; }
.nut-bmr{ background:var(--primary-soft); border-radius:var(--radius-md); padding:16px 18px; text-align:center; }
.nut-bmr-num{ display:block; font-family:var(--font-head); font-weight:800; font-size:1.8rem; color:var(--primary-dark); }
.nut-bmr-label{ display:block; font-weight:800; font-size:.8rem; color:var(--text); margin-top:2px; }
.nut-bmr-sub{ display:block; font-size:.72rem; color:var(--text-soft); margin-top:4px; line-height:1.4; }

.nut-goal-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px; }
.nut-goal-card{ border:2px solid var(--card-border); background:var(--card-bg); border-radius:var(--radius-md); padding:16px 18px; display:flex; flex-direction:column; }
.nut-goal-cut{ border-color:#7ec8e3; }
.nut-goal-maintain{ border-color:var(--mint); }
.nut-goal-build{ border-color:var(--primary); }
.nut-goal-bulk{ border-color:var(--peach); }
.nut-goal-head{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.nut-goal-icon{ font-size:1.3rem; line-height:1; }
.nut-goal-name{ margin:0; font-family:var(--font-head); font-weight:800; font-size:.98rem; color:var(--text); }
.nut-goal-sub{ margin:1px 0 0; font-size:.75rem; color:var(--text-soft); line-height:1.4; }
.nut-goal-kcal{ margin:0 0 10px; font-family:var(--font-head); font-weight:800; font-size:1.9rem; color:var(--primary-dark); }
.nut-goal-kcal span{ font-size:.76rem; font-weight:700; color:var(--text-faint); margin-left:4px; }
.nut-goal-macros{ display:flex; gap:12px; flex-wrap:wrap; font-size:.78rem; color:var(--text-soft); margin-bottom:10px; }
.nut-goal-macros strong{ color:var(--text); }
.nut-goal-note{ font-size:.76rem; color:var(--text-soft); line-height:1.55; margin:0 0 12px; flex:1; }
.nut-goal-use{ border:1px solid var(--card-border); font-size:.8rem; padding:9px 14px; align-self:flex-start; }
.nut-goal-use:hover{ border-color:var(--primary); }

.nut-hint{ font-size:.78rem; color:var(--text-faint); line-height:1.6; margin-top:16px; }
.nut-hint-warn{ color:var(--rose); font-weight:700; }

/* ---- Nutrition School ---- */
.ns-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:8px; }
.ns-rank{ display:flex; align-items:center; gap:11px; }
.ns-rank-icon{ font-size:1.9rem; }
.ns-rank-name{ margin:0; font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.ns-rank-xp{ margin:1px 0 0; font-size:.76rem; color:var(--text-soft); }
.ns-top-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ns-hearts{ display:inline-flex; gap:1px; font-size:.9rem; }
.ns-heart.empty{ opacity:.5; }
.ns-streak{ font-weight:800; font-size:.86rem; color:var(--peach); }
.ns-badge-btn{ border:1px solid var(--card-border); font-size:.8rem; padding:8px 14px; }
.ns-xp-track{ height:7px; border-radius:999px; background:var(--primary-soft); overflow:hidden; margin:12px 0 6px; }
.ns-xp-fill{ height:100%; background:linear-gradient(90deg, var(--mint), var(--primary)); border-radius:999px; transition:width .3s ease; }
.ns-progress-line{ font-size:.78rem; font-weight:700; color:var(--text-faint); margin:0 0 16px; }

.ns-path{ display:flex; flex-direction:column; gap:12px; }
.ns-level{ border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:14px 16px; }
.ns-level.done{ border-color:var(--mint); }
.ns-level.locked{ opacity:.55; }
.ns-level-head{ display:flex; align-items:flex-start; gap:12px; }
.ns-level-icon{ font-size:1.6rem; line-height:1; flex:none; }
.ns-level-meta{ flex:1; min-width:0; }
.ns-level-title{ margin:0; font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--text); }
.ns-level-blurb{ margin:2px 0 0; font-size:.78rem; color:var(--text-soft); line-height:1.45; }
.ns-level-tick{ color:var(--mint); font-weight:800; font-size:1.1rem; }
.ns-lesson-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ns-lesson-btn, .ns-boss-btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--card-border); background:var(--card-bg); border-radius:999px; padding:8px 14px; font-family:var(--font-body); font-weight:700; font-size:.8rem; color:var(--text-soft); transition:border-color .2s ease, background-color .2s ease, color .2s ease; }
.ns-lesson-btn:hover, .ns-boss-btn:hover{ border-color:var(--primary); color:var(--text); }
.ns-lesson-btn.done{ background:var(--mint-soft); border-color:var(--mint); color:var(--text); }
.ns-lesson-dot{ font-size:.7rem; }
.ns-boss-btn{ border-color:var(--peach); color:var(--peach); }
.ns-boss-btn.done{ background:var(--peach-soft); }
.ns-boss-btn.dim{ opacity:.6; }

.ns-lesson-top, .ns-boss-top{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.ns-lesson-track, .ns-timer-track{ flex:1; height:10px; border-radius:999px; background:var(--primary-soft); overflow:hidden; }
.ns-lesson-fill{ height:100%; background:linear-gradient(90deg, var(--mint), var(--primary)); border-radius:999px; transition:width .3s ease; }
.ns-timer-fill{ height:100%; background:linear-gradient(90deg, var(--peach), var(--rose)); border-radius:999px; }
.ns-timer-num{ font-weight:800; font-size:.84rem; color:var(--peach); min-width:34px; text-align:right; }

.ns-teach{ text-align:center; padding:14px 0 6px; }
.ns-teach-art{ font-size:3.2rem; margin-bottom:14px; }
.ns-teach-body{ font-size:1.08rem; line-height:1.75; color:var(--text); max-width:48ch; margin:0 auto; }
.ns-question{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--text); text-align:center; margin:6px auto 18px; max-width:44ch; line-height:1.5; }
.ns-boss-count{ text-align:center; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin:0 0 6px; }

.ns-pick-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:10px; }
.ns-pick{ display:flex; flex-direction:column; align-items:center; gap:6px; border:2px solid var(--primary-soft); background:var(--card-bg); border-radius:var(--radius-md); padding:14px 8px; transition:border-color .15s ease, background-color .15s ease, transform .15s ease; }
.ns-pick:hover:not(:disabled){ border-color:var(--primary); transform:translateY(-2px); }
.ns-pick.on{ border-color:var(--primary); background:var(--primary-soft); }
.ns-pick.right{ border-color:var(--mint); background:var(--mint-soft); }
.ns-pick.wrong{ border-color:var(--rose); background:var(--peach-soft); }
.ns-pick-emoji{ font-size:1.9rem; }
.ns-pick-label{ font-weight:700; font-size:.8rem; color:var(--text); text-align:center; }

.ns-choice-col{ display:flex; flex-direction:column; gap:9px; max-width:440px; margin:0 auto; }
.ns-choice{ border:2px solid var(--primary-soft); background:var(--card-bg); color:var(--text); font-family:var(--font-body); font-weight:700; font-size:.94rem; padding:14px 18px; border-radius:var(--radius-md); text-align:left; transition:border-color .15s ease, background-color .15s ease, transform .15s ease; }
.ns-choice:hover:not(:disabled){ border-color:var(--primary); transform:translateX(3px); }
.ns-choice.right{ border-color:var(--mint); background:var(--mint-soft); }
.ns-choice.wrong{ border-color:var(--rose); background:var(--peach-soft); }

.ns-whatami{ text-align:center; margin-bottom:10px; }
.ns-whatami-emoji{ display:block; font-size:3.6rem; }
.ns-whatami-label{ display:block; font-family:var(--font-head); font-weight:800; font-size:1.1rem; color:var(--text); margin-top:2px; }

.ns-feedback{ margin:18px auto 0; max-width:46ch; border-radius:var(--radius-md); padding:14px 18px; }
.ns-feedback.ok{ background:var(--mint-soft); border-left:4px solid var(--mint); }
.ns-feedback.no{ background:var(--peach-soft); border-left:4px solid var(--peach); }
.ns-feedback-head{ margin:0 0 4px; font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--text); }
.ns-feedback-body{ margin:0; font-size:.86rem; color:var(--text-soft); line-height:1.6; }
.ns-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }

.ns-plate{ display:flex; flex-direction:column; gap:12px; }
.ns-slot{ border:2px dashed var(--primary-soft); border-radius:var(--radius-md); padding:12px 14px; transition:border-color .2s ease, background-color .2s ease; }
.ns-slot.filled{ border-style:solid; border-color:var(--mint); background:var(--mint-soft); }
.ns-slot-label{ margin:0 0 8px; font-family:var(--font-head); font-weight:800; font-size:.84rem; color:var(--text); }
.ns-slot-label em{ font-weight:600; color:var(--text-faint); font-size:.76rem; }
.ns-slot-opts{ display:flex; flex-wrap:wrap; gap:7px; }
.ns-slot-opt{ border:1px solid var(--card-border); background:var(--card-bg); border-radius:999px; padding:7px 13px; font-family:var(--font-body); font-weight:700; font-size:.79rem; color:var(--text-soft); transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.ns-slot-opt:hover{ border-color:var(--primary); }
.ns-slot-opt.on{ background:var(--primary); border-color:var(--primary); color:#fff; }

.ns-done{ text-align:center; padding:18px 0; }
.ns-done-icon{ font-size:3.2rem; }
.ns-done-title{ font-family:var(--font-head); font-weight:800; font-size:1.35rem; color:var(--text); margin:10px 0 4px; }
.ns-done-xp{ font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--mint); margin:6px 0; }
.ns-done-sub{ font-size:.9rem; color:var(--text-soft); line-height:1.6; max-width:40ch; margin:0 auto; }
.ns-boss-intro{ text-align:center; padding:18px 0; }
.ns-boss-icon{ font-size:3rem; }
.ns-boss-kicker{ font-family:var(--font-head); font-weight:800; font-size:.74rem; text-transform:uppercase; letter-spacing:.6px; color:var(--peach); margin:8px 0 0; }
.ns-boss-score{ font-size:1.5rem; letter-spacing:3px; margin:8px 0; }
.ns-need-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.ns-need{ border:1px solid var(--card-border); border-radius:999px; padding:6px 13px; font-weight:800; font-size:.76rem; color:var(--text-faint); text-transform:capitalize; }
.ns-need.met{ background:var(--mint-soft); border-color:var(--mint); color:var(--text); }

.ns-badge-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:12px; }
.ns-badge{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; border:2px solid var(--card-border); background:var(--card-bg); border-radius:var(--radius-md); padding:14px 10px; opacity:.55; }
.ns-badge.got{ opacity:1; border-color:var(--mint); background:var(--mint-soft); }
.ns-badge-icon{ font-size:1.8rem; }
.ns-badge-name{ font-family:var(--font-head); font-weight:800; font-size:.82rem; color:var(--text); }
.ns-badge-how{ font-size:.72rem; color:var(--text-soft); line-height:1.4; }
@media (max-width:640px){ .ns-teach-art{ font-size:2.6rem; } .ns-teach-body{ font-size:1rem; } .ns-question{ font-size:1.05rem; } }