/* === Shared :root variables duplicated so this file is safe if critical is stripped === */
/* ── Reset & Variables ─────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#EEF0F4;--surface:#FFFFFF;--surface2:#F5F7FA;--border:#E2E6EC;--border2:#C8D0DC;
  /* 2.52.78: --line was referenced by the campaign page CSS but never defined,
     so every var(--line,…) fell back to light-gray #e5e7ef — bright washed-out
     pills/borders on the dark theme. Explicit per-theme values (a chained
     var(--border) reference freezes at :root and won't re-resolve per theme). */
  --line:#E2E6EC;
  --t1:#0F1827;--t2:#2D3A4A;--t3:#5A6A7A;--t4:#64748B;
  --red:#DC2626;--red-b:#FEF2F2;--red-m:rgba(220,38,38,.15);
  --orange:#C2410C;--orange-b:#FFF7ED;
  --yellow:#92400E;--yellow-b:#FFFBEB;
  --green:#15803D;--green-b:#F0FDF4;
  --blue:#1D4ED8;--blue-b:#EFF6FF;
  --purple:#6D28D9;--purple-b:#F5F3FF;
  --teal:#0F766E;--teal-b:#F0FDFA;
  --brand:#2563EB;--brand-d:#1D4ED8;--brand-l:#EFF6FF;
  --r:8px;--r2:12px;--r3:16px;--r4:20px;
  --shadow:0 1px 3px rgba(15,24,39,.1),0 1px 2px rgba(15,24,39,.06);
  --shadow2:0 4px 12px rgba(15,24,39,.12),0 2px 4px rgba(15,24,39,.06);
  --tl-safe-top:env(safe-area-inset-top,0px);
  --tl-safe-bottom:env(safe-area-inset-bottom,0px);
}
[data-theme="dark"]{
  --bg:#0B0D14;--surface:#141824;--surface2:#1C2233;--border:#262E42;--border2:#364057;
  --line:#262E42;
  --t1:#F0F4FF;--t2:#B8C4D8;--t3:#7A8CA8;--t4:#9AACC6;
  --red-b:#1F0A0A;--orange-b:#1F110A;--yellow-b:#1F1800;
  --green-b:#061408;--blue-b:#060F22;--purple-b:#100920;--teal-b:#06150F;
  --brand-l:#060F22;
}
[data-theme="blue"]{
  /* v2.5.21: WHITE bg + stronger blue identity (cards, borders, text all more blue) */
  --bg:#FFFFFF;--surface:#EFF6FF;--surface2:#DBEAFE;--border:#93C5FD;--border2:#3B82F6;--line:#93C5FD;
  --t1:#1E40AF;--t2:#1D4ED8;--t3:#2563EB;--t4:#1D4ED8;
  --red:#DC2626;--red-b:#FEF2F2;--orange:#C2410C;--orange-b:#FFF7ED;--yellow:#92400E;--yellow-b:#FFFBEB;
  --green:#15803D;--green-b:#F0FDF4;--blue:#1D4ED8;--blue-b:#DBEAFE;--purple:#6D28D9;--purple-b:#F5F3FF;--teal:#0F766E;--teal-b:#F0FDFA;
  --brand:#2563EB;--brand-d:#1E3A8A;--brand-l:#DBEAFE;
  --shadow:0 1px 3px rgba(37,99,235,.15);--shadow2:0 4px 14px rgba(37,99,235,.22);
}
[data-theme="green"]{
  /* v2.5.21: WHITE bg + stronger green identity (cards, borders, text all more green) */
  --bg:#FFFFFF;--surface:#F0FDF4;--surface2:#DCFCE7;--border:#86EFAC;--border2:#22C55E;--line:#86EFAC;
  --t1:#166534;--t2:#15803D;--t3:#16A34A;--t4:#15803D;
  --red:#DC2626;--red-b:#FEF2F2;--orange:#C2410C;--orange-b:#FFF7ED;--yellow:#92400E;--yellow-b:#FFFBEB;
  --green:#15803D;--green-b:#DCFCE7;--blue:#1D4ED8;--blue-b:#EFF6FF;--purple:#6D28D9;--purple-b:#F5F3FF;--teal:#0F766E;--teal-b:#F0FDFA;
  --brand:#16A34A;--brand-d:#14532D;--brand-l:#DCFCE7;
  --shadow:0 1px 3px rgba(22,163,74,.15);--shadow2:0 4px 14px rgba(22,163,74,.22);
}

/* ── v2.15.0 "Sky" theme — time-of-day gradient app-wide ─────────────
   Was previously meditation-only (.med3 [data-tod=...]). Now reacts to
   body[data-tod="morning|day|evening|night"] which JS refreshes hourly. */
[data-theme="sky"]{
  --tod-a:#a3d7ff;--tod-b:#7fbfff;--tod-c:#5b7dff;
  --bg:#EEF2FB;--surface:rgba(255,255,255,.78);--surface2:rgba(255,255,255,.62);
  --border:rgba(91,125,255,.18);--border2:rgba(91,125,255,.32);
  --t1:#0d1836;--t2:#1F2A4A;--t3:#3A4665;--t4:#6B7592;
  --brand:#5B7DFF;--brand-d:#1E3A8A;--brand-l:#EFF6FF;
}
[data-theme="sky"][data-tod="morning"]{ --tod-a:#ffd7a1;--tod-b:#ff9ac1;--tod-c:#8d7bff;--t1:#2a1f3d;--brand:#fbb76d;--brand-d:#7247b8; }
[data-theme="sky"][data-tod="day"]    { --tod-a:#a3d7ff;--tod-b:#7fbfff;--tod-c:#5b7dff;--t1:#0d1836;--brand:#5B7DFF;--brand-d:#1E40AF; }
[data-theme="sky"][data-tod="evening"]{ --tod-a:#ffb47a;--tod-b:#7247b8;--tod-c:#1e1b4b;--t1:#f5efe5;--t2:#E8E0D5;--t3:#C8BBAA;--t4:#8E7E68;--bg:#1f1846;--surface:rgba(34,28,80,.72);--surface2:rgba(54,40,110,.62);--border:rgba(255,180,122,.22);--border2:rgba(255,180,122,.4);--brand:#FBB76D;--brand-d:#FF7A4A;--brand-l:rgba(255,180,122,.18); }
[data-theme="sky"][data-tod="night"]  { --tod-a:#1b1146;--tod-b:#2a0f5c;--tod-c:#050011;--t1:#e7e0ff;--t2:#C8BCE8;--t3:#9B92C8;--t4:#6E6492;--bg:#0a0820;--surface:rgba(27,17,70,.78);--surface2:rgba(42,15,92,.6);--border:rgba(155,123,242,.22);--border2:rgba(155,123,242,.4);--brand:#9B7BF2;--brand-d:#7247B8;--brand-l:rgba(155,123,242,.18); }
[data-theme="sky"] body{
  background:
    radial-gradient(ellipse at 30% 10%, var(--tod-a) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, var(--tod-c) 0%, transparent 55%),
    linear-gradient(180deg, var(--tod-b) 0%, var(--tod-c) 100%);
  background-attachment:fixed;
}
@media (prefers-reduced-motion: no-preference){
  [data-theme="sky"] body{
    background-size:200% 200%, 200% 200%, 100% 100%;
    animation:sky-bg-drift 60s ease-in-out infinite alternate;
  }
}
@keyframes sky-bg-drift{
  0%   { background-position: 0% 0%,     100% 100%, 0 0; }
  100% { background-position: 100% 100%, 0% 0%,     0 0; }
}
*{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--t1);transition:background .25s,color .25s;-webkit-font-smoothing:antialiased}


/* === End shared === */

/* ── Chips ─────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.chip-red{background:var(--red-b);color:var(--red);border-color:rgba(220,38,38,.2)}
.chip-orange{background:var(--orange-b);color:var(--orange);border-color:rgba(194,65,12,.2)}
.chip-yellow{background:var(--yellow-b);color:var(--yellow);border-color:rgba(146,64,14,.2)}
.chip-green{background:var(--green-b);color:var(--green);border-color:rgba(21,128,61,.2)}
.chip-blue{background:var(--blue-b);color:var(--blue);border-color:rgba(29,78,216,.2)}
.chip-purple{background:var(--purple-b);color:var(--purple);border-color:rgba(109,40,217,.2)}
.chip-teal{background:var(--teal-b);color:var(--teal)}
.chip-gray{background:var(--surface2);color:var(--t3);border-color:var(--border)}

/* ── Wide Button ───────────────────────────────────────────── */
.wide-btn{margin:3px 12px;width:calc(100% - 24px);padding:11px;background:var(--surface);border:1px solid var(--brand);border-radius:var(--r2);font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;color:var(--brand);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.ai-src-row{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.ai-src-row .wide-btn{margin:0 12px;width:calc(100% - 24px)}
.card .ai-src-row,.card-box .ai-src-row,.nutr-plan-actions.ai-src-row{margin-left:0;margin-right:0}
.card .ai-src-row .wide-btn,.nutr-plan-actions .wide-btn{margin-left:0;margin-right:0;width:100%}
.wide-btn:hover{background:var(--brand-l)}

/* ── Autocomplete ──────────────────────────────────────────── */
.ac-wrap{position:relative;z-index:10}
.ac-wrap:focus-within{z-index:9999}
.ac-dropdown{position:absolute;top:calc(100% + 4px);left:-12px;right:-12px;background:var(--surface,#fff);border:1px solid var(--border2);border-radius:var(--r2);z-index:9999;max-height:340px;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.ac-dropdown.hidden{display:none}
.hidden{display:none!important}
.lang-btn{padding:8px 14px;border:1.5px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;color:var(--t2);transition:all .15s}
.lang-btn.active{border-color:var(--brand)!important;background:var(--brand-l,#EFF6FF)!important;color:var(--brand);font-weight:600}
.drug-tab{background:transparent;color:var(--t3);border:none;font-weight:500}
.drug-tab.active{background:var(--accent);color:#fff}
/* v2026.04.19 PERF: contain:content isolates each autocomplete row from its siblings,
   so adding/removing items doesn't reflow the whole dropdown. ~8-15ms per paint. */
.ac-item{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);transition:background-color .1s;color:var(--t1);contain:content}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.selected{background:var(--brand-l);color:var(--brand)}
.ac-item strong{font-weight:700}
.ac-loading{padding:10px 14px;font-size:12px;color:var(--t3);text-align:center}

/* ── Toggle Switch ─────────────────────────────────────────── */
.sw{width:44px;height:24px;background:var(--border2);border-radius:12px;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:9px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--brand)}.sw.on::after{transform:translateX(20px)}

/* ── Toast ─────────────────────────────────────────────────── */
.toast{position:absolute;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--t1);color:var(--surface);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:999;font-family:'DM Sans',sans-serif}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Reward chip — the toast keeps its pill shape but splits into message +
   points badge. Only applied when toast() is called with {chip}. */
.toast.has-chip{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px}
.toast-chip{background:var(--brand);color:#fff;font-size:12px;font-weight:600;padding:2px 9px;border-radius:12px;flex-shrink:0}
/* A5: toast chips can be buttons (error explainer) */
button.toast-chip{border:0;cursor:pointer;font-family:inherit;line-height:1.4}
button.toast-chip:active{transform:scale(.96)}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.58);display:none;align-items:flex-end;z-index:200}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:24px 24px 0 0;padding:0 0 24px;width:100%;max-height:88%}
/* #141: cover the real viewport (APK landscape left a black void beside
   an absolute overlay sized to a portrait .app). Sheet becomes a centered
   card so it isn't clipped at 412px tall. */
.modal-overlay.open{position:fixed;inset:0;z-index:10050}
.offline-sync-pill{margin-left:auto;border:0;border-radius:999px;padding:4px 9px;background:rgba(255,255,255,.18);color:inherit;font:inherit;font-size:10px;font-weight:700}.offline-sync-center{position:fixed;inset:0;z-index:10080;display:none;align-items:flex-end;justify-content:center;padding-top:24px;background:rgba(7,12,22,.68)}.offline-sync-card{width:100%;max-width:560px;max-height:82vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--surface);color:var(--t1);box-shadow:0 -18px 50px rgba(7,12,22,.22)}.offline-sync-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.offline-sync-head>div{display:grid;gap:3px}.offline-sync-head b{font-size:15px}.offline-sync-head small,.offline-sync-row small{display:block;color:var(--t3);font-size:10px;line-height:1.4}.offline-sync-head>button{width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--t2);font-size:20px}.offline-sync-list{display:grid;gap:7px;margin-top:14px}.offline-sync-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}.offline-sync-row.is-failed{grid-template-columns:minmax(0,1fr) auto 34px 34px;border-color:rgba(239,68,68,.35)}.offline-sync-row b{font-size:12px;text-transform:capitalize}.offline-sync-row>span{color:var(--t3);font-size:10px}.offline-sync-row>button{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--t2)}.offline-sync-empty{padding:28px;text-align:center;color:var(--t3);font-size:12px}.offline-sync-actions{display:flex;justify-content:flex-end;margin-top:12px}
.setting-row-button{width:100%;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}.sync-count-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:9px;font-weight:800}.sync-health-grid{display:grid;gap:8px;margin-top:14px}.sync-health-metric{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface2)}.sync-health-metric>span:first-child{font-size:20px}.sync-health-metric b{display:block;font-size:12px;text-transform:capitalize}.sync-health-metric small{display:block;margin-top:2px;color:var(--t3);font-size:9px;line-height:1.4}.sync-health-state{padding:4px 7px;border-radius:999px;background:rgba(16,185,129,.12);color:#047857;font-size:9px;font-weight:800}.sync-health-state.is-error{background:rgba(239,68,68,.12);color:#b91c1c}.notification-inbox-row{width:100%;border:0;text-align:left;background:transparent;color:inherit}.notification-inbox-row.is-unread{box-shadow:inset 3px 0 0 var(--brand);background:rgba(37,99,235,.05)}
.mp-exec-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.mp-exec-actions button{border:1px solid var(--border);border-radius:9px;padding:6px 8px;background:var(--surface2);color:var(--t2);font:inherit;font-size:9px;font-weight:700}.mp-meal.is-done{opacity:.68}.mp-meal.is-done>div:first-child{text-decoration:line-through}.meal-grocery-list{display:grid;gap:6px;margin-top:14px}.meal-grocery-row{display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface2);color:var(--t2);font-size:11px}.meal-grocery-row input{width:18px;height:18px;accent-color:var(--brand)}.meal-grocery-row:has(input:checked) span{text-decoration:line-through;opacity:.6}
.ai-task-check{width:28px;height:28px;flex:none;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--t3)}.ai-task-check.on{border-color:#10b981;background:#10b981;color:#fff}.ai-track-btn{margin-top:12px}
@media (orientation:landscape){
  .modal-overlay.open{align-items:center;justify-content:center;padding:12px}
  .modal-overlay.open .modal,
  .modal-overlay.open .mfm-sheet{
    max-height:90dvh;max-width:min(520px,94vw);width:100%;
    border-radius:20px;overflow-y:auto;margin:0 auto;
  }
}
.modal-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:12px auto 16px}
.modal-title{font-size:16px;font-weight:700;color:var(--t1);padding:0 16px 12px}
.modal-body{padding:0 16px;font-size:13px;color:var(--t2);line-height:1.7}
.modal-btns{display:flex;gap:8px;padding:16px 16px 0}

/* ── Slide Panel ───────────────────────────────────────────── */
.slide-panel{position:absolute;inset:0;background:var(--surface);z-index:100;overflow-y:auto;padding-bottom:24px;display:none}
.slide-panel.open{display:block}
.panel-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}
.sticky-hdr{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border)}
.panel-back{width:32px;height:32px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--t1);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0}
.panel-title{font-size:14px;font-weight:600;color:var(--t1);flex:1}
.panel-action{font-size:12px;color:var(--brand);font-weight:600;cursor:pointer;white-space:nowrap;background:none;border:none;font-family:'DM Sans',sans-serif;padding:4px 8px}

/* ── Flags/Alerts on Home ──────────────────────────────────── */
.flag{margin:4px 12px;border-radius:var(--r2);padding:9px 11px;display:flex;gap:9px;cursor:pointer;border:1px solid transparent;transition:opacity .15s}
.flag:hover{opacity:.9}
.flag-red{background:var(--red-b);border-color:rgba(220,38,38,.2)}
.flag-purple{background:var(--purple-b);border-color:rgba(109,40,217,.2)}
.flag-orange{background:var(--orange-b);border-color:rgba(194,65,12,.15)}
.flag-blue{background:var(--blue-b);border-color:rgba(29,78,216,.15)}
.flag-yellow{background:var(--yellow-b);border-color:rgba(146,64,14,.15)}
.flag-ico{font-size:18px;flex-shrink:0;margin-top:1px}
.flag-body{flex:1;min-width:0}
.flag-title{font-size:12px;font-weight:700;margin-bottom:2px}
.flag-msg{font-size:11px;color:var(--t2);line-height:1.5}
.flag-btns{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.fbtn{font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.fbtn-red{background:var(--red);color:#fff}
.fbtn-ghost-red{background:transparent;color:var(--red);border:1px solid rgba(220,38,38,.4)}
.fbtn-purple{background:var(--purple);color:#fff}

.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 6px}
.qa-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:10px;text-align:left;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif}
.qa-btn:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.qa-ico{font-size:20px;margin-bottom:4px}
.qa-title{font-size:12px;font-weight:600;color:var(--t1)}
.qa-sub{font-size:10px;color:var(--t3);margin-top:1px}

/* ── SCHEDULE ──────────────────────────────────────────────── */
.adherence-card{margin:4px 12px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:12px}
.adh-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.adh-label{font-size:12px;font-weight:600;color:var(--t1)}
.adh-pct{font-size:14px;font-weight:700;color:var(--green);font-family:'DM Mono',monospace}
.adh-track{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.adh-fill{height:100%;background:linear-gradient(90deg,var(--green),#4ADE80);border-radius:3px;transition:width .6s ease}
.adh-score{font-size:11px;color:var(--t3);margin-top:5px}

.week-row{display:flex;gap:3px;padding:0 12px;margin:2px 0 0}
.day-dot-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.day-lbl{font-size:9px;color:var(--t4)}
.day-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;border:1.5px solid var(--border);cursor:default}
.day-dot.full{background:var(--green-b);border-color:var(--green);color:var(--green)}
.day-dot.partial{background:var(--yellow-b);border-color:var(--yellow);color:var(--yellow)}
.day-dot.missed{background:var(--red-b);border-color:var(--red);color:var(--red)}
.day-dot.today-dot{border-color:var(--brand);border-width:2px;font-weight:700}
.day-dot.future{background:var(--surface2);color:var(--t4)}

.time-block{margin:2px 12px 0;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.time-block-empty{padding:10px 12px;font-size:12px;color:var(--t4);text-align:center;font-style:italic}
.dose-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--border)}
.dose-row:last-child{border-bottom:none}
.dose-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.dose-info{flex:1;min-width:0}
.dose-name{font-size:12px;font-weight:600;color:var(--t1)}
.dose-amount{font-size:10px;color:var(--t3);font-family:'DM Mono',monospace}
.dose-btns{display:flex;gap:4px}
.dose-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.dose-btn:hover{transform:scale(1.08)}
.dose-btn.taken{background:var(--green-b);border-color:var(--green);color:var(--green)}
.dose-btn.missed{background:var(--red-b);border-color:var(--red);color:var(--red)}

/* ── DRUG LIST ─────────────────────────────────────────────── */
/* v2026.04.19 PERF: content-visibility:auto skips rendering offscreen drug rows until
   they scroll into view — on pages with 100+ drugs this can drop LCP by 50-150ms. */
.drug-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface);cursor:pointer;transition:background-color .15s;contain:content;content-visibility:auto;contain-intrinsic-size:58px}
.drug-row:hover{background:var(--surface2)}
.drug-row.has-c{background:var(--red-b)}
.drug-row.has-w{background:var(--orange-b)}
.drug-row.has-a{background:var(--purple-b)}
.dr-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dr-info{flex:1;min-width:0}
.dr-name{font-size:13px;font-weight:600;color:var(--t1)}
.dr-type{font-size:10px;color:var(--t3);margin-top:1px}
.dr-doc{font-size:10px;color:var(--t3)}
.dr-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.refill-warn{font-size:9px;color:var(--orange);font-weight:700}

/* ── DRUG DETAIL ───────────────────────────────────────────── */
.detail-hero{padding:16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;text-align:center}
.dh-ico{font-size:34px;margin-bottom:8px;width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:var(--r3);background:var(--surface2);border:1px solid var(--border)}
.dh-name{font-size:17px;font-weight:700;color:var(--t1)}
.dh-type{font-size:12px;color:var(--t3);margin:3px 0}
.dh-atc{font-size:10px;color:var(--t4);font-family:'DM Mono',monospace}
.dh-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}

.detail-sec{padding:11px 14px;border-bottom:1px solid var(--border)}
.det-title{font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.info-box{background:var(--surface2);border-radius:var(--r);padding:9px;font-size:12px;color:var(--t2);line-height:1.6}
.warn-banner{border-radius:var(--r);padding:9px;font-size:12px;line-height:1.5;margin-bottom:5px;display:flex;gap:8px;align-items:flex-start}
.wb-alc{background:var(--orange-b);color:var(--orange);border:1px solid rgba(194,65,12,.2)}
.wb-preg{background:var(--red-b);color:var(--red);border:1px solid rgba(220,38,38,.2)}
.wb-allergy{background:var(--purple-b);color:var(--purple);border:1px solid rgba(109,40,217,.2)}
.wb-int{border-left:3px solid var(--col,var(--red))}
.generic-box{background:var(--green-b);border:1px solid rgba(21,128,61,.2);border-radius:var(--r);padding:9px;font-size:12px;color:var(--green)}
.refill-box{background:var(--yellow-b);border:1px solid rgba(146,64,14,.2);border-radius:var(--r);padding:9px;font-size:12px;color:var(--yellow)}
.food-item{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)}
.food-item:last-child{border-bottom:none}
.food-name{font-size:12px;font-weight:500;color:var(--t1)}
.food-desc{font-size:11px;color:var(--t3);line-height:1.4}
.se-item{padding:6px 0;border-bottom:1px solid var(--border)}
.se-item:last-child{border-bottom:none}
.se-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.se-name{font-size:12px;font-weight:500;color:var(--t1)}
.se-desc{font-size:11px;color:var(--t3);line-height:1.4;margin-bottom:3px}
.freq-row{display:flex;align-items:center;gap:0}
.freq-bar{height:4px;background:var(--surface2);border-radius:2px;flex:1;margin-right:5px;overflow:hidden}
.freq-fill{height:100%;border-radius:2px}
.freq-txt{font-size:9px;color:var(--t4);font-family:'DM Mono',monospace;flex-shrink:0}

/* ── CHECKER ───────────────────────────────────────────────── */
.checker-form{padding:12px 12px 4px}
.form-group{margin-bottom:8px}
.form-label{display:block;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.vs-sep{text-align:center;font-size:22px;color:var(--t4);padding:2px 0;font-weight:300}

.result-box{margin:6px 12px;border:1px solid var(--border);border-radius:var(--r2);padding:13px;background:var(--surface)}
.res-hd{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.res-ico{font-size:22px}
.res-title{font-size:14px;font-weight:700;color:var(--t1)}
.sev-bar{display:flex;gap:3px;margin-bottom:9px}
.sev-seg{flex:1;height:6px;border-radius:3px;background:var(--border)}
.res-main{font-size:12px;font-weight:500;color:var(--t2);line-height:1.6;margin-bottom:5px}
.res-detail{font-size:11px;color:var(--t3);line-height:1.6;margin-bottom:7px}
.res-advice{background:var(--surface2);border-radius:var(--r);padding:9px;font-size:11px;color:var(--t2);line-height:1.6;margin-bottom:7px}
.res-btns{display:flex;gap:6px}
.res-btn{flex:1;padding:8px;border:none;border-radius:var(--r);font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif}
.res-btn-p{background:var(--brand);color:#fff}
.res-btn-s{background:var(--surface2);color:var(--t2);border:1px solid var(--border)}

.allergy-result,.pair-result{margin:3px 12px;padding:9px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:background .15s}
.allergy-result:hover,.pair-result:hover{background:var(--surface2)}
.allergy-result{background:var(--purple-b);border-color:rgba(109,40,217,.2);color:var(--purple);font-size:12px;line-height:1.5}
.pair-result{display:flex;align-items:center;gap:8px}
.pair-names{font-size:12px;font-weight:500;color:var(--t1)}
.pair-badge{font-size:9px;margin-top:2px}

.qc-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;background:var(--surface)}
.qc-item:hover{background:var(--surface2)}
.qc-title{font-size:12px;font-weight:600;color:var(--t1)}
.qc-sub{font-size:10px;color:var(--t3)}

/* ── PHARMACY SCREEN ───────────────────────────────────────── */
.pharmacy-form{padding:12px 12px 4px;position:relative;z-index:10}

.pharm-results-header{padding:8px 12px;font-size:12px;font-weight:600;color:var(--t2);border-bottom:1px solid var(--border)}
.pharm-loading{padding:24px;text-align:center;font-size:13px;color:var(--t3)}
.pharm-loading .spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

.pharm-card{margin:3px 12px;border:1px solid var(--border);border-radius:var(--r2);background:var(--surface);overflow:hidden}
.pharm-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface2)}
.pharm-name{font-size:13px;font-weight:700;color:var(--t1)}
.pharm-chain{font-size:10px;color:var(--t3)}
.pharm-prices{display:flex;align-items:flex-end;gap:8px}
.pharm-price-main{font-size:20px;font-weight:700;color:var(--brand);font-family:'DM Mono',monospace}
.pharm-price-eur{font-size:12px;color:var(--t3);margin-left:-2px;margin-bottom:2px}
.pharm-price-card{font-size:11px;color:var(--green);font-family:'DM Mono',monospace}
.pharm-body{padding:8px 12px}
.pharm-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);margin-bottom:3px}
.pharm-row:last-child{margin-bottom:0}
.pharm-stock-yes{color:var(--green);font-weight:600;font-size:10px}
.pharm-stock-no{color:var(--red);font-weight:600;font-size:10px}
.pharm-discount{background:var(--green-b);border:1px solid rgba(21,128,61,.2);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;color:var(--green)}
.pharm-limit{background:var(--blue-b);border:1px solid rgba(29,78,216,.15);border-radius:20px;padding:2px 8px;font-size:10px;color:var(--blue)}
.pharm-demo-note{margin:6px 12px;padding:8px 12px;background:var(--yellow-b);border:1px solid rgba(146,64,14,.2);border-radius:var(--r);font-size:11px;color:var(--yellow);line-height:1.5}
.pharm-no-results{padding:24px;text-align:center;font-size:13px;color:var(--t3)}

/* ── ALERTS ────────────────────────────────────────────────── */
.alert-item{margin:3px 12px;border-radius:var(--r2);padding:10px 12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:background .15s}
.alert-item:hover{opacity:.9}
.ai-head{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.ai-ico{font-size:15px}
.ai-title{font-size:12px;font-weight:700;flex:1;color:var(--t1)}
.ai-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ai-msg{font-size:11px;color:var(--t3);line-height:1.5}
.ai-foot{display:flex;align-items:center;justify-content:space-between;margin-top:5px}
.ai-time{font-size:9px;color:var(--t4);font-family:'DM Mono',monospace}
.alert-red{background:var(--red-b);border-color:rgba(220,38,38,.2)}
.alert-purple{background:var(--purple-b);border-color:rgba(109,40,217,.2)}
.alert-orange{background:var(--orange-b);border-color:rgba(194,65,12,.15)}
.alert-yellow{background:var(--yellow-b);border-color:rgba(146,64,14,.15)}
.alert-blue{background:var(--blue-b);border-color:rgba(29,78,216,.15)}
.alert-green{background:var(--green-b);border-color:rgba(21,128,61,.15)}

/* ── PROFILE ───────────────────────────────────────────────── */
.profile-hero{padding:16px;text-align:center;border-bottom:1px solid var(--border)}
.ph-avatar{font-size:40px;width:64px;height:64px;background:var(--surface2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;border:2px solid var(--border)}
.ph-name{font-size:17px;font-weight:700;color:var(--t1)}
.ph-id{font-size:11px;color:var(--t3);margin-top:3px;font-family:'DM Mono',monospace}
.ph-premium{display:inline-flex;align-items:center;gap:4px;margin-top:8px;background:var(--brand-l);color:var(--brand);padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700}

.family-switcher{margin:4px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:4px;display:flex;gap:4px}
.fam-btn{flex:1;padding:8px 4px;border:none;border-radius:var(--r);font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;color:var(--t2)}
.fam-btn.active{background:var(--brand);color:#fff}
.fam-av{font-size:18px}
.fam-nm{font-size:10px}

.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:6px 12px}
.info-cell{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:8px;text-align:center}
.ic-label{font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.ic-val{font-size:14px;font-weight:700;color:var(--t1);font-family:'DM Mono',monospace}

.card-box{margin:2px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:10px}
.allergy-chips{display:flex;flex-wrap:wrap;gap:5px}
.lab-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.lab-row:last-child{border-bottom:none}
.lab-l{font-size:12px;color:var(--t3)}
.lab-r{font-size:12px;font-weight:700;font-family:'DM Mono',monospace;color:var(--t1)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);gap:10px}
.setting-row:last-child{border-bottom:none}
.sr-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sr-ico{font-size:18px;flex-shrink:0}
.sr-title{font-size:13px;font-weight:600;color:var(--t1)}
.sr-sub{font-size:11px;color:var(--t3);margin-top:1px}
.sr-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.sr-unit{font-size:11px;color:var(--t3)}
.setting-input{width:64px;padding:6px 8px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--t1);font-size:16px;text-align:center;font-family:inherit}
.setting-input:focus{outline:none;border-color:var(--brand)}
.sr-stepper{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;background:var(--surface2);
  border:1px solid var(--border);border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(15,24,39,.04);
}
.sr-stepper:focus-within{border-color:var(--brand)}
.sr-step-btn{
  width:32px;height:32px;border:0;border-radius:50%;
  background:var(--surface);color:var(--t2);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1.125rem;font-weight:600;line-height:1;
  cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(15,24,39,.08);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:transform .08s,background .15s,color .15s;
}
.sr-step-btn:hover{color:var(--brand)}
.sr-step-btn:active{transform:scale(.88)}
.sr-step-val{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:2.75rem;padding:0 4px;margin:0;
}
.sr-stepper--wide .sr-step-val{min-width:4.25rem}
.setting-input--goal{
  width:4.25rem;min-width:0;padding:0;border:0;background:transparent;
  font-family:'DM Mono','DM Sans',monospace;
  font-size:.9375rem;font-weight:700;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;color:var(--t1);
  -moz-appearance:textfield;
}
.setting-input--goal:focus{border-color:transparent;outline:none}
.setting-input--goal::-webkit-outer-spin-button,
.setting-input--goal::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sr-stepper .sr-unit{
  font-size:.5625rem;font-weight:600;letter-spacing:.04em;
  color:var(--t4);line-height:1;margin-top:1px;
}

/* Meal-times sheet — title, list and actions stay inside one card */
#meal-times-modal.modal-overlay{overflow:hidden}
#meal-times-modal .mfm-sheet{
  min-width:0;width:100%;max-width:100%;padding-bottom:0;box-sizing:border-box;
}
#meal-times-modal .modal-body,
#meal-times-modal .mt-list{min-width:0}
#meal-times-modal .mt-hint{
  margin:0 0 14px;font-size:.8125rem;line-height:1.45;color:var(--t3);
}
/* v2.53.32: fasting-plan context chip — the sheet only lists the sittings the
   plan allows, and this line says which plan that is. */
#meal-times-modal .mt-plan-line{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0 0 12px;padding:7px 10px;border-radius:12px;
  background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(14,165,233,.10));
  border:1px solid var(--border);
  font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--t2);
}
#meal-times-modal .mt-list{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:16px;padding:2px 8px;
}
#meal-times-modal .mt-row{
  display:flex;align-items:center;gap:8px;
  padding:12px 2px;border-bottom:1px solid var(--border);
  min-width:0;
}
#meal-times-modal .mt-row:last-child{border-bottom:0}
#meal-times-modal .mt-ico{font-size:1.25rem;flex-shrink:0;line-height:1}
#meal-times-modal .mt-name{
  flex:1 1 auto;min-width:0;font-size:.9375rem;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#meal-times-modal .mt-actions{
  padding-bottom:max(18px, env(safe-area-inset-bottom));
}
#meal-times-modal .sr-stepper{
  flex:0 0 auto;width:auto;box-sizing:border-box;background:transparent;
  border:0;padding:0;gap:6px;box-shadow:none;
}
#meal-times-modal .sr-step-btn{width:32px;height:32px;flex:0 0 32px}

/* Digital clock chip — HH:MM, not a cramped number field */
.tl-time{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:5.5rem;height:40px;padding:0 10px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:inset 0 1px 2px rgba(15,24,39,.04);
  cursor:pointer;
}
.tl-time:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.tl-time-face{
  pointer-events:none;
  display:inline-flex;align-items:baseline;justify-content:center;
  font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--t1);line-height:1;
}
.tl-time-colon{
  display:inline-block;width:.42em;text-align:center;
  color:var(--brand);font-weight:800;opacity:.9;
  transform:translateY(-1px);
}
.tl-time input[type=time]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;background:transparent;
  font-size:16px; /* iOS zoom guard */
}
.sr-right .tl-time{flex-shrink:0}

#notif-schedule-timeline .tl-time{
  min-width:4.75rem;height:34px;padding:0 8px;
}
#notif-schedule-timeline .tl-time-face{font-size:1.0625rem}
.setting-select{padding:6px 8px;border:1px solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--t1);font-size:16px;font-family:inherit;cursor:pointer}
.setting-select:focus{outline:none;border-color:var(--brand)}
.tl-left{display:flex;align-items:center;gap:9px}
.tl-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:var(--surface2)}
.tl-title{font-size:13px;font-weight:500;color:var(--t1)}
.tl-sub{font-size:11px;color:var(--t3)}
.profile-footer{text-align:center;padding:16px;font-size:10px;color:var(--t4);line-height:1.8}

/* ── VITALS ────────────────────────────────────────────────── */
.chart-wrap{margin:2px 12px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:10px}
.vitals-form{margin:2px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:12px}
.vf-row{display:flex;gap:8px;margin-bottom:8px}
.vf-group{flex:1;display:flex;flex-direction:column;gap:3px}

/* ── ONBOARDING ────────────────────────────────────────────── */
.onboard-overlay{position:absolute;inset:0;background:var(--surface);z-index:500;display:flex;flex-direction:column;padding:24px 20px 20px;overflow-y:auto}
.ob-step{display:none;flex-direction:column;flex:1}
.ob-step.active{display:flex}
.ob-icon{font-size:46px;margin-bottom:14px;text-align:center}
.ob-title{font-size:20px;font-weight:700;color:var(--t1);text-align:center;margin-bottom:6px;line-height:1.3}
.ob-sub{font-size:13px;color:var(--t3);text-align:center;line-height:1.6;margin-bottom:auto}
.ob-features{text-align:left;margin:14px 0;display:flex;flex-direction:column;gap:9px}
.ob-feat{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2)}
.ob-feat span{font-size:20px;width:28px;flex-shrink:0;text-align:center}
.ob-dots{display:flex;gap:6px;justify-content:center;margin:16px 0 12px}
.ob-dot{width:6px;height:6px;border-radius:3px;background:var(--border2);transition:all .25s}
.ob-dot.active{background:var(--brand);width:20px}
.conflict-preview{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.cp-item{padding:10px 12px;border-radius:var(--r);font-size:12px;font-weight:600;line-height:1.4}
.cp-red{background:var(--red-b);color:var(--red);border:1px solid rgba(220,38,38,.2)}
.cp-purple{background:var(--purple-b);color:var(--purple);border:1px solid rgba(109,40,217,.2)}
.etervise-box{background:var(--blue-b);border:1px solid rgba(29,78,216,.15);border-radius:var(--r2);padding:16px;margin:14px 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.etc-title{font-size:14px;font-weight:700;color:var(--blue);text-align:center}
.etc-sub{font-size:12px;color:var(--t3);text-align:center;line-height:1.5}
.connecting{display:flex;gap:4px;align-items:center;margin-top:4px}
.c-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:cdot .9s infinite}
.c-dot:nth-child(2){animation-delay:.15s}.c-dot:nth-child(3){animation-delay:.3s}
@keyframes cdot{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1.2);opacity:1}}

/* ── Barcode ───────────────────────────────────────────────── */
.barcode-preview{width:100%;height:170px;background:#000;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:10px}
.scan-line{position:absolute;width:82%;height:2px;background:rgba(37,99,235,.85);animation:scanA 2s linear infinite;box-shadow:0 0 10px rgba(37,99,235,.6)}
@keyframes scanA{0%{top:18%}50%{top:78%}100%{top:18%}}
.scan-corner{position:absolute;width:18px;height:18px;border:3px solid var(--brand)}
.scan-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none}
.scan-corner.tr{top:12px;right:12px;border-left:none;border-bottom:none}
.scan-corner.bl{bottom:12px;left:12px;border-right:none;border-top:none}
.scan-corner.br{bottom:12px;right:12px;border-left:none;border-top:none}

/* ════════════════════════════════════════════════════
   AUTH & USER MENU
   ════════════════════════════════════════════════════ */
.user-menu{position:relative;display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;border-radius:20px;border:1px solid var(--border);background:var(--surface);transition:all .15s}
.user-menu:hover{border-color:var(--brand-d)}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);min-width:180px;box-shadow:var(--shadow2);z-index:300;display:none}
.user-menu.open .user-dropdown{display:block}

/* ════════════════════════════════════════════════════
   NUTRITION SCREEN
   ════════════════════════════════════════════════════ */
.nutr-hero{display:flex;gap:10px;padding:8px 12px;align-items:center;background:var(--surface);border-bottom:1px solid var(--border)}
.nutr-ring-wrap{position:relative;flex-shrink:0;width:130px;height:130px;display:flex;align-items:center;justify-content:center}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-cal{font-size:22px;font-weight:700;color:var(--t1);font-family:'DM Mono',monospace}
.ring-label{font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.05em}
.ring-remain{font-size:11px;font-weight:600;margin-top:3px}

.nutr-macros-col{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.macro-pill{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:7px 9px}
.mp-label{font-size:10px;font-weight:600;color:var(--t2);margin-bottom:4px}
.mp-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:3px}
.mp-fill{height:100%;border-radius:3px;transition:width .4s ease;max-width:100%}
.mp-val{font-size:9px;color:var(--t4);font-family:'DM Mono',monospace}

/* Meal blocks */
.meal-block{margin:2px 12px 4px;border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.meal-entry{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}
.meal-entry:last-of-type{border-bottom:none}
.me-name{flex:1;font-size:12px;font-weight:500;color:var(--t1)}
.me-weight{font-size:10px;color:var(--t4);font-family:'DM Mono',monospace}
.me-cal{font-size:12px;font-weight:700;color:var(--brand);font-family:'DM Mono',monospace;min-width:48px;text-align:right}
.me-del{background:none;border:none;cursor:pointer;font-size:14px;color:var(--t4);padding:2px 4px;border-radius:4px}
.me-del:hover{color:var(--red);background:var(--red-b)}
.meal-total{display:flex;justify-content:space-between;padding:6px 12px;background:var(--surface2);font-size:11px;color:var(--t3);font-weight:600;border-top:1px solid var(--border)}
.meal-add-btn{width:100%;padding:12px 9px;min-height:40px;border:none;background:none;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:5px;transition:background .15s}
.meal-add-btn:hover{background:var(--brand-l)}

/* Food search */
.food-result-item{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.food-result-item:last-child{border-bottom:none}
.food-result-item:hover{background:var(--surface2)}
.fri-name{font-weight:500;color:var(--t1)}
.fri-cat{font-size:10px;color:var(--t3);margin-top:1px}
.fri-cal{font-size:12px;font-weight:700;color:var(--brand);font-family:'DM Mono',monospace}

/* Weight log */
.weight-log-row{display:flex;align-items:center;gap:8px;padding:6px 12px}
.weight-hist-item{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid var(--border);font-size:12px}
.weight-hist-item:last-child{border-bottom:none}
.wh-date{color:var(--t3);font-family:'DM Mono',monospace;font-size:11px}
.wh-kg{font-weight:700;color:var(--t1)}
.wh-delta{font-size:10px;font-family:'DM Mono',monospace}

/* ════════════════════════════════════════════════════════════
   NEW DESIGN v2.4 — Welcome, Setup, Redesigned components
   ════════════════════════════════════════════════════════════ */

/* ── Google Fonts additions ──────────────────────────────────
   Add Syne to index.php head for headings */

/* ── Welcome Overlay ─────────────────────────────────────────*/
.welcome-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: linear-gradient(160deg, #0A1628 0%, #0D2137 50%, #0A1628 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.welcome-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 100%; max-width: 360px;
}
.welcome-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.wl-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #00B4D8, #0077B6);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 22px;
  box-shadow: 0 4px 16px rgba(0,180,216,.4);
}
.wl-name { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.wl-name span { color: #00B4D8; }
.welcome-title {
  font-size: 26px; font-weight: 800; color: #fff; line-height: 1.2;
  margin-bottom: 10px; letter-spacing: -.02em;
}
.welcome-sub { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 20px; }
.welcome-features { width: 100%; margin-bottom: 24px; }
.wf-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.06); margin-bottom: 6px;
  font-size: 13px; color: rgba(255,255,255,.85); text-align: left;
}
.wf-ico { font-size: 18px; flex-shrink: 0; }
.btn-welcome-primary {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #00B4D8, #0077B6);
  color: #fff; font-size: 15px; font-weight: 700;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,180,216,.35); margin-bottom: 10px;
  transition: opacity .15s;
}
.btn-welcome-primary:hover { opacity: .9; }
.btn-welcome-ghost {
  width: 100%; padding: 11px; border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; background: transparent; color: rgba(255,255,255,.7);
  font-size: 13px; font-family: 'DM Sans', sans-serif; cursor: pointer;
  transition: all .15s;
}
.btn-welcome-ghost:hover { background: rgba(255,255,255,.08); }

/* ── Guest badge ─────────────────────────────────────────────*/
.guest-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.3);
  border-radius: 20px; padding: 3px 10px; font-size: 10px;
  font-weight: 700; color: #D97706; margin: 6px 14px 0;
}

/* ── Setup Overlay ───────────────────────────────────────────*/
.setup-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: linear-gradient(160deg, #0A1628, #0D2137);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.setup-inner { width: 100%; max-width: 320px; }
.setup-step { display: none; flex-direction: column; align-items: center; text-align: center; }
.setup-step.active { display: flex; }
.setup-ico { font-size: 48px; margin-bottom: 12px; }
.setup-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.setup-input {
  width: 100%; padding: 14px 16px; border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 12px; background: rgba(255,255,255,.08); color: #fff;
  font-size: 16px; font-family: 'DM Sans', sans-serif; outline: none;
  margin-bottom: 14px; text-align: center;
  transition: border-color .15s;
}
.setup-input:focus { border-color: #00B4D8; }
.setup-input::placeholder { color: rgba(255,255,255,.3); }
.btn-setup-next {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #00B4D8, #0077B6);
  color: #fff; font-size: 15px; font-weight: 700;
  font-family: 'DM Sans', sans-serif; cursor: pointer; margin-bottom: 10px;
  transition: opacity .15s;
}
.btn-setup-back {
  background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 13px; cursor: pointer; font-family: 'DM Sans', sans-serif;
  padding: 6px;
}
.gender-btns { display: flex; gap: 8px; margin-bottom: 14px; width: 100%; }
.gbtn {
  flex: 1; padding: 12px 6px; border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 10px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
  font-size: 12px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: all .15s;
}
.gbtn.selected { border-color: #00B4D8; background: rgba(0,180,216,.15); color: #00B4D8; }
.bmi-result {
  background: rgba(0,180,216,.1); border: 1px solid rgba(0,180,216,.2);
  border-radius: 14px; padding: 16px; margin-bottom: 20px; width: 100%;
}
.bmi-num { font-size: 36px; font-weight: 800; color: #00B4D8; }
.bmi-label { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }
.bmi-cat { font-size: 14px; font-weight: 700; margin-top: 6px; }

/* ── Onboarding Tour ──────────────────────────────────────── */
.ob-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;transition:opacity .3s;display:none}
.ob-overlay.active{pointer-events:auto;display:block}
.ob-backdrop{position:fixed;inset:0;z-index:9998}
.ob-backdrop{background:rgba(0,0,0,.55)}.ob-spotlight{position:fixed;z-index:9999;border:2px solid rgba(255,255,255,.9);border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.24);pointer-events:none;transition:all .2s ease;display:none}

/* Android WebView safe-rendering mode. API 35/36 renderer crashes were tied
   to nested fixed overlays that read back the whole framebuffer for blur.
   Native builds use opaque/translucent fills and keep compositing bounded. */
html.is-apk *,html.is-apk *::before,html.is-apk *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ob-tooltip{position:fixed;z-index:10000;background:var(--surface);border-radius:16px;padding:18px 20px;max-width:320px;width:calc(100vw - 32px);box-shadow:0 12px 40px rgba(0,0,0,.25);animation:obSlide .3s ease}
@keyframes obSlide{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.ob-tooltip::before{content:'';position:absolute;width:14px;height:14px;background:var(--surface);transform:rotate(45deg);z-index:-1}
.ob-tooltip.arrow-top::before{top:-6px;left:50%;margin-left:-7px}
.ob-tooltip.arrow-bottom::before{bottom:-6px;left:50%;margin-left:-7px}
.ob-tooltip.arrow-none::before{display:none}
.ob-emoji{font-size:28px;margin-bottom:6px}
.ob-title{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:4px}
.ob-desc{font-size:13px;color:var(--t2);line-height:1.5;margin-bottom:14px}
.ob-footer{display:flex;align-items:center;justify-content:space-between}
.ob-dots{display:flex;gap:5px}
.ob-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);transition:all .2s}
.ob-dot.active{background:var(--brand);width:18px;border-radius:4px}
.ob-skip{font-size:12px;color:var(--t3);background:none;border:none;cursor:pointer;padding:6px 10px;font-family:inherit}
.ob-next{padding:9px 20px;border-radius:10px;background:var(--brand);color:#fff;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.ob-next:active{background:var(--brand-d)}
.ob-next.ob-fitbit{background:#00B0B9}
.ob-next.ob-fitbit:active{background:#009DA6}

/* ── Recent food items ─────────────────────────────────────── */
.food-recent-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--surface2);border-radius:var(--r);cursor:pointer;transition:background .15s}
.food-recent-item:hover{background:var(--border)}
.food-recent-item .fri-name{font-size:13px;font-weight:500;color:var(--t1)}
.food-recent-item .fri-cal{font-size:11px;color:var(--t3)}

/* ── Profile / Settings (v2.52.46 — same type as Sleep/Nutrition) ─*/
#sc-profile .screen-header{justify-content:flex-start}
.profile-card {
  background: var(--surface); border: 1px solid var(--border);
  margin: 10px 12px 8px; border-radius: 16px; padding: 16px;
  box-shadow: var(--card-sh-1, var(--shadow));
}
.pc-avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pc-avatar-big {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-l); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.avatar-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:18px;border-radius:50%;opacity:0;transition:opacity .2s}
.pc-avatar-big:hover .avatar-overlay{opacity:1}

/* Avatar menu */
.avatar-menu-overlay{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.3)}
.avatar-menu{position:fixed;top:120px;left:24px;z-index:9991;background:var(--surface);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.25);overflow:hidden;min-width:200px}
.avatar-menu-item{padding:12px 16px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--t1);transition:background .15s}
.avatar-menu-item:hover{background:var(--hover)}
.avatar-menu-delete{color:var(--red,#ef4444)}

/* Avatar picker modal */
.avatar-picker-modal{position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.avatar-picker-content{background:var(--surface);border-radius:16px;padding:16px;max-width:360px;width:100%;max-height:80vh;overflow-y:auto}
.avatar-picker-header{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;color:var(--t1);margin-bottom:12px}
.avatar-picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.avatar-pick-item{width:100%;aspect-ratio:1;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:border-color .2s,transform .15s;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--bg2, var(--surface2, #1e293b))}
.avatar-pick-item:hover{transform:scale(1.1);border-color:var(--brand)}
.avatar-pick-item.selected{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.pc-name { font-size: 17px; font-weight: 700; color: var(--t1); letter-spacing: -.01em; }
.pc-sub  { font-size: 12px; color: var(--t3); margin-top: 3px; }
.pc-stats-row { display: flex; gap: 6px; }
.pc-stat {
  flex: 1; background: var(--surface2); border-radius: 12px;
  padding: 10px 6px; text-align: center;
}
.pc-stat-n { font-size: 16px; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pc-stat-l { font-size: 11px; color: var(--t3); margin-top: 3px; font-weight: 500; }

#sc-profile .card-box{margin:0 12px 8px;border-radius:16px}
#sc-profile .sec-hd{padding:14px 16px 6px}
[data-theme="dark"] .sec-hd{color:#fff}
#sc-profile .sr-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
#sc-profile .sr-sub{font-size:12px;margin-top:2px}
#sc-profile .set-weight-card{padding:12px 14px}
#sc-profile .weight-log-row{padding:0}
#sc-profile .set-weight-unit{font-size:13px;color:var(--t3);align-self:center}
#sc-profile .set-notif-tl{font-size:13px;line-height:1.7;font-family:inherit;color:var(--t2)}
#sc-profile .theme-btn{font-family:inherit;font-size:12px;font-weight:600}

/* ── Pharmacy/Ravimid screen ─────────────────────────────────*/
.guest-limit-bar {
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2);
  border-radius: 10px; padding: 8px 12px; margin: 6px 12px;
  font-size: 11px; color: #D97706; display: flex; align-items: center; gap: 6px;
}

/* Welcome secondary button */
.btn-welcome-secondary {
  width: 100%; padding: 11px; border: 1.5px solid rgba(0,180,216,.5);
  border-radius: 12px; background: rgba(0,180,216,.08); color: #00B4D8;
  font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  cursor: pointer; margin-bottom: 8px; transition: all .15s;
}
.btn-welcome-secondary:hover { background: rgba(0,180,216,.15); }

/* ════════════════════════════════════════════════════════════
   NUTRITION REDESIGN v2.4
   ════════════════════════════════════════════════════════════ */

/* ── Header date switch (sits in screen-header like Sleep/Activity) ─ */
.nutr-hdr{align-items:flex-start;gap:10px}
.nutr-date-switch{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nutr-nav-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--t2); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  font-family: inherit; line-height: 1;
}
.nutr-nav-btn:hover { border-color: var(--brand); color: var(--brand); }
.nutr-date-center {
  border: 0; background: none; cursor: pointer; padding: 2px 6px;
  font-family: inherit; text-align: center; min-width: 72px;
}
.nutr-date-label  { font-size: 13px; font-weight: 700; color: var(--t1); letter-spacing: -.01em; }
.nutr-date-tap    { font-size: 10px; color: var(--t4); margin-top: 1px; display: none; }
.nutr-date-tap.is-away { display: block; }

/* ── Calorie hero — light card, same type as Mood/Sleep/Activity ─ */
.nutr-cal-hero {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 12px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 14px 16px 18px;
  box-shadow: var(--card-sh-1, var(--shadow));
}
.nch-left { flex: 1; min-width: 0; }
.nch-eaten {
  font-size: 32px; font-weight: 700; color: var(--t1);
  font-family: inherit; line-height: 1.05;
  letter-spacing: -.02em;
}
.nch-label { font-size: 12px; color: var(--t3); margin-top: 4px; font-weight: 500; }
.nch-target { font-size: 12px; color: var(--t4); margin-top: 4px; }
.nch-ring-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.nch-ring-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.nch-remain { font-size: 18px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.nch-remain-lbl { font-size: 10px; color: var(--t3); margin-top: 1px; }

/* ── Macro cards row ─────────────────────────────────────── */
.macro-row-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 0 12px 10px;
}
.macro-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 10px 10px;
}
.mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mc-ico { font-size: 16px; }
.mc-val { font-size: 16px; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mc-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.mc-fill { height: 100%; border-radius: 3px; transition: width .4s ease; width: 0; }
.mc-fill-pro  { background: #3B82F6; }
.mc-fill-carb { background: #F59E0B; }
.mc-fill-fat  { background: #10B981; }
.mc-label { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

/* Daily engagement loop — compact enough for the dashboard, but gives each
   return visit a useful answer: today's score, the next action and progress. */
.daily-momentum-card{margin:10px 12px 8px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--card-sh-1,var(--shadow))}
.daily-momentum-card[data-mode]{border-color:var(--momentum-accent,var(--border));background:linear-gradient(135deg,var(--momentum-tint,transparent),var(--surface) 54%)}
.daily-momentum-card[data-mode="focus"]{--momentum-accent:color-mix(in srgb,var(--brand) 36%,var(--border));--momentum-tint:color-mix(in srgb,var(--brand) 8%,transparent)}
.daily-momentum-card[data-mode="fuel"]{--momentum-accent:rgba(249,115,22,.45);--momentum-tint:rgba(249,115,22,.10)}
.daily-momentum-card[data-mode="move"]{--momentum-accent:rgba(16,185,129,.45);--momentum-tint:rgba(16,185,129,.10)}
.daily-momentum-card[data-mode="fast"]{--momentum-accent:rgba(139,92,246,.48);--momentum-tint:rgba(139,92,246,.11)}
.daily-momentum-card[data-mode="recovery"]{--momentum-accent:rgba(59,130,246,.48);--momentum-tint:rgba(59,130,246,.11)}
.daily-momentum-card[data-mode="restart"]{--momentum-accent:rgba(148,163,184,.55);--momentum-tint:rgba(148,163,184,.12)}
.daily-momentum-card[data-mode="celebrate"]{--momentum-accent:rgba(245,158,11,.58);--momentum-tint:rgba(245,158,11,.13)}
.daily-momentum-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.daily-momentum-kicker{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--brand)}
.daily-momentum-title{margin-top:2px;font-size:15px;font-weight:750;color:var(--t1)}
.daily-momentum-score{display:flex;align-items:baseline;gap:2px;color:var(--brand);font-variant-numeric:tabular-nums}
.daily-momentum-score strong{font-size:25px;line-height:1}.daily-momentum-score span{font-size:10px;font-weight:700;color:var(--t3)}
.daily-momentum-bar{height:7px;margin:12px 0 10px;overflow:hidden;border-radius:999px;background:var(--surface2)}
.daily-momentum-bar span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#22c55e);transition:width .45s ease}
.daily-momentum-recommendation{font-size:12px;line-height:1.4;color:var(--t2)}
.daily-momentum-primary{display:flex;align-items:center;width:100%;gap:9px;margin-top:10px;padding:10px;border:1px solid var(--momentum-accent,var(--brand));border-radius:12px;background:var(--surface2);color:var(--t1);font:inherit;text-align:left;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.daily-momentum-primary:hover{transform:translateY(-1px);background:var(--momentum-tint,var(--surface2));box-shadow:0 5px 14px rgba(15,23,42,.09)}
.daily-momentum-primary:active{transform:translateY(0)}
.daily-momentum-primary-icon{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:9px;background:var(--momentum-tint,rgba(37,99,235,.10));font-size:17px}
.daily-momentum-primary-copy{display:grid;min-width:0;gap:1px}.daily-momentum-primary-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.3}.daily-momentum-primary-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.3;color:var(--t3)}
.daily-momentum-primary-arrow{margin-left:auto;font-size:22px;line-height:1;color:var(--brand)}
.daily-momentum-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.daily-momentum-stats button{min-width:0;padding:7px 3px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--t1);font:inherit;cursor:pointer}
.daily-momentum-stats span{display:block;font-size:13px}.daily-momentum-stats b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;margin-top:2px}.daily-momentum-stats small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:var(--t3);margin-top:1px}
.nutr-daily-loop{display:none;margin:0 12px 10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);font-size:12px;line-height:1.4;color:var(--t2)}
.nutr-daily-loop strong{color:var(--t1)}
.fast-next-milestone{margin:0 auto 10px;max-width:270px;padding:7px 10px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--t2);line-height:1.35}
[data-theme="dark"] .daily-momentum-card{background:#141824;border-color:#364057;box-shadow:0 8px 20px rgba(0,0,0,.26)}
[data-theme="dark"] .daily-momentum-card[data-mode]{background:linear-gradient(135deg,var(--momentum-tint,transparent),#141824 58%)}

/* Monthly €100 Bonus Points Challenge */
.monthly-campaign-host{margin:0 12px 10px}.monthly-campaign-card{overflow:hidden;position:relative;border:1px solid rgba(245,158,11,.46);border-radius:16px;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(139,92,246,.10) 55%,var(--surface));box-shadow:var(--card-sh-1,var(--shadow));padding:14px}.monthly-campaign-hide{position:absolute;top:2px;right:4px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--t3);font-size:16px;line-height:1;cursor:pointer;z-index:1}.monthly-campaign-hide:active{background:rgba(180,83,9,.14);color:var(--t1)}.monthly-campaign-kicker{font-size:9px;letter-spacing:.1em;font-weight:800;color:#92400E;padding-right:48px}.monthly-campaign-title{margin-top:3px;font-size:16px;font-weight:800;color:var(--t1)}.monthly-campaign-sub{margin-top:4px;font-size:11px;line-height:1.4;color:var(--t2)}.monthly-campaign-prize{display:flex;align-items:baseline;gap:5px;margin:10px 0 8px}.monthly-campaign-prize strong{font-size:26px;line-height:1;color:#b45309}.monthly-campaign-prize span{font-size:11px;font-weight:700;color:var(--t2)}.monthly-campaign-cta{width:100%;min-height:44px;margin-top:9px;padding:13px 12px;border:0;border-radius:11px;background:linear-gradient(135deg,#b45309,#9a3412);color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.monthly-campaign-cta:active{transform:scale(.99)}.monthly-campaign-status{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(180,83,9,.18);font-size:11px;color:var(--t2)}.monthly-campaign-status b{color:var(--t1)}.monthly-campaign-board{display:flex;flex-direction:column;gap:5px;margin-top:10px}.monthly-campaign-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t2)}.monthly-campaign-rank{width:21px;text-align:center;color:#92400E;font-weight:800}.monthly-campaign-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.monthly-campaign-points{font-weight:800;color:var(--t1);white-space:nowrap}.monthly-campaign-rules{margin:8px 0 0;padding-left:17px;font-size:10px;line-height:1.45;color:var(--t3)}[data-theme="dark"] .monthly-campaign-card{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(139,92,246,.14) 55%,#141824);border-color:rgba(245,158,11,.55)}
/* 2.52.77 — campaign v2: short dashboard card, open-page button, join sheet, full page */
.monthly-campaign-cta.secondary{margin-top:8px;background:transparent;border:1px solid #b45309;color:#92400E}[data-theme="dark"] .monthly-campaign-cta.secondary{color:#fbbf24}.monthly-campaign-meta{margin-top:9px;font-size:11px;color:var(--t2);line-height:1.5}.monthly-campaign-row.is-me{background:rgba(245,158,11,.12);border-radius:8px;padding:3px 6px;margin:0 -6px;font-weight:700}
.campaign-join-overlay{position:fixed;inset:0;background:rgba(8,10,20,.62);z-index:900;display:flex;align-items:flex-end;justify-content:center}.campaign-join-sheet{width:100%;max-width:520px;max-height:86vh;overflow:auto;background:var(--surface,#fff);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.campaign-join-head{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--t1)}.campaign-join-head b{flex:1}.campaign-join-close{border:0;background:transparent;color:var(--t3);font-size:15px;cursor:pointer;padding:4px 6px}.campaign-join-prize{margin-top:6px;font-size:12px;color:var(--t2)}.campaign-join-ruleshead{margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#b45309}.campaign-join-rules{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.55;color:var(--t2)}.campaign-join-check{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:12.5px;color:var(--t1);cursor:pointer}.campaign-join-check input{width:17px;height:17px;accent-color:#f59e0b}
/* A18 smart join nudge — compact bottom sheet; solid backdrop only (no
   backdrop-filter blurs: E5 renderer-crash mitigation) */
.join-nudge-overlay{position:fixed;inset:0;background:rgba(8,10,20,.55);z-index:905;display:flex;align-items:flex-end;justify-content:center}.join-nudge-sheet{width:100%;max-width:420px;background:var(--surface,#fff);border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));text-align:center}.join-nudge-ico{font-size:34px;line-height:1}.join-nudge-title{margin-top:8px;font-size:16px;font-weight:800;color:var(--t1)}.join-nudge-body{margin-top:6px;font-size:13px;line-height:1.55;color:var(--t2)}.join-nudge-sheet .monthly-campaign-cta{margin-top:14px}.join-nudge-later{display:block;width:100%;margin-top:8px;border:0;background:transparent;color:var(--t3);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:8px}
/* Dedicated campaign page (/campaign.php) */
body.camp-page{background:var(--bg,#f4f6fb)}.camp-page .camp-wrap{max-width:640px;margin:0 auto;padding:14px 14px 90px}.camp-topbar{display:flex;align-items:center;gap:10px;padding:4px 0 12px}.camp-back{display:inline-flex;align-items:center;gap:5px;background:var(--surface);color:var(--t1);border:1px solid var(--line,#e5e7ef);border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}.camp-hero{border:1px solid rgba(245,158,11,.46);border-radius:18px;background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(139,92,246,.10) 55%,var(--surface));padding:16px;position:relative}.camp-hero-kicker{font-size:9px;letter-spacing:.1em;font-weight:800;color:#b45309}.camp-hero-title{font-size:19px;font-weight:800;color:var(--t1);margin-top:4px}.camp-hero-countdown{margin-top:8px;font-size:13px;font-weight:700;color:#b45309}.camp-hero-prize{display:flex;align-items:baseline;gap:6px;margin-top:10px}.camp-hero-prize strong{font-size:34px;color:#d97706;line-height:1}.camp-hero-prize span{font-size:11px;font-weight:700;color:var(--t2)}.camp-hero-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}.camp-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--t2);background:rgba(245,158,11,.12);border-radius:999px;padding:4px 10px}.camp-sec{margin-top:14px}.camp-sec-hd{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:0 2px 8px}.camp-card{background:var(--surface);border-radius:16px;box-shadow:var(--card-sh-1,var(--shadow));padding:13px 14px}.camp-lb-row{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line,rgba(120,130,160,.12));font-size:12.5px;cursor:pointer}.camp-lb-item:last-child .camp-lb-row{border-bottom:0}.camp-lb-row.is-me{background:rgba(245,158,11,.13);border-radius:10px;padding:8px 6px;margin:2px -2px;border-bottom:0;font-weight:700}.camp-lb-row.open{background:rgba(245,158,11,.16);border-radius:10px;padding:8px 6px;margin:2px -2px;border-bottom:0;font-weight:700}.camp-lb-detail{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px 9px}.camp-tap-hint{font-size:10.5px;color:var(--t3);padding:0 4px 6px}.camp-topgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.camp-topcard{background:var(--surface);border-radius:14px;box-shadow:var(--card-sh-1,var(--shadow));padding:11px 12px;min-width:0}.camp-topcard .camp-top-ico{display:block;font-size:16px;line-height:1.2}.camp-topcard b{display:block;margin-top:3px;font-size:13px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camp-topcard span{display:block;margin-top:1px;font-size:10.5px;color:var(--t3)}.camp-lb-rank{width:34px;text-align:center;font-weight:800;color:#b45309;flex:none}.camp-lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}.camp-lb-effort{color:var(--t3);font-size:10px;flex:none}.camp-lb-points{font-weight:800;color:var(--t1);flex:none;min-width:52px;text-align:right}.camp-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.camp-stat{background:var(--surface);border-radius:14px;box-shadow:var(--card-sh-1,var(--shadow));padding:11px 12px}.camp-stat b{display:block;font-size:18px;color:var(--t1);line-height:1.2}.camp-stat span{font-size:10.5px;color:var(--t3)}.camp-progress{height:9px;border-radius:999px;background:var(--line,#e5e7ef);overflow:hidden;margin-top:8px}.camp-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f59e0b,#ea580c);transition:width .6s}.camp-progress-label{margin-top:5px;font-size:10.5px;color:var(--t3)}.camp-milestones{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.camp-mile{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 9px;background:var(--line,#e5e7ef);color:var(--t3)}.camp-mile.on{background:rgba(245,158,11,.2);color:#b45309}.camp-share{width:100%;margin-top:10px;padding:10px 12px;border:0;border-radius:11px;background:transparent;border:1px solid var(--line,#e5e7ef);color:var(--t1);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.camp-hall{display:flex;flex-direction:column;gap:7px}.camp-hall-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}.camp-hall-row b{color:var(--t1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camp-hall-row .camp-hall-pts{color:#b45309;font-weight:800}
.camp-restore{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.camp-restore-txt{font-size:12px;color:var(--t2);flex:1;min-width:150px}.camp-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#1f2937;color:#fff;font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:999;max-width:88vw;text-align:center}
[data-theme="dark"] .daily-momentum-stats button,[data-theme="dark"] .daily-momentum-primary,[data-theme="dark"] .nutr-daily-loop,[data-theme="dark"] .fast-next-milestone{background:#1C2233;border-color:#364057}

/* Wellbeing explain screen (v2.52.44) */
.wb-hero{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:12px}
.wb-hero-score{font-size:28px;font-weight:800;line-height:1}
.wb-how{padding:14px 16px;margin-bottom:12px}
.wb-how-h{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:4px}
.wb-how-intro{font-size:12px;color:var(--t3);margin-bottom:12px;line-height:1.45}
.wb-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
.wb-row:first-of-type{border-top:0;padding-top:0}
.wb-row-top{display:flex;align-items:center;gap:8px;width:100%}
.wb-row-name{width:72px;font-size:12px;font-weight:700;color:var(--t1);flex-shrink:0}
.wb-row-w{font-size:11px;color:var(--t3);flex-shrink:0}
.wb-row-bar{flex:1;height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
.wb-row-fill{height:100%;border-radius:3px}
.wb-row-n{width:28px;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--t1)}
.wb-row-why{font-size:11px;color:var(--t3);line-height:1.4;margin:4px 0 0 72px}
.wb-formula{font-size:12px;color:var(--t2);margin-top:10px;padding-top:10px;border-top:1px solid var(--border);line-height:1.45}

/* Projected weight change — compact interactive forecast shared by Weight and Dashboard. */
.wproj-card{
  --wproj-accent:#7c3aed;--wproj-accent2:#2563eb;
  position:relative;isolation:isolate;overflow:hidden;
  margin:10px 12px;padding:16px;border:1px solid rgba(124,58,237,.22);border-radius:20px;
  background:linear-gradient(145deg,rgba(124,58,237,.085),var(--surface) 34%,var(--surface));
  box-shadow:0 10px 30px rgba(30,41,59,.08),0 1px 3px rgba(30,41,59,.06);
}
.wproj-card::before{
  content:'';position:absolute;z-index:-1;right:-48px;top:-70px;width:170px;height:170px;border-radius:50%;
  background:linear-gradient(145deg,rgba(124,58,237,.17),rgba(37,99,235,.04));pointer-events:none;
}
.wproj-card--home{margin:0 12px 8px}
.wproj-head{display:flex;align-items:center;gap:11px;min-width:0}
.wproj-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--wproj-accent),var(--wproj-accent2));box-shadow:0 7px 16px rgba(124,58,237,.24);color:#fff}
.wproj-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wproj-heading{flex:1;min-width:0}
.wproj-title-row{display:flex;align-items:center;gap:7px;min-width:0}
.wproj-title{min-width:0;color:var(--t1);font-size:14px;font-weight:800;line-height:1.25;letter-spacing:-.015em}
.wproj-ai-badge{flex:none;padding:3px 6px;border:1px solid rgba(124,58,237,.20);border-radius:999px;background:rgba(124,58,237,.10);color:var(--wproj-accent);font-size:8px;font-weight:900;line-height:1;letter-spacing:.08em}
.wproj-sub{margin-top:3px;color:var(--t3);font-size:10px;font-weight:600;line-height:1.3}
.wproj-sub:empty{display:none}
.wproj-refresh{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--t2);cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.06);transition:transform .16s ease,border-color .16s ease,color .16s ease}
.wproj-refresh:hover{border-color:rgba(124,58,237,.42);color:var(--wproj-accent);transform:translateY(-1px)}
.wproj-refresh:active{transform:translateY(0) scale(.97)}
.wproj-refresh:disabled{cursor:wait;transform:none;opacity:.58}
.wproj-refresh svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wproj-refresh.is-busy svg{animation:wproj-spin .8s linear infinite}
@keyframes wproj-spin{to{transform:rotate(360deg)}}
.wproj-recalc{display:none!important}
.wproj-card .wproj-body{margin-top:15px;color:var(--t3);font-size:12px;line-height:1.45}
.wproj-basis-label{margin:0 2px 6px;color:var(--t3);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.wproj-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--border);border-radius:13px;background:var(--surface2)}
.wproj-tab{min-width:0;height:36px;padding:0 5px;overflow:hidden;border:0;border-radius:9px;background:transparent;color:var(--t3);font:inherit;font-size:10.5px;font-weight:750;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.wproj-tab.active{background:var(--surface);color:var(--t1);box-shadow:0 2px 8px rgba(15,23,42,.09)}
.wproj-tab:disabled{cursor:not-allowed;opacity:.4}
.wproj-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
.wproj-metric{min-width:0;padding:11px 8px 10px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.62);text-align:center}
.wproj-metric-label{display:block;margin-bottom:5px;color:var(--t3);font-size:9px;font-weight:750;line-height:1;text-transform:uppercase;letter-spacing:.035em}
.wproj-metric-value{display:flex;align-items:baseline;justify-content:center;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.wproj-metric-value strong{font-size:18px;font-weight:850;line-height:1;letter-spacing:-.045em}
.wproj-metric-value>span:not(.wproj-capped){margin-left:3px;color:var(--t3);font-size:8.5px;font-weight:700}
.wproj-metric[data-tone="loss"] strong{color:#059669}
.wproj-metric[data-tone="gain"] strong{color:#d97706}
.wproj-metric[data-tone="steady"] strong{color:var(--t2)}
.wproj-capped{align-self:flex-start;margin-left:1px;color:#d97706;font-size:10px;font-weight:900;cursor:help}
.wproj-context{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.wproj-context>span{display:inline-flex;align-items:center;gap:3px;min-height:25px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--t3);font-size:9px;line-height:1.2}
.wproj-context i{font-style:normal;font-size:10px}.wproj-context b{color:var(--t2);font-weight:800}
.wproj-context-note{margin-top:9px;padding:8px 10px;border-radius:10px;background:var(--surface2);color:var(--t3);font-size:10px;line-height:1.4}
.wproj-insight{position:relative;margin-top:11px;padding:11px 12px 11px 34px;border:1px solid rgba(124,58,237,.18);border-radius:13px;background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(37,99,235,.06));color:var(--t2);font-size:11px;line-height:1.5}
.wproj-insight::before{content:'✦';position:absolute;left:12px;top:11px;color:var(--wproj-accent);font-size:13px;font-weight:900}
.wproj-note{margin-top:11px;padding-top:10px;border-top:1px solid var(--border);color:var(--t3);font-size:9px;line-height:1.5}
.wproj-note:empty{display:none}
.wproj-empty{display:flex;align-items:center;gap:10px;min-height:66px;padding:12px;border:1px dashed var(--border2);border-radius:13px;background:var(--surface2);color:var(--t2);font-size:11px;line-height:1.45}
.wproj-empty-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:rgba(124,58,237,.10);color:var(--wproj-accent);font-size:17px;font-weight:800}
.wproj-card.is-empty .wproj-body{margin-top:12px}
[data-theme="dark"] .wproj-card{border-color:rgba(139,92,246,.34);background:linear-gradient(145deg,rgba(124,58,237,.16),#141824 36%,#141824);box-shadow:0 12px 32px rgba(0,0,0,.28)}
[data-theme="dark"] .wproj-card::before{background:linear-gradient(145deg,rgba(139,92,246,.22),rgba(37,99,235,.03))}
[data-theme="dark"] .wproj-refresh,[data-theme="dark"] .wproj-tab.active{background:#202638;border-color:#364057}
[data-theme="dark"] .wproj-tabs,[data-theme="dark"] .wproj-context>span,[data-theme="dark"] .wproj-context-note,[data-theme="dark"] .wproj-empty{background:#101522;border-color:#30394f}
[data-theme="dark"] .wproj-metric{background:rgba(28,34,51,.82);border-color:#30394f}
[data-theme="dark"] .wproj-metric[data-tone="loss"] strong{color:#34d399}
[data-theme="dark"] .wproj-metric[data-tone="gain"] strong{color:#fbbf24}
@media(max-width:350px){.wproj-card{padding:14px}.wproj-icon{flex-basis:38px;width:38px;height:38px;border-radius:12px}.wproj-refresh{flex-basis:38px;width:38px;height:38px}.wproj-title{font-size:13px}.wproj-metrics{gap:5px}.wproj-metric{padding:10px 5px 9px}.wproj-metric-value strong{font-size:16px}.wproj-context>span{padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.wproj-refresh,.wproj-tab{transition:none}.wproj-refresh.is-busy svg{animation:none}}
.nutr-plan-card{margin:10px 12px 8px;padding:12px 14px;border-radius:16px}
.nutr-plan-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--t1);line-height:1.2}
.nutr-plan-sub{margin-top:4px;font-size:11px;color:var(--t3);line-height:1.35}
.nutr-plan-sub:empty{display:none}
.nutr-plan-actions{display:flex;gap:8px;margin-top:10px}
.nchip{
  flex:1;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--border2);background:var(--surface2);color:var(--t1);
  font-size:12px;font-weight:700;font-family:'DM Sans',sans-serif;
  cursor:pointer;white-space:nowrap;
}
.nchip-on{flex:0 0 auto;background:var(--brand);color:#fff;border-color:var(--brand)}
.nutr-plan-body{margin-top:10px}
.mp-ad{
  display:flex;align-items:flex-start;gap:10px;
  margin:10px 0 8px;padding:10px 12px;border-radius:12px;
  background:var(--brand-l, rgba(99,102,241,.08));
  border:1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
}
.mp-ad-ico{font-size:20px;line-height:1.2;flex-shrink:0}
.mp-ad-title{font-size:12px;font-weight:700;color:var(--t1);line-height:1.3}
.mp-ad-sub{margin-top:2px;font-size:11px;color:var(--t2);line-height:1.4}
/* Settings → Meal plan suggestion. Keep the introductory panel distinct from
   the surrounding card in dark mode; color-mix is not reliable in older
   Android WebViews, which previously left its border/background looking off. */
#sc-profile .mp-ad{background:var(--surface2);border-color:var(--border)}
[data-theme="dark"] #sc-profile .mp-ad{
  background:#1C2233;border-color:#364057;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
[data-theme="dark"] #sc-profile .mp-ad-title{color:var(--t1)}
[data-theme="dark"] #sc-profile .mp-ad-sub{color:var(--t2)}
.mp-meal{padding:8px 0;border-bottom:1px solid var(--border)}
.mp-cook{margin-top:6px}
.mp-cook summary{
  list-style:none;cursor:pointer;font-size:11px;font-weight:700;
  color:var(--brand);padding:4px 0;
}
.mp-cook summary::-webkit-details-marker{display:none}
.mp-cook summary::before{content:'▸ ';font-size:10px}
.mp-cook[open] summary::before{content:'▾ '}
.mp-cook ol{
  margin:6px 0 0;padding:0 0 0 18px;
  font-size:12px;color:var(--t2);line-height:1.5;
}
.mp-cook li{margin:5px 0}
.mp-ing-hd{margin-top:8px;font-size:11px;font-weight:700;color:var(--t1)}
.mp-ing{margin:4px 0 0;padding:0 0 0 18px;font-size:11px;color:var(--t2);line-height:1.4}
.mp-ing li{margin:2px 0}
.mp-tip{margin-top:8px;font-size:11px;color:var(--t2);line-height:1.4}
.mp-regen-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mp-regen-row .nchip{flex:1 1 auto}
.mp-regen-row .mp-regen{flex:1 1 100%;width:100%;height:36px;font-size:13px}
.nutr-meals-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin:4px 12px 8px;
}
.nutr-meals-label{font-size:11px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.06em}
.nutr-meals-bar .nchip{flex:0 0 auto}

/* ── Quick add row ───────────────────────────────────────── */
.nutr-quick-row {
  display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto;
  scrollbar-width: none;
}
.nutr-quick-row::-webkit-scrollbar { display: none; }
.nq-btn {
  flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--border2); background: var(--surface2);
  color: var(--t2); font-size: 12px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.nq-btn:hover { border-color: #00B4D8; color: #00B4D8; background: rgba(0,180,216,.06); }

/* ── Meal sections ───────────────────────────────────────── */
.meal-log-card{
  margin:0 12px 10px;padding:12px 14px;border-radius:16px;
}
.meal-log-card .meal-section{
  margin:0;background:transparent;
  border:0;border-radius:0;box-shadow:none;overflow:visible;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.meal-log-card .meal-section-hdr{
  padding:0 0 10px;border-bottom:0;
}
.meal-log-card .meal-block{overflow:visible}
.meal-log-card .meal-entry.ai-result-card{
  margin:0 0 8px;padding:12px;
  border-left:3px solid var(--brand);
  border-bottom:1px solid var(--border);
}
.meal-log-card .meal-entry.ai-result-card:last-child,
.meal-log-card .meal-entry.ai-result-card:last-of-type{
  border-bottom:1px solid var(--border);
}
.meal-log-card .meal-total-row{
  margin:2px 2px 0;padding:8px 0 0;
}
.meal-section {
  margin: 0 12px 10px;
  /* Match the generated From library card instead of painting a second,
     heavier blue panel around the real food log. */
  background: var(--v210-glass-bg, var(--surface));
  border: 1px solid var(--v210-glass-border, var(--border));
  border-left: 3px solid var(--brand);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--v210-shadow-sm, var(--shadow));
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}
.meal-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.msh-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.msh-ico  { font-size: 18px; flex-shrink: 0; }
.msh-name { font-size: 13px; font-weight: 700; color: var(--t1); letter-spacing: -.01em; }
.msh-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.msh-cal  { font-size: 11px; color: var(--t3); font-family: 'DM Mono', monospace; }
.meal-section .meal-block {
  margin: 0; border: 0; border-radius: 0;
  background: transparent;
}
/* v2.17.45: eating-time badge — shown next to the meal name when the day's
   meals are driven by the user's fasting plan (16:8, OMAD, …). */
.msh-time { font-size: 10.5px; font-weight: 600; color: var(--brand);
            background: var(--surface); border-radius: 10px; padding: 1px 7px;
            flex-shrink: 0; white-space: nowrap; }
.msh-add  {
  flex-shrink: 0; padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border2); background: transparent;
  color: var(--brand); font-size: 11px; font-weight: 700;
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .15s;
}
.msh-add:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.meal-block { padding: 0; }
.meal-empty {
  font-size: 13px; color: var(--t3); text-align: center;
  padding: 16px 14px; font-style: normal;
}
.meal-entry {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background .1s;
}
.meal-entry:last-child { border-bottom: none; }
.meal-entry:active { background: var(--surface2); }
.me-name   { font-size: 12px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-weight { font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.4; }
.me-cal    { font-size: 11px; font-weight: 500; color: var(--t3); font-variant-numeric: tabular-nums; flex-shrink: 0; text-align: right; }
.me-del    {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--t3);
  font-size: 13px; cursor: pointer; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; transition: all .15s;
}
.me-del:hover { background: var(--red-b); color: var(--red); }

.meal-total-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 14px; padding: 10px 0 12px;
  background: transparent; border-radius: 0;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--t3);
}
.meal-total-cal { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; font-size: 13px; }

/* ── Weekly card ─────────────────────────────────────────── */
.nutr-week-card {
  margin: 0 12px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px;
}
.nwc-title { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 12px; letter-spacing: -.01em; }
.nwc-chart { margin-bottom: 6px; }
.nwc-avg   { font-size: 11px; color: var(--t3); text-align: center; }

/* ── Weight card ─────────────────────────────────────────── */
.nutr-weight-card {
  margin: 0 12px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px;
}
.nwt-title { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 10px; letter-spacing: -.01em; }
.nwt-row { display: flex; align-items: center; gap: 8px; }
.nwt-input {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 10px; background: var(--surface2); color: var(--t1);
  font-size: 16px; font-family: 'DM Sans', sans-serif; outline: none;
  transition: border-color .15s;
}
.nwt-input:focus { border-color: var(--brand); }
.nwt-unit { font-size: 14px; color: var(--t3); }
.nwt-btn {
  padding: 10px 16px; border-radius: 10px; border: none;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}

/* ── Food search modal ───────────────────────────────────── */
.food-modal-overlay {
  position: absolute; inset: 0; z-index: 600;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
}
.food-modal {
  width: 100%; background: var(--surface);
  border-radius: 20px 20px 0 0; padding: 0 0 20px;
  max-height: 85%; display: flex; flex-direction: column;
  animation: slideUp .25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.food-modal-handle { width: 36px; height: 4px; background: var(--border2); border-radius: 2px; margin: 10px auto 14px; }
.food-modal-title { font-size: 16px; font-weight: 700; color: var(--t1); padding: 0 16px 12px; }
.food-search-bar {
  display: flex; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--border);
}
.food-search-input {
  flex: 1; padding: 10px 14px; border: 1.5px solid var(--border);
  border-radius: 12px; background: var(--surface2); color: var(--t1);
  font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none;
}
.food-search-input:focus { border-color: #00B4D8; }
.food-results { flex: 1; overflow-y: auto; }
.food-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.food-item:hover { background: var(--surface2); }
.fi-name  { font-size: 13px; font-weight: 600; color: var(--t1); }
.fi-macros{ font-size: 10px; color: var(--t3); margin-top: 2px; }
.fi-cal   { font-size: 15px; font-weight: 800; color: var(--t1); font-family: 'DM Mono', monospace; }
.fi-cal-u { font-size: 10px; color: var(--t3); }

/* Amount input row in modal */
.food-amount-row {
  display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface2); align-items: center; flex-wrap: wrap;
}
.food-amount-input {
  width: 80px; padding: 8px 10px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--t1);
  font-size: 15px; font-family: 'DM Sans', sans-serif; outline: none; text-align: center;
}
.food-amount-input:focus { border-color: #00B4D8; }
.food-amount-preview {
  flex: 1; font-size: 12px; color: var(--t3); min-width: 100px;
}
.food-add-confirm {
  padding: 9px 16px; border-radius: 10px; border: none;
  background: #00B4D8; color: #fff; font-size: 13px; font-weight: 700;
  font-family: 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap;
}


/* ═══════════════════════════════════════════════════
   PHARMACY — GoodRx-stiilis hinnavõrdlus
   ═══════════════════════════════════════════════════ */

/* Hero päis */
.pharm-hero {
  padding: 20px 16px 12px;
  text-align: center;
}
.pharm-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.pharm-hero-sub {
  font-size: 11px;
  color: var(--t3);
}
.pharm-hero-note {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--t2);
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Suur otsingukast */
.pharm-search-box {
  margin: 0 12px 16px;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: visible;
  position: relative;
  z-index: 100;
}
.pharm-search-box .ac-wrap{position:static}
.pharm-search-box .ac-dropdown{position:absolute;top:100%;left:-1px;right:-1px;border-radius:0 0 16px 16px;border-top:1px solid var(--border)}
.pharm-search-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
}
.pharm-search-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.pharm-big-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--t1);
  outline: none;
  font-family: inherit;
}
.pharm-big-input::placeholder { color: var(--t4); }
.pharm-search-divider {
  height: 1px;
  background: var(--border);
  margin: 0 14px;
}
.pharm-search-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px 12px;
  padding: 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pharm-search-btn:active { opacity: .85; }
.pharm-search-btn:disabled { opacity: .6; }

/* Minu ravimid */
.pharm-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 16px 8px;
}
.pharm-my-drug-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 6px;
  padding: 10px 12px;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.pharm-my-drug-card:active { opacity: .8; }
.pharm-my-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pharm-my-info { flex: 1; min-width: 0; }
.pharm-my-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pharm-my-dose { font-size: 11px; color: var(--t3); margin-top: 1px; }
.pharm-my-arrow { font-size: 14px; color: var(--t4); }
.pharm-my-empty { font-size: 12px; color: var(--t3); padding: 8px 16px 12px; }

/* Populaarsed kiipid */
.pharm-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 16px;
}
.pharm-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface1);
  font-size: 12px;
  color: var(--t2);
  cursor: pointer;
  font-family: inherit;
}
.pharm-chip:active { background: var(--surface2); }

/* Tulemuste topbar */
.pharm-results-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 6px;
  border-bottom: 1px solid var(--border);
}
.pharm-back-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--t2);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
/* Back button for symptom results (inline on pharm home view) */
.pharm-results-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  font-family: inherit;
  margin: 0 0 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform .15s, background .15s;
}
.pharm-results-back:hover { background: var(--bg1, #f6f7fb); }
.pharm-results-back:active { transform: scale(.97); }
/* Back to dashboard button at top of pharm home view */
.pharm-home-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  font-family: inherit;
  margin: 0 12px 10px;
  transition: transform .15s, background .15s, color .15s;
}
.pharm-home-back:hover { background: var(--bg1, #f6f7fb); color: var(--t1); }
.pharm-home-back:active { transform: scale(.97); }
.pharm-results-query { flex: 1; min-width: 0; }
.pharm-rq-drug {
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pharm-rq-loc { font-size: 11px; color: var(--t3); }

/* Savings banner */
.pharm-savings-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px;
  padding: 10px 14px;
  background: var(--green-b);
  border: 1px solid rgba(21,128,61,.2);
  border-radius: 12px;
}
.pharm-savings-ico { font-size: 20px; flex-shrink: 0; }
.pharm-savings-main { font-size: 13px; font-weight: 600; color: var(--green); }
.pharm-savings-sub { font-size: 10px; color: var(--green); opacity: .8; }

/* Listi label */
.pharm-list-label {
  font-size: 11px;
  color: var(--t3);
  padding: 4px 16px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pharm-src-badge {
  background: var(--surface2);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 9px;
  color: var(--t3);
}

/* Tulemuskaart */
.pharm-result-card {
  margin: 0 12px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface1);
}
.pharm-result-card--best {
  border: 2px solid var(--green);
}
.pharm-best-badge {
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  text-align: center;
}
.pharm-rc-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 12px;
  gap: 8px;
}
.pharm-rc-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.pharm-rc-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pharm-rc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.3;
}
.pharm-rc-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 10px;
  flex-wrap: wrap;
}
.pharm-rc-addr { color: var(--t3); }
.pharm-rc-phone { font-size: 10px; margin-top: 3px; }
.pharm-rc-details {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.pharm-rc-info-line {
  font-size: 11px;
  color: var(--t2);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw;
}
.pharm-rc-info-line a { text-decoration: none; }
.pharm-rc-right { text-align: right; flex-shrink: 0; }
.pharm-rc-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--t1);
  font-family: 'DM Mono', monospace;
  line-height: 1;
}
.pharm-rc-eur { font-size: 13px; }
.pharm-rc-diff {
  font-size: 10px;
  color: var(--t3);
  margin-bottom: 2px;
}
.pharm-rc-card-price { font-size: 10px; color: var(--brand); margin-top: 2px; }
.pharm-rc-limit { font-size: 9px; color: var(--t4); margin-top: 1px; }

/* Discount / soodushind badges */
.pharm-rc-discount-best {
  font-size: 10px; font-weight: 600; margin-top: 3px;
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  text-align: right;
}
.pharm-rc-discount-row {
  display: flex; gap: 4px; justify-content: flex-end; margin-top: 2px; flex-wrap: wrap;
}
.pharm-rc-discount-tag {
  font-size: 9px; font-weight: 600; opacity: .75;
}


/* ═══════════════════════════════════════════════════
   CHECKER — Medisafe-stiilis ohutuse analüüs
   ═══════════════════════════════════════════════════ */

.ck-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface1);
}
.ck-tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.ck-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Scan hero */
.ck-scan-hero {
  text-align: center;
  padding: 16px 12px 10px;
}
.ck-scan-icon { font-size: 28px; }
.ck-scan-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-top: 4px; }
.ck-scan-sub   { font-size: 11px; color: var(--t3); margin-top: 2px; }

.ck-scan-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  padding: 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ck-scan-btn:disabled { opacity: .6; }

/* Summary card */
.ck-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 12px 6px;
  padding: 14px;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.ck-summary-score-col { text-align: center; flex-shrink: 0; }
.ck-risk-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--ring-color, var(--border));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.ck-risk-num  { font-size: 20px; font-weight: 800; line-height: 1; }
.ck-risk-max  { font-size: 9px; color: var(--t4); }
.ck-risk-label { font-size: 9px; font-weight: 700; margin-top: 4px; letter-spacing: .04em; }
.ck-summary-stats { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ck-stat-row  { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ck-stat-ico  { font-size: 12px; }
.ck-stat-n    { font-weight: 700; min-width: 18px; }
.ck-stat-l    { color: var(--t3); font-size: 11px; }
.ck-pair-count { font-size: 10px; color: var(--t4); text-align: center; margin-bottom: 8px; }

/* Group labels */
.ck-group-label {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 16px 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ck-group-danger  { color: #DC2626; }
.ck-group-warning { color: #C2410C; }
.ck-group-mild    { color: #92400E; }
.ck-group-info    { color: #1D4ED8; }

/* Scan result card */
.ck-scan-card {
  margin: 0 12px 8px;
  padding: 12px 12px 10px;
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.ck-scan-card:active { opacity: .85; }
.ck-sc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.ck-sc-drugs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ck-sc-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  color: var(--t1);
}
.ck-sc-plus { font-size: 12px; color: var(--t4); font-weight: 700; }
.ck-sc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ck-sc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 3px;
}
.ck-sc-main {
  font-size: 11px;
  color: var(--t2);
  line-height: 1.4;
}
.ck-sc-arrow {
  font-size: 10px;
  color: var(--brand);
  margin-top: 6px;
  font-weight: 600;
}

/* All safe state */
.ck-all-safe {
  text-align: center;
  padding: 24px 16px;
  color: var(--t2);
}

/* ── Mental Health ────────────────────────────────────────── */
.mood-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid transparent;
  background: var(--surface2); font-size: 26px; cursor: pointer;
  transition: all .25s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mood-btn:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.mood-btn[data-mood="1"].sel { border-color: #FCA5A5; background: linear-gradient(135deg, #FEF2F2, #FEE2E2); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(239,68,68,.18), 0 4px 20px rgba(239,68,68,.12); }
.mood-btn[data-mood="1"]:hover { border-color: #FCA5A5; background: #FEF2F2; }
.mood-btn[data-mood="2"].sel { border-color: #FDBA74; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(249,115,22,.18), 0 4px 20px rgba(249,115,22,.12); }
.mood-btn[data-mood="2"]:hover { border-color: #FDBA74; background: #FFF7ED; }
.mood-btn[data-mood="3"].sel { border-color: #FCD34D; background: linear-gradient(135deg, #FFFBEB, #FEF3C7); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(234,179,8,.18), 0 4px 20px rgba(234,179,8,.12); }
.mood-btn[data-mood="3"]:hover { border-color: #FCD34D; background: #FFFBEB; }
.mood-btn[data-mood="4"].sel { border-color: #86EFAC; background: linear-gradient(135deg, #F0FDF4, #DCFCE7); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(34,197,94,.18), 0 4px 20px rgba(34,197,94,.12); }
.mood-btn[data-mood="4"]:hover { border-color: #86EFAC; background: #F0FDF4; }
.mood-btn[data-mood="5"].sel { border-color: #67E8F9; background: linear-gradient(135deg, #ECFEFF, #CFFAFE); transform: scale(1.18); box-shadow: 0 0 0 4px rgba(6,182,212,.18), 0 4px 20px rgba(6,182,212,.12); }
.mood-btn[data-mood="5"]:hover { border-color: #67E8F9; background: #ECFEFF; }
/* Sleep quality buttons — fit 5-across in narrow column */
.sleep-q-btn { width: 36px; height: 36px; font-size: 15px; flex-shrink: 1; min-width: 28px; }
@media (max-width: 380px) { .sleep-q-btn { width: 32px; height: 32px; font-size: 13px; border-width: 2px; } }

/* ──────────────────────────────────────────────────────────────
   A11y — minimum touch target 44×44 per WCAG 2.2 SC 2.5.8
   `.icon-btn` used for inline emoji/icon buttons (🗑️, ✏️, etc)
   that previously were 17×16 and unreachable on touchscreens.
   ────────────────────────────────────────────────────────────── */
.icon-btn {
  background: none;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: 16px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--surface2); }
.icon-btn:active { background: var(--border); }

/* Bumped these classes to meet 44×44 minimum touch target */
.panel-back { min-width: 44px; min-height: 44px; }
.water-add-btn { width: 44px; height: 44px; }
.nutr-nav-btn { width: 40px; height: 40px; /* +8 px; within a compact nav row, 40 is accepted when close-packed */ }
.week-avg-tab { min-height: 44px; }
.pharm-chip { min-height: 36px; /* chip pills are interactive but not primary; 36 acceptable close-packed */ padding: 8px 14px; }

/* Drug "more info" expandable — hide native disclosure triangle, rotate our caret instead */
.drug-more > summary { list-style: none; }
.drug-more > summary::-webkit-details-marker { display: none; }
.drug-more > summary::marker { display: none; content: ''; }
.drug-more > summary .drug-more-caret { display: inline-block; transition: transform 0.15s ease; font-size: 10px; }
.drug-more[open] > summary .drug-more-caret { transform: rotate(90deg); }

/* Dashboard "Week Average" CSS bar chart — always renders, no Chart.js dependency */
.wk-cssbars { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 92px; padding-bottom: 18px; position: relative; }
.wk-cssbars .wk-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; gap: 3px; }
.wk-cssbars .wk-bar { width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: rgba(200,208,220,.3); min-height: 3px; transition: height 0.3s ease; position: relative; }
.wk-cssbars .wk-bar.wk-zero { background: rgba(200,208,220,.25); }
.wk-cssbars .wk-bar.wk-best { box-shadow: 0 0 0 2px rgba(255,255,255,0.35) inset; }
.wk-cssbars .wk-bar-lbl { font-size: 10px; color: var(--t3); line-height: 1; margin-top: 2px; position: absolute; bottom: 0; }
.wk-cssbars .wk-bar-val { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: var(--t2); white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.wk-cssbars .wk-bar-col:hover .wk-bar-val { opacity: 1; }
.wk-cssbars .wk-nodata-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--t3); text-align: center; padding: 0 8px; background: linear-gradient(180deg, rgba(255,255,255,0), var(--bg, #EEF0F4) 90%); pointer-events: none; }

/* ════════════════════════════════════════════════════
   Mood Checkin Card — modern wellbeing form
   ════════════════════════════════════════════════════ */
.mood-checkin {
  margin: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

/* Hero mood ring */
.mci-hero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.mci-hero-ring {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F3F0FF, #EDE9FE);
  border: 3px solid #DDD6FE;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.mci-hero-ring span {
  font-size: 36px; line-height: 1; transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.mci-hero-label {
  font-size: 13px; font-weight: 700; color: var(--t2);
  transition: color .3s;
}

/* Mood picker */
.mci-picker {
  display: flex; justify-content: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* Sliders section */
.mci-sliders {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 18px;
}
.mci-slider-row {
  display: flex; flex-direction: column; gap: 4px;
}
.mci-sr-head {
  display: flex; justify-content: space-between; align-items: center;
}
.mci-sr-head > span:first-child {
  font-size: 11.5px; font-weight: 600; color: var(--t3);
  display: flex; align-items: center; gap: 4px;
}
.mci-sr-ico { font-size: 15px; }
.mci-sr-val {
  font-size: 13px; font-weight: 800; min-width: 20px; text-align: right;
  padding: 2px 8px; border-radius: 8px;
  background: var(--surface2);
  transition: all .15s;
}

/* Custom range slider */
.mci-sr {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 4px;
  outline: none; cursor: pointer;
  background: var(--border);
}
.mci-sr::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px;
}
.mci-sr::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  margin-top: -8px;
  cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: all .15s;
}
.mci-sr::-webkit-slider-thumb:active { transform: scale(1.15); }
.mci-sr::-moz-range-track { height: 8px; border-radius: 4px; background: var(--border); }
.mci-sr::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Slider fill colors — set via mciTrack() JS onto style attr,
   but these provide the thumb colors for each slider */
#mental-energy::-webkit-slider-thumb { background: #F59E0B; }
#mental-energy::-moz-range-thumb { background: #F59E0B; }
#mental-anxiety::-webkit-slider-thumb { background: #EF4444; }
#mental-anxiety::-moz-range-thumb { background: #EF4444; }
#mental-stress::-webkit-slider-thumb { background: #F97316; }
#mental-stress::-moz-range-thumb { background: #F97316; }
#mental-sleep-q::-webkit-slider-thumb { background: #6366F1; }
#mental-sleep-q::-moz-range-thumb { background: #6366F1; }

/* Sleep hours + notes fields */
.mci-fields {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.mci-field {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.mci-field-wide { flex: 2; }
.mci-field label {
  font-size: 11px; font-weight: 700; color: var(--t3);
  display: flex; align-items: center; gap: 4px;
}
.mci-field input {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 15px; font-family: inherit;
  background: var(--surface2);
  color: var(--t1); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.mci-field input:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.mci-field input::placeholder { color: var(--t4); }

/* Save button — kept from earlier but now scoped inside .mood-checkin */
.mood-checkin .mood-save-btn {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: #fff; border: none; border-radius: 13px;
  font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all .2s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
}
.mood-checkin .mood-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.4); }
.mood-checkin .mood-save-btn:active { transform: scale(.97); }

.mental-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: center; transition: all .2s; }
.mental-stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.mental-stat-card .msc-val { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 2px; }
.mental-stat-card .msc-lbl { font-size: 9.5px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; }
.mental-stat-card:nth-child(1) { border-top: 3px solid #A855F7; }
.mental-stat-card:nth-child(2) { border-top: 3px solid #F97316; }
.mental-stat-card:nth-child(3) { border-top: 3px solid #6366F1; }

.mental-history-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 6px; border-left: 4px solid transparent; transition: all .15s; }
.mental-history-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); transform: translateX(2px); }
.mhi-emoji { font-size: 24px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.mhi-info { flex: 1; min-width: 0; }
.mhi-date { font-size: 12px; font-weight: 600; color: var(--t1); }
.mhi-metrics { font-size: 10.5px; color: var(--t4); margin-top: 3px; }
.mhi-del { background: none; border: none; font-size: 14px; cursor: pointer; opacity: .4; padding: 6px 10px; border-radius: 8px; transition: all .15s; color: var(--t3); }
.mhi-del:hover { opacity: 1; background: #FEF2F2; color: #EF4444; }

/* ── Sleep detail modal (theme-aware) ──────────────────────── */
#sleep-detail-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
#sleep-detail-modal.open { opacity: 1; pointer-events: auto; }
#sleep-detail-modal.open .sleep-detail-card { transform: translateY(0); }
.sleep-detail-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sleep-detail-card { position: relative; width: 100%; max-width: 420px; background: var(--surface); color: var(--t1); border-radius: 20px 20px 0 0; padding: 0 0 28px; transform: translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1); box-shadow: var(--shadow2); max-height: 90vh; overflow-y: auto; }
.sleep-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px; }
.sleep-detail-back { background: none; border: none; font-size: 22px; color: var(--t2); cursor: pointer; padding: 4px 8px; }
.sleep-detail-header-title { font-size: 17px; font-weight: 600; color: var(--t1); }
.fb-date-label { text-align: center; font-size: 13px; color: var(--t3); padding: 0 20px 12px; }
/* Duration + progress ring row */
.fb-duration-row { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 16px; }
.fb-duration-text { display: flex; flex-direction: column; }
.fb-dur-big { font-size: 36px; font-weight: 800; color: var(--t1); letter-spacing: -1px; line-height: 1.1; }
.fb-dur-goal { font-size: 14px; color: var(--t3); margin-top: 2px; }
.fb-progress-ring { flex-shrink: 0; }
/* Sleep score card */
.fb-score-card { display: flex; align-items: center; justify-content: space-between; background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; margin: 0 20px 16px; }
.fb-score-label { font-size: 14px; color: var(--t3); }
.fb-score-right { text-align: right; }
.fb-score-value { font-size: 36px; font-weight: 800; color: var(--t1); line-height: 1; }
.fb-score-text { font-size: 13px; color: var(--t3); display: block; margin-top: 2px; }
/* Timeline section */
.fb-timeline-section { padding: 8px 20px 4px; }
.fb-timeline-header { margin-bottom: 6px; }
.fb-tl-title { font-size: 16px; font-weight: 700; color: var(--t1); }
.fb-tl-range { font-size: 28px; font-weight: 700; color: var(--t1); letter-spacing: -0.5px; margin-bottom: 2px; }
.fb-tl-sub { font-size: 12px; color: var(--t4); margin-bottom: 12px; }
/* Fitbit-style stage lanes */
.fb-stages-section { padding: 0 20px 8px; }
.fb-stage-lane { margin-bottom: 2px; }
.fb-stage-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--t2); }
.fb-stage-dur { color: var(--t3); font-weight: 400; margin-left: 4px; }
.fb-stage-canvas { width: 100%; display: block; }
.fb-stages-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--t4); margin-top: 6px; padding: 0; }
/* Notes */
.sleep-detail-notes { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.sleep-detail-notes-label { font-size: 11px; color: var(--t4); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.sleep-detail-notes div { font-size: 13px; color: var(--t3); }

/* ── Fitbit Sleep Card on main screen ──────────────────────── */
.fitbit-sleep-card { padding: 16px !important; position: relative; }
.fitbit-sleep-header { display: flex; justify-content: space-between; align-items: flex-start; }
.fitbit-sleep-score { width: 60px; height: 60px; border-radius: 50%; border: 3px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.fitbit-sleep-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #00B0B9; background: rgba(0,176,185,0.08); border-radius: 6px; padding: 4px 10px; margin: 10px 0 8px; }
.fitbit-stages-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 1px; }
.fitbit-stages-bar > div { min-width: 4px; transition: width .4s ease; }
.fitbit-stages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fitbit-stage-item { display: flex; align-items: center; gap: 8px; }
.fitbit-stage-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fitbit-stage-name { font-size: 12px; color: var(--t3); }
.fitbit-stage-val { font-size: 14px; font-weight: 600; }
.fitbit-stage-pct { font-size: 11px; color: var(--t3); font-weight: 400; }

/* ── Sleep history Fitbit enhancements ─────────────────────── */
.sleep-hist-fitbit { display: inline-block; font-size: 9px; font-weight: 700; color: #00B0B9; background: rgba(0,176,185,0.12); border-radius: 4px; padding: 1px 5px; vertical-align: middle; margin-left: 4px; letter-spacing: .3px; }
.sleep-hist-score { font-size: 12px; font-weight: 700; color: var(--primary); background: rgba(37,99,235,0.1); border-radius: 4px; padding: 1px 6px; }
.sleep-hist-stages { display: flex; height: 4px; border-radius: 2px; overflow: hidden; gap: 1px; margin-top: 6px; }
.sleep-hist-stages > div { min-width: 2px; }

.mhi-emoji { font-size: 24px; }
.mhi-info { flex: 1; min-width: 0; }
.mhi-date { font-size: 11px; font-weight: 600; color: var(--t2); }
.mhi-metrics { font-size: 10px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhi-del { background: none; border: none; font-size: 14px; cursor: pointer; color: var(--t4); padding: 4px; }
.mhi-del:hover { color: var(--red); }

.mental-assess-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; transition: all .15s; }
.mental-assess-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.mac-head { display: flex; justify-content: space-between; align-items: center; }
.mac-type { font-size: 12px; font-weight: 700; }
.mac-date { font-size: 10px; color: var(--t4); }
.mac-score { font-size: 20px; font-weight: 800; margin: 4px 0; }
.mac-sev { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; display: inline-block; }

/* Assessment modal */
.assess-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.assess-modal { background: var(--surface); border-radius: 16px; max-width: 420px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.assess-modal-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.assess-modal-head h3 { font-size: 16px; font-weight: 700; }
.assess-modal-body { flex: 1; overflow-y: auto; padding: 16px; }
.assess-q { margin-bottom: 16px; }
.assess-q-text { font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 8px; }
.assess-q-num { font-size: 11px; font-weight: 700; color: var(--brand); margin-right: 6px; }
.assess-opts { display: flex; gap: 4px; }
.assess-opt { flex: 1; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface2); cursor: pointer; text-align: center; font-size: 10px; font-family: inherit; color: var(--t2); transition: all .15s; }
.assess-opt:hover { border-color: var(--brand); }
.assess-opt.sel { background: var(--brand); color: #fff; border-color: var(--brand); }
.assess-modal-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.assess-modal-foot button { flex: 1; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; border: none; }
.assess-submit-btn { background: var(--brand); color: #fff; }
.assess-cancel-btn { background: var(--surface2); color: var(--t2); border: 1px solid var(--border) !important; }

/* Activity period toggle */
.act-period-btn{flex:1;border-radius:var(--r1);background:transparent;border:none;font-size:12px;padding:6px;cursor:pointer;font-weight:600;color:var(--t3);font-family:inherit;transition:all .15s}
.act-period-btn.active{background:var(--brand);color:#fff}

/* Movement → Analysis and recommendations. This section is rendered by JS,
   so it previously relied on the generic `.card` class, which has no shared
   surface styling. On dark theme the results blended into the page and the
   tinted status panel looked disconnected. Keep it a deliberate card with
   readable nested surfaces in every theme. */
#sc-activity #act-analysis .activity-analysis-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);
  box-shadow:var(--card-sh-1);color:var(--t1);
}
#sc-activity #act-analysis .activity-analysis-period{border:1px solid var(--border)}
#sc-activity #act-analysis .activity-analysis-rec:last-child{border-bottom:0!important}
[data-theme="dark"] #sc-activity #act-analysis .activity-analysis-card{
  background:#141824;border-color:#364057;box-shadow:0 8px 20px rgba(0,0,0,.28);
}
[data-theme="dark"] #sc-activity #act-analysis .activity-analysis-status{
  background:var(--surface2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
[data-theme="dark"] #sc-activity #act-analysis .activity-analysis-period{
  background:#0f1420!important;color:var(--t2)!important;border-color:#364057;
}
[data-theme="dark"] #sc-activity #act-analysis .activity-analysis-metrics > div > div:last-child,
[data-theme="dark"] #sc-activity #act-analysis .activity-analysis-progress > div:first-child{
  color:var(--t2)!important;
}

/* ═══════════════════════════════════════════════════
   v0.7: UI IMPROVEMENTS
   ═══════════════════════════════════════════════════ */

/* v2.4.4: pull-to-refresh CSS removed (feature eemaldatud) */

/* ── 4. Dose swipe to mark ────────────────────────── */
.dose-swipe-row{position:relative;overflow:hidden;border-radius:8px;margin-bottom:2px;touch-action:pan-y}
.dose-swipe-bg{position:absolute;top:0;bottom:0;right:0;width:80px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:700;border-radius:0 8px 8px 0;opacity:0;transition:opacity .2s}
.dose-swipe-bg.taken-bg{background:#16a34a}
.dose-swipe-bg.missed-bg{background:#dc2626}
.dose-swipe-row.swiping .dose-swipe-bg{opacity:1}
.dose-swipe-content{position:relative;background:var(--surface);transition:transform .25s ease;z-index:1}
.dose-swipe-row.swiped .dose-swipe-content{transition:transform .3s ease}

/* ── 5. Camera button for food ────────────────────── */
.food-photo-btn{flex-shrink:0;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--border2);background:var(--surface2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative;overflow:hidden}
.food-photo-btn:hover{border-color:var(--brand);background:var(--brand-l)}
.food-photo-btn:active{transform:scale(.9)}
.food-photo-preview{position:absolute;inset:0;object-fit:cover;border-radius:10px}

/* ── 7. Mood sparkline on dashboard ───────────────── */
.mood-sparkline-wrap{margin:0 12px 8px;background:var(--surface);border-radius:var(--r3);padding:10px 14px;border:1px solid var(--border)}
.mood-sparkline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mood-sparkline-title{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.mood-sparkline-avg{font-size:11px;font-weight:600;color:var(--t2)}
.mood-sparkline{display:flex;align-items:flex-end;gap:3px;height:32px}
.mood-sparkline-bar{flex:1;border-radius:3px 3px 1px 1px;transition:height .35s cubic-bezier(.22,1,.36,1);min-width:6px}

/* ═══════════════════════════════════════════════════
   v0.7.1: Water, Streak, Bedtime, Expiry
   ═══════════════════════════════════════════════════ */

/* ── Water tracker widget ─────────────────────────── */
.water-widget{margin:0 12px 8px;background:var(--surface);border-radius:var(--r3);padding:12px 14px;display:flex;align-items:center;gap:12px}
.water-ring-wrap{position:relative;width:50px;height:50px;flex-shrink:0;cursor:pointer}
.water-ring-wrap svg{transform:rotate(-90deg)}
.water-ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;pointer-events:none}
.water-info{flex:1;min-width:0}
.water-title{font-size:12px;font-weight:700;color:var(--t1)}
.water-sub{font-size:11px;color:var(--t3);margin-top:1px}
.water-glasses{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.water-glass{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--border2);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s;padding:0}
.water-glass.filled{background:rgba(59,130,246,.15);border-color:#3B82F6;color:#3B82F6}
.water-glass:active{transform:scale(.85)}
.water-add-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--brand);background:transparent;color:var(--brand);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.water-add-btn:hover{background:var(--brand);color:#fff}
.water-add-btn:active{transform:scale(.9)}

/* ── Streak badge ─────────────────────────────────── */
.streak-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;cursor:default}
.streak-badge.active{background:rgba(249,115,22,.12);color:#EA580C;border:1px solid rgba(249,115,22,.25)}
.streak-badge.inactive{background:var(--surface2);color:var(--t4);border:1px solid var(--border)}

/* ── Bedtime dimmer overlay ───────────────────────── */
.bedtime-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px;animation:bedFadeIn .8s ease}
@keyframes bedFadeIn{from{opacity:0}to{opacity:1}}
.bedtime-card{background:linear-gradient(160deg,#0A1628,#0D2137);border-radius:24px;padding:32px 24px;max-width:320px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.bedtime-moon{font-size:48px;margin-bottom:12px}
.bedtime-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.bedtime-sub{font-size:13px;color:rgba(255,255,255,.5);line-height:1.5;margin-bottom:20px}
.bedtime-dismiss{padding:12px 32px;border-radius:12px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.7);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.bedtime-dismiss:hover{background:rgba(255,255,255,.1)}

/* ── Drug expiry warning ──────────────────────────── */
.expiry-warn{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;display:inline-flex;align-items:center;gap:3px}
.expiry-warn.soon{background:var(--yellow-b);color:var(--yellow);border:1px solid rgba(146,64,14,.2)}
.expiry-warn.expired{background:var(--red-b);color:var(--red);border:1px solid rgba(220,38,38,.2)}

/* ═══════════════════════════════════════════════════
   v0.8: 10 UI IMPROVEMENTS
   ═══════════════════════════════════════════════════ */

/* ── 2. Animated counters — CSS pulse on update ──── */
.counter-animating{animation:counterPop .3s ease}
@keyframes counterPop{0%{transform:scale(1)}50%{transform:scale(1.15);color:var(--brand)}100%{transform:scale(1)}}

/* ── 3. Floating Action Button (FAB) ────────────── */
.fab-wrap{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom, 0px));right:16px;z-index:500}
body.screen-drugs .fab-wrap,body.screen-pharmacy .fab-wrap,body.screen-profile .fab-wrap,body.screen-nutrition .fab-wrap{display:none!important}
.fab-btn{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;border:none;font-size:21px;cursor:pointer;box-shadow:0 4px 16px rgba(37,99,235,.35);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease}
.fab-btn:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(37,99,235,.45)}
.fab-btn:active{transform:scale(.92)}
.fab-btn.open{transform:rotate(45deg);background:#EF4444}
.fab-menu{position:absolute;bottom:60px;right:0;display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;transform:translateY(10px);transition:all .25s cubic-bezier(.4,0,.2,1)}
.fab-menu.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.fab-menu-item{display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:8px 14px 8px 10px;box-shadow:var(--shadow2);font-size:12px;font-weight:600;color:var(--t1);transition:all .15s}
.fab-menu-item:hover{background:var(--brand-l);border-color:var(--brand)}
.fab-menu-item:active{transform:scale(.95)}
.fab-menu-ico{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}

/* ── 4. Swipe between screens ───────────────────── */
.screens{position:relative;overflow:hidden}
.screen{transition:none}
.screen.slide-out-left{animation:slideOutLeft .15s ease forwards;position:absolute;inset:0}
.screen.slide-in-right{animation:slideInRight .15s ease forwards}
.screen.slide-out-right{animation:slideOutRight .15s ease forwards;position:absolute;inset:0}
.screen.slide-in-left{animation:slideInLeft .15s ease forwards}
@keyframes slideOutLeft{to{transform:translateX(-30%);opacity:.5}}
@keyframes slideInRight{from{transform:translateX(30%);opacity:.5}to{transform:translateX(0);opacity:1}}
@keyframes slideOutRight{to{transform:translateX(30%);opacity:.5}}
@keyframes slideInLeft{from{transform:translateX(-30%);opacity:.5}to{transform:translateX(0);opacity:1}}

/* ── 5. Mini Calendar Widget ────────────────────── */
.mini-cal{margin:0 12px 8px;background:var(--surface);border-radius:var(--r3);padding:10px 12px}
.mini-cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mini-cal-title{font-size:12px;font-weight:700;color:var(--t1)}
.mini-cal-nav{display:flex;gap:4px}
.mini-cal-nav button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--t3)}
.mini-cal-nav button:hover{background:var(--brand-l);color:var(--brand)}
.mini-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mini-cal-dow{font-size:8px;font-weight:700;color:var(--t4);text-transform:uppercase;padding:2px 0}
.mini-cal-day{width:100%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;cursor:pointer;transition:all .15s;border:1.5px solid transparent;color:var(--t2)}
.mini-cal-day:hover{background:var(--brand-l)}
.mini-cal-day.today{border-color:var(--brand);font-weight:700;color:var(--brand)}
.mini-cal-day.done{background:#16a34a;color:#fff;border-color:#16a34a}
.mini-cal-day.partial{background:#f59e0b;color:#fff;border-color:#f59e0b}
.mini-cal-day.missed{background:#ef4444;color:#fff;border-color:#ef4444}
.mini-cal-day.empty{color:var(--t4);opacity:.4;cursor:default}
.mini-cal-day.future{opacity:.5}
.mini-cal-summary{margin-top:8px;padding:8px 10px;background:var(--surface2);border-radius:var(--r2);font-size:11px;color:var(--t2);display:none}
.mini-cal-summary.show{display:block}

/* ── 6. Achievements ────────────────────────────── */
.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 12px 8px}
.achievement-card{background:var(--surface);border-radius:var(--r2);padding:10px 8px;text-align:center;border:1.5px solid var(--border);transition:all .2s}
.achievement-card.unlocked{border-color:var(--brand);background:var(--brand-l)}
.achievement-card.unlocked .ach-ico{animation:achBounce .5s ease}
@keyframes achBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ach-ico{font-size:24px;margin-bottom:4px}
.ach-title{font-size:9px;font-weight:700;color:var(--t1);text-transform:uppercase;letter-spacing:.03em;line-height:1.3}
.ach-sub{font-size:8px;color:var(--t3);margin-top:2px}
.achievement-card:not(.unlocked) .ach-ico{filter:grayscale(1);opacity:.4}
.achievement-card:not(.unlocked) .ach-title{color:var(--t4)}
.ach-progress{height:3px;background:var(--border);border-radius:2px;margin-top:4px;overflow:hidden}
.ach-progress-fill{height:100%;border-radius:2px;background:var(--brand);transition:width .5s ease}

/* Achievement celebration toast animation */
.toast.ach-celebrate{animation:achPop .5s ease;background:linear-gradient(135deg,#1D4ED8,#7C3AED);font-size:14px;font-weight:700;padding:12px 24px}
@keyframes achPop{0%{transform:translateX(-50%) scale(0.3);opacity:0}50%{transform:translateX(-50%) scale(1.15);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}

/* Chart touch tooltip for Canvas2D */
.chart-touch-tooltip{position:absolute;background:rgba(0,0,0,.85);color:#fff;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;pointer-events:none;z-index:100;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:opacity .15s;font-family:'DM Sans',system-ui,sans-serif}
.chart-touch-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(0,0,0,.85)}

/* ── 7. Comparison badges ───────────────────────── */
.cmp-badge{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px;vertical-align:middle}
.cmp-badge.up{background:rgba(22,163,74,.12);color:#16a34a}
.cmp-badge.down{background:rgba(239,68,68,.12);color:#ef4444}
.cmp-badge.same{background:var(--surface2);color:var(--t4)}

/* ── 8. Favorites row ───────────────────────────── */
.fav-row{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fav-row::-webkit-scrollbar{display:none}
.fav-chip{flex-shrink:0;display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--border);font-size:11px;font-weight:500;color:var(--t1);cursor:pointer;transition:all .15s;white-space:nowrap}
.fav-chip:hover{border-color:var(--brand);background:var(--brand-l)}
.fav-chip:active{transform:scale(.95)}
.fav-chip-ico{font-size:14px}
.fav-chip-remove{width:16px;height:16px;border-radius:50%;background:var(--border);color:var(--t3);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:2px;transition:all .15s}
.fav-chip-remove:hover{background:var(--red);color:#fff}

/* ── 10. Timeline view ──────────────────────────── */
.timeline-wrap{margin:0 12px 8px}
.timeline-item{display:flex;gap:10px;position:relative;padding-bottom:12px}
.timeline-item::before{content:'';position:absolute;left:15px;top:28px;bottom:0;width:2px;background:var(--border)}
.timeline-item:last-child::before{display:none}
.timeline-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;z-index:1}
.timeline-dot.drug{background:rgba(16,185,129,.12);border:1.5px solid #10B981}
.timeline-dot.food{background:rgba(249,115,22,.12);border:1.5px solid #F97316}
.timeline-dot.activity{background:rgba(59,130,246,.12);border:1.5px solid #3B82F6}
.timeline-dot.mood{background:rgba(168,85,247,.12);border:1.5px solid #A855F7}
.timeline-dot.weight{background:rgba(236,72,153,.12);border:1.5px solid #EC4899}
.timeline-dot.sleep{background:rgba(99,102,241,.12);border:1.5px solid #6366F1}
.timeline-dot.water{background:rgba(59,130,246,.12);border:1.5px solid #3B82F6}
.timeline-content{flex:1;min-width:0}
.timeline-time{font-size:10px;font-weight:600;color:var(--t3);font-family:'DM Mono',monospace}
.timeline-title{font-size:12px;font-weight:600;color:var(--t1);margin-top:1px}
.timeline-sub{font-size:10px;color:var(--t3);margin-top:1px}
.timeline-explain{display:grid;gap:3px;margin-bottom:12px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);font-size:10px;color:var(--t2)}.timeline-explain b{font-size:11px;color:var(--t1)}.timeline-source{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:999px;background:var(--surface2);font-size:8px;text-transform:capitalize}.timeline-edit{align-self:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--t2);padding:6px 8px;font-size:9px}.timeline-item.is-pending{opacity:.75}.timeline-empty{text-align:center;font-size:12px;color:var(--t3);padding:12px}
.timeline-toggle{display:flex;align-items:center;gap:6px;margin:0 12px 6px;cursor:pointer;font-size:11px;font-weight:600;color:var(--brand)}
[data-theme="dark"] .timeline-toggle{color:#fff}
.timeline-toggle:hover{text-decoration:underline}

/* ── PWA Install Banner ─────────────────────────── */
.pwa-install-banner{margin:0 12px 8px;background:linear-gradient(135deg,#1E40AF,#3B82F6);border-radius:var(--r3);padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;animation:pwaSlideIn .4s ease}
@keyframes pwaSlideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.pwa-install-banner:hover{filter:brightness(1.05)}
.pwa-install-ico{font-size:28px;flex-shrink:0}
.pwa-install-text{flex:1;min-width:0}
.pwa-install-title{font-size:12px;font-weight:700;color:#fff}
.pwa-install-sub{font-size:10px;color:rgba(255,255,255,.7);margin-top:2px}
.pwa-install-btn{padding:6px 14px;border-radius:20px;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:#fff;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit}
.pwa-install-btn:hover{background:rgba(255,255,255,.25)}
.pwa-install-close{color:rgba(255,255,255,.5);font-size:18px;cursor:pointer;padding:4px;line-height:1}

/* ════════════════════════════════════════════════════════════
   v0.9 — DRAGGABLE DASHBOARD, CUSTOM NAV, SWIPE, SEARCH
   ════════════════════════════════════════════════════════════ */

/* ── Dashboard Edit Mode ─────────────────────────────────── */
.dash-edit-btn{position:absolute;top:8px;right:12px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;font-family:'DM Sans',sans-serif;z-index:5;transition:all .15s}
.dash-edit-btn:hover{border-color:var(--brand);color:var(--brand)}
.dash-edit-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

.dash-grid.editing .dash-card{animation:wiggle .3s ease infinite alternate;cursor:grab;border:2px dashed var(--brand)}
.dash-grid.editing .dash-card:active{cursor:grabbing;opacity:.7}
.dash-grid.editing .dash-card .card-hide-btn{display:flex}
@keyframes wiggle{0%{transform:rotate(-.5deg)}100%{transform:rotate(.5deg)}}

.card-hide-btn{display:none;position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;border:none;font-size:12px;cursor:pointer;align-items:center;justify-content:center;z-index:5;line-height:1}
.dash-card.hidden-card{display:none}

/* Dashboard card restore panel */
.dash-restore-panel{display:none;margin:0 12px 8px;padding:10px 14px;background:var(--surface2);border:1px dashed var(--border2);border-radius:var(--r2);font-size:12px;color:var(--t3)}
.dash-restore-panel.show{display:block}
.restore-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;margin:4px 4px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:20px;font-size:11px;cursor:pointer;transition:all .15s}
.restore-chip:hover{border-color:var(--brand);color:var(--brand)}

/* ── Customizable Bottom Nav ──────────────────────────────── */
.nav-config-panel{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);padding:20px 16px calc(16px + env(safe-area-inset-bottom));z-index:9999;overflow-y:auto}
.nav-config-panel.open{display:block}
.nav-config-title{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.nav-config-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nav-config-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;border:2px solid var(--border);cursor:pointer;transition:all .15s;background:var(--surface)}
.nav-config-item.selected{border-color:var(--brand);background:var(--brand-l)}
.nav-config-item .nci-ico{font-size:20px}
.nav-config-item .nci-lbl{font-size:9px;font-weight:600;color:var(--t3);text-align:center}
.nav-config-item.selected .nci-lbl{color:var(--brand)}
.nav-config-sortable{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.nc-sort-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--brand-l);border:1.5px solid var(--brand);font-size:13px;color:var(--t1);cursor:grab;transition:transform .15s,box-shadow .15s;user-select:none;-webkit-user-select:none}
.nc-sort-item.nc-home{background:var(--surface);border-color:var(--border);cursor:default;opacity:.7}
.nc-handle{font-size:14px;color:var(--t3);width:28px;flex-shrink:0;cursor:grab;display:flex;align-items:center;justify-content:center}
.nc-sort-ico{font-size:18px;flex-shrink:0}
.nc-sort-lbl{flex:1;font-weight:600;font-size:12px}
.nc-remove{background:none;border:none;font-size:18px;color:var(--danger,#ef4444);cursor:pointer;padding:10px 12px;border-radius:8px;font-weight:700;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.nc-remove:hover{background:rgba(239,68,68,.1)}
.nc-drag-clone{border-radius:10px;background:var(--brand-l);border:1.5px solid var(--brand)}
.nav-more-menu{position:absolute;bottom:100%;right:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow2);padding:6px 0;z-index:200;min-width:160px;display:none}
.nav-more-menu.open{display:block}
.nav-more-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--t1);cursor:pointer;transition:background .1s;font-family:'DM Sans',sans-serif;border:none;background:none;width:100%;text-align:left}
.nav-more-item:hover{background:var(--surface2)}
.nav-more-item .nmi-ico{font-size:16px}

/* ── Streak Cards on Home ─────────────────────────────────── */
.streak-cards{display:flex;gap:6px;margin:0 12px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.streak-cards::-webkit-scrollbar{display:none}
.streak-card{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:10px 14px;min-width:140px;display:flex;align-items:center;gap:10px;transition:transform .15s}
.streak-card:active{transform:scale(.97)}
.streak-card-ico{font-size:22px}
.streak-card-num{font-size:20px;font-weight:800;color:var(--t1);font-family:'DM Mono',monospace}
.streak-card-lbl{font-size:10px;color:var(--t3);line-height:1.3}
.streak-card.gold{border-color:#F59E0B;background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02))}

/* ── Universal Search ─────────────────────────────────────── */
.universal-search-wrap{margin:0 12px 8px;position:relative;z-index:50}
.universal-search-input{width:100%;padding:10px 14px 10px 36px;border:1.5px solid var(--border);border-radius:var(--r2);font-size:16px;font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--t1);outline:none;transition:all .15s}
.universal-search-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.universal-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;color:var(--t4)}
.universal-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:16px;color:var(--t4);cursor:pointer;display:none;padding:2px}
.universal-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow2);max-height:320px;overflow-y:auto;display:none;z-index:100}
.universal-search-results.open{display:block}
.usr-section{padding:6px 0}
.usr-section-title{font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.06em;padding:4px 14px}
.usr-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s}
.usr-item:hover{background:var(--surface2)}
.usr-item-ico{font-size:18px;flex-shrink:0}
.usr-item-name{font-size:13px;font-weight:500;color:var(--t1)}
.usr-item-sub{font-size:10px;color:var(--t3);margin-top:1px}

/* ── Period Toggle (for charts) ───────────────────────────── */
.period-toggle{display:flex;gap:2px;background:var(--surface2);border-radius:var(--r);padding:2px;margin:8px 12px 4px}
.period-btn{flex:1;padding:6px 2px;border:none;border-radius:6px;font-size:10px;font-weight:600;color:var(--t3);background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;text-align:center;white-space:nowrap}
.period-btn.active{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Vitals info box */
.vitals-info-box{margin:8px 12px;border-radius:12px;background:var(--brand-l);border:1px solid rgba(59,130,246,.2);overflow:hidden}
.vib-toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--brand)}
.vib-arrow{font-size:10px;transition:transform .2s}
.vib-arrow.open{transform:rotate(180deg)}
.vib-content{padding:0 14px 12px}
.vib-item{font-size:12px;color:var(--t2);margin-bottom:8px;line-height:1.5}
.vib-item:last-child{margin-bottom:0}
.vib-item b{color:var(--t1);font-size:12px}

/* Trend arrow */
.trend-arrow{display:inline-flex;align-items:center;font-size:11px;font-weight:700;margin-left:4px}
.trend-arrow.up{color:#15803D}
.trend-arrow.down{color:#DC2626}
.trend-arrow.flat{color:var(--t4)}

/* ── Frequent/Recent Foods ────────────────────────────────── */
.food-tabs{display:flex;gap:2px;margin:0 0 8px;background:var(--surface2);border-radius:var(--r);padding:2px}
.food-tab{flex:1;padding:6px 8px;border:none;border-radius:6px;font-size:11px;font-weight:600;color:var(--t3);background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;text-align:center}
.food-tab.active{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.freq-food-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface2);border-radius:var(--r);cursor:pointer;transition:background .15s;margin-bottom:4px}
.freq-food-item:hover{background:var(--border)}
.freq-food-count{font-size:9px;color:var(--t4);background:var(--surface);border-radius:10px;padding:2px 6px;font-weight:600}

/* ── Collapsible sections ─────────────────────────────────── */
.collapsible-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 14px;transition:background .1s}
.collapsible-header:hover{background:var(--surface2)}
.collapsible-arrow{font-size:12px;color:var(--t4);transition:transform .2s;flex-shrink:0}
.collapsible-body{overflow:hidden;transition:max-height .3s ease,opacity .2s ease}
.collapsible-body.collapsed{max-height:0 !important;opacity:0;overflow:hidden}
.collapsible-body.expanded{opacity:1}

/* ── Empty States ────────────────────────────── */
.empty-state{text-align:center;padding:32px 16px}
.empty-state-ico{font-size:48px;margin-bottom:8px;opacity:.6}
.empty-state-txt{font-size:14px;font-weight:600;color:var(--t2);margin-bottom:4px}
.empty-state-sub{font-size:12px;color:var(--t3)}

/* ── History rows ────────────────────────────── */
.hist-row{padding:10px 12px;border-bottom:1px solid var(--border)}
.hist-row:last-child{border-bottom:none}
.hist-main{font-size:13px;color:var(--t1)}
.hist-sub{font-size:11px;color:var(--t3);margin-top:2px}

/* ── Symptom severity buttons ────────────────── */
.sym-sev-btn{min-width:36px;min-height:36px;border-radius:8px;font-weight:700;font-size:13px;border:2px solid var(--border);background:var(--surface);color:var(--t2);cursor:pointer;transition:all .15s}
.sym-sev-btn.active{border-color:var(--brand);background:var(--brand);color:#fff}

/* ── Onboarding (legacy, unused) ──────────────── */

/* ── High contrast / colorblind mode ─────────── */
[data-a11y="high-contrast"] .chip-red,.chip-red.hc{background:repeating-linear-gradient(45deg,#fecaca,#fecaca 3px,#fca5a5 3px,#fca5a5 6px) !important}
[data-a11y="high-contrast"] .chip-green,.chip-green.hc{background:repeating-linear-gradient(0deg,#bbf7d0,#bbf7d0 3px,#86efac 3px,#86efac 6px) !important}
[data-a11y="high-contrast"] .chip-yellow,.chip-yellow.hc{background:repeating-linear-gradient(-45deg,#fef08a,#fef08a 3px,#fde047 3px,#fde047 6px) !important}

/* ── Weekly Summary Card ─────────────────────── */
.weekly-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;text-align:center}
.weekly-stat-item{padding:8px 4px;border-radius:8px;background:var(--surface-alt,rgba(0,0,0,.03))}
.weekly-stat-ico{font-size:20px;margin-bottom:2px}
.weekly-stat-val{font-size:16px;font-weight:700;color:var(--t1)}
.weekly-stat-lbl{font-size:10px;color:var(--t3);margin-top:2px}
.weekly-stat-change{font-size:11px;font-weight:600;margin-top:2px}

/* ── Traffic Light Dashboard ─────────────────── */
.tl-card{background:var(--surface);border-radius:10px;padding:10px 8px;text-align:center;border:1px solid var(--border);position:relative}
.tl-dot{width:12px;height:12px;border-radius:50%;margin:0 auto 6px;box-shadow:0 0 6px rgba(0,0,0,.15)}
.tl-dot-green{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.4)}
.tl-dot-yellow{background:#eab308;box-shadow:0 0 8px rgba(234,179,8,.4)}
.tl-dot-red{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.4)}
.tl-label{font-size:11px;font-weight:600;color:var(--t2)}
.tl-value{font-size:15px;font-weight:700;color:var(--t1);margin:2px 0}
.tl-status{font-size:10px;color:var(--t3)}
.tl-green{border-color:rgba(34,197,94,.25)}
.tl-yellow{border-color:rgba(234,179,8,.25)}
.tl-red{border-color:rgba(239,68,68,.25)}

/* ── AI Food Recognition ──────────────────────── */
.food-ai-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;margin:0 auto;animation:foodAiSpin 0.8s linear infinite}
@keyframes foodAiSpin{to{transform:rotate(360deg)}}

/* v2.59.5 — the scan result is the hero of this sheet: green eyebrow, the food
   name, one big kcal number with the (tappable) amount beside it, and a
   full-bleed macro strip. Old class names kept so nutrition.js selectors, the
   premium blur teaser and the checkbox wiring all keep working. */
#food-ai-modal{--fai-green:#0B8A5B}
[data-theme="dark"] #food-ai-modal,
[data-theme="sky"][data-tod="evening"] #food-ai-modal,
[data-theme="sky"][data-tod="night"] #food-ai-modal{--fai-green:#34D399}
@media(prefers-color-scheme:dark){
  html:not([data-theme-manual])[data-theme="light"] #food-ai-modal,
  html[data-theme="auto"] #food-ai-modal{--fai-green:#34D399}
}
/* v2.63.31 — the generic .modal sheet only gets overflow-y:auto in landscape,
   so in portrait 3+ scan cards (or macro strips that wrap to two rows) spill
   past max-height:88% and the Add button lands below the viewport —
   unreachable. Scoped to this modal only. */
#food-ai-modal .modal{overflow-y:auto;overscroll-behavior:contain}
.food-ai-hero-hint{font-size:12px;color:var(--t3);line-height:1.45;margin:0 2px 10px}
.food-ai-item{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:0;margin-bottom:12px;overflow:hidden;transition:opacity .2s}
.food-ai-item.fai-off{opacity:.42}
.fai-body{padding:14px 16px 13px}
.food-ai-item-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:15px}
.fai-eyebrow{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--fai-green);line-height:1.35;min-width:0}
.food-ai-check{display:flex;align-items:center;cursor:pointer;flex-shrink:0;padding:2px}
.food-ai-check input[type="checkbox"]{width:20px;height:20px;accent-color:var(--brand);cursor:pointer;margin:0;flex-shrink:0}
.food-ai-item.fai-solo .food-ai-check{display:none}
.food-ai-name{font-size:19px;font-weight:800;color:var(--t1);line-height:1.25;letter-spacing:-.01em;margin:3px 0 7px;overflow-wrap:anywhere}
.fai-hero{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px}
.food-ai-cal{font-size:40px;font-weight:800;color:var(--brand);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fai-unit{font-size:15px;font-weight:700;color:var(--t2);white-space:nowrap}
.fai-dot{font-size:15px;font-weight:700;color:var(--t3);opacity:.6}
/* "How many" — count pill by the name + a per-unit breakdown row under the hero. */
.fai-count{display:inline-block;margin-left:8px;font-size:13px;font-weight:800;color:var(--brand);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:1px 9px;vertical-align:middle;letter-spacing:0;font-variant-numeric:tabular-nums}
.fai-count-row{margin-top:5px;font-size:13px;font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums}
.food-ai-macros{display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;font-size:13px;color:var(--t3);padding:11px 16px;background:var(--surface2);border-top:1px solid var(--border)}
.fai-m{white-space:nowrap}
.fai-m b{font-weight:800;color:var(--t2);font-variant-numeric:tabular-nums}
.fai-msep{color:var(--t3);opacity:.6}
.food-ai-weight{border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);color:var(--t1);padding:4px 8px;font-family:inherit;align-self:center}
.food-ai-weight-chip{border:0;border-bottom:1px dashed var(--border2);border-radius:0;background:none;color:var(--t2);font-weight:700;font-size:15px;padding:1px 0 2px;cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums}
.food-ai-weight-chip::after{content:"\2009\270E";font-size:.8em;color:var(--t3);opacity:.85}
.food-ai-weight-chip:active{opacity:.6}
/* More than one food in the shot: same card, dialled back so the sheet still scrolls sanely. */
.food-ai-item.fai-multi .food-ai-name{font-size:17px}
.food-ai-item.fai-multi .food-ai-cal{font-size:31px}

/* ── Drug Diary ──────────────────────────────── */
.drug-cal-day{display:flex;flex-direction:column;align-items:center;min-width:42px;padding:6px 4px;border-radius:12px;cursor:pointer;transition:background .2s,transform .15s;user-select:none}
.drug-cal-day:active{transform:scale(.93)}
.drug-cal-day .day-label{font-size:10px;color:var(--t3);font-weight:500;text-transform:uppercase}
.drug-cal-day .day-num{font-size:16px;font-weight:700;color:var(--t1);margin:2px 0}
.drug-cal-day .day-dots{display:flex;gap:2px;height:6px}
.drug-cal-day .day-dot{width:5px;height:5px;border-radius:50%}
.drug-cal-day.active{background:var(--brand);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.drug-cal-day.active .day-label,.drug-cal-day.active .day-num{color:#fff}
.drug-cal-day.today:not(.active){background:var(--surface2)}

.drug-dose-card{background:var(--surface);border-radius:var(--r2);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:opacity .2s}
.drug-dose-card.taken{opacity:.55}
.drug-dose-card .dose-icon{font-size:22px;flex-shrink:0}
.drug-dose-card .dose-info{flex:1;min-width:0}
.drug-dose-card .dose-name{font-size:14px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drug-dose-card .dose-detail{font-size:11px;color:var(--t3);margin-top:2px}
.drug-dose-card .dose-actions{display:flex;gap:6px;flex-shrink:0}
.drug-dose-card .dose-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .2s}
.drug-dose-card .dose-btn:active{transform:scale(.9)}
.drug-dose-card .dose-btn.done{background:#DCFCE7;border-color:#22C55E;color:#15803D}
.drug-dose-card .dose-btn.skip{background:#FEF2F2;border-color:#EF4444;color:#DC2626}
.drug-dose-card.missed{opacity:.6}
.drug-dose-card.skipped{opacity:.55}
.dose-status-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:12px;white-space:nowrap;flex-shrink:0}
.dose-status-badge.taken{background:#DCFCE7;color:#15803D}
.dose-status-badge.skipped{background:#FEF9C3;color:#A16207}
.dose-status-badge.missed{background:#FEF2F2;color:#DC2626}

/* ── Drug category badges ──────────────────────────── */
.drug-cat-badge{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:8px;white-space:nowrap;vertical-align:middle;margin-left:2px}
.drug-cat-badge.rx{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}
.drug-cat-badge.otc{background:#F0FDF4;color:#15803D;border:1px solid #BBF7D0}
.drug-cat-badge.suppl{background:#FFFBEB;color:#A16207;border:1px solid #FDE68A}
.drug-dose-card.cat-prescription{border-left:3px solid #EF4444}
.drug-dose-card.cat-otc{border-left:3px solid #22C55E}
.drug-dose-card.cat-supplement{border-left:3px solid #F59E0B}

/* ── Weekly Overview Grid ──────────────────────────── */
.week-overview-card{background:var(--surface);border-radius:var(--r3);padding:10px 12px;overflow-x:auto}
.wo-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);padding:6px 0}
.wo-row:last-child{border-bottom:none}
.wo-row.wo-header{border-bottom:2px solid var(--border);padding-bottom:8px}
.wo-drug-name{flex:0 0 100px;font-size:12px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.wo-dose{font-weight:400;color:var(--t3);font-size:10px}
.wo-day,.wo-cell{flex:1;text-align:center;min-width:32px}
.wo-day{display:flex;flex-direction:column;align-items:center;gap:1px}
.wo-day-label{font-size:10px;color:var(--t3);text-transform:uppercase}
.wo-day-num{font-size:12px;font-weight:700;color:var(--t2)}
.wo-day.today .wo-day-label{color:var(--primary);font-weight:700}
.wo-day.today .wo-day-num{color:var(--primary);background:rgba(37,99,235,.1);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.wo-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700}
.wo-dot.taken{background:#DCFCE7;color:#15803D}
.wo-dot.missed{background:#FEF2F2;color:#DC2626}
.wo-dot.skipped{background:#FEF9C3;color:#A16207}
.wo-dot.pending{background:rgba(0,0,0,.05);color:var(--t3)}
.wo-dot.future{background:transparent;color:var(--t4)}
.wo-dot.not-sched{background:transparent;color:var(--t4);font-size:10px}
.day-check{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--border);font-size:13px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
.day-check input{display:none}
.day-check:has(input:checked){background:var(--brand);color:#fff;border-color:var(--brand)}
.wo-legend{display:flex;gap:12px;justify-content:center;padding:8px 0 2px;flex-wrap:wrap}
.wo-legend span{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--t3)}
.wo-legend .wo-dot{width:16px;height:16px;font-size:9px}

.drug-sched-header{font-size:12px;font-weight:700;color:var(--t2);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.drug-sched-header .sched-ico{font-size:14px}

.drug-add-wrap{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom, 0px));right:16px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.drug-add-btn{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;border:none;font-size:28px;font-weight:300;cursor:pointer;box-shadow:0 4px 14px rgba(37,99,235,.35);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.drug-add-btn:active{transform:scale(.9)}
.drug-add-btn.open{background:#EF4444;transform:rotate(45deg)}
.drug-add-menu{display:none;flex-direction:column;gap:6px;align-items:flex-end}
.drug-add-menu.show{display:flex;animation:drugMenuIn .2s ease}
@keyframes drugMenuIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.drug-add-item{background:var(--surface);border-radius:24px;padding:10px 16px;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);cursor:pointer;font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;transition:transform .15s}
.drug-add-item:active{transform:scale(.95)}

/* Drug AI results */
.drug-ai-item{background:var(--surface2);border-radius:var(--r2);padding:12px;margin-bottom:8px;transition:opacity .2s}
.drug-ai-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.drug-ai-check{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:0}
.drug-ai-check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.drug-ai-name{font-size:14px;font-weight:600;color:var(--t1)}
.drug-ai-detail{font-size:11px;color:var(--t3);margin-bottom:4px}
.drug-ai-notes{font-size:11px;color:var(--t2);font-style:italic;background:var(--surface);padding:6px 8px;border-radius:var(--r);margin-top:4px;line-height:1.4}

/* ── Fasting Tracker ─────────────────────────────────────── */
#fasting-start-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;backdrop-filter:blur(4px);animation:fadeIn .2s ease}
#fasting-start-modal .modal-box{background:var(--surface);border-radius:16px;padding:20px;max-width:380px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:scaleIn .25s ease}
@keyframes scaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.fast-phase{display:flex;flex-direction:column;align-items:center;gap:2px;transition:opacity .3s}
.fast-phase-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}
.fast-phase span{white-space:nowrap}

/* Fasting plan cards in modal */
#fasting-plans-list .card{transition:border-color .15s,transform .15s,background .15s}
#fasting-plans-list .card:hover{border-color:var(--brand);transform:scale(1.02)}
#fasting-plans-list .card:active{transform:scale(.97)}

/* Fasting v2 — Ring, Timer, Cards, Calendar, Badges */
.fast-ring-wrap{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:center}
.fast-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.fast-ring-progress{transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1s ease}
.fast-timer-digits{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1px;color:var(--t1)}
.fast-remaining{font-size:12px;font-weight:600;margin-top:2px}
.fast-goal-done{font-size:14px;font-weight:700;color:#22c55e;margin-top:4px}
.fast-start-btn{width:100%;max-width:280px;margin:16px auto 0;display:block;font-size:15px;font-weight:700;padding:12px 0;border-radius:12px}

/* History cards */
.fast-history-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;transition:transform .15s}
.fast-history-card:active{transform:scale(.98)}
.fast-hist-top{display:flex;align-items:center;gap:10px}
.fast-hist-phase{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fast-hist-info{flex:1;min-width:0}
.fast-hist-title{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fast-hist-date{font-size:11px;color:var(--t3)}
.fast-hist-dur{text-align:right;flex-shrink:0}
.fast-hist-bar-bg{height:4px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden}
.fast-hist-bar-fill{height:100%;border-radius:2px;transition:width .5s ease}

/* Calendar */
.fast-cal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;margin-bottom:4px}
.fast-cal-nav{background:none;border:none;font-size:20px;cursor:pointer;padding:4px 10px;color:var(--t1);border-radius:8px}
.fast-cal-nav:hover{background:var(--surface2)}
.fast-cal-title{font-size:15px;font-weight:700;color:var(--t1)}
.fast-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.fast-cal-day-hdr{text-align:center;font-size:10px;font-weight:700;color:var(--t3);padding:4px 0;text-transform:uppercase}
.fast-cal-day{text-align:center;padding:6px 2px;border-radius:8px;font-size:12px;color:var(--t2);position:relative;border:1.5px solid transparent;cursor:default;min-height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.fast-cal-done{font-weight:700;color:var(--t1);cursor:pointer}
.fast-cal-partial{cursor:pointer}
.fast-cal-today{font-weight:800;border-color:var(--brand)!important}
.fast-cal-dot{width:5px;height:5px;border-radius:50%}

/* Badges */
.fast-badge{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;text-align:center;transition:transform .15s}
.fast-badge:active{transform:scale(.95)}
.fast-badge.earned{background:var(--surface2)}
.fast-badge.locked{opacity:.35;filter:grayscale(1)}
.fast-badge-icon{font-size:28px}
.fast-badge-name{font-size:10px;font-weight:600;color:var(--t2);line-height:1.2}

/* Quick restart + plan card */
.fast-quick-restart{background:var(--surface2);border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);transition:background .15s}
.fast-quick-restart:hover{background:var(--border)}
.fast-plan-card{cursor:pointer;text-align:center;padding:14px 8px!important;border:2px solid transparent!important;transition:border-color .15s,transform .15s}
.fast-plan-card:hover{border-color:var(--brand)!important;transform:scale(1.02)}
/* v2.17.42: was background:var(--brand-light,...) — but --brand-light is never
   defined (the app-wide token is --brand-l), so it fell back to a fixed 8%-opacity
   tint that isn't theme-aware and was too faint to tell which plan was picked.
   Use the theme-aware --brand-l fill (matches .ac-item/.nav-config-item selected
   states) plus a bold brand ring so the selection is unmistakable in every theme;
   the card's inline text colors (--t1/--t3) keep good contrast on --brand-l. */
.fast-plan-card.selected{border-color:var(--brand)!important;background:var(--brand-l)!important;box-shadow:0 0 0 2px var(--brand),0 4px 12px rgba(37,99,235,.28)!important}
.fast-popular-badge{font-size:9px;font-weight:700;background:#f97316;color:#fff;padding:2px 8px;border-radius:6px;margin-bottom:4px;display:inline-block}

/* Ring pulse animation for home widget */
@keyframes fastRingPulse{0%,100%{opacity:1}50%{opacity:.6}}
.fast-ring-pulse{animation:fastRingPulse 2s ease-in-out infinite}

/* ── Fasting milestone motivational banner ─────────────────── */
.fast-ms-banner {
  display:none; align-items:center; gap:12px;
  margin:0 12px 4px; padding:14px 16px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--ms-color,#f97316) 35%, transparent);
  background:color-mix(in srgb, var(--ms-color,#f97316) 10%, transparent);
  cursor:pointer; user-select:none;
  animation:fastMsIn .45s cubic-bezier(.22,.68,0,1.2) forwards;
}
.fast-ms-banner.visible { display:flex; }
@keyframes fastMsIn {
  from { transform:translateY(-10px) scale(.97); opacity:0; }
  to   { transform:translateY(0)    scale(1);   opacity:1; }
}
.fast-ms-emoji { font-size:26px; flex-shrink:0; }
.fast-ms-text  { flex:1; font-size:14px; font-weight:500; color:var(--t1); line-height:1.4; }
.fast-ms-close { font-size:14px; color:var(--t3); flex-shrink:0; padding:2px 4px; }

/* ── AI Coach Result Cards ─────────────────────────────────── */
.ai-result-card{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;overflow:hidden;animation:fadeIn .3s ease}
.ai-result-card .spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wide-btn.ai-loading{opacity:1;pointer-events:none;position:relative;overflow:hidden}
.ai-progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(0,0,0,0.1);border-radius:0 0 8px 8px}
.ai-progress-fill{height:100%;width:30%;background:var(--brand,#2563EB);border-radius:0 0 8px 8px;animation:aiProgress 8s ease-out forwards}
@keyframes aiProgress{0%{width:0%}30%{width:40%}60%{width:65%}80%{width:80%}100%{width:95%}}
@keyframes aiMealProgress{0%{width:0%}25%{width:35%}50%{width:60%}75%{width:80%}100%{width:95%}}

/* ── Offline banner ─────────────────────────────────────────── */
#offline-banner{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:10px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;border-radius:0 0 12px 12px;margin:0 0 8px;box-shadow:0 2px 8px rgba(217,119,6,0.3);z-index:50;position:sticky;top:0}
#offline-banner span:first-child{font-size:18px}

/* ── More menu (bottom nav ⋯ button) ────────────────────────── */
.more-menu{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .18s ease}
.more-menu-panel{background:var(--surface);width:100%;max-width:500px;border-radius:16px 16px 0 0;padding:12px 8px 24px;box-shadow:0 -4px 24px rgba(0,0,0,.25);animation:slideUp .2s ease;position:relative}
/* Top-right close on bottom sheets (paywall, ⋯ menu, etc.) */
.modal-close-top{
  position:absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 5;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface2, rgba(0,0,0,.06));
  color: var(--t2, #64748b);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.modal-close-top:active{transform:scale(.94);opacity:.85}
.modal-close-top:hover{background:var(--border, rgba(0,0,0,.1));color:var(--t1)}
#premium-paywall-modal .modal,
.prem-paywall-sheet{
  position: relative;
}
#premium-paywall-modal .modal-close-top{
  top: 10px;
  right: 12px;
}
.more-menu-close{
  top: 10px;
  right: 12px;
}
#profile-edit-modal .mfm-sheet,
#profile-edit-modal .modal{
  position: relative;
}
#profile-edit-modal .modal-close-top{
  top: 10px;
  right: 12px;
}
#profile-edit-modal .modal-title{
  padding-right: 44px; /* room for top-right ✕ */
}

/* Room so the X does not cover the handle / first row */
.more-menu-panel{padding-top: 16px}
#premium-paywall-modal .modal-handle{
  margin-top: 4px;
}
.more-menu-panel::before{content:'';display:block;width:40px;height:4px;background:var(--border);border-radius:2px;margin:4px auto 12px}
.more-menu-item{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:44px;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--t1);cursor:pointer;border-radius:10px;transition:background .12s}
.more-menu-item:last-child{margin-bottom:0}
a.more-menu-item{display:flex;align-items:center;gap:inherit;width:100%;box-sizing:border-box;cursor:pointer}
a.more-menu-item:hover{text-decoration:none}
.more-menu-item-admin .mmi-title{color:var(--brand,#2563eb)}

.more-menu-item:active,.more-menu-item:hover{background:var(--brand-l)}
/* v2.14.43: title + subtitle layout */
.more-menu-item .mmi-ico{font-size:20px;flex-shrink:0;line-height:1}
.more-menu-item .mmi-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.more-menu-item .mmi-title{font-size:14px;font-weight:600;color:var(--t1);line-height:1.2}
.more-menu-item .mmi-sub{font-size:11px;font-weight:400;color:var(--t3);line-height:1.3}
.more-menu-divider{height:1px;background:var(--border);margin:8px 12px}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Welcome tour (5-step yellow tooltip card) ──────────────── */
.welcome-tour{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:calc(56px + env(safe-area-inset-top)) 16px 16px;animation:wtFadeIn .25s ease}
.welcome-tour-card{background:linear-gradient(135deg,#FDE68A 0%,#FBBF24 100%);color:#1F2937;border-radius:16px;padding:18px 18px 16px;box-shadow:0 16px 48px rgba(245,158,11,.4),0 4px 16px rgba(0,0,0,.2);max-width:360px;width:100%;position:relative;animation:wtSlideIn .3s cubic-bezier(.34,1.56,.64,1);border:1px solid rgba(255,255,255,.6)}
.welcome-tour-card::before{content:'';position:absolute;top:-10px;left:40px;width:20px;height:20px;background:#FDE68A;transform:rotate(45deg);border-top:1px solid rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.6)}
.welcome-tour-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.welcome-tour-badge{background:#D97706;color:#fff;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.welcome-tour-skip{background:rgba(255,255,255,.4);color:#92400E;border:none;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.welcome-tour-skip:hover{background:rgba(255,255,255,.7)}
.welcome-tour-icon{font-size:40px;text-align:center;margin:4px 0 6px}
.welcome-tour-title{font-size:16px;font-weight:800;text-align:center;margin-bottom:6px;color:#1F2937}
.welcome-tour-body{font-size:13px;line-height:1.5;color:#374151;text-align:center;margin-bottom:14px}
.welcome-tour-dots{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.welcome-tour-dot{width:7px;height:7px;border-radius:50%;background:rgba(31,41,55,.25);transition:all .2s}
.welcome-tour-dot.active{background:#1F2937;transform:scale(1.3)}
.welcome-tour-btn{width:100%;padding:12px;background:#1F2937;color:#FBBF24;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(31,41,55,.3)}
.welcome-tour-btn:hover{background:#374151;transform:translateY(-1px)}
.welcome-tour-btn:active{transform:translateY(0)}
.welcome-tour-btn-final{background:#059669;color:#fff}
.welcome-tour-btn-final:hover{background:#047857}
.welcome-tour-exit{animation:wtFadeOut .22s ease forwards}
.welcome-tour-exit .welcome-tour-card{animation:wtSlideOut .22s ease forwards}
@keyframes wtFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wtFadeOut{from{opacity:1}to{opacity:0}}
@keyframes wtSlideIn{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wtSlideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-8px);opacity:0}}

/* ── Avatar picker preview + confirm footer ─────────────────── */
.avatar-picker-footer{position:sticky;bottom:-16px;margin:12px -16px -16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;z-index:2}
.avatar-picker-preview{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.avatar-preview-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;background:var(--border);box-shadow:0 2px 8px rgba(0,0,0,.15);transition:background .2s}
.avatar-preview-text{font-size:11px;color:var(--t3);line-height:1.4;flex:1;min-width:0}
.avatar-picker-actions{display:flex;gap:8px;flex-shrink:0}
.avatar-picker-actions .btn{padding:10px 14px;font-size:13px;min-width:0}
.avatar-picker-actions .btn-primary:disabled{opacity:.45;cursor:not-allowed}
/* Make content scroll while footer stays visible */
.avatar-picker-content{display:flex;flex-direction:column}
.avatar-picker-grid{flex:1;min-height:0}

/* ═══════════════════════════════════════════════════════════
   Phone Shell Preview (v2.3.4 round 4)
   Full-screen modal that renders current app inside a simulated
   device bezel. iframe-based so theme/lang changes don't leak.
   ═══════════════════════════════════════════════════════════ */
.pp-overlay{position:fixed;inset:0;background:rgba(15,24,39,.92);z-index:9999;display:none;flex-direction:column;backdrop-filter:blur(8px)}
.pp-overlay.open{display:flex}
.pp-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,.35);color:#F0F4FF;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap;gap:8px}
.pp-toolbar-left,.pp-toolbar-center,.pp-toolbar-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pp-title{font-size:14px;font-weight:700;color:#F0F4FF;letter-spacing:-.01em}
.pp-sub{font-size:11px;color:rgba(240,244,255,.6);margin-left:8px}
.pp-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#F0F4FF;font:inherit;font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pp-btn:hover{background:rgba(255,255,255,.14)}
.pp-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pp-btn-close{background:rgba(220,38,38,.8);border-color:transparent;color:#fff;font-size:14px;width:32px;height:32px;padding:0;border-radius:50%;justify-content:center}
.pp-btn-close:hover{background:#DC2626}
.pp-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px;min-height:0}
.pp-device{position:relative;background:#181C2B;border-radius:44px;padding:12px;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07) inset;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.pp-device.portrait{width:var(--pp-w,390px);height:var(--pp-h,844px)}
.pp-device.landscape{width:var(--pp-h,844px);height:var(--pp-w,390px)}
.pp-device-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#0a0a0a;border-radius:0 0 16px 16px;z-index:10;display:flex;align-items:center;justify-content:center;gap:6px}
.pp-device-notch::before{content:'';width:8px;height:8px;border-radius:50%;background:#1C2233;box-shadow:inset 0 0 2px rgba(0,0,0,.6)}
.pp-device.pp-punch .pp-device-notch{width:12px;height:12px;border-radius:50%;top:18px;left:50%;transform:translateX(-50%)}
.pp-device.pp-punch .pp-device-notch::before{width:6px;height:6px}
.pp-device.pp-no-notch .pp-device-notch{display:none}
.pp-screen{width:100%;height:100%;background:var(--surface);border-radius:36px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.pp-device.pp-punch .pp-screen,.pp-device.pp-no-notch .pp-screen{border-radius:22px}
.pp-statusbar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:11px;font-weight:600;color:var(--t1);font-family:'DM Mono',monospace;flex-shrink:0;background:var(--surface);z-index:5}
.pp-sb-right{display:flex;align-items:center;gap:5px}
.pp-sb-signal,.pp-sb-battery{display:inline-flex;align-items:center}
.pp-sb-battery{position:relative;width:22px;height:11px;border:1px solid var(--t1);border-radius:3px;padding:1px}
.pp-sb-battery::after{content:'';position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--t1);border-radius:0 1px 1px 0}
.pp-sb-battery::before{content:'';display:block;width:100%;height:100%;background:var(--t1);border-radius:1px}
.pp-sb-signal svg{width:14px;height:10px;fill:var(--t1)}
.pp-iframe{flex:1;width:100%;border:0;background:var(--surface);min-height:0}
.pp-hint{text-align:center;color:rgba(240,244,255,.55);font-size:11px;padding:8px 16px 14px;flex-shrink:0}
.pp-device-select{display:flex;gap:4px;flex-wrap:wrap}
.pp-device-select .pp-btn{font-size:11px;padding:5px 10px}
@media (max-width:640px){
  .pp-toolbar{padding:8px;gap:4px;flex-direction:column;align-items:stretch}
  .pp-toolbar-left,.pp-toolbar-center,.pp-toolbar-right{justify-content:center}
  .pp-device{transform:scale(.7);transform-origin:top center;margin-bottom:-30%}
  .pp-stage{padding:8px;overflow-x:hidden;overflow-y:auto}
  .pp-title{display:none}
  .pp-sub{display:none}
}
/* Short viewport (landscape phones): scale device to fit height, allow scroll */
@media (max-height:600px){
  .pp-device{transform:scale(.45);transform-origin:top center;margin-bottom:-55%}
  .pp-stage{padding:4px;overflow:auto}
  .pp-toolbar{padding:6px 12px}
  .pp-hint{display:none}
}
/* When iframe is rendering inside preview, hide its own header/nav-bars */
body.in-preview .page-header,body.in-preview .phone-wrap{padding:0!important}
body.in-preview .phone-shell{width:100%!important}
body.in-preview .phone-frame{background:transparent!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
body.in-preview .phone-inner{height:100%!important;border-radius:0!important}
body.in-preview .notch,body.in-preview .statusbar{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   MEDITATION MODULE v2.4.0
   UI #1 pulseeriv hingamis-ring · #2 enso-joonega glüüf
   UI #3 öötaeva kaart · #4 kuu-faas progress · #5 hõljuvad osakesed
   UI #6 live audio-laine · #7 värvi-hingav pill · #8 jooga-figuur + aura
   UI #9 SOS chip · #10 virtuaalne kaaslane
   ═══════════════════════════════════════════════════════════════ */

/* UI #3: öötaeva taust (night-sky gradient + stars + bokeh) */
#sc-meditation { background: linear-gradient(180deg, #0f1631 0%, #1a2454 50%, #2d3577 100%); color:#eaecf4; position:relative; }
#sc-meditation .screen-title, #sc-meditation .screen-sub { color:#eaecf4 !important; }
#sc-meditation .sec-hd { color:#c8cde8 !important; margin:18px 12px 8px !important; position:relative; z-index:1; }
/* v2.5.22 PERF: dropped backdrop-filter:blur(8px) on .card — Android WebView
   allocates a full-screen offscreen buffer per blurred layer, multiplied by the
   ~10 cards on meditation = 10 extra compositor passes per frame. Swapped for
   a slightly opaquer solid fill that gives the same "frosted" look at ~0 cost. */
#sc-meditation .card { position:relative; z-index:1; background:rgba(22,28,58,0.72); color:#eaecf4; border:1px solid rgba(255,255,255,0.12); }
#sc-meditation .form-control { background:rgba(255,255,255,0.08); color:#eaecf4; border:1px solid rgba(255,255,255,0.2); }
#sc-meditation .form-control::placeholder { color:rgba(234,236,244,0.5); }
/* v2.4.1 FIX: lift ALL direct children above background layers (.med-sky, .med-bokeh at z:0) so taps register on buttons/cards. */
#sc-meditation > *:not(.med-sky):not(.med-bokeh) { position:relative; z-index:1; }

.med-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.med-stars::before, .med-stars::after {
  content:''; position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  box-shadow: 20px 30px #fff, 80px 60px #d0d9ff, 140px 20px #fff, 200px 80px #b8c4ff,
              280px 40px #fff, 340px 100px #d0d9ff, 60px 150px #fff, 160px 180px #b8c4ff,
              240px 130px #fff, 320px 210px #d0d9ff, 100px 250px #fff, 220px 290px #b8c4ff,
              300px 320px #fff, 50px 400px #d0d9ff, 180px 450px #fff, 270px 500px #b8c4ff;
  opacity:0.85;
  animation: medStarTwinkle 4s ease-in-out infinite alternate;
}
.med-stars::after { animation-delay:-2s; }
@keyframes medStarTwinkle { 0%{opacity:0.4} 100%{opacity:0.9} }

/* UI #5: hõljuvad bokeh-osakesed
   v2.4.1 FIX: pointer-events:none + z-index:0 — otherwise .med-bokeh covers
   the entire screen with inset:0 and intercepts every click (no button worked).
   v2.5.22 PERF: use will-change:transform to promote to composited layer (GPU
   paint only). Without it, Android WebView rasterises every bokeh frame on
   main thread causing 200-400ms jank on meditation open. */
.med-bokeh { position:absolute; inset:0; pointer-events:none; z-index:0; }
.bokeh {
  position:absolute; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(165,180,252,0.4) 0%, rgba(165,180,252,0) 70%);
  animation: medBokehFloat 12s ease-in-out infinite;
  will-change: transform, opacity;
  transform: translateZ(0);  /* force GPU composite layer */
}
.bokeh-1 { width:80px; height:80px; top:10%; left:10%; animation-delay:0s; }
.bokeh-2 { width:120px; height:120px; top:30%; right:15%; animation-delay:-3s; }
.bokeh-3 { width:60px; height:60px; top:55%; left:5%; animation-delay:-6s; }
/* v2.5.22 PERF: bokeh-4/5/6 were pushing Android WebView to 800+ms paint on
   screen open. Three particles still give the "atmospheric" feel without the
   GPU thrash. Hidden via display:none so they don't even enter the layout tree. */
.bokeh-4, .bokeh-5, .bokeh-6 { display:none; }
@keyframes medBokehFloat {
  0%, 100% { transform:translate(0,0) scale(1); opacity:0.35; }
  50%      { transform:translate(20px,-30px) scale(1.1); opacity:0.55; }
}

/* v2.5.22 ACCESSIBILITY + PERF: respect user motion preference.
   Also benefits low-end Android devices where animation is janky. */
@media (prefers-reduced-motion: reduce) {
  .bokeh, .med-stars::before, .med-stars::after,
  .med-orb, .med-orb::before, .med-sos-chip, .med-sos-fab {
    animation: none !important;
  }
}

/* UI #9: SOS chip */
.med-sos-chip {
  background:linear-gradient(135deg,#ef4444,#f59e0b);
  color:#fff; border:none; padding:8px 14px; border-radius:100px;
  font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 4px 12px rgba(239,68,68,0.4); cursor:pointer;
  animation: medSosPulse 2s ease-in-out infinite;
}
.med-sos-chip:active { transform:scale(0.97); }
@keyframes medSosPulse {
  0%,100% { box-shadow:0 4px 12px rgba(239,68,68,0.4); }
  50%     { box-shadow:0 6px 20px rgba(239,68,68,0.7); }
}

/* Hero card — contains orb (UI #1), moon ring (UI #4), yogi (UI #8), companion (UI #10)
   v2.4.1 FIX: position:relative + z-index:1 — lift above .med-bokeh/.med-sky
   background layers so taps land on interactive children. */
.med-hero-card {
  position:relative; z-index:1;
  margin:16px 12px; padding:24px 16px; text-align:center;
  background:rgba(22,28,58,0.72); border-radius:20px;
  border:1px solid rgba(255,255,255,0.12);
  /* v2.5.22 PERF: dropped backdrop-filter:blur(8px) — replaced with opaque fill */
  min-height:260px;
}

/* UI #4: kuu-faas progress-ring */
.med-moon-ring { position:absolute; left:50%; top:20px; transform:translateX(-50%); width:180px; height:180px; pointer-events:none; }
.med-moon-track { fill:none; stroke:rgba(255,255,255,0.1); stroke-width:4; }
.med-moon-fill  { fill:none; stroke:url(#medMoonGrad); stroke-width:4; stroke-linecap:round;
                  transition:stroke-dashoffset 1.2s ease-out;
                  filter:drop-shadow(0 0 6px rgba(165,180,252,0.6)); stroke:#a5b4fc; }

/* UI #1: pulseeriv hingamis-ring — the big orb */
.med-orb {
  position:relative; display:inline-block; margin-top:30px; width:140px; height:140px;
  border-radius:50%; border:none; cursor:pointer; background:transparent;
  animation: medOrbBreathe 8s ease-in-out infinite;
}
.med-orb-core {
  position:absolute; inset:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #a5b4fc 0%, #6366f1 50%, #3730a3 100%);
  box-shadow: 0 0 40px rgba(165,180,252,0.6), inset 0 0 30px rgba(255,255,255,0.3);
}
@keyframes medOrbBreathe {
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(0.88); }
}

/* UI #8: jooga-istuv figuur + aura */
.med-orb-yogi {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:54px; filter:drop-shadow(0 0 4px rgba(255,255,255,0.5));
}
.med-orb::before {
  content:''; position:absolute; inset:-20px; border-radius:50%;
  background:radial-gradient(circle, rgba(165,180,252,0.25) 0%, transparent 70%);
  animation: medAuraPulse 4s ease-in-out infinite;
}
@keyframes medAuraPulse {
  0%,100% { transform:scale(1); opacity:0.5; }
  50%     { transform:scale(1.15); opacity:0.8; }
}

/* v2.4.2: "Press here" onboarding hint below orb — pulses gently, fades out
   once user has ever tapped the orb (JS sets .med-orb-cta.hidden). */
.med-orb-cta {
  display:inline-block;
  margin-top:12px; padding:6px 14px;
  font-size:13px; font-weight:600; letter-spacing:0.3px;
  color:#fff;
  background:linear-gradient(135deg, rgba(165,180,252,0.25), rgba(99,102,241,0.35));
  border:1px solid rgba(165,180,252,0.4);
  border-radius:14px;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(99,102,241,0.25);
  animation: medCtaPulse 2.4s ease-in-out infinite;
  pointer-events:none; /* orb itself is clickable; this is just a hint */
  position:relative; z-index:2;
}
.med-orb-cta::before {
  content:'👆 '; margin-right:2px;
}
.med-orb-cta.hidden {
  opacity:0; transform:translateY(-4px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  pointer-events:none;
}
@keyframes medCtaPulse {
  0%,100% { transform:scale(1);    opacity:0.85; box-shadow:0 2px 10px rgba(99,102,241,0.25); }
  50%     { transform:scale(1.06); opacity:1;    box-shadow:0 4px 16px rgba(165,180,252,0.5); }
}

/* UI #10: virtuaalne kaaslane (lootose-feen) */
.med-companion {
  position:absolute; right:20px; top:20px; font-size:24px;
  animation: medCompanionBob 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  cursor:pointer; transition:transform 0.2s;
}
.med-companion:hover { transform:scale(1.2); }
.med-companion.active { animation: medCompanionGlow 2s ease-in-out infinite; }
@keyframes medCompanionBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes medCompanionGlow {
  0%,100% { filter:drop-shadow(0 0 4px rgba(165,180,252,0.6)); }
  50%     { filter:drop-shadow(0 0 12px rgba(251,191,36,0.8)); }
}

/* Streak row */
.med-streak-row { margin-top:20px; display:flex; justify-content:center; align-items:center; gap:6px; font-size:14px; }
.med-streak-flame { font-size:18px; }
.med-streak-num { font-size:22px; font-weight:800; color:#fbbf24; }
.med-streak-lbl { color:#c8cde8; font-size:11px; }
.med-today-mins { margin-top:4px; font-size:11px; color:#a5b4fc; }

/* UI #3: daily card (night-sky gradient hero card) */
.med-daily-card {
  margin:0 12px 16px; padding:18px; border-radius:16px;
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
  color:#fff; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 8px 24px rgba(67,56,202,0.35);
}
.med-daily-card::after {
  content:'🌙'; position:absolute; right:12px; top:10px; font-size:28px; opacity:0.7;
}
.med-daily-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:0.8; margin-bottom:4px; }
.med-daily-title { font-size:18px; font-weight:700; margin-bottom:4px; padding-right:40px; }
.med-daily-meta { font-size:12px; opacity:0.85; margin-bottom:10px; }
/* UI #6: live audio waveform on daily card */
.med-daily-wave { display:flex; gap:3px; align-items:center; height:20px; }
.med-daily-wave i {
  width:3px; background:#fff; border-radius:2px; opacity:0.8;
  animation: medWaveBar 1.2s ease-in-out infinite;
}
.med-daily-wave i:nth-child(1){height:6px; animation-delay:0.0s}
.med-daily-wave i:nth-child(2){height:14px;animation-delay:0.1s}
.med-daily-wave i:nth-child(3){height:10px;animation-delay:0.2s}
.med-daily-wave i:nth-child(4){height:18px;animation-delay:0.3s}
.med-daily-wave i:nth-child(5){height:8px; animation-delay:0.4s}
.med-daily-wave i:nth-child(6){height:16px;animation-delay:0.5s}
.med-daily-wave i:nth-child(7){height:12px;animation-delay:0.6s}
.med-daily-wave i:nth-child(8){height:8px; animation-delay:0.7s}
@keyframes medWaveBar { 0%,100%{transform:scaleY(0.5)} 50%{transform:scaleY(1)} }

/* HRV nudge */
.med-hrv-nudge {
  margin:0 12px 12px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(239,68,68,0.15), rgba(251,191,36,0.15));
  border:1px solid rgba(239,68,68,0.3);
  display:flex; align-items:center; gap:10px;
}
.med-hrv-title { font-size:13px; font-weight:600; color:#fecaca; }
.med-hrv-sub   { font-size:11px; color:#c8cde8; }

/* UI #7: värvi-hingav pill (breath technique selector) */
.med-pill-row { display:flex; gap:8px; overflow-x:auto; padding:6px 12px 6px; position:relative; z-index:2; scrollbar-width:none; }
.med-pill-row::-webkit-scrollbar { display:none; }
.med-breath-pill {
  flex-shrink:0; padding:10px 18px; border-radius:100px; border:none; cursor:pointer;
  font-size:13px; font-weight:600; color:#fff;
  background: linear-gradient(120deg, #3730a3, #6366f1, #7c3aed, #a855f7, #6366f1, #3730a3);
  background-size:300% 100%;
  animation: medPillHue 5s linear infinite;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
  position:relative;
}
.med-breath-pill:active { transform:scale(0.97); }
@keyframes medPillHue { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* UI #2: enso/lootose glüüf (small decorative icon on each breath pill) */
.med-breath-pill::before {
  content:'○'; margin-right:6px; font-size:14px; opacity:0.8;
  /* A subtle open ring — evokes enso without raster assets */
}

/* Grid of cards (guided, sleep) */
.med-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px; position:relative; z-index:2; }
.med-card-tile {
  padding:14px 12px; border-radius:14px; cursor:pointer; color:#fff;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  transition:transform 0.15s, background 0.2s;
}
.med-card-tile:active { transform:scale(0.97); }
.med-card-tile:hover { background:rgba(255,255,255,0.14); }
.med-card-tile-icon { font-size:22px; margin-bottom:6px; }
.med-card-tile-title { font-size:13px; font-weight:600; line-height:1.3; }
.med-card-tile-meta { font-size:10px; color:#a5b4fc; margin-top:4px; }

/* AI card + chat card */
.med-ai-card textarea { min-height:40px; }
.med-chat-log {
  max-height:240px; overflow-y:auto; padding:8px; background:rgba(0,0,0,0.2);
  border-radius:10px; font-size:13px; line-height:1.4;
}
.med-chat-log .msg { margin-bottom:8px; padding:8px 10px; border-radius:12px; max-width:85%; word-wrap:break-word; }
.med-chat-log .msg-user      { margin-left:auto; background:#6366f1; color:#fff; border-bottom-right-radius:4px; }
.med-chat-log .msg-assistant { background:rgba(255,255,255,0.1); color:#eaecf4; border-bottom-left-radius:4px; }
.med-chat-typing { font-size:11px; color:#a5b4fc; font-style:italic; }

/* Player modal */
.med-player-overlay { z-index:9999; display:none; }
.med-player-overlay.active { display:flex; }
.med-player {
  width:92%; max-width:420px; max-height:90vh; overflow-y:auto;
  background:linear-gradient(180deg,#1a2454 0%, #2d3577 100%);
  color:#eaecf4; border-radius:20px; padding:20px; position:relative;
  border:1px solid rgba(255,255,255,0.1);
}
.med-player-close { position:absolute; right:14px; top:14px; background:rgba(255,255,255,0.1); color:#fff; border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; }
.med-player-title { font-size:18px; font-weight:700; text-align:center; padding:0 32px; margin-bottom:16px; }

.med-mood-check { text-align:center; padding:8px 0 12px; }
.med-mood-q { font-size:15px; font-weight:500; margin-bottom:22px; color:#c8cde8; line-height:1.4; }
.med-mood-faces { display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
.med-mood-faces button {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  flex:1; max-width:58px; padding:13px 4px 10px;
  border-radius:18px; border:2px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05); cursor:pointer; transition:all 0.22s;
  -webkit-tap-highlight-color:transparent;
}
.med-mood-faces button .mf-emoji { font-size:27px; line-height:1; display:block; transition:transform 0.22s; }
.med-mood-faces button .mf-label { font-size:10px; color:rgba(255,255,255,0.38); line-height:1; display:block; white-space:nowrap; }
.med-mood-faces button:hover { background:rgba(255,255,255,0.1); transform:translateY(-3px); }
.med-mood-faces button:hover .mf-emoji { transform:scale(1.15); }
.med-mood-faces button.selected {
  border-color:#a5b4fc; background:rgba(165,180,252,0.18);
  box-shadow:0 4px 22px rgba(165,180,252,0.22); transform:translateY(-5px);
}
.med-mood-faces button.selected .mf-emoji { transform:scale(1.3); }
.med-mood-faces button.selected .mf-label { color:#a5b4fc; }
.med-mood-skip-btn {
  background:none; border:none; color:rgba(255,255,255,0.32); font-size:12px;
  cursor:pointer; padding:8px 16px; border-radius:20px; transition:color 0.2s; display:block; margin:0 auto;
}
.med-mood-skip-btn:hover { color:rgba(255,255,255,0.6); }
.med-mood-save-btn {
  width:100%; margin-top:16px; padding:14px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
  border:none; border-radius:14px; font-size:15px; font-weight:600;
  cursor:pointer; transition:opacity 0.2s,transform 0.2s; letter-spacing:0.2px;
}
.med-mood-save-btn:hover { opacity:0.88; transform:translateY(-1px); }

.med-player-stage { text-align:center; padding:20px 0; }
.med-player-orb { position:relative; width:240px; height:240px; margin:0 auto; }
/* v2.15.0 — Calm/Headspace-style expanding-circle with two outer halo rings.
   The halo rings emit on every breath cycle (handled by JS adding .breathe
   on each phase change) so the orb feels alive even during silence. */
.med-player-orb::before,
.med-player-orb::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(165,180,252,0.5);
  opacity:0; pointer-events:none;
  transition: transform 0s, opacity 0s;
}
.med-player-orb.breathe::before { animation: med-orb-halo 4s ease-out 1; }
.med-player-orb.breathe::after  { animation: med-orb-halo 4s ease-out 0.4s 1; }
@keyframes med-orb-halo {
  0%   { transform: scale(0.95); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}
.med-player-orb-pulse {
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), #a5b4fc 35%, #6366f1 60%, #3730a3 100%);
  box-shadow:0 0 80px rgba(165,180,252,0.7), inset 0 0 30px rgba(255,255,255,0.18);
  transition: transform var(--orb-trans, 4s) cubic-bezier(.34,.06,.22,1);
  will-change: transform;
}
.med-player-orb-pulse.inhale { transform:scale(1.18); }
.med-player-orb-pulse.hold   { transform:scale(1.18); }
.med-player-orb-pulse.exhale { transform:scale(0.62); }
/* v2.14.3: guided-session orb breathes gently (4s in/out loop) while the
   script plays — decoupled from breath phases so it doesn't show a
   countdown that has nothing to do with the narration. */
.med-player-orb-pulse.guided {
  animation: med-orb-guided-breathe 8s ease-in-out infinite;
}
@keyframes med-orb-guided-breathe {
  0%,100% { transform:scale(1);    opacity:0.92; }
  50%     { transform:scale(1.08); opacity:1;    }
}
@media (prefers-reduced-motion: reduce) {
  .med-player-orb-pulse.guided { animation: none; }
}
.med-player-orb-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  /* v2.14.3: wrap + center long guided-session titles (was single-line 20px
     with no wrapping — "Tööpäeva mikro-paus" looked chopped). */
  font-size:18px; font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5);
  padding: 0 24px; text-align: center; line-height: 1.25;
  max-width: 100%; word-wrap: break-word;
}
/* UI #6: live audio waveform inside player — v2.15.0: hidden by default,
   visual noise didn't help breath-pacing. Toggle .show on the wave element
   if a debug/dev view ever needs it back. */
.med-player-wave { display:none; gap:3px; justify-content:center; align-items:center; height:28px; margin-top:16px; }
.med-player-wave.show { display:flex; }
.med-player-wave i {
  width:3px; background:#a5b4fc; border-radius:2px; transform-origin:center;
  animation: medWaveBarBig 1s ease-in-out infinite;
}
.med-player-wave i:nth-child(1){height:6px;animation-delay:0.0s}
.med-player-wave i:nth-child(2){height:14px;animation-delay:0.08s}
.med-player-wave i:nth-child(3){height:10px;animation-delay:0.16s}
.med-player-wave i:nth-child(4){height:20px;animation-delay:0.24s}
.med-player-wave i:nth-child(5){height:14px;animation-delay:0.32s}
.med-player-wave i:nth-child(6){height:24px;animation-delay:0.40s}
.med-player-wave i:nth-child(7){height:14px;animation-delay:0.48s}
.med-player-wave i:nth-child(8){height:20px;animation-delay:0.56s}
.med-player-wave i:nth-child(9){height:10px;animation-delay:0.64s}
.med-player-wave i:nth-child(10){height:14px;animation-delay:0.72s}
.med-player-wave i:nth-child(11){height:6px; animation-delay:0.80s}
.med-player-wave i:nth-child(12){height:12px;animation-delay:0.88s}
@keyframes medWaveBarBig { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }
.med-player-wave.paused i { animation-play-state:paused; }

.med-player-timer { margin-top:10px; font-size:14px; color:#c8cde8; font-variant-numeric:tabular-nums; }
.med-player-script { margin-top:14px; padding:12px; background:rgba(0,0,0,0.25); border-radius:10px; font-size:13px; line-height:1.6; max-height:150px; overflow-y:auto; }
.med-player-controls { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.med-player-controls button { padding:10px 18px; background:rgba(255,255,255,0.1); color:#fff; border:none; border-radius:100px; font-size:14px; cursor:pointer; }

/* Menu item decoration (UI #2 enso ring on nupp ikonil) */
.med-menu-orb {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(165,180,252,0.4), rgba(99,102,241,0.3) 60%, transparent 80%);
  font-size:18px;
  animation: medMenuOrbPulse 4s ease-in-out infinite;
}
@keyframes medMenuOrbPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(0.88)} }

/* Home-screen meditation card (UI #3 gradient) */
.med-home-card {
  margin:10px 12px; padding:14px 16px 12px; border-radius:16px;
  background: linear-gradient(135deg, #0f1631 0%, #4338ca 60%, #7c3aed 100%);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 8px 20px rgba(67,56,202,0.3);
}
.med-home-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 30%, rgba(165,180,252,0.25), transparent 50%);
  pointer-events:none;
}
.med-home-card-row { position:relative; z-index:1; }
.med-home-orb {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background: radial-gradient(circle at 30% 30%, #a5b4fc, #6366f1 60%, #3730a3);
  box-shadow:0 0 20px rgba(165,180,252,0.5);
  animation: medOrbBreathe 6s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.med-home-card-title { font-size:14px; font-weight:700; }
.med-home-card-sub   { font-size:11px; opacity:0.85; margin-top:2px; }
/* ═══════════════════════════════════════════════════════════════════
   v2.16.0 — Fasting v2 overhaul (10 UX + 10 funct)
   ═══════════════════════════════════════════════════════════════════ */

/* UI-3 Glassmorphism design tokens
   v2.16.11 — restructured cascade. The previous order had `:root` setting
   --glass-bg to LIGHT glass AFTER the [data-theme="dark"] override, which
   (same specificity, later source) won over dark — meaning dark-theme
   bento cards rendered with rgba(255,255,255,0.78) backgrounds and white
   text on top, completely unreadable. Symptom on Movement / Fasting:
   PAASTU-AEG / FAAS / SEERIA cards looking like big light-grey slabs. */
:root{
  --glass-light: rgba(255,255,255,0.78);
  --glass-light-bd: rgba(255,255,255,0.5);
  --glass-dark: rgba(20,24,36,0.62);
  --glass-dark-bd: rgba(255,255,255,0.08);
  --glass-blur: blur(20px) saturate(180%);
  /* Defaults — overridden below by data-theme attribute selectors. */
  --glass-bg: var(--glass-light);
  --glass-bd: var(--glass-light-bd);
}
[data-theme="light"],[data-theme="blue"],[data-theme="green"]{
  --glass-bg: var(--glass-light); --glass-bd: var(--glass-light-bd);
}
[data-theme="dark"]{
  --glass-bg: var(--glass-dark); --glass-bd: var(--glass-dark-bd);
}
[data-theme="sky"]{
  --glass-bg: rgba(255,255,255,0.18); --glass-bd: rgba(255,255,255,0.32);
}
/* Auto theme: respect system preference until JS resolves it explicitly.
   Without this, html[data-theme="auto"] briefly renders with light glass on
   first paint when the OS is in dark mode. */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --glass-bg: var(--glass-dark); --glass-bd: var(--glass-dark-bd);
  }
}

/* Drop-in class — replaces .card on screens that opt into glass aesthetic.
   WCAG fallback: solid background on browsers that lack backdrop-filter.    */
.glass-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(15,24,39,0.08);
  position: relative;
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  .glass-card{
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}
@supports not (backdrop-filter: blur(10px)){
  /* Fallback: stronger solid for legacy WebView (Android < 76) */
  .glass-card{ background: var(--surface); }
}

/* UI-1 Personalized Fasting Zones SVG ring */
.pfz-ring-wrap{
  position:relative; width:240px; height:240px; margin:8px auto;
  display:flex; align-items:center; justify-content:center;
}
.pfz-ring-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.pfz-ring-segment{
  fill:none; stroke-width:14; stroke-linecap:round;
  transition: stroke-width .25s ease, opacity .25s ease;
}
.pfz-ring-segment.active{ stroke-width:18; }
.pfz-ring-progress{
  fill:none; stroke:rgba(255,255,255,0.85); stroke-width:3; stroke-linecap:round;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
}
.pfz-ring-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
  text-align:center;
}
.pfz-time{ font-size:38px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.pfz-time-sub{ font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:0.6px; margin-top:4px; }
.pfz-phase-label{
  margin-top:10px; padding:5px 12px; border-radius:100px;
  background:rgba(255,255,255,0.16); backdrop-filter:blur(10px);
  font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px;
}

/* UI-4 Liquid wave — fluid level inside circle (uses CSS only; no JS deps) */
.liquid-wave{
  position:absolute; inset:0; border-radius:50%;
  overflow:hidden; pointer-events:none; opacity:0.65;
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 62%);
          mask-image: radial-gradient(circle, #000 60%, transparent 62%);
}
.liquid-wave::before{
  content:''; position:absolute; left:-25%; right:-25%;
  height:200%; bottom:var(--liquid-level, 50%);
  background:
    radial-gradient(ellipse 50% 18px at 50% 0%, rgba(255,255,255,0.5) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,200,120,0.0) 0%, rgba(255,160,80,0.55) 6%, rgba(220,80,40,0.5) 100%);
  border-radius:50% 50% 0 0;
  animation: liquid-wave-drift 4.5s ease-in-out infinite;
}
@keyframes liquid-wave-drift{
  0%,100%{ transform:translateX(-2%) rotate(-1deg); }
  50%   { transform:translateX(2%)  rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){
  .liquid-wave::before{ animation:none; }
}

/* UI-5 Bento grid */
.bento-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:10px; padding:0 12px;
}
.bento-card{
  border-radius:14px; padding:12px; min-height:96px;
  position:relative; overflow:hidden;
  transition: transform .15s ease;
}
.bento-card:hover{ transform: translateY(-2px); }
.bento-card[data-size="wide"]{ grid-column: span 2; }
.bento-card .bento-label{ font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:0.6px; }
.bento-card .bento-value{ font-size:24px; font-weight:800; line-height:1.15; margin-top:4px; }
.bento-card .bento-sub{ font-size:11px; color:var(--t3); margin-top:2px; }
.bento-card .bento-drag{
  position:absolute; top:6px; right:6px; opacity:0.3;
  font-size:14px; cursor:grab; user-select:none;
}
.bento-card.dragging{ opacity:0.5; cursor:grabbing; }
.bento-card.drag-over{ outline:2px dashed var(--brand); }

/* UI-6 Dark-mode polish for fasting elements (inherit existing theme tokens) */
[data-theme="dark"] .pfz-phase-label,
[data-theme="sky"]  .pfz-phase-label{ background:rgba(0,0,0,0.32); }

/* UI-7 Onboarding wizard */
.fast-onb-overlay{
  position:fixed; inset:0; z-index:5000;
  background:linear-gradient(180deg, rgba(15,22,49,0.92), rgba(67,56,202,0.88));
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:20px;
  animation: fast-onb-fade .4s ease-out;
}
@keyframes fast-onb-fade { from{opacity:0} to{opacity:1} }
.fast-onb-card{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:20px; padding:24px; max-width:440px; width:100%;
  color:#fff;
}
.fast-onb-step{ font-size:11px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.6px; }
.fast-onb-question{ font-size:20px; font-weight:700; line-height:1.3; margin:8px 0 16px; }
.fast-onb-options{ display:grid; gap:8px; }
.fast-onb-opt{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  border-radius:14px; padding:14px 16px; color:#fff;
  text-align:left; cursor:pointer; font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  transition: background .15s, transform .12s;
}
.fast-onb-opt:hover{ background:rgba(255,255,255,0.14); }
.fast-onb-opt.selected{ background:linear-gradient(135deg,#6366f1,#8b5cf6); border-color:rgba(255,255,255,0.45); }
.fast-onb-opt:active{ transform:scale(0.98); }
.fast-onb-opt .opt-ico{ font-size:22px; flex:0 0 28px; text-align:center; }
.fast-onb-actions{ display:flex; gap:10px; margin-top:18px; }
.fast-onb-back, .fast-onb-next{
  flex:1; padding:12px; border-radius:100px; border:none; cursor:pointer;
  font-size:14px; font-weight:700;
}
.fast-onb-back{ background:rgba(255,255,255,0.08); color:#c8cde8; }
.fast-onb-next{ background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.fast-onb-next:disabled{ opacity:0.4; cursor:not-allowed; }
.fast-onb-progress{
  height:4px; background:rgba(255,255,255,0.15); border-radius:100px; margin-bottom:16px; overflow:hidden;
}
.fast-onb-progress-fill{
  height:100%; background:linear-gradient(90deg,#fbbf24,#f97316); border-radius:100px;
  transition:width .35s ease;
}
.fast-onb-plan-card{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  border-radius:14px; padding:14px;
}
.fast-onb-plan-card.recommended{
  background:linear-gradient(135deg,rgba(251,191,36,0.18),rgba(124,58,237,0.18));
  border-color:rgba(251,191,36,0.45);
}
.fast-onb-plan-icon{ font-size:30px; flex:0 0 40px; text-align:center; }
.fast-onb-plan-title{ font-size:15px; font-weight:700; }
.fast-onb-plan-sub{ font-size:11px; color:rgba(255,255,255,0.7); margin-top:2px; }

/* UI-8 Phase microinteractions — confetti + flame */
@keyframes phase-confetti-fall {
  0%   { transform:translateY(-120vh) rotate(0deg); opacity:1; }
  100% { transform:translateY(120vh)  rotate(720deg); opacity:0; }
}
.phase-confetti{
  position:fixed; top:0; width:8px; height:14px;
  pointer-events:none; z-index:6000;
  animation: phase-confetti-fall 2.4s cubic-bezier(.45,.1,.55,.9) forwards;
}
@media (prefers-reduced-motion: reduce){ .phase-confetti{ animation:none; opacity:0; } }

@keyframes phase-flame-rise {
  0%   { opacity:0; transform:translate(-50%, 8px) scale(0.5); }
  30%  { opacity:1; transform:translate(-50%, -8px) scale(1.15); }
  100% { opacity:0; transform:translate(-50%, -56px) scale(0.85); }
}

/* UI-9 Heatmap calendar */
.fast-cal{
  display:grid; gap:3px;
  grid-template-columns: repeat(13, 1fr);   /* ~3 months on phone */
  padding:8px 12px 14px;
}
.fast-cal-cell{
  aspect-ratio: 1/1; border-radius:3px;
  background: var(--surface2);
  cursor:pointer; transition: transform .1s ease;
}
.fast-cal-cell:hover{ transform: scale(1.18); }
.fast-cal-cell[data-v="success"] { background:#16a34a; }
.fast-cal-cell[data-v="partial"] { background:#fbbf24; }
.fast-cal-cell[data-v="skipped"] { background:#dc2626; opacity:0.5; }
.fast-cal-cell[data-v="shielded"]{ background:linear-gradient(135deg,#06b6d4,#3b82f6); }
.fast-cal-cell.today{ outline:2px solid var(--brand); }

.fast-shields-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; margin:0 12px 12px;
  border-radius:12px; background:linear-gradient(135deg,rgba(6,182,212,0.18),rgba(59,130,246,0.18));
  border:1px solid rgba(6,182,212,0.35);
}
.fast-shields-icons{ display:flex; gap:4px; font-size:18px; }
.fast-shields-icons .shield-empty{ opacity:0.25; }

/* AI coach + drug-check + voice-button + extended protocol UI */
.fast-aicoach{
  margin:8px 12px 0; padding:12px;
  border-radius:14px; background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.22);
}
.fast-aicoach-input{
  width:100%; padding:10px 12px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--t1); font-size:14px;
}
.fast-aicoach-mic{
  background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none;
  color:#fff; border-radius:50%; width:42px; height:42px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:18px;
  flex:0 0 42px;
}
.fast-aicoach-mic.listening{
  animation: fast-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes fast-mic-pulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,0.45); }
  50%   { box-shadow:0 0 0 12px rgba(139,92,246,0); }
}
/* v2.16.10 — quick-action row under the AI input. Previously these used
   the bare `.btn-ghost` class which has NO CSS rule defined globally, so
   "Küsi" rendered as a system-default white button while "Paastu
   teadusõpetus" / "Paastu lõpetamine" wrapped to two lines and stayed dark
   from inherited `<button>` resets — a visually broken row.
   Scoped to .fast-aicoach so we don't change behaviour of `btn-ghost`
   elsewhere (med-player controls, calendar shield button, etc.). */
.fast-aicoach .btn-ghost{
  flex:1;
  min-height:48px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(99,102,241,0.10);
  border:1px solid rgba(99,102,241,0.28);
  color:var(--t1);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1.25;
  text-align:center;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:normal;
  word-break:break-word;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color:transparent;
}
.fast-aicoach .btn-ghost:hover{
  background:rgba(99,102,241,0.20);
  border-color:rgba(99,102,241,0.45);
}
.fast-aicoach .btn-ghost:active{
  transform:scale(0.97);
  background:rgba(99,102,241,0.28);
}

/* Compact fasting history — default + top placement under Start fasting */
.fast-coach-history{
  margin:10px 12px 0;
  padding:10px 12px 12px;
  border-radius:14px;
  background:rgba(249,115,22,0.06);
  border:1px solid rgba(249,115,22,0.18);
}
.fast-recent-top{
  margin:0 12px 12px;
  order:0;
}
.fast-coach-history-hd{
  font-size:11px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin-bottom:8px;
  font-weight:600;
}
.fast-coach-daily{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.fast-coach-daily-row{
  display:grid;
  grid-template-columns:minmax(96px,1.1fr) 64px 1fr 28px;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
}
.fast-coach-daily-left{ min-width:0; }
.fast-coach-daily-date{
  font-size:11px;
  color:var(--t2);
  margin-top:2px;
  line-height:1.3;
}
.fast-coach-daily-row--today{
  border-color:rgba(249,115,22,0.35);
  background:rgba(249,115,22,0.06);
}
.fast-coach-daily-row--empty{ opacity:0.85; }
.fast-coach-daily-row--completed{ border-color:rgba(34,197,94,0.22); }
.fast-coach-daily-row--partial { border-color:rgba(234,179,8,0.22); }
.fast-coach-daily-row--live{
  border-color:rgba(99,102,241,0.35);
  animation:fast-coach-live-pulse 2.4s ease-in-out infinite;
}
@keyframes fast-coach-live-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(99,102,241,0); }
  50%    { box-shadow:0 0 0 4px rgba(99,102,241,0.12); }
}
.fast-coach-daily-label{
  font-size:12px;
  font-weight:700;
  color:var(--t1);
}
.fast-coach-daily-dur{
  font-size:26px;
  font-weight:800;
  line-height:1;
  text-align:center;
}
.fast-coach-daily-dur span{
  font-size:14px;
  font-weight:700;
  opacity:0.85;
}
.fast-coach-daily-dur--none{
  font-size:20px;
  color:var(--t3);
}
.fast-coach-daily-meta{ min-width:0; }
.fast-coach-daily-plan{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--t1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fast-coach-daily-sub{
  display:block;
  font-size:10px;
  color:var(--t3);
  margin-top:1px;
}
.fast-coach-daily-badge{
  text-align:center;
  font-size:15px;
}
.fast-coach-history-subhd{
  font-size:10px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin:4px 0 6px;
  font-weight:600;
}
.fast-coach-history-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.fast-coach-history-empty{
  font-size:12px;
  color:var(--t3);
  text-align:center;
  padding:8px 4px;
}
.fast-coach-hist-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
}
.fast-coach-hist-item--completed{ border-color:rgba(34,197,94,0.25); }
.fast-coach-hist-item--partial { border-color:rgba(234,179,8,0.25); }
.fast-coach-hist-item--cancelled{ opacity:0.72; }
.fast-coach-hist-dur{
  flex:0 0 auto;
  min-width:44px;
  font-size:20px;
  font-weight:800;
  line-height:1;
}
.fast-coach-hist-body{ flex:1; min-width:0; }
.fast-coach-hist-plan{
  font-size:13px;
  font-weight:700;
  color:var(--t1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fast-coach-hist-meta{
  font-size:11px;
  color:var(--t3);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fast-coach-hist-badge{
  flex:0 0 auto;
  font-size:16px;
}

.fast-drug-warning{
  margin:8px 12px; padding:12px 14px; border-radius:12px;
  background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.32);
  color:var(--t1); font-size:13px; line-height:1.5;
}
.fast-drug-warning.severity-medium{ background:rgba(251,146,60,0.08); border-color:rgba(251,146,60,0.32); }
.fast-drug-warning.severity-low   { background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.32); }

/* Theory clip card */
.fast-theory-card{
  padding:12px 14px; margin:8px 0; border-radius:12px;
  background:var(--surface2); border:1px solid var(--border);
}
.fast-theory-title{ font-size:14px; font-weight:700; color:var(--t1); margin-bottom:4px; }
.fast-theory-meta { font-size:11px; color:var(--t3); margin-bottom:8px; }
.fast-theory-body { font-size:13px; line-height:1.55; color:var(--t2); }

/* v2.15.0 — Live session tile (Func-2) */
.med-live-tile {
  margin:8px 14px 12px; padding:12px 14px; border-radius:14px;
  background:linear-gradient(135deg,rgba(91,125,255,0.18),rgba(124,58,237,0.18));
  border:1px solid rgba(165,180,252,0.3); color:#e7e0ff;
}
.med-live-tile.active {
  background:linear-gradient(135deg,rgba(220,38,38,0.18),rgba(251,113,133,0.18));
  border-color:rgba(251,113,133,0.5);
  animation:medLivePulse 2.4s ease-in-out infinite;
}
.med-live-tile-row { display:flex; align-items:center; gap:10px; }
.med-live-tile-pulse {
  width:10px; height:10px; border-radius:50%; flex:0 0 10px;
  background:#fb7185; box-shadow:0 0 8px #fb7185;
  animation:medLiveDot 1.6s ease-in-out infinite;
}
.med-live-tile-body  { flex:1; min-width:0; }
.med-live-tile-title { font-size:13px; font-weight:700; }
.med-live-tile-sub   { font-size:11px; color:#c8cde8; margin-top:2px; }
.med-live-tile-btn {
  flex:0 0 auto; padding:7px 14px; border-radius:100px; border:none;
  background:rgba(255,255,255,0.94); color:#5b7dff;
  font-size:11px; font-weight:700; cursor:pointer;
}
.med-live-tile.active .med-live-tile-btn { color:#dc2626; }
.med-live-tile-btn:active { transform:scale(0.95); }
@keyframes medLiveDot { 0%,100%{opacity:1} 50%{opacity:0.35} }
@keyframes medLivePulse { 0%,100%{box-shadow:0 0 0 rgba(251,113,133,0)} 50%{box-shadow:0 0 0 8px rgba(251,113,133,0.18)} }

/* v2.15.0 — Just-in-time HRV nudge banner (Func-5) */
.med-hrv-nudge {
  margin:8px 12px; padding:10px 12px; border-radius:14px;
  background:linear-gradient(135deg,#fb7185,#7c3aed); color:#fff;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 4px 14px rgba(251,113,133,0.28);
  animation: medHrvSlideIn .4s cubic-bezier(.34,.06,.22,1) 1;
}
.med-hrv-nudge-ico   { font-size:20px; line-height:1; }
.med-hrv-nudge-body  { flex:1; min-width:0; }
.med-hrv-nudge-title { font-size:12px; font-weight:700; }
.med-hrv-nudge-sub   { font-size:11px; opacity:0.85; margin-top:2px; }
.med-hrv-nudge-cta {
  padding:7px 12px; border-radius:100px; border:none;
  background:rgba(255,255,255,0.95); color:#7c3aed;
  font-size:11px; font-weight:700; cursor:pointer; flex:0 0 auto;
}
.med-hrv-nudge-cta:active { transform:scale(0.95); }
.med-hrv-nudge-x {
  background:transparent; border:none; color:rgba(255,255,255,0.8);
  font-size:14px; cursor:pointer; padding:4px 6px;
}
@keyframes medHrvSlideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* v2.15.0 — inline mood-wizard inside the home card */
.med-home-mood {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  margin-top:12px; position:relative; z-index:1;
}
.med-home-mood-btn {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  border-radius:12px; padding:8px 0; font-size:22px; line-height:1;
  cursor:pointer; transition:transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.med-home-mood-btn:hover, .med-home-mood-btn:focus-visible {
  background:rgba(255,255,255,0.18); transform:scale(1.06);
}
.med-home-mood-btn:active { transform:scale(0.94); }

/* Stats strip inside history */
#med-stats .stat-cell { text-align:center; }
#med-stats .stat-n { font-size:16px; font-weight:700; color:#fbbf24; }
#med-stats .stat-l { font-size:10px; color:#a5b4fc; }

/* ═══════════════════════════════════════════════════════════════════
   v2.4.11 — TASE 1 meditation polish
   - Daily Quote card
   - Upgraded prominent SOS button
   - Netflix-style horizontal category rows
   - Prep-screen ("Get comfortable…")
   - Post-session celebration (confetti + streak anim + mood delta)
   - Media Session API (no CSS needed) + haptics toggle
   ═══════════════════════════════════════════════════════════════════ */

/* Daily Quote card — top of meditation screen, rotates daily via Claude */
.med-daily-quote {
  margin:8px 12px 12px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(165,180,252,0.06));
  border:1px solid rgba(165,180,252,0.18);
  backdrop-filter:blur(8px);
  position:relative; z-index:2;
  animation: medQuoteFade 0.8s ease-out;
}
.med-daily-quote-label {
  font-size:10px; text-transform:uppercase; letter-spacing:1.2px;
  color:#a5b4fc; margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.med-daily-quote-text {
  font-size:14px; line-height:1.5; color:#eaecf4; font-style:italic;
  quotes:'\201C' '\201D';
}
.med-daily-quote-text::before { content:open-quote; color:#a5b4fc; font-size:22px; vertical-align:-4px; margin-right:2px; }
.med-daily-quote-text::after  { content:close-quote; color:#a5b4fc; font-size:22px; vertical-align:-4px; margin-left:2px; }
@keyframes medQuoteFade { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }

/* Upgraded prominent SOS button — full-width red-orange gradient with stronger pulse */
.med-sos-prominent {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:calc(100% - 24px); margin:0 12px 12px; padding:14px 16px;
  background:linear-gradient(135deg,#ef4444 0%, #f97316 55%, #f59e0b 100%);
  color:#fff; border:none; border-radius:16px;
  font-size:15px; font-weight:700; letter-spacing:0.3px;
  box-shadow:0 6px 18px rgba(239,68,68,0.45), 0 2px 6px rgba(239,68,68,0.3);
  cursor:pointer; position:relative; overflow:hidden;
  animation: medSosPulseStrong 2.2s ease-in-out infinite;
}
.med-sos-prominent:active { transform:scale(0.98); }
.med-sos-prominent::after {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 55%);
  pointer-events:none;
}
.med-sos-prominent-ico { font-size:20px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.med-sos-prominent-body { display:flex; flex-direction:column; align-items:flex-start; }
.med-sos-prominent-title { font-size:14px; font-weight:800; }
.med-sos-prominent-sub { font-size:10px; opacity:0.85; margin-top:1px; font-weight:600; }
@keyframes medSosPulseStrong {
  0%,100% { box-shadow:0 6px 18px rgba(239,68,68,0.45), 0 2px 6px rgba(239,68,68,0.3); }
  50%     { box-shadow:0 10px 28px rgba(239,68,68,0.7), 0 4px 12px rgba(239,68,68,0.45); }
}

/* Category tabs above horizontal rows */
.med-category-tabs {
  display:flex; gap:6px; overflow-x:auto; padding:4px 12px 10px;
  position:relative; z-index:2; scrollbar-width:none;
}
.med-category-tabs::-webkit-scrollbar { display:none; }
.med-category-tab {
  flex-shrink:0; padding:7px 14px; border-radius:100px; border:1px solid rgba(255,255,255,0.2);
  font-size:12px; font-weight:600; color:#c8cde8;
  background:rgba(255,255,255,0.06); cursor:pointer; transition:all 0.2s;
}
.med-category-tab.active {
  color:#fff; background:linear-gradient(135deg,#6366f1,#7c3aed);
  border-color:transparent; box-shadow:0 3px 10px rgba(99,102,241,0.4);
}
.med-category-tab:active { transform:scale(0.96); }

/* Netflix-style horizontal scrollable row of cards */
.med-row-scroller {
  display:flex; gap:10px; overflow-x:auto; padding:4px 12px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  position:relative; z-index:2;
}
.med-row-scroller::-webkit-scrollbar { display:none; }
.med-row-scroller .med-card-tile {
  flex-shrink:0; min-width:150px; max-width:150px;
  scroll-snap-align:start;
}
.med-row-scroller .med-card-tile-icon { font-size:24px; }
.med-row-scroller .med-card-tile-title { min-height:32px; }

/* Prep-screen — "Get comfortable, close your eyes…" */
.med-player-prep {
  text-align:center; padding:40px 12px 28px;
  animation: medPrepFadeIn 0.5s ease-out;
}
.med-player-prep-emoji {
  font-size:72px; display:inline-block;
  animation: medPrepEmoji 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter:drop-shadow(0 4px 12px rgba(165,180,252,0.5));
}
.med-player-prep-title {
  font-size:20px; font-weight:700; color:#fff; margin:18px 0 8px;
}
.med-player-prep-sub {
  font-size:13px; line-height:1.5; color:#c8cde8; max-width:280px; margin:0 auto;
}
.med-player-prep-countdown {
  font-size:56px; font-weight:800; color:#a5b4fc; margin-top:28px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(165,180,252,0.4);
  animation: medPrepCountPulse 1s ease-in-out infinite;
}
.med-player-prep-skip {
  margin-top:20px; padding:8px 18px; border-radius:100px;
  background:rgba(255,255,255,0.1); color:#c8cde8; border:1px solid rgba(255,255,255,0.15);
  font-size:12px; cursor:pointer;
}
/* v2.15.0 — selected mood badge (echoes pick from mood-pre screen) */
.med-player-prep-mood {
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  font-size:24px; opacity:0.85; line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.med-player-prep-mood:empty { display:none; }
@keyframes medPrepFadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes medPrepEmoji { 0%{opacity:0; transform:scale(0.6)} 60%{opacity:1; transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes medPrepCountPulse { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.08); opacity:0.85} }

/* Celebration — end-of-session reward screen */
.med-player-celebrate {
  text-align:center; padding:30px 12px 10px; position:relative;
  animation: medCelFadeIn 0.45s ease-out;
}
.med-player-celebrate-trophy {
  font-size:84px; display:inline-block;
  animation: medCelTrophy 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter:drop-shadow(0 6px 18px rgba(251,191,36,0.45));
}
.med-player-celebrate-title {
  font-size:22px; font-weight:700; color:#fff; margin:14px 0 6px;
}
.med-player-celebrate-sub {
  font-size:13px; color:#c8cde8; margin-bottom:18px;
}
.med-player-celebrate-stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin-bottom:18px;
}
.med-player-celebrate-stat {
  padding:10px 6px; background:rgba(255,255,255,0.08);
  border-radius:12px; border:1px solid rgba(255,255,255,0.08);
}
.med-player-celebrate-stat-n {
  font-size:20px; font-weight:800; color:#fbbf24;
  font-variant-numeric:tabular-nums;
  animation: medCelStatPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s backwards;
}
.med-player-celebrate-stat-l { font-size:10px; color:#a5b4fc; margin-top:2px; text-transform:uppercase; letter-spacing:0.6px; }
/* v2.15.0 — streak-flame ignition pulse on the stat cell that just incremented */
.med-player-celebrate-stat.ignite {
  animation: medStatIgnite 0.9s ease-out 1;
  position:relative;
}
.med-player-celebrate-stat.ignite::before {
  content:'🔥'; position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  font-size:18px; opacity:0; pointer-events:none;
  animation: medFlameRise 1.1s ease-out 1;
}
@keyframes medStatIgnite {
  0%   { transform:scale(1);    text-shadow:none; }
  35%  { transform:scale(1.18); text-shadow:0 0 18px rgba(251,146,60,0.7); }
  100% { transform:scale(1);    text-shadow:none; }
}
@keyframes medFlameRise {
  0%   { opacity:0; transform:translate(-50%,4px) scale(0.5); }
  30%  { opacity:1; transform:translate(-50%,-4px) scale(1.1); }
  100% { opacity:0; transform:translate(-50%,-22px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .med-player-celebrate-stat.ignite { animation:none; }
  .med-player-celebrate-stat.ignite::before { display:none; }
}
.med-player-celebrate-mood {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:100px;
  background:rgba(165,180,252,0.12); border:1px solid rgba(165,180,252,0.25);
  font-size:13px; color:#eaecf4; margin-bottom:18px;
  animation: medCelMoodPop 0.5s ease-out 0.55s backwards;
}
.med-player-celebrate-mood-arrow { font-size:18px; }
.med-player-celebrate-mood.up .med-player-celebrate-mood-arrow { color:#34d399; }
.med-player-celebrate-mood.down .med-player-celebrate-mood-arrow { color:#fb7185; }
.med-player-celebrate-mood.same .med-player-celebrate-mood-arrow { color:#a5b4fc; }
.med-player-celebrate-continue {
  width:100%; padding:12px; margin-top:6px;
  background:linear-gradient(135deg,#6366f1,#7c3aed);
  color:#fff; border:none; border-radius:14px;
  font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px rgba(99,102,241,0.4);
}
.med-player-celebrate-continue:active { transform:scale(0.98); }
@keyframes medCelFadeIn { from{opacity:0} to{opacity:1} }
@keyframes medCelTrophy { 0%{opacity:0; transform:scale(0.2) rotate(-18deg)} 55%{opacity:1; transform:scale(1.15) rotate(4deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes medCelStatPop { 0%{opacity:0; transform:scale(0.3)} 60%{opacity:1; transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes medCelMoodPop { from{opacity:0; transform:scale(0.85)} to{opacity:1; transform:scale(1)} }

/* Confetti — CSS-only falling pieces, JS spawns 40 pieces w/ random positions */
.med-confetti-container {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  border-radius:20px; z-index:1;
}
.med-confetti-piece {
  position:absolute; top:-20px; width:9px; height:14px;
  border-radius:2px; opacity:0.9;
  animation: medConfettiFall 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes medConfettiFall {
  0%   { transform:translate(0, -20px) rotate(0); opacity:1; }
  100% { transform:translate(var(--tx, 30px), 130%) rotate(720deg); opacity:0.3; }
}

/* Haptics + audio toggle row (below player controls) — expand existing bar */
.med-player-settings {
  display:flex; justify-content:center; gap:10px; margin-top:8px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,0.08);
}
.med-player-settings .med-toggle {
  background:rgba(255,255,255,0.08); color:#c8cde8;
  border:1px solid rgba(255,255,255,0.12);
  padding:5px 10px; border-radius:100px; font-size:11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.med-player-settings .med-toggle.on {
  background:rgba(165,180,252,0.2); color:#eaecf4;
  border-color:rgba(165,180,252,0.4);
}
.med-player-settings .med-toggle:active { transform:scale(0.96); }

/* ═══════════════════════════════════════════════════════════════════
   v2.4.12 — TASE 2: Packs, Narrator, Ambient mixer
   ═══════════════════════════════════════════════════════════════════ */

/* Packs row — v2.15.0: now 2×3 compact grid (was horizontal scroller of 230 px
   wide cards which made 6 packs scroll forever). Halves vertical real-estate
   on the meditation home screen. */
.med-packs-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:4px 12px 16px;
  position:relative; z-index:2;
}
.med-pack-card {
  padding:12px 12px 14px; border-radius:14px; cursor:pointer; color:#fff;
  position:relative; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.22);
  transition:transform 0.15s, box-shadow 0.2s;
  min-height:110px; display:flex; flex-direction:column;
}
.med-pack-card:active { transform:scale(0.97); }
.med-pack-card[data-cat="foryou"] { background:linear-gradient(135deg,#6366f1 0%,#7c3aed 100%); }
.med-pack-card[data-cat="sleep"]  { background:linear-gradient(135deg,#1e293b 0%,#312e81 100%); }
.med-pack-card[data-cat="calm"]   { background:linear-gradient(135deg,#0ea5e9 0%,#0369a1 100%); }
.med-pack-card[data-cat="focus"]  { background:linear-gradient(135deg,#f59e0b 0%,#b45309 100%); }
.med-pack-card::after {
  content:''; position:absolute; right:-12px; top:-12px; width:60px; height:60px;
  background:radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 70%);
}
.med-pack-card-icon { font-size:24px; margin-bottom:4px; line-height:1; }
.med-pack-card-title { font-size:13px; font-weight:800; line-height:1.2; margin-bottom:2px; }
.med-pack-card-sub { font-size:10px; opacity:0.82; line-height:1.35; margin-bottom:auto; }
.med-pack-card-progress {
  display:flex; align-items:center; gap:8px; margin-top:6px;
}
.med-pack-card-progress-bar {
  flex:1; height:5px; background:rgba(255,255,255,0.18); border-radius:100px; overflow:hidden;
}
.med-pack-card-progress-fill {
  height:100%; background:#fff; border-radius:100px;
  transition:width 0.4s ease-out;
}
.med-pack-card-progress-text { font-size:10px; font-weight:700; white-space:nowrap; }
.med-pack-card-badge {
  position:absolute; right:12px; top:12px;
  padding:3px 8px; background:rgba(0,0,0,0.3); color:#fff;
  border-radius:100px; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.4px;
}

/* Pack detail modal (list of days) */
.med-pack-overlay { z-index:9998; display:none; }
.med-pack-overlay.active { display:flex; }
.med-pack-modal {
  width:92%; max-width:440px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(180deg,#1a2454 0%, #2d3577 100%);
  color:#eaecf4; border-radius:20px; padding:18px 18px 22px; position:relative;
  border:1px solid rgba(255,255,255,0.1);
}
.med-pack-header { text-align:center; padding:6px 20px 14px; }
.med-pack-icon { font-size:50px; line-height:1; }
.med-pack-title { font-size:20px; font-weight:800; margin-top:6px; }
.med-pack-subtitle { font-size:12px; opacity:0.75; margin-top:4px; }
.med-pack-progress-row {
  display:flex; align-items:center; gap:10px; margin:6px 4px 16px;
}
.med-pack-progress-bar {
  flex:1; height:8px; background:rgba(255,255,255,0.12); border-radius:100px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}
.med-pack-progress-fill {
  height:100%; background:linear-gradient(90deg,#a5b4fc,#6366f1,#7c3aed);
  border-radius:100px; transition:width 0.6s ease-out;
  box-shadow:0 0 10px rgba(165,180,252,0.4);
}
.med-pack-progress-text {
  font-size:12px; font-weight:700; color:#a5b4fc; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.med-pack-days { display:flex; flex-direction:column; gap:8px; }
.med-pack-day {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; cursor:pointer; transition:background 0.2s;
}
.med-pack-day:hover { background:rgba(255,255,255,0.12); }
.med-pack-day.locked { opacity:0.5; cursor:not-allowed; filter:grayscale(0.5); }
.med-pack-day.completed { background:rgba(52,211,153,0.15); border-color:rgba(52,211,153,0.3); }
.med-pack-day.current { background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(124,58,237,0.25)); border-color:rgba(165,180,252,0.4); }
.med-pack-day-num {
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#eaecf4;
}
.med-pack-day.completed .med-pack-day-num { background:#34d399; color:#0f172a; }
.med-pack-day.completed .med-pack-day-num::after { content:'✓'; font-size:14px; }
.med-pack-day-info { flex:1; min-width:0; }
.med-pack-day-title { font-size:13px; font-weight:700; }
.med-pack-day-meta { font-size:10px; color:#a5b4fc; margin-top:2px; }
.med-pack-day-arrow { font-size:16px; opacity:0.7; }
.med-pack-day.locked::after {
  content:'🔒'; font-size:16px; opacity:0.7;
}

/* Narrator voice picker (inside player modal) */
.med-voice-picker, .med-ambient-mixer {
  margin-top:10px; padding:12px 14px;
  background:rgba(0,0,0,0.25); border-radius:12px;
  border:1px solid rgba(165,180,252,0.2);
  animation: medQuoteFade 0.3s ease-out;
}
.med-voice-picker-title, .med-ambient-title {
  font-size:13px; font-weight:700; color:#eaecf4; margin-bottom:10px;
}
.med-ambient-sub {
  font-size:11px; color:#a5b4fc; margin-bottom:10px; margin-top:-6px;
}
.med-voice-picker-list { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.med-voice-item {
  padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,0.06); border:1px solid transparent;
  cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:space-between;
  transition:all 0.15s;
}
.med-voice-item:hover { background:rgba(255,255,255,0.12); }
.med-voice-item.selected {
  background:rgba(165,180,252,0.2); border-color:rgba(165,180,252,0.5);
}
.med-voice-item-check {
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff;
}
.med-voice-item.selected .med-voice-item-check {
  background:#6366f1; border-color:#6366f1;
}
.med-voice-item.selected .med-voice-item-check::after { content:'✓'; }
.med-voice-picker-close {
  margin-top:10px; width:100%; padding:8px;
  background:rgba(255,255,255,0.08); color:#c8cde8;
  border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  font-size:12px; cursor:pointer;
}

/* Ambient mixer */
.med-ambient-row {
  display:flex; align-items:center; gap:10px; padding:6px 0;
}
.med-ambient-label {
  flex-shrink:0; width:110px; font-size:12px; color:#eaecf4;
  display:inline-flex; align-items:center; gap:5px;
}
.med-ambient-slider {
  flex:1; height:4px; border-radius:100px;
  -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,0.12);
  outline:none; cursor:pointer;
}
.med-ambient-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#a5b4fc; box-shadow:0 0 6px rgba(165,180,252,0.7);
  cursor:pointer;
}
.med-ambient-slider::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; border:none;
  background:#a5b4fc; box-shadow:0 0 6px rgba(165,180,252,0.7);
  cursor:pointer;
}

/* ══════════════════════════════════════════════════════════════════
   MEDITATION v2.5.3 — RECODE (layered on top of TASE 1/2/3)
   Research: Top 100 meditation apps (Calm, Waking Up, Balance, Open, Headspace)
   Patterns: time-of-day hero, single CTA, serif accent, tile grid,
   FAB quick-reset, bottom-sheet configurator, player chrome-fade,
   mood-delta viz, glass-morph, AI "built-for-you" shimmer.
   ══════════════════════════════════════════════════════════════════ */
.med-v2 { --med-ink:#f4f5fb; --med-ink-2:#cfd4ea; --med-ink-3:#8f97b5;
  --med-glass:rgba(255,255,255,0.06); --med-glass-2:rgba(255,255,255,0.10);
  --med-glass-bd:rgba(255,255,255,0.14);
  --med-accent:#a5b4fc; --med-accent-2:#6366f1; --med-accent-warm:#fbbf24;
  --med-serif:"Fraunces","DM Serif Display",Georgia,serif;
  --med-radius:20px; --med-radius-sm:14px; }

/* Time-of-day gradient: JS sets data-tod="morning|day|evening|night" on #sc-meditation */
#sc-meditation.med-v2[data-tod="morning"] { background: radial-gradient(120% 70% at 50% 0%, #f6b58e 0%, #d17f9c 35%, #5f3a7a 70%, #1a1442 100%); }
#sc-meditation.med-v2[data-tod="day"]     { background: radial-gradient(120% 70% at 50% 0%, #a5c8ff 0%, #6f8fdc 35%, #3d4a90 70%, #121a40 100%); }
#sc-meditation.med-v2[data-tod="evening"] { background: radial-gradient(120% 70% at 50% 0%, #ffa685 0%, #b25b84 30%, #4a2b6b 65%, #0f0c36 100%); }
#sc-meditation.med-v2[data-tod="night"]   { background: radial-gradient(120% 70% at 50% 0%, #2a3073 0%, #1a1e4e 40%, #0b0f30 100%); }

/* ── HERO ─────────────────────────────────────────────────────── */
.med-v2 .med-hero2 {
  position:relative; padding:28px 20px 24px; text-align:center;
  min-height:46vh; display:flex; flex-direction:column; justify-content:flex-end;
}
.med-v2 .med-hero2-greeting {
  font-family:var(--med-serif); font-weight:500;
  font-size:30px; line-height:1.15; letter-spacing:-0.01em;
  color:#fff; margin:0 0 6px;
  text-shadow:0 2px 16px rgba(0,0,0,0.3);
}
.med-v2 .med-hero2-intent {
  font-family:var(--med-serif); font-style:italic;
  font-size:15px; line-height:1.45; color:rgba(255,255,255,0.82);
  max-width:360px; margin:0 auto 18px;
}
.med-v2 .med-hero2-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,0.95); color:#1b1f3d;
  border:none; border-radius:999px; padding:15px 30px;
  font-size:15px; font-weight:600; letter-spacing:0.01em;
  box-shadow:0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,255,255,0.6);
  animation: medHeroCtaPulse 3.2s ease-in-out infinite;
  cursor:pointer; touch-action:manipulation;
}
@keyframes medHeroCtaPulse {
  0%,100% { box-shadow:0 10px 30px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,255,255,0.5); }
  50%     { box-shadow:0 10px 30px rgba(0,0,0,0.25), 0 0 0 14px rgba(255,255,255,0); }
}
.med-v2 .med-hero2-cta:active { transform:scale(0.97); }
.med-v2 .med-hero2-meta {
  display:flex; justify-content:center; gap:16px; margin-top:14px;
  font-size:12px; color:rgba(255,255,255,0.75);
}
.med-v2 .med-hero2-meta b { color:#fff; font-weight:700; }

/* ── SOS floating corner chip (top right) ──────────────────────── */
.med-v2 .med-sos-fab {
  position:absolute; top:14px; right:14px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  background:rgba(239,68,68,0.18); color:#fecaca;
  border:1px solid rgba(239,68,68,0.4); font-size:12px; font-weight:600;
  backdrop-filter:blur(12px); cursor:pointer;
}

/* ── AI "Built for you today" shimmer card ─────────────────────── */
.med-v2 .med-ai-today {
  position:relative; margin:0 16px 16px;
  border-radius:var(--med-radius); overflow:hidden;
  background:linear-gradient(135deg, rgba(165,180,252,0.22), rgba(99,102,241,0.28));
  border:1px solid var(--med-glass-bd); backdrop-filter:blur(14px);
  padding:14px 16px; cursor:pointer;
}
.med-v2 .med-ai-today::before {
  content:''; position:absolute; inset:-40%;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  animation: medAiShimmer 6s linear infinite;
  pointer-events:none;
}
@keyframes medAiShimmer { 0%{transform:translateX(-30%)} 100%{transform:translateX(30%)} }
.med-v2 .med-ai-today-head {
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--med-accent); margin-bottom:6px;
}
.med-v2 .med-ai-today-title {
  font-family:var(--med-serif); font-size:18px; font-weight:500;
  color:#fff; margin-bottom:4px;
}
.med-v2 .med-ai-today-sub {
  font-size:12px; color:var(--med-ink-2); line-height:1.4;
}
.med-v2 .med-ai-today-arrow {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
}

/* v2.15.0 — CBT-style post-session reflection (Func-10) */
.med-reflection {
  padding:18px 16px 8px;
  animation: medCelFadeIn 0.4s ease-out;
}
.med-reflection-q {
  font-size:13px; font-weight:600; color:#c8cde8; margin:8px 0 6px;
}
.med-refl-input {
  width:100%; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  color:#fff; font-size:14px; font-family:inherit; resize:vertical;
}
.med-refl-input:focus { outline:none; border-color:#a5b4fc; background:rgba(255,255,255,0.1); }
.med-refl-skip, .med-refl-save {
  flex:1; padding:11px; border-radius:100px; border:none; cursor:pointer; font-size:13px; font-weight:700;
}
.med-refl-skip { background:rgba(255,255,255,0.08); color:#c8cde8; }
.med-refl-save { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.med-refl-skip:active, .med-refl-save:active { transform:scale(0.97); }

/* v2.15.0 — Theory micro-lectures (Func-8) */
.med-theory-toggle {
  width:100%; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:#c8cde8; font-size:13px; font-weight:600; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:8px;
  transition:background .15s, transform .12s;
}
.med-theory-toggle:hover { background:rgba(255,255,255,0.1); }
.med-theory-toggle:active { transform:scale(0.98); }
.med-theory-sheet {
  position:fixed; inset:auto 0 0 0; max-height:85vh; overflow:hidden;
  background:linear-gradient(180deg, #1e1b4b, #0f0f23);
  color:#e7e0ff; border-radius:18px 18px 0 0;
  box-shadow:0 -8px 28px rgba(0,0,0,0.45);
  display:flex; flex-direction:column;
  animation:medTheoryUp .28s cubic-bezier(.34,.06,.22,1);
}
.med-theory-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; font-size:15px; font-weight:700;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
#med-theory-list { overflow-y:auto; padding:8px 14px 28px; }
.med-theory-clip {
  padding:12px 14px; margin:8px 0; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
}
.med-theory-clip-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
.med-theory-clip-meta  { font-size:11px; color:#a5b4fc; margin-bottom:8px; opacity:0.85; }
.med-theory-clip-body  { font-size:13px; line-height:1.55; color:#d5d5e8; }
@keyframes medTheoryUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* v2.15.0 — Badges + missions list (Func-9) */
.med-badges-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px;
  padding:8px 0 12px;
}
.med-badge-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:12px 8px; text-align:center; color:#e7e0ff;
  transition:transform .15s;
}
.med-badge-card.unlocked {
  background:linear-gradient(135deg,rgba(251,191,36,0.18),rgba(124,58,237,0.18));
  border-color:rgba(251,191,36,0.45);
}
.med-badge-card.locked  { opacity:0.45; filter:grayscale(0.6); }
.med-badge-ico   { font-size:30px; line-height:1; margin-bottom:4px; }
.med-badge-title { font-size:11px; font-weight:700; line-height:1.2; }
.med-badge-desc  { font-size:10px; color:#a5b4fc; margin-top:3px; line-height:1.3; opacity:0.85; }
.med-mission-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:8px 0; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
}
.med-mission-row.completed { border-color:rgba(52,211,153,0.5); }
.med-mission-ico   { font-size:22px; flex:0 0 28px; }
.med-mission-body  { flex:1; min-width:0; }
.med-mission-title { font-size:13px; font-weight:700; color:#fff; }
.med-mission-bar   { height:6px; border-radius:100px; background:rgba(255,255,255,0.12); margin-top:6px; overflow:hidden; }
.med-mission-fill  { height:100%; background:linear-gradient(90deg,#a5b4fc,#8b5cf6); border-radius:100px; transition:width .45s ease-out; }
.med-mission-pct   { font-size:11px; color:#c8cde8; margin-top:3px; font-variant-numeric:tabular-nums; }

/* v2.15.0 — Wheel-by-context (Func-4) */
.med-wheel-title {
  font-size:13px; font-weight:700; color:#c8cde8; margin:6px 4px 8px; opacity:0.85;
}
.med-wheel {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.med-wheel-btn {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius:14px; padding:12px 6px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#e7e0ff; cursor:pointer; transition:transform .12s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.med-wheel-btn:hover { background:rgba(255,255,255,0.12); }
.med-wheel-btn:active { transform:scale(0.95); }
.med-wheel-ico { font-size:22px; line-height:1; }
.med-wheel-lbl { font-size:10.5px; font-weight:600; text-align:center; line-height:1.2; }
@media (max-width: 380px){
  .med-wheel { grid-template-columns:repeat(3, 1fr); }
}

/* v2.15.0 — Category tab pills with icon + text */
.med-cat-tabs {
  display:flex; gap:8px; padding:8px 14px 12px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.med-cat-tabs::-webkit-scrollbar { display:none; }
.med-cat-tabs .med-category-tab {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:#c8cde8; font-size:12px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.med-cat-tabs .med-category-tab .med-cat-ico { width:16px; height:16px; flex:0 0 16px; }
.med-cat-tabs .med-category-tab:hover { background:rgba(255,255,255,0.1); }
.med-cat-tabs .med-category-tab:active { transform:scale(0.96); }
.med-cat-tabs .med-category-tab.active {
  background:linear-gradient(135deg, #6366f1, #8b5cf6); color:#fff;
  border-color:rgba(255,255,255,0.35);
  box-shadow:0 2px 12px rgba(99,102,241,0.4);
}

/* ── Tile grid (2-up) ─────────────────────────────────────────── */
.med-v2 .med-tiles2 {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:0 16px; margin-bottom:12px;
}
.med-v2 .med-tile2 {
  position:relative; overflow:hidden;
  border-radius:var(--med-radius-sm); padding:14px;
  min-height:110px; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--med-glass); border:1px solid var(--med-glass-bd);
  backdrop-filter:blur(10px); color:var(--med-ink);
  cursor:pointer; transition:transform 0.15s ease, background 0.15s ease;
}
.med-v2 .med-tile2:active { transform:scale(0.97); background:var(--med-glass-2); }
.med-v2 .med-tile2-icon { font-size:26px; line-height:1; }
.med-v2 .med-tile2-title { font-size:14px; font-weight:600; margin-top:6px; }
.med-v2 .med-tile2-meta  { font-size:11px; color:var(--med-ink-3); margin-top:2px; }
/* v2.15.0 — breath-pattern preview pulse. Each tile injects a unique
   @keyframes via inline <style> and references it by name; this rule sets
   shape/colour/timing-function so the keyframes only have to declare scale. */
.med-v2 .med-tile2 .med-tile2-pulse {
  position:absolute; right:14px; top:14px;
  width:34px; height:34px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), rgba(165,180,252,0.55) 55%, rgba(91,125,255,0.85));
  box-shadow: 0 0 12px rgba(165,180,252,0.45);
  transform-origin:center; transform:scale(0.55);
  animation-timing-function: cubic-bezier(.45,.1,.55,.9);
  animation-iteration-count: infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .med-v2 .med-tile2 .med-tile2-pulse { animation: none !important; transform:scale(0.85) !important; }
}
.med-v2 .med-tile2-badge {
  position:absolute; top:10px; right:10px;
  font-size:10px; padding:2px 8px; border-radius:999px;
  background:rgba(251,191,36,0.2); color:#fde68a;
  border:1px solid rgba(251,191,36,0.4);
}

/* Tile icon colour tones */
.med-v2 .med-tile2[data-kind="breath"]  { background:linear-gradient(135deg, rgba(165,180,252,0.14), rgba(165,180,252,0.04)); }
.med-v2 .med-tile2[data-kind="guided"]  { background:linear-gradient(135deg, rgba(147,197,253,0.14), rgba(147,197,253,0.04)); }
.med-v2 .med-tile2[data-kind="sleep"]   { background:linear-gradient(135deg, rgba(196,181,253,0.16), rgba(196,181,253,0.04)); }
.med-v2 .med-tile2[data-kind="courses"] { background:linear-gradient(135deg, rgba(253,186,116,0.14), rgba(253,186,116,0.04)); }

/* ── Section head (minimal, in v2) ────────────────────────────── */
.med-v2 .med-sec2 {
  font-family:var(--med-serif); font-weight:500; font-style:italic;
  font-size:15px; color:rgba(255,255,255,0.85);
  margin:18px 20px 10px;
}

/* ── Horizontal breath pill row (v2 restyle) ───────────────────── */
.med-v2 #med-pill-row { padding:4px 16px 8px; }
.med-v2 .med-breath-pill {
  background:var(--med-glass); border:1px solid var(--med-glass-bd);
  color:var(--med-ink); backdrop-filter:blur(8px);
  padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:500;
}

/* ── FAB: 3-min quick reset ───────────────────────────────────── */
.med-v2 .med-fab {
  position:fixed; right:16px; bottom:84px; z-index:40;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--med-accent), var(--med-accent-2));
  border:none; color:#fff; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(99,102,241,0.5), 0 0 0 0 rgba(165,180,252,0.5);
  animation: medFabGlow 3s ease-in-out infinite;
}
@keyframes medFabGlow {
  0%,100% { box-shadow:0 10px 28px rgba(99,102,241,0.5), 0 0 0 0 rgba(165,180,252,0.6); }
  50%     { box-shadow:0 10px 28px rgba(99,102,241,0.5), 0 0 0 14px rgba(165,180,252,0); }
}
.med-v2 .med-fab:active { transform:scale(0.94); }
.med-v2 .med-fab-lbl {
  position:absolute; right:64px; top:50%; transform:translateY(-50%);
  white-space:nowrap; background:rgba(17,20,44,0.92); color:#fff;
  padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600;
  pointer-events:none; opacity:0; transition:opacity 0.2s;
}
.med-v2 .med-fab:hover .med-fab-lbl { opacity:1; }

/* ── Bottom-sheet pre-session configurator ─────────────────────── */
.med-sheet-overlay {
  position:fixed; inset:0; z-index:9998;
  background:rgba(6,9,30,0.55); backdrop-filter:blur(6px);
  display:none; align-items:flex-end; justify-content:center;
  animation: medSheetFadeIn 0.25s ease-out;
}
.med-sheet-overlay.active { display:flex; }
@keyframes medSheetFadeIn { from{opacity:0} to{opacity:1} }
.med-sheet {
  width:100%; max-width:540px;
  background:linear-gradient(180deg, #1b1f3d 0%, #0f132d 100%);
  border-top-left-radius:24px; border-top-right-radius:24px;
  padding:18px 20px 28px; max-height:86vh; overflow-y:auto;
  color:var(--med-ink);
  box-shadow:0 -20px 60px rgba(0,0,0,0.4);
  animation: medSheetSlideUp 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes medSheetSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.med-sheet-handle {
  width:42px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.2); margin:0 auto 14px;
}
.med-sheet-hd {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:16px;
}
.med-sheet-title {
  font-family:var(--med-serif); font-size:20px; font-weight:500;
  color:#fff; margin:0; line-height:1.25;
}
.med-sheet-sub { font-size:12px; color:var(--med-ink-3); margin-top:2px; }
.med-sheet-close {
  background:rgba(255,255,255,0.08); color:#fff; border:none;
  width:32px; height:32px; border-radius:50%; font-size:14px; cursor:pointer;
  flex-shrink:0;
}
.med-sheet-sec { margin-bottom:18px; }
.med-sheet-sec-lbl {
  font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--med-accent); margin-bottom:8px;
}
.med-sheet-pills { display:flex; flex-wrap:wrap; gap:8px; }
.med-sheet-pill {
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:var(--med-ink-2); font-size:13px; font-weight:500;
  cursor:pointer; transition:all 0.15s;
}
.med-sheet-pill.active {
  background:linear-gradient(135deg, var(--med-accent), var(--med-accent-2));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(99,102,241,0.4);
}
.med-sheet-slider {
  width:100%; margin:6px 0;
}
.med-sheet-slider-val {
  text-align:center; font-size:24px; font-weight:700; color:#fff;
  font-family:var(--med-serif); margin-bottom:4px;
}
.med-sheet-mix { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.med-sheet-mix-tile {
  aspect-ratio:1; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:22px; cursor:pointer; color:var(--med-ink-2);
  transition:all 0.15s;
}
.med-sheet-mix-tile .lbl { font-size:10px; font-weight:600; letter-spacing:0.02em; }
.med-sheet-mix-tile.active {
  background:linear-gradient(135deg, rgba(165,180,252,0.3), rgba(99,102,241,0.25));
  border-color:var(--med-accent); color:#fff;
}
.med-sheet-cta {
  width:100%; margin-top:10px; padding:14px;
  border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg, var(--med-accent), var(--med-accent-2));
  color:#fff; font-size:15px; font-weight:600;
  box-shadow:0 8px 22px rgba(99,102,241,0.4);
}
.med-sheet-cta:active { transform:scale(0.98); }

/* ── Player v2 enhancements (chrome fade + mood slider + delta) ── */
.med-player-overlay.chrome-hidden .med-player-close,
.med-player-overlay.chrome-hidden .med-player-title,
.med-player-overlay.chrome-hidden .med-player-controls,
.med-player-overlay.chrome-hidden #med-player-timer {
  opacity:0.15; transition:opacity 0.8s ease;
}
.med-player-overlay:not(.chrome-hidden) .med-player-close,
.med-player-overlay:not(.chrome-hidden) .med-player-title,
.med-player-overlay:not(.chrome-hidden) .med-player-controls,
.med-player-overlay:not(.chrome-hidden) #med-player-timer {
  opacity:1; transition:opacity 0.3s ease;
}

/* Mood slider removed — replaced by emoji button grid */
.med-mood-delta {
  text-align:center; padding:14px 12px; margin:12px 0;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
  border:1px solid rgba(34,197,94,0.3);
}
.med-mood-delta.neg { background:linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)); border-color:rgba(239,68,68,0.3); }
.med-mood-delta.zero { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1); }
.med-mood-delta-num {
  font-family:var(--med-serif); font-size:32px; font-weight:500; color:#22c55e;
  line-height:1;
}
.med-mood-delta.neg .med-mood-delta-num { color:#fca5a5; }
.med-mood-delta.zero .med-mood-delta-num { color:var(--med-ink-2); }
.med-mood-delta-lbl { font-size:12px; color:var(--med-ink-2); margin-top:4px; }

/* Live transcript (player) */
.med-player-transcript {
  max-height:140px; overflow-y:auto; padding:12px 14px; margin-top:10px;
  border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  font-size:13px; line-height:1.65; color:var(--med-ink-2);
}
.med-player-transcript .t-line { opacity:0.35; transition:opacity 0.4s; }
.med-player-transcript .t-line.current { opacity:1; color:#fff; }
.med-player-transcript-toggle {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--med-accent); cursor:pointer;
  margin-top:8px; background:transparent; border:none;
}

/* ── Narrow-phone fallbacks ──────────────────────────────────── */
@media (max-width:360px) {
  .med-v2 .med-hero2-greeting { font-size:26px; }
  .med-v2 .med-hero2-cta { padding:13px 24px; font-size:14px; }
  .med-v2 .med-tiles2 { gap:8px; padding:0 12px; }
  .med-v2 .med-tile2 { padding:12px; min-height:100px; }
}

/* ════════════════════════════════════════════════════════════════════
   v2.14.4 — Modern sleep-entry card
   Replaces the 1990s-era plain-form <label>+<input> layout with a
   collapsible pill-based design. Expands on tap (Fitbit covers 95% of
   users so the default state is compact). All element IDs preserved
   for JS compat.
   ════════════════════════════════════════════════════════════════════ */

.sl-entry-card { border: 1px solid var(--border); }

/* Collapsed trigger row */
.sl-entry-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: transparent; border: 0; cursor: pointer;
  font-family: 'DM Sans', sans-serif; color: var(--t1);
  text-align: left;
  transition: background .15s;
}
.sl-entry-toggle:hover { background: var(--surface2); }
.sl-entry-toggle-ico { font-size: 24px; flex-shrink: 0; }
.sl-entry-toggle-text { flex: 1; min-width: 0; }
.sl-entry-toggle-title { font-size: 14px; font-weight: 700; }
.sl-entry-toggle-sub   { font-size: 11px; color: var(--t3); margin-top: 2px; }
.sl-entry-toggle-chev {
  font-size: 14px; color: var(--t3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.sl-entry-card.open .sl-entry-toggle-chev { transform: rotate(180deg); }

/* Body — hidden by default, slides down on open */
.sl-entry-body {
  max-height: 0; overflow: hidden;
  padding: 0 14px;
  transition: max-height .35s cubic-bezier(.2,.8,.2,1), padding .25s;
}
.sl-entry-card.open .sl-entry-body {
  max-height: 600px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}

/* Time pills (bedtime + waketime, inline with arrow) */
.sl-time-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
}
.sl-time-pill {
  flex: 1; position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, transform .08s;
}
.sl-time-pill:hover, .sl-time-pill:focus-within { border-color: var(--brand); }
.sl-time-pill:active { transform: scale(.98); }
.sl-time-pill-ico { font-size: 16px; line-height: 1; }
.sl-time-pill-label {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .6px;
}
.sl-time-pill-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: 0; background: transparent;
  /* Overlay: picker triggers on tap anywhere on the pill */
}
/* Visible value shown via ::after pseudo reading the input value */
.sl-time-pill::after {
  content: attr(data-val);
  font-family: 'DM Mono', 'DM Sans', monospace;
  font-size: 20px; font-weight: 700;
  color: var(--t1);
  letter-spacing: -.5px;
  line-height: 1.1;
}
.sl-time-arrow {
  font-size: 18px; color: var(--t3);
  flex-shrink: 0;
}

/* Date pill (single, full-width) */
.sl-date-pill {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s;
}
.sl-date-pill:hover, .sl-date-pill:focus-within { border-color: var(--brand); }
.sl-date-pill-ico { font-size: 16px; }
.sl-date-pill-label {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .6px;
  flex-shrink: 0;
}
.sl-date-pill-input {
  flex: 1;
  border: 0; background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--t1);
  outline: none; cursor: pointer;
}

/* Emoji quality picker — 5 big round faces */
.sl-quality-row { margin-top: 14px; }
.sl-quality-label {
  font-size: 12px; font-weight: 600; color: var(--t2);
  margin-bottom: 8px;
}
.sl-quality-faces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.sl-q-face {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--surface2);
  font-size: 22px;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.8,.2,1.4),
              border-color .15s, background .15s;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.sl-q-face:hover { transform: scale(1.08); }
.sl-q-face:active { transform: scale(.92); }
.sl-q-face.active {
  border-color: var(--brand);
  background: var(--brand-l);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.sl-q-face span { display: block; line-height: 1; }

/* Notes input */
.sl-notes-input {
  width: 100%; margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--t1);
  outline: none;
  transition: border-color .15s;
}
.sl-notes-input:focus { border-color: var(--brand); }
.sl-notes-input::placeholder { color: var(--t4); }

/* Full-width primary save */
.sl-save-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-d) 100%);
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  border: 0; border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
  transition: transform .08s, box-shadow .2s;
}
.sl-save-btn:hover { box-shadow: 0 6px 20px rgba(37,99,235,.4); }
.sl-save-btn:active { transform: scale(.98); box-shadow: 0 2px 8px rgba(37,99,235,.25); }

/* Dark-theme overrides */
[data-theme="dark"] .tl-time{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
[data-theme="dark"] .sl-time-pill,
[data-theme="dark"] .sl-date-pill,
[data-theme="dark"] .sl-notes-input,
[data-theme="dark"] .sl-q-face { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .sl-q-face.active {
  background: rgba(37,99,235,.18);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sl-entry-body, .sl-entry-toggle-chev,
  .sl-q-face, .sl-save-btn { transition: none; }
  .sl-q-face.active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v2.14.6 — Modern Form Module (.mfm-*)
   Reusable namespace for modern bottom-sheet forms. First adopters:
   activity-add (this version), drug-add + meal-add (later).
   ════════════════════════════════════════════════════════════════════ */

/* Section heading */
.mfm-section { margin-bottom: 14px; }
.mfm-section-label {
  font-size: 11px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 8px;
}

/* Horizontal-scroll emoji-tile picker (activity types, etc.) */
.mfm-tile-scroll {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mfm-tile-scroll::-webkit-scrollbar { display: none; }
.mfm-tile {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 76px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.8,.2,1.4),
              border-color .15s, background .15s;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.mfm-tile:hover  { transform: translateY(-1px); }
.mfm-tile:active { transform: scale(.96); }
.mfm-tile.active {
  border-color: var(--brand);
  background: var(--brand-l);
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(37,99,235,.2);
}
.mfm-tile-ico { font-size: 24px; line-height: 1; }
.mfm-tile-lbl {
  font-size: 11px; font-weight: 600; color: var(--t2);
  white-space: nowrap;
}
.mfm-tile.active .mfm-tile-lbl { color: var(--brand); }

/* 2-col pill row */
.mfm-row {
  display: flex; gap: 10px;
  margin-bottom: 10px;
}
.mfm-row > .mfm-pill { flex: 1; }

/* Generic pill input (number/date/time) */
/* v2.57.0: display-units swap hides one of the two height pills (metric cm
   vs imperial ft·in) via the hidden attribute — flex above would win without
   this (same pattern as meal-habit.css). */
.mfm-pill[hidden] { display: none !important; }
.mfm-pill {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: text;
  transition: border-color .15s;
}
.mfm-pill:hover, .mfm-pill:focus-within { border-color: var(--brand); }
.mfm-pill-ico {
  position: absolute; top: 8px; right: 12px;
  font-size: 16px; opacity: .5;
}
.mfm-pill-label {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .6px;
}
.mfm-pill-input {
  width: 100%;
  border: 0; background: transparent;
  font-family: 'DM Mono', 'DM Sans', monospace;
  font-size: 18px; font-weight: 700; color: var(--t1);
  letter-spacing: -.3px;
  outline: none;
  /* hide native number-input arrows */
  -moz-appearance: textfield;
}
.mfm-pill-input::-webkit-outer-spin-button,
.mfm-pill-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mfm-pill-input::placeholder { color: var(--t4); font-weight: 400; }
.mfm-pill-input--date { font-family: 'DM Sans', sans-serif; font-size: 16px; }

/* Notes input full-width */
.mfm-notes-input {
  width: 100%; margin-top: 6px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--t1);
  outline: none;
  transition: border-color .15s;
}
.mfm-notes-input:focus { border-color: var(--brand); }
.mfm-notes-input::placeholder { color: var(--t4); }

/* Live preview card (calorie estimate, etc.) */
.mfm-preview {
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(249,115,22,.02));
  border: 1px solid rgba(249,115,22,.2);
  border-radius: 16px;
  text-align: center;
}
.mfm-preview-label {
  font-size: 11px; color: var(--t3);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px;
}
.mfm-preview-num {
  font-size: 32px; font-weight: 800; color: #f97316;
  line-height: 1; letter-spacing: -1px;
}
.mfm-preview-unit { font-size: 11px; color: var(--t3); margin-top: 2px; }
.mfm-preview-meta {
  display: flex; justify-content: center; gap: 16px;
  margin-top: 10px;
  font-size: 12px; color: var(--t2);
}

/* Actions row (Save + Cancel) */
.mfm-actions {
  display: flex; gap: 10px;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.mfm-btn-primary {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-d) 100%);
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  border: 0; border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
  transition: transform .08s, box-shadow .2s;
}
.mfm-btn-primary:hover  { box-shadow: 0 6px 20px rgba(37,99,235,.4); }
.mfm-btn-primary:active { transform: scale(.98); }
.mfm-btn-ghost {
  padding: 14px 20px;
  background: transparent;
  color: var(--t2); font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  border: 0; border-radius: 14px;
  cursor: pointer;
  transition: background .15s;
}
.mfm-btn-ghost:hover { background: var(--surface2); }

/* Bottom-sheet style anchor — keeps modal at viewport bottom on mobile.
   v2.17.38: flex column + scrollable body. Base .modal caps height (max-height:
   88–92%) but nothing scrolled, so a sheet taller than the viewport clipped
   below the fold with Save unreachable (Edit Profile hit this once the fasting
   section landed). Handle/title/actions stay pinned; only the body scrolls. */
.mfm-sheet { padding: 0 !important; display: flex; flex-direction: column; }
.mfm-sheet .modal-handle { margin: 8px auto 4px; flex-shrink: 0; }
.mfm-sheet .modal-title { padding: 4px 16px 12px; flex-shrink: 0; }
.mfm-sheet .modal-body  { padding: 0 16px 16px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.mfm-sheet .mfm-actions { flex-shrink: 0; }

/* Dark-theme overrides */
[data-theme="dark"] .mfm-tile,
[data-theme="dark"] .mfm-pill,
[data-theme="dark"] .mfm-notes-input { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .mfm-tile.active {
  background: rgba(37,99,235,.18);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mfm-tile, .mfm-btn-primary { transition: none; }
  .mfm-tile.active { transform: none; }
}

/* v2.14.7 — Add Drug additions to .mfm-* module */

/* Chips (3-state radio: daily / every-other / specific-days) */
.mfm-chips {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.mfm-chip {
  flex: 1; min-width: 80px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1.5px solid transparent;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600; color: var(--t2);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.mfm-chip:hover  { transform: translateY(-1px); }
.mfm-chip:active { transform: scale(.96); }
.mfm-chip.active {
  /* v2.17.44: solid brand pill + white text in EVERY theme (matches the gender
     selector and .mfm-day-pill.checked). The old --brand-l bg + --brand text
     only read correctly in light theme; in dark theme the background became
     solid --brand while the text stayed --brand → blue-on-blue, so only the
     emoji showed. Not depending on the theme-specific override removes that
     whole failure class regardless of how dark mode is applied. */
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

/* Day-of-week selector (Mon Tue Wed... pills) */
.mfm-day-row {
  display: flex; gap: 6px;
  justify-content: space-between;
}
.mfm-day-pill {
  flex: 1; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border: 1.5px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--t2);
  transition: transform .12s, border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mfm-day-pill input { display: none; }
.mfm-day-pill:hover  { transform: translateY(-1px); }
.mfm-day-pill:active { transform: scale(.92); }
.mfm-day-pill:has(input:checked) {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(37,99,235,.3);
}
/* :has() fallback for older browsers — JS sets .checked class manually */
.mfm-day-pill.checked {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(37,99,235,.3);
}

/* Dark theme */
[data-theme="dark"] .mfm-chip,
[data-theme="dark"] .mfm-day-pill { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .mfm-chip.active,
[data-theme="dark"] .mfm-day-pill:has(input:checked),
[data-theme="dark"] .mfm-day-pill.checked {
  background: var(--brand);
  border-color: var(--brand);
  /* v2.17.43: the base .mfm-chip.active sets color:var(--brand); in dark theme
     the background here becomes solid var(--brand) too, so the label was blue-
     on-blue (invisible — only the emoji showed). Force white like .mfm-day-pill.checked. */
  color: #fff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mfm-chip, .mfm-day-pill { transition: none; }
  .mfm-chip.active,
  .mfm-day-pill:has(input:checked),
  .mfm-day-pill.checked { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v2.14.7 — Modern face-lift for legacy .vf-group + .app-input forms
   (vitals / glucose / cholesterol / symptoms / cycle). Doesn't touch
   HTML — just upgrades the visual layer to match the .mfm-* module.
   ════════════════════════════════════════════════════════════════════ */

.vf-row {
  display: flex; gap: 10px;
  margin-bottom: 10px;
}
.vf-group {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .15s;
}
.vf-group:focus-within { border-color: var(--brand); }
.vf-group .form-label {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .6px;
  margin: 0; padding: 0;
}
.vf-group .app-input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: 'DM Mono', 'DM Sans', monospace !important;
  font-size: 18px !important; font-weight: 700 !important;
  color: var(--t1) !important;
  letter-spacing: -.3px;
  outline: none !important;
  -moz-appearance: textfield;
}
.vf-group .app-input::-webkit-outer-spin-button,
.vf-group .app-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.vf-group .app-input::placeholder {
  color: var(--t4); font-weight: 400;
}
/* Select dropdowns inside .vf-group (glucose type, cycle flow, etc.) */
.vf-group select.app-input {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important; font-weight: 600 !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237A8CA8' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  padding-right: 18px !important;
}

/* Vitals-form / inline-form Save button — match .mfm-btn-primary */
.vitals-form .btn-block,
.glucose-form .btn-block,
.chol-form .btn-block,
.sym-form .btn-block,
.cyc-form .btn-block {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: 100% !important; padding: 14px 20px !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-d) 100%) !important;
  color: #fff !important; font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important; font-weight: 700 !important;
  border: 0 !important; border-radius: 14px !important;
  cursor: pointer; box-shadow: 0 4px 14px rgba(37,99,235,.3);
  transition: transform .08s, box-shadow .2s;
}
.vitals-form .btn-block:hover,
.glucose-form .btn-block:hover,
.chol-form .btn-block:hover,
.sym-form .btn-block:hover,
.cyc-form .btn-block:hover { box-shadow: 0 6px 20px rgba(37,99,235,.4) !important; }
.vitals-form .btn-block:active,
.glucose-form .btn-block:active,
.chol-form .btn-block:active,
.sym-form .btn-block:active,
.cyc-form .btn-block:active { transform: scale(.98); }

/* Dark theme overrides */
[data-theme="dark"] .vf-group { background: rgba(255,255,255,0.04); }

/* ═══ v2.21.0 — ⚡ Quick-log sheet + 🎛️ Minu moodulid ═══ */
/* Kasutaja peidetud mooduli elemendid (data-feature → USER_MODULES).
   !important võidab sektsioonide oma inline display-oleku (nt db-*-wrap,
   mida JS andmete saabudes display:''-ks lülitab). */
.umod-hidden{display:none!important}

.ql-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
/* v2.54.36 (SW3-04): the author display:flex above overrides the UA [hidden]
   rule, so BOTH overlay nodes (#ql-overlay and #umod-overlay) computed
   flex rects even when closed — the sweep saw two "identical" mounted
   overlays. Keep hidden overlays fully out of layout. _sheetShow() clears
   hidden before the reflow, so open transitions are unaffected. */
.ql-overlay[hidden]{display:none}
.ql-overlay.open{opacity:1;pointer-events:auto}
.ql-sheet{width:100%;max-width:520px;background:var(--surface);border-radius:20px 20px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 32px rgba(0,0,0,.25);transform:translateY(24px);transition:transform .22s ease;max-height:80vh;overflow-y:auto}
.ql-overlay.open .ql-sheet{transform:translateY(0)}
.ql-handle{width:38px;height:4px;border-radius:2px;background:var(--border);margin:2px auto 10px}
.ql-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ql-title{font-size:16px;font-weight:800;color:var(--t1)}
.ql-x{background:var(--surface2);border:none;border-radius:50%;width:44px;height:44px;font-size:15px;color:var(--t3);cursor:pointer;flex-shrink:0}
.ql-row{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-top:8px}
.ql-row-btn{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ql-row-btn:active{transform:scale(.985)}
.ql-row-hd{display:flex;align-items:center;gap:8px}
.ql-ico{font-size:18px}
.ql-lbl{font-size:13px;font-weight:700;color:var(--t1)}
.ql-sub{font-size:11px;color:var(--t3);margin-left:auto}
/* v2.27.0: header ＋ for "add a new medication" in the quick-log meds row.
   margin-left:0 keeps it hugging the sub (which already carries margin-left:auto). */
.ql-add-btn{margin-left:8px;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--brand);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ql-add-btn:active{transform:scale(.92)}
.ql-sub-plain{font-size:12px;color:var(--t3)}
.ql-moods{display:flex;gap:6px;margin-top:8px}
.ql-mood-btn{flex:1;font-size:24px;padding:8px 0;background:var(--surface);border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);min-height:44px}
.ql-mood-btn:active{transform:scale(.92)}
.ql-mood-btn:nth-child(1):hover{background:#FEF2F2;border-color:#FECACA}
.ql-mood-btn:nth-child(2):hover{background:#FFF7ED;border-color:#FED7AA}
.ql-mood-btn:nth-child(3):hover{background:#FFFBEB;border-color:#FDE68A}
.ql-mood-btn:nth-child(4):hover{background:#F0FDF4;border-color:#BBF7D0}
.ql-mood-btn:nth-child(5):hover{background:#ECFEFF;border-color:#A5F3FC}
.ql-acts{display:flex;gap:6px;margin-top:8px;align-items:center}
.ql-chip{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--t1);cursor:pointer;min-height:38px;white-space:nowrap}
.ql-chip:active{transform:scale(.96)}
.ql-chip-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.ql-input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:14px;color:var(--t1)}
.ql-unit{font-size:12px;color:var(--t3)}
.ql-empty{padding:20px;text-align:center;font-size:13px;color:var(--t3);line-height:1.5}

/* Moodulivalija */
.umod-desc{font-size:12px;color:var(--t3);margin:2px 0 10px;line-height:1.45}
.umod-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.umod-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;background:var(--surface2);border:1.5px solid var(--border);border-radius:14px;cursor:pointer;opacity:.55;transition:all .15s;font:inherit}
.umod-chip.on{border-color:var(--brand);background:rgba(37,99,235,.08);opacity:1}
.umod-chip-ico{font-size:22px}
.umod-chip-lbl{font-size:11px;font-weight:600;color:var(--t1);text-align:center;line-height:1.2}
.umod-chip-check{position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-size:10px;display:none;align-items:center;justify-content:center}
.umod-chip.on .umod-chip-check{display:flex}
.umod-foot{display:flex;gap:8px;margin-top:14px}
[data-theme="dark"] .umod-chip.on{background:rgba(96,165,250,.12)}

/* FAB peidetud ka meditation-ekraanil (immersiivne player; noFabScreens
   nimekiri app.js-is katab ülejäänud) */
body.screen-meditation .fab-wrap{display:none!important}

/* ── Premium lukk (v2.29.0) ──────────────────────────────────
   Kontroll, mis on tasuta versioonis lukus (data-premium="<feature>",
   app.js _applyPremiumLocks). Klikk läheb ikka läbi — serveri 402 avab
   paywall-modaali, nii et kasutaja saab alati teada MIKS, mitte ei koputa
   surnud nupule. Paywall väljas => klassi ei panda kunagi külge. */
.is-premium-locked{opacity:.55;position:relative}
.is-premium-locked::after{content:'🔒';position:absolute;top:4px;right:6px;font-size:12px;line-height:1;pointer-events:none}

/* ── Premium blur teasers (v2.36.13) ─────────────────────────
   Free-tier "glass" cards: real-looking fake content under blur +
   a short Premium hint. Tap opens showPremiumPaywall(feature).
   Prefer these over bare padlocks — the blur IS the daily reminder. */
.prem-blur-card{
  position:relative;overflow:hidden;border-radius:12px;cursor:pointer;
  border:1px solid rgba(139,92,246,.22);
  background:linear-gradient(135deg,var(--surface) 0%,rgba(139,92,246,.06) 100%);
  user-select:none;-webkit-user-select:none;
}
.prem-blur-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.prem-blur-fake{
  padding:12px 14px;filter:blur(5.5px);opacity:.62;pointer-events:none;
  transform:scale(1.03);user-select:none;
}
.prem-blur-line{font-size:12px;color:var(--t2);margin:7px 0;line-height:1.4}
.prem-blur-line strong{color:var(--t1);font-weight:700}
.prem-blur-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:14px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.62));
}
[data-theme="dark"] .prem-blur-overlay,
html.dark .prem-blur-overlay,
body.theme-dark .prem-blur-overlay{
  background:linear-gradient(180deg,rgba(15,23,42,.42),rgba(15,23,42,.72));
}
.prem-blur-badge{
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#8b5cf6,#6366f1);
  border-radius:999px;padding:3px 10px;margin-bottom:2px;
}
.prem-blur-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.3}
.prem-blur-sub{font-size:11px;color:var(--t3);max-width:260px;line-height:1.4}
.prem-blur-cta{
  margin-top:6px;font-size:11px;font-weight:700;color:#fff;
  background:var(--brand,#2563eb);border:none;border-radius:9px;
  padding:7px 14px;cursor:pointer;font-family:inherit;
}
.prem-blur-cta:active{transform:scale(.98)}

/* v2.36.48 — Solid full Premium cover (no half-glass peek on the left) */
.prem-blur-card.prem-blur-card--full{
  min-height: 132px;
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.28);
}
.prem-blur-card.prem-blur-card--full .prem-blur-fake{
  position: absolute;
  inset: 0;
  padding: 16px 18px;
  filter: blur(7px);
  opacity: .28;
  transform: none;
  overflow: hidden;
}
.prem-blur-card.prem-blur-card--full .prem-blur-overlay{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.90) 45%,
    rgba(248,250,252,.94) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-theme="dark"] .prem-blur-card.prem-blur-card--full,
html.dark .prem-blur-card.prem-blur-card--full{
  background: var(--surface2, #1e293b);
}
[data-theme="dark"] .prem-blur-card.prem-blur-card--full .prem-blur-overlay,
html.dark .prem-blur-card.prem-blur-card--full .prem-blur-overlay{
  background: linear-gradient(
    180deg,
    rgba(15,23,42,.88) 0%,
    rgba(15,23,42,.92) 50%,
    rgba(15,23,42,.95) 100%
  );
}
/* Parent card shell should not add a second frame/gradient around the cover */
#ai-insights-card:has(.prem-blur-card--full){
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
#ai-insights-card .prem-blur-card--full{
  border-radius: 14px;
}

/* Partial glass over free charts — right side only so users still see own data */
.prem-chart-wrap{position:relative}
.prem-chart-glass{
  position:absolute;right:0;top:0;bottom:0;width:48%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 28%,rgba(255,255,255,.78) 100%);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  cursor:pointer;border-radius:0 10px 10px 0;z-index:2;
}
[data-theme="dark"] .prem-chart-glass,
html.dark .prem-chart-glass,
body.theme-dark .prem-chart-glass{
  background:linear-gradient(90deg,transparent 0%,rgba(15,23,42,.45) 28%,rgba(15,23,42,.78) 100%);
}
.prem-chart-glass-inner{text-align:center;padding:6px 8px;pointer-events:none}
.prem-chart-glass-inner .prem-blur-badge{margin-bottom:4px}
.prem-chart-glass-inner .t{font-size:11px;font-weight:700;color:var(--t1);line-height:1.25}
.prem-chart-glass-inner .s{font-size:10px;color:var(--t3);margin-top:2px}

/* Locked AI scan controls — full cover on camera (not a half card beside it) */
.prem-scan-locked{position:relative !important}
.prem-scan-locked:not(.prem-scan-full)::after{
  content:'🔒';position:absolute;top:-4px;right:-4px;font-size:11px;
  background:var(--surface);border-radius:50%;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:2;pointer-events:none;
}
/* Full purple cover on the camera button itself */
.food-photo-btn.prem-scan-full,
.prem-scan-full.food-photo-btn{
  overflow:hidden;border-color:rgba(139,92,246,.45)!important;
}
.prem-scan-full::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(139,92,246,.94),rgba(79,70,229,.96));
}
.prem-scan-full::after{
  content:'🔒';position:absolute;inset:0;z-index:2;
  display:flex!important;align-items:center;justify-content:center;
  margin:0;padding:0;top:0;right:0;left:0;bottom:0;
  width:auto!important;height:auto!important;border-radius:inherit;
  font-size:16px;background:transparent!important;box-shadow:none!important;
  pointer-events:none;
}
/* Full-width scan teaser under search row */
.food-ai-premium-teaser{
  width:100%;margin:8px 0 4px;box-sizing:border-box;
}
.food-ai-premium-teaser .prem-blur-card{
  width:100%;min-height:110px;box-sizing:border-box;
}
.food-ai-premium-teaser .prem-blur-overlay{
  padding:12px 10px;
}
/* v2.36.39: full-tile Premium cover (no half purple square over “PDF rep…”) */
.qa-btn.prem-pdf-locked{
  position:relative;overflow:hidden;
  border-color:rgba(139,92,246,.4)!important;
  box-shadow:0 2px 10px rgba(139,92,246,.18);
}
/* Full purple glass over entire tile */
.qa-btn.prem-pdf-locked::before{
  content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(145deg,rgba(139,92,246,.94),rgba(79,70,229,.96));
}
/* Label centered on top of the cover */
.qa-btn.prem-pdf-locked::after{
  content:'🔒  Premium';
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:8px;left:0;right:0;top:0;bottom:0;transform:none;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  color:#fff;background:none;border-radius:inherit;
  white-space:normal;text-align:center;line-height:1.25;
  pointer-events:none;
}
/* Hide underlying title/sub/icon so nothing peeks out */
.qa-btn.prem-pdf-locked .qa-ico,
.qa-btn.prem-pdf-locked .qa-title,
.qa-btn.prem-pdf-locked .qa-sub{
  opacity:0!important;visibility:hidden!important;
}
/* Don't stack the generic padlock class styling */
.qa-btn.prem-pdf-locked.is-premium-locked{opacity:1}
.qa-btn.prem-pdf-locked.is-premium-locked::after{content:'🔒  Premium'}

/* Daily home Premium teaser strip */
#premium-daily-teaser{margin:8px 12px}



/* ── Premium conversion suite (v2.36.17) ───────────────────── */
.prem-scan-chip{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:800;white-space:nowrap;z-index:3;
  background:var(--brand,#2563eb);color:#fff;border-radius:999px;
  padding:2px 7px;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.prem-scan-chip.warn{background:#d97706}
.prem-scan-chip.gone{background:#64748b}
.food-photo-btn{position:relative}
.prem-win-toast{
  position:fixed;left:12px;right:12px;bottom:88px;z-index:9000;
  background:var(--surface,#fff);border:1px solid rgba(139,92,246,.3);
  border-radius:14px;padding:12px 14px;box-shadow:0 8px 28px rgba(0,0,0,.14);
  display:flex;gap:8px;align-items:center;animation:premWinIn .25s ease;
  flex-wrap:wrap;
}
.prem-win-toast #prem-win-later{flex:none}
@keyframes premWinIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.prem-win-toast .t{flex:1;min-width:0}
.prem-win-toast .t strong{display:block;font-size:13px;color:var(--t1)}
.prem-win-toast .t span{font-size:11px;color:var(--t3);line-height:1.35}
.prem-free-forever{font-size:12px;line-height:1.55;color:var(--t2)}
.prem-free-forever li{margin:3px 0}
.prem-blur-card.secondary{opacity:.92;border-color:rgba(100,116,139,.25)}
.prem-blur-card.secondary .prem-blur-badge{background:linear-gradient(135deg,#64748b,#475569)}
.prem-streak-shield{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;
  color:#7c3aed;background:rgba(139,92,246,.12);border-radius:8px;padding:2px 8px;margin-left:6px;
}
.prem-pay-issue{
  margin:0 12px 10px;padding:10px 12px;border-radius:12px;font-size:12px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);
  display:flex;gap:10px;align-items:center;
}
#premium-paywall-plans .btn{margin-bottom:6px}


/* v2.36.50 — Paywall: scroll-safe, multi-resolution, full-width radios */
body.prem-paywall-open #ai-insights-card,
body.prem-paywall-open #premium-daily-teaser,
body.prem-paywall-open #premium-banner,
body.prem-paywall-open #prem-win-sheet {
  visibility: hidden !important;
}
/* Lock underlay scroll while the sheet is open.
   Mobile (≤640px) uses display:contents on the phone shell — the real scroller
   is .screens. Desktop still scrolls inside .phone-inner. */
body.prem-paywall-open .screens,
body.prem-paywall-open .phone-inner {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
/* Modal itself must still scroll/receive touch */
body.prem-paywall-open #premium-paywall-modal,
body.prem-paywall-open #premium-paywall-modal * {
  touch-action: auto;
}
/* Non-:has fallback — JS adds .prem-insights-locked on the shell */
#ai-insights-card.prem-insights-locked {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
#ai-insights-card.prem-insights-locked .prem-blur-card--full {
  border-radius: 14px;
}
#premium-paywall-modal.modal-overlay {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* v2.53.44: 10100, not 260 — .modal-overlay.open (fix #141) raises every
     OTHER open modal to z-index 10050, which buried the paywall under the
     food-AI modal on the 402 premium_required path: the paywall painted
     dimmed through the food modal's backdrop and no tap could reach it.
     The paywall is the top purchase surface and must sit above all modals
     (and .offline-sync-center at 10080). */
  z-index: 10100;
  overscroll-behavior: contain;
}
#premium-paywall-modal .modal {
  /* Prefer dynamic viewport units so iOS toolbars don't clip the CTA */
  max-height: min(92dvh, 92vh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#premium-paywall-modal .modal-title {
  padding: 0 16px 4px;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#premium-paywall-icon {
  font-size: clamp(28px, 8vw, 40px);
  margin: 6px 0 !important;
  line-height: 1;
}
#premium-paywall-sub {
  padding: 0 16px 10px !important;
  font-size: clamp(12px, 3.5vw, 13px) !important;
  line-height: 1.4 !important;
  color: var(--t2) !important;
  overflow-wrap: anywhere;
}
#premium-paywall-usage {
  margin: 0 12px 10px !important;
  overflow-wrap: anywhere;
}
#premium-paywall-benefits {
  padding: 4px 16px 8px !important;
  text-align: left !important;
  font-size: clamp(12px, 3.4vw, 12.5px) !important;
  line-height: 1.65 !important;
  color: var(--t2) !important;
}
.prem-also {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.prem-benefit-row { color: var(--t1); }
#premium-paywall-plans {
  padding: 0 12px 4px !important;
  width: 100%;
  box-sizing: border-box;
}
#premium-paywall-modal .prem-paywall-actions {
  padding: 8px 16px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  width: 100%;
  box-sizing: border-box;
}
/* App Store radio icons (hollow ○ / filled ●) + plan rows */
.prem-radio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}
.prem-radio-row {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  min-height: 56px;
  border: 1.5px solid #d1d5db;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--t1);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
.prem-radio-row:active { transform: scale(.99); }
.prem-radio-row.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
  background: var(--surface, #fff);
}
[data-theme="dark"] .prem-radio-row,
html.dark .prem-radio-row {
  background: var(--surface2, #1e293b);
  border-color: #475569;
}
[data-theme="dark"] .prem-radio-row.is-selected,
html.dark .prem-radio-row.is-selected {
  background: var(--surface2, #1e293b);
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
/* Classic iOS radio: empty ring → black outer + filled center */
.prem-radio {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid #c7c7cc;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent;
  position: relative;
  display: block;
}
.prem-radio-row.is-selected .prem-radio {
  border-color: #1c1c1e;
  border-width: 1.5px;
  background: transparent;
}
.prem-radio-row.is-selected .prem-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #1c1c1e;
}
[data-theme="dark"] .prem-radio {
  border-color: #64748b;
}
[data-theme="dark"] .prem-radio-row.is-selected .prem-radio {
  border-color: #f1f5f9;
}
[data-theme="dark"] .prem-radio-row.is-selected .prem-radio::after {
  background: #f1f5f9;
}
.prem-radio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prem-radio-name {
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 500;
  color: var(--t1);
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prem-save-badge {
  display: inline-block;
  margin-left: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
  color: #15803d;
  background: rgba(34, 197, 94, .14);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .prem-save-badge,
html.dark .prem-save-badge {
  color: #86efac;
  background: rgba(34, 197, 94, .18);
}
.prem-radio-sub {
  font-size: 11px;
  color: var(--t3);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prem-radio-price {
  font-size: clamp(13px, 3.8vw, 16px);
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  max-width: 38%;
  text-align: right;
}
.prem-cta-big {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: none;
  border-radius: 999px;
  background: #007aff;
  color: #fff;
  font-family: inherit;
  font-size: clamp(15px, 4.2vw, 17px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.prem-cta-big:active { transform: scale(.98); opacity: .92; }
.prem-cta-hint {
  text-align: center;
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 4px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 0 4px;
}
/* legacy class keep for any leftover */
.prem-plan-btn { display: none; }

#premium-paywall-modal .btn-secondary {
  margin-top: 4px !important;
  width: 100%;
  box-sizing: border-box;
}

/* Narrow phones (iPhone SE / small Android) */
@media (max-width: 360px) {
  .prem-radio-row { padding: 11px 10px; gap: 8px; min-height: 50px; border-radius: 12px; }
  .prem-radio { width: 20px; height: 20px; }
  .prem-radio-row.is-selected .prem-radio::after {
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
  }
  .prem-radio-list { gap: 8px; margin-bottom: 10px; }
  #premium-paywall-plans { padding: 0 10px 4px !important; }
  #premium-paywall-modal .prem-paywall-actions { padding-left: 12px !important; padding-right: 12px !important; }
  .prem-blur-sub { max-width: 100%; padding: 0 4px; }
  .prem-blur-title { font-size: 12.5px; padding: 0 4px; }
  .prem-chart-glass-inner .t { font-size: 10px; }
  .prem-chart-glass-inner .s { font-size: 9px; }
}

/* Short viewports (landscape phones, small height) */
@media (max-height: 640px) {
  #premium-paywall-modal .modal {
    max-height: min(96dvh, 96vh);
  }
  #premium-paywall-icon { font-size: 28px !important; margin: 2px 0 !important; }
  #premium-paywall-benefits { padding-top: 0 !important; padding-bottom: 4px !important; line-height: 1.45 !important; }
  .prem-radio-row { padding: 10px 12px; min-height: 48px; }
  .prem-radio-list { gap: 7px; margin-bottom: 8px; }
  .prem-cta-big { min-height: 46px; padding: 12px 14px; margin-bottom: 6px; }
  .prem-blur-card.prem-blur-card--full { min-height: 110px; }
}

/* Very short (landscape SE / split screen) — drop decorative blocks so CTA fits */
@media (max-height: 480px) {
  #premium-paywall-icon { display: none; }
  #premium-paywall-benefits { display: none; }
  #premium-paywall-usage { display: none !important; }
  #premium-paywall-modal .modal-title { font-size: 14px; padding-bottom: 2px; }
  #premium-paywall-sub { font-size: 11px !important; padding-bottom: 6px !important; }
}

/* Blur teasers: never clip text on narrow widths */
.prem-blur-overlay {
  padding: 12px 10px;
  box-sizing: border-box;
}
.prem-blur-sub {
  max-width: min(280px, 92%);
  overflow-wrap: anywhere;
}
.prem-blur-title {
  overflow-wrap: anywhere;
  padding: 0 6px;
}
#premium-daily-teaser .prem-blur-card,
.food-ai-premium-teaser .prem-blur-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Chart half-glass: readable on tiny widths */
@media (max-width: 340px) {
  .prem-chart-glass { width: 56%; }
  .prem-save-badge { font-size: 9px; padding: 1px 5px; }
}

/* Desktop wide phone-shell still bottom-sheet */
@media (min-width: 641px) {
  #premium-paywall-modal .modal {
    max-height: min(88vh, 720px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .prem-radio-row,
  .prem-cta-big,
  .prem-blur-cta { transition: none; }
  .prem-radio-row:active,
  .prem-cta-big:active { transform: none; }
}

/* v2.36.38 — Full premium cover over empty week chart (no half-glass on blank) */
.prem-chart-full-wrap{
  position:relative;min-height:148px;border-radius:12px;overflow:hidden;
}
.prem-chart-full{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:stretch;justify-content:stretch;
  background:var(--surface);
}
.prem-chart-full .prem-blur-card{
  flex:1;margin:0;border-radius:12px;min-height:148px;
  display:flex;flex-direction:column;justify-content:center;
}
.prem-chart-full-wrap .wk-cssbars,
.prem-chart-full-wrap .wk-nodata-overlay,
.prem-chart-full-wrap canvas{
  opacity:0;pointer-events:none;
}

/* v2.37.0 — Week Story + welcome-back + magic log */
.week-story-card{
  padding:14px 16px;
  background:linear-gradient(135deg,var(--surface) 0%,rgba(37,99,235,.07) 100%);
  border:1px solid rgba(37,99,235,.14);
}
.week-story-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.week-story-title{font-size:13px;font-weight:700;color:var(--t1)}
.week-story-actions{display:flex;gap:6px}
.week-story-btn{
  width:32px;height:32px;border:none;border-radius:10px;
  background:var(--surface2);color:var(--t2);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.week-story-btn:active{transform:scale(.95)}
.week-story-line{font-size:12.5px;line-height:1.45;color:var(--t2);margin:6px 0}
.week-story-win{color:var(--t1);font-weight:600}
.week-story-next{color:var(--brand,#2563eb);font-weight:500}
.week-story-line:empty{display:none}
.streaks-welcome{
  margin-top:10px;padding:10px 12px;border-radius:12px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.22);
  font-size:12px;color:var(--t1);line-height:1.4;
  display:flex;align-items:center;gap:10px;
}
.streaks-welcome button{
  margin-left:auto;flex-shrink:0;border:none;border-radius:8px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:700;
  padding:7px 10px;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.ql-magic-row{display:flex;gap:8px;margin-top:4px}
.ql-magic-row .ql-chip{flex:1}
.ql-mic-btn.listening{background:rgba(239,68,68,.15)!important;color:#dc2626!important;animation:qlMicPulse 1s ease infinite}
@keyframes qlMicPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ── v2.42.0 live fasting strip ──────────────────────────────────────────
   Ambient state above the bottom nav while a fast runs. Phase drives the hue
   via --fs-c, set from JS on the element. */
/* v2.61.29: floats as its own rounded card, inset to the same 12px gutter as
   the .bn-pill below it. The old rule was a full-bleed band with a hard
   border-top — a leftover from the pre-v2.24 attached nav, which read as a
   rendering glitch once the nav became a detached pill. */
.fast-strip{
  display:flex;align-items:stretch;width:auto;box-sizing:border-box;
  margin:0 12px 6px;padding:0;
  border:1px solid var(--border);border-radius:20px;
  background:var(--surface);color:inherit;font:inherit;
  flex-shrink:0;position:relative;overflow:hidden;text-align:left;
  box-shadow:0 6px 18px rgba(15,24,39,.10),0 2px 5px rgba(15,24,39,.06);
  --fs-c:#7c9cf0;--fs-pct:0
}
/* v2.61.30: padding moved off the card and onto the two buttons, so each
   press highlight fills its own half edge-to-edge (clipped by the card's
   radius via overflow:hidden) instead of leaving an unpainted gutter. */
.fs-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:8px 4px 8px 12px;
  background:none;border:0;color:inherit;font:inherit;
  cursor:pointer;text-align:left
}
.fs-main:active{background:var(--surface2)}
.fs-x{
  flex-shrink:0;align-self:stretch;width:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;
  color:var(--t3);font:inherit;font-size:14px;line-height:1
}
.fs-x:active{background:var(--surface2);color:var(--t1)}
[data-theme="dark"] .fast-strip{
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.3)
}
.fast-strip[hidden]{display:none}
/* progress as a hairline that fills across the whole strip */
.fast-strip::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;
  width:calc(var(--fs-pct) * 1%);background:var(--fs-c);
  transition:width .6s linear
}
.fs-ring{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--fs-c) calc(var(--fs-pct) * 3.6deg), var(--border) 0);
  transition:background .6s linear
}
.fs-pct{
  width:23px;height:23px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:800;color:var(--fs-c);letter-spacing:-.02em
}
.fs-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fs-plan{
  font-size:12px;font-weight:800;color:var(--t1);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fs-phase{
  font-size:10.5px;color:var(--t3);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fs-time{
  flex-shrink:0;font-size:13px;font-weight:800;color:var(--fs-c);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em
}
.fast-strip.done .fs-time{color:var(--green,#22a55e)}
/* Never compete with a full-screen overlay or the fasting screen itself */
body.comm-chat-open .fast-strip{display:none!important}

/* ════════════════════════════════════════════════════════════════
   v2.52.8 — Weight screen modern redesign (#sc-weight)
   Self-contained: every rule scoped to #sc-weight so other screens
   and the shared .period-toggle/.card patterns are untouched.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero: current weight ───────────────────────────────────── */
#sc-weight .wt-hero {
  position: relative; overflow: hidden;
  margin: 12px 12px 0; padding: 16px 16px 12px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--t1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#sc-weight .wt-hero-glow { display: none; }
#sc-weight .wt-hero-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#sc-weight .wt-hero-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); }
#sc-weight .wt-hero-label-ico { font-size: 14px; line-height: 1; }
#sc-weight .wt-hero-date {
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: var(--brand-l, rgba(37,99,235,.08)); border: 1px solid var(--border);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
#sc-weight .wt-hero-main { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 9px; margin-top: 6px; }
#sc-weight .wt-hero-num {
  font-size: 44px; font-weight: 800; line-height: 1.02;
  letter-spacing: -1.4px; font-variant-numeric: tabular-nums; color: var(--t1);
}
#sc-weight .wt-hero-unit { font-size: 15px; font-weight: 600; color: var(--t3); }
#sc-weight .wt-hero-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--t3); }
#sc-weight .wt-hero-streak { font-weight: 700; color: var(--brand); }
#sc-weight .wt-spark { display: block; width: 100%; height: 36px; margin-top: 8px; }
#sc-weight .wt-ritual {
  margin: 12px 12px 0; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
}
#sc-weight .wt-ritual[hidden] { display: none; }
#sc-weight .wt-ritual-title { font-size: 14px; font-weight: 700; color: var(--t1); }
#sc-weight .wt-ritual-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }
#sc-weight .wt-ritual-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
#sc-weight .wt-ritual-skip { border: 0; background: none; color: var(--t3); font-size: 12px; font-weight: 600; cursor: pointer; }
#sc-weight .wt-src { font-size: 11px; color: var(--t3); margin: 0 2px 8px; }
#sc-weight .wt-tile { border: 0; text-align: left; cursor: pointer; font: inherit; }
#sc-weight .wt-kg-chip .mfm-pill-input { font-variant-numeric: tabular-nums; font-weight: 700; }
#sc-weight .wt-pace { margin-top: 8px; font-size: 12px; color: var(--t2); }
#sc-weight .wt-sheet {
  position: fixed; inset: 0; z-index: 80; background: rgba(15,24,39,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
#sc-weight .wt-sheet[hidden] { display: none; }
#sc-weight .wt-sheet-card {
  width: 100%; max-width: 520px; background: var(--surface);
  border-radius: 18px 18px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
}
#sc-weight .wt-sheet-handle { width: 36px; height: 4px; border-radius: 99px; background: var(--border2); margin: 4px auto 12px; }
#sc-weight .wt-sheet-title { font-size: 13px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; }
#sc-weight .bmi-sheet-num { font-size: 40px; font-weight: 800; margin-top: 6px; }
#sc-weight .bmi-sheet-cat { font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 12px; }
#sc-weight .bmi-bar { position: relative; display: flex; height: 10px; border-radius: 99px; overflow: hidden; }
#sc-weight .bmi-bar-u { flex: 18.5; background: #f59e0b; }
#sc-weight .bmi-bar-n { flex: 6.4; background: #10b981; }
#sc-weight .bmi-bar-o { flex: 5; background: #f59e0b; }
#sc-weight .bmi-bar-b { flex: 10; background: #ef4444; }
#sc-weight .bmi-bar-dot {
  position: absolute; top: -3px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: #fff; border: 3px solid var(--t1); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#sc-weight .bmi-sheet-range { font-size: 13px; font-weight: 600; margin-top: 12px; }
#sc-weight .bmi-sheet-copy { font-size: 12px; color: var(--t3); margin: 8px 0 14px; }
#sc-weight .wt-hist-src { font-size: 10px; color: var(--t4); margin-left: 6px; }

/* ── Stat tiles ─────────────────────────────────────────────── */
#sc-weight .wt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 12px 0; }
#sc-weight .wt-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 13px 13px 12px; margin: 0; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#sc-weight .wt-tile-ico { font-size: 15px; line-height: 1; margin-bottom: 4px; }
#sc-weight .wt-tile-val { font-size: 21px; font-weight: 800; color: var(--t1); letter-spacing: -.4px; font-variant-numeric: tabular-nums; line-height: 1.1; }
#sc-weight .wt-tile-lbl { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
#sc-weight .wt-tile-cat { font-size: 10px; font-weight: 600; color: var(--t3); margin-top: 2px; }

/* ── Quick entry ────────────────────────────────────────────── */
#sc-weight .wt-entry { margin: 12px 12px 0; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
#sc-weight .wt-entry .mfm-row { margin-bottom: 10px; }
#sc-weight .wt-stepper { display: flex; align-items: center; gap: 4px; width: 100%; }
#sc-weight .wt-stepper .mfm-pill-input { flex: 1; width: auto; text-align: center; font-size: 20px; }
#sc-weight .wt-step-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--t2); font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .08s, background .15s, color .15s, border-color .15s;
}
#sc-weight .wt-step-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }
#sc-weight .wt-step-btn:active { transform: scale(.88); }
#sc-weight .wt-entry .mfm-btn-primary { margin-top: 10px; border-radius: 16px; }

/* ── Target progress card ───────────────────────────────────── */
#sc-weight .wt-target-card { margin: 12px 12px 0; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
#sc-weight .wt-target-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#sc-weight .wt-target-head-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#sc-weight .wt-target-title { font-size: 12px; font-weight: 700; color: var(--t2); letter-spacing: .01em; }
#sc-weight .wt-target-sub { font-size: 11px; font-weight: 600; color: var(--t3); }
#sc-weight .wt-target-pct { font-size: 20px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
#sc-weight .wt-progress {
  margin-top: 12px; height: 10px; border-radius: 999px;
  background: var(--surface2); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15,24,39,.08);
}
#sc-weight .wt-progress-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, #8B5CF6 100%);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
#sc-weight .wt-target-edit {
  margin-top: 12px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  border: 1.5px dashed var(--border2); background: transparent;
  color: var(--t2); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
#sc-weight .wt-target-edit:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }

/* Target analysis (rendered by renderWeightStats) */
#sc-weight .wt-analysis { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); }
#sc-weight .wt-analysis-title { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
#sc-weight .wt-analysis-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); padding: 3px 0; }
#sc-weight .wt-analysis-row strong { font-weight: 700; font-variant-numeric: tabular-nums; }
#sc-weight .wt-analysis-banner { font-size: 12px; font-weight: 700; padding: 8px 10px; border-radius: 10px; }
#sc-weight .wt-analysis-banner--ok { background: var(--green-b); color: var(--green); }

/* ── Set-target card ────────────────────────────────────────── */
#sc-weight .wt-set-target { margin: 12px 12px 0; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
#sc-weight .wt-set-target-title { font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
#sc-weight .wt-set-target-row { display: flex; gap: 8px; align-items: stretch; }
#sc-weight .wt-set-target-input {
  flex: 1; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border);
  transition: border-color .15s;
}
#sc-weight .wt-set-target-input:focus-within { border-color: var(--brand); }
#sc-weight .wt-set-target-input .form-control {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: 'DM Mono', monospace; font-size: 17px; font-weight: 700; color: var(--t1);
  height: 40px; padding: 0;
}
#sc-weight .wt-set-target-input .form-control::placeholder { color: var(--t4); font-weight: 400; }
#sc-weight .wt-set-target-unit { font-size: 11px; font-weight: 700; color: var(--t4); }
#sc-weight .wt-set-target-save { height: 40px; padding: 0 18px; border-radius: 12px; font-size: 13px; }
#sc-weight .wt-set-target-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 9px; min-height: 18px; }
#sc-weight .wt-set-target-foot #target-bmi-preview { font-size: 11px; color: var(--t3); }
#sc-weight .wt-set-target-clear {
  margin-left: auto; padding: 4px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--t4);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: color .15s, background .15s;
}
#sc-weight .wt-set-target-clear:hover { color: var(--red); background: var(--red-b); }

/* ── BMI explainer ──────────────────────────────────────────── */
#sc-weight .wt-explain { margin: 12px 12px 0; padding: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
#sc-weight .wt-explain-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border: none; background: transparent; cursor: pointer;
  font-family: 'DM Sans', sans-serif; text-align: left;
  transition: background .15s;
}
#sc-weight .wt-explain-toggle:hover { background: var(--surface2); }
#sc-weight .wt-explain-ico { font-size: 17px; line-height: 1; }
#sc-weight .wt-explain-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--t2); }
#sc-weight .wt-explain-chev { font-size: 12px; color: var(--t3); }
#sc-weight #bmi-explain-body { padding: 0 14px 13px; }
#sc-weight .wt-explain-text { font-size: 12px; line-height: 1.6; color: var(--t2); }
#sc-weight .wt-explain-ranges { margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface2); font-size: 11px; color: var(--t3); }
#sc-weight .wt-explain-range { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--brand); }

/* ── Chart ──────────────────────────────────────────────────── */
#sc-weight .wt-chart-hd {
  padding: 16px 16px 6px;
  font-size: 10px; font-weight: 700; color: var(--t4);
  text-transform: uppercase; letter-spacing: .1em;
}
#sc-weight .wt-period {
  margin: 2px 12px 10px; padding: 3px; gap: 2px;
  background: var(--surface2); border-radius: 999px;
}
#sc-weight .wt-period .period-btn {
  flex: 1; padding: 8px 4px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--t3);
  background: transparent; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: all .18s;
}
#sc-weight .wt-period .period-btn.active {
  background: var(--brand); color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .35);
}
#sc-weight .wt-chart-card { margin: 0 12px 4px; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
#sc-weight .wt-chart-card canvas { width: 100%; display: block; height: 200px; }

/* ── History ────────────────────────────────────────────────── */
#sc-weight .wt-hist-hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
#sc-weight .wt-hist-title { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: .1em; }
#sc-weight .wt-hist-count {
  font-size: 10px; font-weight: 700; color: var(--brand);
  background: var(--brand-l); border-radius: 999px; padding: 2px 9px;
}
#sc-weight .wt-hist { margin: 0 12px; display: flex; flex-direction: column; gap: 8px; }
#sc-weight .wt-hist-empty {
  padding: 20px 14px; border-radius: 16px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border2);
  color: var(--t3); font-size: 13px;
}
#sc-weight .wt-hist-item {
  display: flex; align-items: stretch; gap: 12px;
  padding: 12px 12px 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
#sc-weight .wt-hist-item:hover { border-color: var(--border2); box-shadow: var(--shadow2); }
#sc-weight .wt-hist-date {
  flex-shrink: 0; width: 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  border-radius: 12px; background: var(--surface2); border: 1px solid var(--border);
}
#sc-weight .wt-hist-day { font-size: 17px; font-weight: 800; color: var(--t1); line-height: 1.15; font-variant-numeric: tabular-nums; }
#sc-weight .wt-hist-mon { font-size: 9px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: .06em; }
#sc-weight .wt-hist-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
#sc-weight .wt-hist-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#sc-weight .wt-hist-val { font-size: 17px; font-weight: 800; color: var(--t1); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
#sc-weight .wt-hist-val em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--t4); }
#sc-weight .wt-delta { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
#sc-weight .wt-delta-gap { color: var(--t4); font-weight: 600; }
#sc-weight .wt-delta--down { color: var(--green); }
#sc-weight .wt-delta--up { color: var(--red); }
#sc-weight .wt-delta--flat { color: var(--t3); }
#sc-weight .wt-hist-note {
  font-size: 11px; color: var(--t3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#sc-weight .wt-hist-del {
  flex-shrink: 0; align-self: center; width: 32px; height: 32px;
  border: none; border-radius: 10px; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; opacity: .55;
  transition: opacity .15s, background .15s, transform .08s;
}
#sc-weight .wt-hist-del:hover { opacity: 1; background: var(--red-b); }
#sc-weight .wt-hist-del:active { transform: scale(.9); }

/* ── Dark / reduced-motion tweaks ───────────────────────────── */
[data-theme="dark"] #sc-weight .wt-hero { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  #sc-weight .wt-progress-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   v2.53.0 — AI Lab panel (feature_ai_lab)
   ═══════════════════════════════════════════════════════════ */
.ai-lab-panel {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 15, 25, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 16px; box-sizing: border-box;
}
.ai-lab-panel-inner {
  width: 100%; max-width: 480px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--surface, #fff); color: var(--t1, #111);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.ai-lab-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-weight: 700; font-size: 0.9375rem;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(14,165,233,.12));
}
.ai-lab-panel-close {
  border: none; background: transparent; color: var(--t3, #888);
  font-size: 1.375rem; line-height: 1; padding: 2px 8px; cursor: pointer;
}
.ai-lab-panel-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: 14px 16px;
}
.ai-lab-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--surface, #fff); color: var(--t1, #111);
  font-size: 0.75rem; font-weight: 600; text-align: center;
}
.ai-lab-tile:active { transform: scale(0.97); }
.ai-lab-tile-icon { font-size: 1.375rem; }
.ai-lab-panel-out {
  flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 18px;
  font-size: 0.8125rem; color: var(--t1, #111); min-height: 60px;
}
.ai-lab-loading { display: flex; justify-content: center; padding: 24px; }
.ai-lab-err { color: var(--t2, #444); padding: 12px 0; }
.ai-lab-note { color: var(--t3, #777); font-size: 0.75rem; padding: 4px 0 8px; }
/* B2: AI personal challenge progress bar — plain background fill,
   no backdrop-filter (E5 renderer-crash mitigation). */
.ai-lab-progress { height: 10px; border-radius: 6px; background: var(--border, rgba(0,0,0,.12)); overflow: hidden; margin: 8px 0 4px; }
.ai-lab-progress-fill { height: 100%; border-radius: 6px; background: var(--accent, #34c759); transition: width .4s ease; }
.ai-lab-remaining { color: var(--t3, #999); font-size: 0.6875rem; margin-top: 12px; border-top: 1px dashed var(--border, rgba(0,0,0,.1)); padding-top: 8px; }
.ai-lab-title { font-weight: 700; margin: 6px 0; font-size: 0.875rem; }
.ai-lab-para { margin: 8px 0; line-height: 1.45; }
.ai-lab-row { padding: 4px 0; line-height: 1.45; }
.ai-lab-pos { color: #16a34a; font-weight: 700; }
.ai-lab-neg { color: #dc2626; font-weight: 700; }
.ai-lab-seg { padding: 7px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.06)); line-height: 1.5; }
.ai-lab-speaker { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.625rem; font-weight: 700; margin-right: 6px; }
.ai-lab-speaker-host { background: rgba(14,165,233,.15); color: #0ea5e9; }
.ai-lab-speaker-analyst { background: rgba(16,185,129,.15); color: #10b981; }
.ai-lab-themes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ai-lab-chip { padding: 2px 9px; border-radius: 999px; background: var(--surface2, rgba(0,0,0,.05)); font-size: 0.6875rem; color: var(--t2, #555); }
.ai-lab-letter { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface2, rgba(0,0,0,.04)); line-height: 1.6; white-space: pre-wrap; }
.ai-lab-counter { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(16,185,129,.12); font-weight: 600; }
.ai-lab-timeline { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ai-lab-tl-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; background: var(--surface2, rgba(0,0,0,.04)); line-height: 1.45; }
.ai-lab-tl-hour { font-weight: 800; color: #0ea5e9; white-space: nowrap; font-size: 0.75rem; }
.ai-lab-tl-phase { font-size: 0.625rem; padding: 1px 7px; border-radius: 999px; background: rgba(245,158,11,.15); color: #b45309; white-space: nowrap; margin-top: 1px; }
.ai-lab-recipe { margin: 10px 0; padding: 12px; border: 1px solid var(--border, rgba(0,0,0,.08)); border-radius: 14px; }
body.ai-lab-open { overflow: hidden; }
[data-theme="dark"] .ai-lab-panel-inner { background: #141a24; }

/* ═══ v2.53.22 — "How to use the app" guide screen (sc-help) ═══ */
.help-content { padding: 4px 0 24px; }
.help-loading { padding: 24px 16px; text-align: center; font-size: 0.8125rem; color: var(--t3, #8891a5); }
.help-intro { margin: 4px 12px 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border, rgba(0,0,0,.08)); background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(16,185,129,.08)); font-size: 0.8125rem; line-height: 1.55; color: var(--t2, #3a4256); }
.help-card { margin: 0 12px 10px; padding: 14px 16px; border-radius: 16px; }
.help-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.help-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--surface2, rgba(0,0,0,.05)); font-size: 1.0625rem; }
.help-card-title { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--t1, #101828); letter-spacing: .01em; }
.help-card-body { display: flex; flex-direction: column; gap: 6px; }
.help-li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.5; color: var(--t2, #3a4256); }
.help-li .help-dot { flex: 0 0 auto; color: var(--brand, #0ea5e9); font-weight: 700; }
.help-li ul, .help-li li { margin: 0; padding: 0; list-style: none; }
.help-p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--t2, #3a4256); }
[data-theme="dark"] .help-intro { background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(16,185,129,.14)); }
.help-li-sub { margin-left: 20px; font-size: 0.7813rem; color: var(--t3, #667085); }
/* v2.53.23 — "how it connects" callouts + mini-headings inside guide sections */
.help-lead { margin: 8px 0 0; font-size: 0.8125rem; font-weight: 700; color: var(--t1, #101828); letter-spacing: .01em; }
.help-conn { display: flex; gap: 8px; align-items: flex-start; margin-top: 2px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--brand, #0ea5e9); background: var(--surface2, rgba(0,0,0,.03)); font-size: 0.8125rem; line-height: 1.5; color: var(--t2, #3a4256); }
.help-conn-ico { flex: 0 0 auto; line-height: 1.5; }
[data-theme="dark"] .help-conn { background: rgba(14,165,233,.10); border-color: rgba(56,189,248,.45); }

/* ═══ v2.53.34 — Settings "Body & goal" chips (activity level + weight goal) ═══ */
.bg-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; border: 1.5px solid var(--border, rgba(0,0,0,.08)); background: var(--surface, #fff); color: var(--t1, #101828); font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.2; transition: border-color .15s, background .15s, color .15s; }
.bg-chip-ico { font-size: 0.9375rem; line-height: 1; }
.bg-chip.active { border-color: var(--brand, #0ea5e9); background: var(--brand-l, #EFF6FF); color: var(--brand, #0ea5e9); }
.bg-chip:active { transform: scale(.97); }
[data-theme="dark"] .bg-chip { background: var(--surface, #141a24); }
[data-theme="dark"] .bg-chip.active { background: rgba(14,165,233,.16); border-color: rgba(56,189,248,.55); color: #38bdf8; }

/* ═══════════════════════════════════════════════════════════
   v2.54.0 — Helpdesk (Help Hub + AI chat + tickets)
   No backdrop-filter blurs anywhere (E5 renderer-crash mitigation).
   ═══════════════════════════════════════════════════════════ */
.help-tabs { display: flex; gap: 8px; padding: 4px 12px 10px; }
.help-tab {
  flex: 1; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); color: var(--t2, #46536b);
  font-size: 0.8438rem; font-weight: 600; cursor: pointer;
}
.help-tab.active { background: var(--accent, #4f7cff); border-color: var(--accent, #4f7cff); color: #fff; }

/* Ask row */
.hd-ask-row { display: flex; gap: 8px; padding: 2px 12px 10px; }
.hd-ask-input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--line, #e4e7ee); background: var(--card, #ffffff);
  color: var(--t1, #101828); font-size: 0.9063rem; outline: none;
}
.hd-ask-input:focus { border-color: var(--accent, #4f7cff); }
.hd-ask-btn {
  flex: 0 0 auto; padding: 11px 16px; border-radius: 14px; border: 0;
  background: var(--accent, #4f7cff); color: #fff; font-size: 0.9063rem; font-weight: 700; cursor: pointer;
}
/* A2 voice question mic (no backdrop-filter — E5 renderer-crash constraint) */
.hd-mic-btn {
  flex: 0 0 auto; width: 44px; min-height: 44px; border-radius: 14px;
  border: 1px solid var(--line, #e4e7ee); background: var(--card, #ffffff);
  color: var(--t1, #101828); font-size: 1.0625rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: border-color .15s, box-shadow .15s;
}
.hd-mic-btn:hover { border-color: var(--accent, #4f7cff); }
.hd-mic-btn.listening {
  border-color: #ef4444; color: #ef4444;
  animation: hd-mic-pulse 1.1s ease-in-out infinite;
}
@keyframes hd-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* A3 live search dropdown */
.hd-search-results {
  margin: 0 12px 8px; border-radius: 14px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); overflow: hidden;
}
.hd-sr-title { padding: 8px 14px 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t3, #8891a5); }
.hd-sr-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0;
  background: transparent; border-top: 1px solid var(--line, #e4e7ee); cursor: pointer;
}
.hd-sr-item:first-of-type { border-top: 0; }
.hd-sr-item:hover { background: var(--bg2, #f4f6fb); }
.hd-sr-t { display: block; font-size: 0.875rem; font-weight: 600; color: var(--t1, #101828); }
.hd-sr-s { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--t3, #8891a5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-sr-empty { padding: 10px 14px; font-size: 0.8125rem; color: var(--t3, #8891a5); }
.hd-sr-cta { font-size: 0.875rem; font-weight: 600; color: var(--accent, #4f7cff); }
/* A4: "?" screen help chip */
.hd-help-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 44px; height: 44px; padding: 0 12px; margin-left: 8px;
  border-radius: 22px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); color: var(--accent, #4f7cff);
  font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.hd-help-chip:active { transform: scale(0.93); }
.hd-help-chip-float { position: absolute; top: 10px; right: 12px; z-index: 40; margin-left: 0; box-shadow: 0 2px 8px rgba(9, 12, 20, 0.12); }
/* v2.54.45 — Display name section redesign (eager copy). alias-settings.css is
   lazy-loaded only when the editor opens, so the summary card needs its rules
   here to render styled on first paint. Keep in sync with alias-settings.css. */
.pam-summary-card{display:flex;align-items:center;gap:14px;padding:16px 14px;border-radius:14px}
.pam-summary-main{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.pam-summary-icon{width:44px;height:44px;border-radius:13px;background:var(--brand-l);display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.pam-summary-copy{min-width:0;flex:1}
.pam-summary-name{font-size:16px;font-weight:800;letter-spacing:.06em;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:baseline}
.pam-alias-inline{font-size:.72em;font-weight:600;opacity:.9;letter-spacing:.02em;margin-left:9px;color:var(--t2);white-space:nowrap}
.pam-summary-sub{font-size:11px;line-height:1.45;color:var(--t3);margin-top:4px}
.pam-summary-btn{flex:0 0 auto}
/* A4: screen context badge inside the AI chat */
.hd-screen-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 4px;
  padding: 4px 8px 4px 12px; border-radius: 14px; border: 1px solid var(--line, #e4e7ee);
  background: var(--accent-soft, #eaf0ff); color: var(--t1, #101828); font-size: 0.75rem; font-weight: 600;
}
.hd-badge-x { border: 0; background: none; color: var(--t3, #8891a5); font-size: 0.875rem; cursor: pointer; padding: 2px; }
/* A4: stacked sheet actions */
.hd-sheet-col { display: flex; flex-direction: column; gap: 8px; }
.hd-sheet-topics { display: flex; flex-direction: column; border: 1px solid var(--line, #e4e7ee); border-radius: 14px; overflow: hidden; background: var(--card, #ffffff); }
.hd-status { padding: 0 14px 8px; font-size: 0.75rem; color: var(--t3, #8891a5); }

/* Thread */
.hd-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 14px; }
.hd-hint { padding: 14px; border-radius: 14px; background: var(--card, #ffffff); border: 1px dashed var(--line, #e4e7ee); color: var(--t3, #8891a5); font-size: 0.8125rem; }
.hd-loading { padding: 10px 16px; font-size: 0.8125rem; color: var(--t3, #8891a5); }
.hd-qa { border-radius: 14px; padding: 0; overflow: hidden; }
.hd-q {
  padding: 10px 14px; background: var(--accent-soft, #eaf0ff); color: var(--t1, #101828);
  font-size: 0.875rem; font-weight: 600; border-radius: 14px 14px 0 0;
}
.hd-a { padding: 12px 14px; background: var(--card, #ffffff); border: 1px solid var(--line, #e4e7ee); border-top: 0; border-radius: 0 0 14px 14px; }
.hd-a-badge {
  display: inline-block; padding: 2px 8px; margin-bottom: 6px; border-radius: 8px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .02em;
}
.hd-a-answer, .hd-a-policy { background: var(--accent-soft, #eaf0ff); color: var(--accent-deep, #2d5bd8); }
.hd-a-human_routed, .hd-a-policy_ticket, .hd-a-quota_exceeded { background: #fff3e0; color: #b26a00; }
.hd-p { margin: 4px 0; font-size: 0.875rem; line-height: 1.5; color: var(--t1, #101828); }
.hd-h4 { margin: 10px 0 4px; font-size: 0.9063rem; font-weight: 700; color: var(--t1, #101828); }
.hd-list { margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.hd-li { display: flex; gap: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--t1, #101828); }
.hd-dot { color: var(--accent, #4f7cff); font-weight: 700; }
.hd-num { color: var(--accent, #4f7cff); font-weight: 700; min-width: 16px; }
.hd-action {
  display: inline-block; margin: 2px 0; padding: 3px 10px; border-radius: 999px; border: 0;
  background: var(--accent, #4f7cff); color: #fff; font-size: 0.7813rem; font-weight: 700; cursor: pointer;
}
.hd-cites { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.hd-cite {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent, #4f7cff);
  background: transparent; color: var(--accent, #4f7cff); font-size: 0.7813rem; font-weight: 600; cursor: pointer;
}
.hd-rate { display: flex; gap: 8px; padding: 0 12px 12px; }
.hd-rate-btn {
  padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); color: var(--t2, #46536b); font-size: 0.7813rem; cursor: pointer;
}
.hd-ticket-note { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 0 12px 12px; font-size: 0.8125rem; color: var(--t2, #46536b); }

/* Actions + browse */
.hd-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.hd-chip {
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); color: var(--t1, #101828); font-size: 0.8438rem; font-weight: 600; cursor: pointer;
}
/* A12: feed bell + list (v2.54.2) */
.hd-feed-dot {
  display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.625rem; font-weight: 800; line-height: 16px; text-align: center;
}
.hd-feed-actions { padding: 0 12px 10px; }
.hd-feed-item {
  display: flex; align-items: center; gap: 8px; margin: 6px 12px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--line, #e4e7ee); background: var(--card, #ffffff); cursor: pointer;
}
.hd-feed-unread { border-left: 3px solid #ef4444; }
.hd-feed-read { opacity: .62; }
.hd-feed-item .hd-feed-dot { flex: 0 0 auto; }
.hd-feed-label { flex: 1; min-width: 0; font-size: 0.8438rem; color: var(--t1, #101828); }
.hd-feed-time { font-size: 0.6875rem; color: var(--t3, #8891a5); white-space: nowrap; }
/* A7: satisfaction stars (v2.54.2) */
.hd-sat { padding: 4px 14px 10px; }
.hd-stars { display: flex; gap: 6px; padding: 6px 0; }
.hd-star {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); color: #f59e0b; font-size: 1.25rem; cursor: pointer;
}
.hd-star:hover { background: var(--accent-soft, #eaf0ff); border-color: var(--accent, #4f7cff); }
/* A12: More-menu unread dot (index.php #help-menu-dot) */
.more-menu-item { position: relative; }
.mmi-dot {
  position: absolute; top: 10px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.625rem; font-weight: 800; line-height: 16px; text-align: center;
}
.hd-browse { padding: 0 12px 24px; }
.hd-browse-title { font-size: 0.9375rem; font-weight: 700; color: var(--t1, #101828); margin-bottom: 8px; }
.hd-cat { margin-bottom: 8px; }
.hd-cat-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t3, #8891a5); padding: 6px 4px 4px; }
.hd-art {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; margin: 2px 0; border-radius: 12px; border: 1px solid var(--line, #e4e7ee);
  background: var(--card, #ffffff); color: var(--t1, #101828); font-size: 0.875rem; text-align: left; cursor: pointer;
}
.hd-art-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-art-err { padding: 2px 8px; border-radius: 8px; background: #fff3e0; color: #b26a00; font-size: 0.6875rem; font-weight: 700; }
.hd-title { margin: 4px 0 8px; font-size: 1.0625rem; font-weight: 800; color: var(--t1, #101828); }
.hd-back {
  display: inline-block; padding: 6px 0; border: 0; background: none; color: var(--accent, #4f7cff);
  font-size: 0.875rem; font-weight: 700; cursor: pointer;
}
.hd-err { padding: 16px; text-align: center; color: var(--red, #e5484d); font-size: 0.875rem; }
.hd-note { padding: 6px 2px; font-size: 0.75rem; line-height: 1.45; color: var(--t3, #8891a5); }
.hd-rate-article { padding: 10px 0 4px; }

/* Messages inside a ticket */
.hd-msg { padding: 12px 14px; border-radius: 14px; margin-bottom: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--t1, #101828); }
.hd-msg-user { background: var(--accent-soft, #eaf0ff); }
.hd-msg-ai { background: var(--card, #ffffff); border: 1px solid var(--line, #e4e7ee); }
.hd-msg-admin { background: #fffbe8; border: 1px solid #f2e6a4; }
.hd-msg-who { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--t3, #8891a5); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.hd-status-chip { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 0.6875rem; font-weight: 700; background: var(--accent-soft, #eaf0ff); color: var(--accent-deep, #2d5bd8); }
.hd-st-resolved { background: #e5f6e9; color: #1d7a3e; }
.hd-st-waiting_user { background: #fff3e0; color: #b26a00; }
.hd-st-spam { background: #f0f1f4; color: #6b7486; }
.hd-st-p1 { background: #ffe4e4; color: #c22026; }

/* Ticket wizard sheet (no backdrop-filter) */
.hd-sheet-overlay {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(9, 12, 20, 0.45); /* solid dim — no blur */
}
.hd-sheet {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--bg, #f5f7fb);
  border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.hd-sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 800; color: var(--t1, #101828); margin-bottom: 12px; }
.hd-sheet-x { border: 0; background: none; font-size: 1.125rem; color: var(--t3, #8891a5); cursor: pointer; }
.hd-sheet-body { display: flex; flex-direction: column; gap: 10px; }
.hd-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line, #e4e7ee); background: var(--card, #ffffff);
  color: var(--t1, #101828); font-size: 0.9063rem; outline: none;
}
.hd-input:focus { border-color: var(--accent, #4f7cff); }
.hd-textarea { min-height: 110px; resize: vertical; font-family: inherit; }
.hd-attach {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px;
  border: 1px dashed var(--accent, #4f7cff); color: var(--accent, #4f7cff); font-size: 0.8438rem; font-weight: 600; cursor: pointer;
}
.hd-sheet-foot { margin-top: 14px; }
.hd-sheet-foot .hd-ask-btn { width: 100%; }

.hd-attach-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.hd-attach-item{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px;background:rgba(99,102,241,.14);color:var(--link,#8ea6ff);font-size:13px;text-decoration:none;border:1px solid rgba(99,102,241,.28)}
.hd-attach-item:hover{background:rgba(99,102,241,.24)}

/* B4 leagues */
.camp-league-tierbadge{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:none;color:#b45309;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.4);border-radius:999px;padding:3px 10px}
.camp-league-head{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.camp-league-lines{display:flex;flex-direction:column;gap:2px}
.camp-league-lines b{font-size:14px;color:var(--t1)}
.camp-league-lines span{font-size:11px;color:var(--t3)}
.camp-league-move{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px;margin-top:4px;width:fit-content}
.camp-league-move.up{color:#15803d;background:rgba(34,197,94,.14)}
.camp-league-move.down{color:#b91c1c;background:rgba(239,68,68,.14)}
.camp-league-move.stay{color:var(--t2);background:var(--line,#e5e7ef)}
.camp-league-zones{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.camp-league-zones .zone{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px;color:var(--t3);background:var(--line,#e5e7ef)}
.camp-league-zones .zone.up{color:#15803d;background:rgba(34,197,94,.13)}
.camp-league-zones .zone.down{color:#b91c1c;background:rgba(239,68,68,.13)}
.camp-lb-row.zone-up{border-left:3px solid rgba(34,197,94,.55);padding-left:8px}
.camp-lb-row.zone-down{border-left:3px solid rgba(239,68,68,.5);padding-left:8px}
.camp-league-foot{font-size:10.5px;color:var(--t3);padding:7px 4px 2px;border-top:1px dashed var(--line,rgba(120,130,160,.2));margin-top:4px}

/* A8: "watch where" pulsing highlight ring (no backdrop-filter) */
@keyframes tlHelpPulse {
  0% { box-shadow: 0 0 0 0 rgba(46,164,79,.55); }
  70% { box-shadow: 0 0 0 12px rgba(46,164,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,164,79,0); }
}
.tl-help-pulse {
  position: relative;
  border-radius: 8px;
  animation: tlHelpPulse 1.1s ease-out infinite;
}

/* A9 walkthrough engine — solid scrim, no backdrop-filter (C2) */
.hd-walk{position:fixed;inset:0;z-index:10000;pointer-events:none}
.hd-walk-scrim{position:absolute;inset:0;background:rgba(8,12,20,.62);pointer-events:auto}
.hd-walk-card{position:absolute;z-index:2;max-width:320px;min-width:260px;background:var(--surface,#fff);color:var(--t1,#1f2430);border:1px solid var(--border,#d9dce6);border-radius:14px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:auto}
.hd-walk-card.show{opacity:1;transform:none}
.hd-walk-title{font-weight:700;font-size:13px;margin-bottom:4px}
.hd-walk-text{font-size:12.5px;line-height:1.45}
.hd-walk-dots{display:flex;gap:5px;margin:9px 0 7px}
.hd-walk-dot{width:6px;height:6px;border-radius:50%;background:var(--line,#d5d8e2);transition:all .2s}
.hd-walk-dot.on{width:16px;border-radius:999px;background:var(--brand,#2ea44f)}
.hd-walk-btns{display:flex;justify-content:space-between;gap:8px;align-items:center}
.hd-walk-btn{border:1px solid var(--border,#d9dce6);background:var(--bg2,#f4f5f9);color:var(--t2,#4a5060);border-radius:10px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.hd-walk-next{background:var(--brand,#2ea44f);border-color:var(--brand);color:#fff}
.hd-walk-skip{margin-right:auto}
.tl-walk-spot{position:relative;z-index:10001;border-radius:8px;box-shadow:0 0 0 4px rgba(46,164,79,.85),0 0 0 8px rgba(46,164,79,.22)}

/* A10 community help bridge — help-answer card + community questions board */
.hd-community-card{margin:10px 0 0;padding:10px 12px;border:1px solid var(--border,#d9dce6);border-left:3px solid var(--brand,#2ea44f);border-radius:10px;background:var(--bg2,#f4f5f9)}
.hd-community-head{font-weight:700;font-size:12.5px;margin-bottom:2px}
.hd-community-sub{font-size:11.5px;color:var(--t3,#8a90a0);margin-bottom:7px;line-height:1.4}
.hd-community-btn{margin-top:2px}
.comm-q-card{margin:0 0 12px;padding:12px 14px;background:var(--surface,#fff);border:1px solid var(--border,#d9dce6);border-radius:14px}
.comm-q-title{font-weight:700;font-size:13px;margin-bottom:2px}
.comm-q-sub{font-size:11.5px;color:var(--t3,#8a90a0);margin-bottom:8px;line-height:1.4}
.comm-q-item{padding:9px 0;border-top:1px solid var(--line,#e7e9f0)}
.comm-q-item:first-of-type{border-top:none}
.comm-q-question{font-size:13px;line-height:1.45;margin-bottom:3px}
.comm-q-meta{font-size:11px;color:var(--t3,#8a90a0);margin-bottom:6px}
.comm-q-actions{display:flex;gap:6px;flex-wrap:wrap}
.comm-q-empty .comm-q-sub{margin-bottom:8px}

/* ── v2.54.36+ — Accessibility remediation round (WCAG 2.2 AA) ────────── */
/* Focus always visible on keyboard for buttons and roleful clickables. */
:focus-visible{outline:2px solid var(--brand,#2563EB);outline-offset:2px;border-radius:4px}
/* Focus-mode (👁) hero button — 44px target. */
.hh-focus-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;font-size:18px;padding:0}
/* Divs made keyboard-operable by the a11y click pass. */
[data-a11y-click]{cursor:pointer}
[data-a11y-click]:focus-visible{outline:2px solid var(--brand,#2563EB);outline-offset:2px}
/* Weight-projection card: let long values wrap instead of clipping. */
.wproj-title{overflow-wrap:anywhere}
.wproj-metric-value{white-space:normal;overflow-wrap:anywhere}
.wproj-metric-value .wproj-metric-num{white-space:nowrap}
/* Mood quick-pick buttons on the dashboard card (was unnamed 3px-gap spans). */
.mood-quick-btn{background:none;border:none;padding:4px;font-size:1rem;line-height:1;cursor:pointer;border-radius:8px;min-width:28px;min-height:28px}
.mood-quick-btn:active{transform:scale(.85)}
/* Card hide ✕ in dashboard edit mode — 28px + named. */
.card-hide-btn{width:28px;height:28px;font-size:13px}

/* ── Shared coach card (v2.58.2) ─────────────────────────────────────────
   One accent per screen: this card carries the colour, supporting cards go
   flat. Numbers sit directly under the verdict so the eye lands on a figure
   before a sentence. Overflow beyond the visible budget lives in <details>. */
.coach-card{background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--coach-accent,#22c55e);
  border-radius:var(--ui-radius-card,12px);box-shadow:var(--ui-card-shadow);
  padding:14px;margin-bottom:10px}
.coach-head{display:flex;align-items:center;gap:12px}
.coach-score{width:52px;height:52px;flex-shrink:0;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:color-mix(in srgb,var(--coach-accent) 12%,transparent)}
.coach-score b{font-size:19px;font-weight:800;line-height:1;color:var(--coach-accent)}
.coach-score span{font-size:8px;color:var(--t3);margin-top:1px}
.coach-verdict{min-width:0}
.coach-band{font-size:16px;font-weight:700;color:var(--t1);line-height:1.2}
.coach-sub{font-size:11px;color:var(--t3);margin-top:2px}
/* Metric strip — auto-fits 2 to 4 columns without a media query. */
.coach-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;
  margin:12px 0 4px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.coach-metric{text-align:center;min-width:0}
.coach-metric b{display:block;font-size:15px;font-weight:700;color:var(--t1);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coach-metric span{display:block;font-size:10px;color:var(--t3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coach-lines{margin-top:8px}
.coach-line{display:flex;gap:9px;align-items:flex-start;padding:6px 0}
.coach-line-e{font-size:15px;flex-shrink:0;line-height:1.25}
.coach-line-b{min-width:0}
.coach-line-t{font-size:12.5px;font-weight:600;color:var(--t1);line-height:1.35}
.coach-line-x{font-size:12px;color:var(--t2);line-height:1.45}
/* Progressive disclosure — native <details>, no JS, keyboard accessible. */
.coach-more{margin-top:6px;border-top:1px solid var(--border);padding-top:8px}
.coach-more>summary{cursor:pointer;list-style:none;font-size:11.5px;font-weight:600;
  color:var(--t3);display:flex;align-items:center;gap:6px;padding:2px 0;user-select:none}
.coach-more>summary::-webkit-details-marker{display:none}
.coach-more>summary::after{content:'▾';margin-left:auto;font-size:11px;transition:transform .15s ease}
.coach-more[open]>summary::after{transform:rotate(180deg)}
.coach-more-n{background:var(--surface2);color:var(--t3);font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:100px}
.coach-more-b{padding-top:4px}
/* Supporting cards: hairline only, so nothing competes with the verdict. */
.coach-secondary{border-left:1px solid var(--border)}
/* The AI action is the first coach control, directly below the section title. */
.coach-ai-row{margin-top:2px}
.coach-ai-btn{border-color:var(--border)!important;color:var(--t2)!important;font-weight:600}
.coach-ai-btn:hover,.coach-ai-btn:focus-visible{border-color:var(--brand)!important;color:var(--brand)!important}
/* ── Coach card v2 (v2.58.2) ──────────────────────────────────────────────
   Metric references, deltas, the loading skeleton, the empty state and the
   library/AI split. */
.coach-metric b{font-variant-numeric:tabular-nums}
.coach-metric span u{display:block;text-decoration:none;opacity:.75;font-size:9.5px;margin-top:1px}
/* Delta rides on the value so the eye reads figure-then-direction, not two
   separate columns. Colour is semantic, never the screen accent. */
.coach-delta{font-style:normal;font-size:10px;font-weight:700;margin-left:4px;vertical-align:1px}
.coach-delta-up{color:#16a34a}
.coach-delta-down{color:#dc2626}
.coach-delta-flat{color:var(--t3)}
/* Loading: the card's own shape, so opening a tab never jumps.
   v2.59.12: the grey skeleton blocks read as a broken/empty panel — the
   loading content is now .coach-loading dots; the old .skeleton sizing rules
   (ck-*) stay for the legacy skeleton consumers that remain. */
.coach-card.is-loading{border-left-color:var(--border);background:transparent;border-color:transparent}
.ck-round{width:52px;height:52px;border-radius:50%;flex-shrink:0}
.ck-band{display:block;height:15px;width:96px;border-radius:5px;margin-bottom:6px}
.ck-sub{display:block;height:10px;width:150px;border-radius:5px}
.ck-v{display:block;height:14px;width:44px;border-radius:4px;margin:0 auto 4px}
.ck-l{display:block;height:9px;width:34px;border-radius:4px;margin:0 auto}
.ck-line{display:block;height:11px;border-radius:5px;margin:9px 0}
.ck-line.short{width:62%}
/* v2.59.12: loading is a calm dots line, not grey skeleton blocks. The card
   keeps a fixed min-height so the tab still does not collapse. */
.coach-card.is-loading{background:transparent}
.coach-loading{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:110px;padding:12px 0;color:var(--t2);font-size:13.5px;font-weight:600}
.tl-loading-dots{display:inline-flex;gap:5px;align-items:center}
.tl-loading-dots i{width:6px;height:6px;border-radius:50%;background:var(--brand);
  opacity:.15;animation:tlDotWave 1.3s ease-in-out infinite}
/* One dot every 10% of the cycle — dot n starts at (n-1)*10%. */
.tl-loading-dots i:nth-child(1){animation-delay:0%}
.tl-loading-dots i:nth-child(2){animation-delay:10%}
.tl-loading-dots i:nth-child(3){animation-delay:20%}
.tl-loading-dots i:nth-child(4){animation-delay:30%}
.tl-loading-dots i:nth-child(5){animation-delay:40%}
.tl-loading-dots i:nth-child(6){animation-delay:50%}
.tl-loading-dots i:nth-child(7){animation-delay:60%}
.tl-loading-dots i:nth-child(8){animation-delay:70%}
.tl-loading-dots i:nth-child(9){animation-delay:80%}
.tl-loading-dots i:nth-child(10){animation-delay:90%}
@keyframes tlDotWave{0%,100%{opacity:.15;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){
  .tl-loading-dots i{animation:none;opacity:.6}
}
/* Empty: still a card, so the tab keeps its rhythm when there is no data. */
.coach-card.is-empty{box-shadow:none;background:transparent}
.coach-empty{display:flex;gap:11px;align-items:flex-start}
.coach-empty-i{font-size:22px;line-height:1.1;flex-shrink:0}
.coach-empty-t{font-size:13px;font-weight:650;color:var(--t1);line-height:1.4}
.coach-empty-b{font-size:11.5px;color:var(--t3);line-height:1.45;margin-top:3px}
/* The generated read leads; the supporting library card follows underneath. */
.coach-slot-bank:not(:empty){margin-top:2px}
/* Dedupe emptied a card (every line was a repeat) — hide the shell, never
   leave a hollow bordered box. innerHTML='' guarantees :empty matches. */
[data-coach-dropempty]:empty{display:none}

/* ── AI coach card (v2.60.0) ───────────────────────────────────────────────
   The AI read is deliberately unlike the library card stacked below it: a
   personal narrative, cross-domain correlations and one experiment, instead of
   the bank's insight/recommendation/pattern lines. A faint brand wash sets it
   apart at a glance. Score and key metrics live only in the library card. */
.coach-card-ai{background:
    linear-gradient(180deg,color-mix(in srgb,var(--brand) 6%,transparent),transparent 130px),
    var(--surface)}
.coach-ai-top{display:flex;align-items:center;gap:10px;padding-bottom:10px;
  border-bottom:1px solid var(--border)}
.coach-ai-mark{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;
  border-radius:10px;background:color-mix(in srgb,var(--brand) 11%,transparent);font-size:16px}
.coach-ai-title{font-size:13px;font-weight:750;color:var(--t1);line-height:1.3}
.coach-ai-meta{font-size:10.5px;color:var(--t3);margin-top:2px}
.coach-ai-body{margin-top:12px}
.coach-ai-headline{font-size:14px;font-weight:750;color:var(--t1);line-height:1.3;margin-bottom:6px}
/* The narrative is the personal "read" — a quiet accent rule marks it as prose,
   not a metric line. */
.coach-ai-narr{font-size:13px;color:var(--t1);line-height:1.55;padding-left:11px;
  border-left:2px solid color-mix(in srgb,var(--brand) 55%,transparent)}
.coach-ai-sec{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.coach-ai-lbl{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);margin-bottom:7px}
.coach-ai-corr{display:flex;gap:9px;align-items:flex-start;padding:4px 0;font-size:12.5px;
  color:var(--t2);line-height:1.45}
.coach-ai-corr-e{flex-shrink:0;font-size:14px;line-height:1.3}
.coach-ai-corr-x{min-width:0}
/* The experiment is the single call-to-action, so it gets a tinted box. */
.coach-ai-exp{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 12px;
  border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,var(--surface2));
  border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.coach-ai-exp-e{flex-shrink:0;font-size:16px;line-height:1.2}
.coach-ai-exp-b{min-width:0}
.coach-ai-exp-t{font-size:12px;font-weight:700;color:var(--t1);line-height:1.3}
.coach-ai-exp-x{font-size:12px;color:var(--t2);line-height:1.45;margin-top:3px}

/* ═══════════════════════════════════════════════════════════════
   food-ideas.txt A1–A10 / B1–B10 — nutrition professionalism pack
   ═══════════════════════════════════════════════════════════════ */

/* B8: halve / double quick-scale buttons on log rows */
.me-scale{display:flex;gap:4px;flex-shrink:0}
.me-scale-btn{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--border2);
  background:var(--surface2);color:var(--t2);font-size:12px;font-weight:700;
  font-family:'DM Sans',sans-serif;cursor:pointer;line-height:1;
  transition:all .15s;
}
.me-scale-btn:hover{border-color:var(--brand);color:var(--brand)}

/* A10: protein pacing per meal */
.meal-pro-pace{margin:6px 0 4px;padding:6px 9px;border-radius:9px;background:var(--surface2);border:1px solid var(--border)}
.mpp-track{height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.mpp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width .3s}
.mpp-fill.mpp-done{background:linear-gradient(90deg,#10B981,#34D399)}
.mpp-label{margin-top:4px;font-size:10px;font-weight:700;color:var(--t2)}

/* A6: usual portion hint in food search + selected food form */
.fi-usual{font-size:10px;font-weight:700;color:var(--brand);margin-top:2px}
#fs-usual{font-size:11px;font-weight:700;color:var(--brand);margin-bottom:6px}

/* B4: AI evidence strip (source + confidence) */
.fai-usual-row{margin-top:4px}
.fai-usual{
  font-size:10px;font-weight:700;color:var(--brand);background:var(--brand-l, rgba(99,102,241,.1));
  border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
  padding:3px 8px;border-radius:999px;cursor:pointer;font-family:'DM Sans',sans-serif;
}
.fai-evidence{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;align-items:center}
.fai-ev-src{font-size:10px;font-weight:600;color:var(--t3)}
.fai-ev-conf{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}
.fai-conf-hi{background:rgba(16,185,129,.14);color:#10B981}
.fai-conf-mid{background:rgba(245,158,11,.14);color:#D97706}
.fai-conf-lo{background:rgba(239,68,68,.12);color:#EF4444}

/* B5: projection ring inside the food-selected form */
#fs-proj{display:flex;align-items:center;gap:10px;padding:8px 0 4px}
.fs-proj-ring{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fs-proj-core{width:30px;height:30px;border-radius:50%;background:var(--surface1,var(--surface2))}
.fs-proj-txt{font-size:11px;font-weight:600;color:var(--t2);line-height:1.35}

/* B9: macro composition meter */
.comp-card{margin:8px 12px;padding:12px 14px;border-radius:16px}
.comp-title{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:8px}
.comp-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--border)}
.comp-seg{height:100%;transition:width .3s}
.comp-p{background:#3B82F6}
.comp-c{background:#F59E0B}
.comp-f{background:#10B981}
.comp-legend{display:flex;gap:12px;margin-top:6px;font-size:10px;font-weight:600;color:var(--t2);flex-wrap:wrap}

/* B10: "now meal" progressive disclosure */
#nutr-now-meal{margin:8px 12px;padding:0;border-radius:16px;overflow:hidden}
.nnm-summary{
  width:100%;display:flex;align-items:center;gap:8px;padding:12px 14px;
  background:none;border:none;font-family:'DM Sans',sans-serif;cursor:pointer;
  color:var(--t1);font-size:13px;font-weight:700;text-align:left;
}
.nnm-chev{font-size:10px;color:var(--t3);transition:transform .2s}
.nnm-detail{padding:0 14px 12px;font-size:11px;color:var(--t2);line-height:1.5}
.nnm-add{
  display:inline-flex;align-items:center;margin-top:8px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--brand);color:var(--brand);background:none;
  font-size:12px;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;
}
.nnm-collapsed .nnm-chev{transform:rotate(-90deg)}
.nnm-collapsed .nnm-detail{display:none}

/* B3: eating-window timeline */
#nutr-eat-window{background:none}
.new-title{font-size:11px;font-weight:700;color:var(--t3);margin-bottom:8px}
.new-title b{color:var(--t1)}
.new-track{position:relative;height:34px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);margin:0 2px}
.new-dot,.new-now,.new-meal{position:absolute;top:50%;transform:translate(-50%,-50%)}
.new-dot{width:9px;height:9px;border-radius:50%;background:var(--brand)}
.new-dot.new-dot-out{background:var(--border2)}
.new-now{width:3px;height:26px;border-radius:2px;background:var(--t1)}
.new-meal{width:2px;height:14px;border-radius:2px;background:var(--border2)}

/* A1/A4/A9 shared info-card chrome */
.ni-card{margin:8px 12px;padding:12px 14px;border-radius:16px}
.ni-title{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:6px}
.ni-line{font-size:11px;color:var(--t2);line-height:1.5;margin:3px 0}
.ni-meta{font-size:10px;font-weight:600;color:var(--t4);margin-top:6px;text-transform:uppercase;letter-spacing:.05em}

/* A1: micronutrient bars */
.nm-row{margin:8px 0}
.nm-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.nm-label{font-size:11px;font-weight:700;color:var(--t1)}
.nm-val{font-size:10px;font-weight:600;color:var(--t3);white-space:nowrap}
.nm-bar{height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.nm-fill{height:100%;border-radius:999px;transition:width .3s}
.nm-bar-lo{background:#EF4444}
.nm-bar-mid{background:#F59E0B}
.nm-bar-ok{background:#10B981}
.nm-sugs{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.nm-sug{
  font-size:10px;font-weight:700;color:var(--brand);padding:3px 9px;border-radius:999px;
  background:var(--brand-l, rgba(99,102,241,.1));border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
  cursor:pointer;font-family:'DM Sans',sans-serif;
}

/* A9: seasonal produce chips */
.ns-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ns-chip{
  font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;
  border:1px solid var(--border2);background:var(--surface2);color:var(--t2);
  cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:all .15s;
}
.ns-chip:hover{border-color:#22C55E;color:#22C55E}
.ns-hint{color:var(--t3)}

/* A2: meal template chips + manager */
.meal-tpl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 0 2px}
.meal-tpl-label{font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.05em}
.meal-tpl-chip{
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--brand);color:var(--brand);background:none;font-family:'DM Sans',sans-serif;
}
.meal-tpl-mgr{
  width:28px;height:28px;border-radius:9px;border:1px solid var(--border2);
  background:var(--surface2);color:var(--t3);font-size:12px;cursor:pointer;
}
.tpl-manager-body{display:grid;gap:8px;margin-top:14px;max-height:60vh;overflow-y:auto}
.tpl-manager-row{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--surface2)}
.tpl-manager-name{font-size:12px;font-weight:700;color:var(--t1)}
.tpl-manager-items{font-size:10px;color:var(--t3);margin-top:3px;line-height:1.4}
.tpl-manager-apply,.tpl-manager-del{
  width:32px;height:32px;flex-shrink:0;border-radius:10px;border:1px solid var(--border2);
  background:var(--surface2);cursor:pointer;font-size:13px;font-family:'DM Sans',sans-serif;
}
.tpl-manager-apply{color:#10B981}
.tpl-manager-del{color:#EF4444}

/* B7: ghost-day template chips on empty days */
.ghost-chip{
  font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px dashed var(--brand);color:var(--brand);background:none;font-family:'DM Sans',sans-serif;
}

/* A5: cooked-dish estimator */
.cd-bank{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.cd-bank-chip{
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border2);background:var(--surface2);color:var(--t2);font-family:'DM Sans',sans-serif;
}
.cd-ta{margin:0 0 8px;resize:vertical}
.cd-card{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:13px;background:var(--surface2)}
.cd-name{font-size:14px;font-weight:700;color:var(--t1)}
.cd-meta{margin-top:3px;font-size:10px;font-weight:600;color:var(--t3)}
.cd-macros{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
.cd-macros>div{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.cd-macros b{font-size:14px;color:var(--brand)}
.cd-macros span{font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase}
.cd-ev-title{margin-top:10px;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.05em}
.cd-ev-row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--border);font-size:11px;color:var(--t2)}
.cd-ev-note{margin-top:7px;font-size:10px;font-weight:600;color:var(--t3)}

/* B1/B2: meal-plan handoff + plan-vs-actual */
.mp-ate-btn{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;cursor:pointer;
  border:1.5px solid #10B981;color:#10B981;background:none;font-size:15px;font-weight:700;
  font-family:'DM Sans',sans-serif;transition:all .15s;
}
.mp-ate-btn:hover{background:#10B981;color:#fff}
.mp-vs{
  margin-top:3px;font-size:10px;font-weight:700;color:var(--t3);
  background:var(--surface2);border:1px solid var(--border);border-radius:999px;
  padding:2px 8px;display:inline-block;
}

/* A3: grocery aisles + share */
.grocery-share-btn{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--border2);
  background:var(--surface2);font-size:13px;cursor:pointer;
}
.grocery-aisle{margin-bottom:10px}
.grocery-aisle-title{
  font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 5px 2px;
}
.grocery-aisle .meal-grocery-row{margin-bottom:5px}

/* A7: pending-sync pill on the nutrition screen */
.nutr-sync-pill{flex:0 0 auto;color:#D97706;border-color:#F59E0B}
.nutr-sync-pill .sync-count-badge{font-size:11px;font-weight:800}