:root{
  /* Primary: medical teal. Accent: coral for due/alert states. Bg: cool clinical white. */
  --bronze:#14b8a6;        /* teal-500 — primary */
  --bronze-dk:#0f766e;     /* teal-700 — primary dark */
  --bronze-lt:#ccfbf1;     /* teal-100 — primary light/tint */
  --accent:#f97316;        /* orange-500 — "due" alert */
  --accent-dk:#c2410c;
  --bg:#f6faf9;            /* near-white with hint of mint */
  --surface:#ffffff;
  --surface-alt:#eefaf7;
  --ink:#0f172a;           /* slate-900 */
  --muted:#64748b;         /* slate-500 */
  --line:#e2e8f0;          /* slate-200 */
  --danger:#dc2626;
  --ok:#10b981;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.06);
  --grad:linear-gradient(135deg,#14b8a6 0%,#0d9488 50%,#0f766e 100%);
  --grad-due:linear-gradient(135deg,#f97316 0%,#ea580c 50%,#c2410c 100%);
}
[data-theme="dark"]{
  --bronze:#2dd4bf;        /* teal-400 */
  --bronze-dk:#5eead4;     /* teal-300 — lighter for dark surface contrast */
  --bronze-lt:#134e4a;     /* teal-900 */
  --accent:#fb923c;        /* orange-400 */
  --accent-dk:#fdba74;
  --bg:#0b1220;
  --surface:#111a2c;
  --surface-alt:#1a2540;
  --ink:#e2e8f0;
  --muted:#94a3b8;
  --line:#1e293b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.45);
  --grad:linear-gradient(135deg,#0d9488 0%,#0f766e 50%,#134e4a 100%);
  --grad-due:linear-gradient(135deg,#ea580c 0%,#c2410c 50%,#9a3412 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bronze:#2dd4bf;
    --bronze-dk:#5eead4;
    --bronze-lt:#134e4a;
    --accent:#fb923c;
    --accent-dk:#fdba74;
    --bg:#0b1220;
    --surface:#111a2c;
    --surface-alt:#1a2540;
    --ink:#e2e8f0;
    --muted:#94a3b8;
    --line:#1e293b;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.45);
    --grad:linear-gradient(135deg,#0d9488 0%,#0f766e 50%,#134e4a 100%);
    --grad-due:linear-gradient(135deg,#ea580c 0%,#c2410c 50%,#9a3412 100%);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 24px) env(safe-area-inset-left)}
a{color:var(--bronze-dk)}
h1,h2{margin:0;font-weight:600}
h1{font-size:1.3rem}
h2{font-size:1rem}
.muted{color:var(--muted)}
.sync-error{margin:8px 0 0;padding:10px 12px;border-radius:8px;font-size:.85rem;line-height:1.4;color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--danger) 35%, transparent)}
.sync-error[hidden]{display:none}
.small{font-size:.85rem}
.center{text-align:center}
.hidden{display:none !important}
.spacer{flex:1}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:10}
.brand{font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink);background:transparent;border:0;padding:2px 4px;margin:0;cursor:pointer;font-family:inherit;text-decoration:none;-webkit-appearance:none;appearance:none;border-radius:8px;transition:opacity .15s ease}
.brand:hover{opacity:.82}
.brand:active{transform:scale(.98)}
.brand-icon{width:26px;height:26px;border-radius:6px;display:inline-block;vertical-align:middle;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.icon-btn{background:none;border:0;font-size:1.2rem;cursor:pointer;padding:2px 6px;color:var(--bronze-dk)}

.view{display:none;padding:10px 12px;max-width:560px;margin:0 auto;gap:10px}
.view.active{display:flex;flex-direction:column}
.sub-header{display:flex;align-items:center;gap:10px;margin:-4px 0 6px}
.back{background:none;border:0;font-size:1.6rem;color:var(--bronze-dk);cursor:pointer;padding:0 6px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-head h2{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.link{color:var(--bronze-dk);font-size:.85rem;text-decoration:none}

.countdown-card{background:var(--grad);color:#fff;padding:10px 14px;border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.countdown-card.due{background:var(--grad-due)}
.countdown-info{min-width:0}
.countdown-label{opacity:.8;font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;line-height:1}
.countdown-value{font-size:1.5rem;font-weight:700;margin:2px 0 1px;font-variant-numeric:tabular-nums;line-height:1.1}
.countdown-sub{opacity:.85;font-size:.75rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.countdown-card.due .countdown-value{color:#ffefe2}
.countdown-card .btn-primary{padding:8px 14px;font-size:.9rem;white-space:nowrap}

.btn-primary,.btn-ghost,.btn-danger{font:inherit;border-radius:10px;padding:10px 16px;cursor:pointer;border:1px solid transparent;font-weight:600}
.btn-primary{background:var(--bronze-dk);color:var(--bg);border-color:var(--bronze-dk)}
.btn-primary.big{padding:10px 18px;font-size:.95rem;width:auto}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--bronze-lt)}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-primary:hover{filter:brightness(1.05)}
.countdown-card .btn-primary{background:#fff;color:#0f766e;border-color:#fff;font-weight:700}
.countdown-card.due .btn-primary{color:#c2410c}

.shot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shot-list li{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.shot-list li:hover{background:var(--bronze-lt)}
.shot-list .meta{font-size:.8rem;color:var(--muted)}
.shot-list .dose{font-weight:600;color:var(--bronze-dk)}

.empty{color:var(--muted);text-align:center;padding:8px 0;margin:0}

label{display:block;margin:10px 0;color:var(--muted);font-size:.85rem}
label input,label select,label textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
label.row{display:flex;align-items:center;gap:8px;color:var(--ink)}
label.row input{width:auto;margin-top:0}

.row-buttons{display:flex;gap:8px;flex-wrap:wrap}

.modal{border:0;border-radius:var(--radius);padding:0;max-width:420px;width:92vw;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal::backdrop{background:rgba(0,0,0,.4)}
.modal form{padding:18px}
.modal h2{margin-bottom:6px}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:12px}

/* Install modal */
.install-modal{max-width:440px}
.install-hero{text-align:center;padding:8px 0 12px}
.install-icon{border-radius:14px;box-shadow:var(--shadow);margin-bottom:8px}
.install-hero h2{margin:6px 0 4px;font-size:1.15rem}
.install-steps{background:var(--surface-alt);border-radius:10px;padding:14px;margin:8px 0}
.install-steps h3{margin:0 0 8px;font-size:.95rem;color:var(--bronze-dk);text-transform:none;letter-spacing:0}
.install-steps ol{margin:0;padding-left:20px}
.install-steps ol li{margin:6px 0;font-size:.92rem;line-height:1.5}
.install-steps p{margin:6px 0;font-size:.92rem;line-height:1.5}
/* iOS share icon — drawn in CSS to match Safari's icon */
.ios-share-icon{display:inline-block;width:18px;height:22px;vertical-align:-5px;background:linear-gradient(180deg,transparent 50%,#3478f6 50%);position:relative;border-radius:3px;margin:0 2px}
.ios-share-icon::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid #3478f6}
.ios-share-icon::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:2px;height:9px;background:#3478f6}
.desktop-install-icon{display:inline-block;background:var(--bronze-lt);color:var(--bronze-dk);padding:1px 6px;border-radius:4px;font-weight:700}

canvas{width:100% !important;height:auto !important;max-height:200px}

.legal h1{font-size:1.4rem;margin-bottom:8px}
.legal h2{font-size:1rem;color:var(--bronze-dk);text-transform:none;letter-spacing:normal;margin-top:18px;margin-bottom:6px}
.legal p,.legal ul{margin:8px 0;line-height:1.5}
.legal ul{padding-left:22px}
.legal code{background:var(--surface-alt);padding:1px 6px;border-radius:4px;font-size:.85em}

.sync-status{font-size:.85rem;color:var(--muted);margin:6px 0}
.sync-status.ok{color:var(--ok)}
.sync-status.err{color:var(--danger)}
.save-status{margin-left:10px;align-self:center;font-size:.85rem}
.save-status.ok{color:var(--ok)}

/* Expense list (premium spending) */
/* Info button + modal — small (i) icons next to card headings, clickable for an explanation. */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1.5px solid var(--muted);background:transparent;color:var(--muted);font:inherit;font-size:.7rem;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:pointer;margin-left:6px;line-height:1;padding:0;vertical-align:middle;flex-shrink:0;transition:border-color .15s,color .15s,background .15s}
.info-btn:hover{border-color:var(--bronze-dk);color:var(--bronze-dk);background:var(--bronze-lt)}
.info-modal{max-width:420px}
.info-body{font-size:.92rem;line-height:1.55;color:var(--ink)}
.info-body h3{margin:14px 0 4px;font-size:.95rem;color:var(--bronze-dk)}
.info-body p{margin:6px 0}
.info-body ul{margin:6px 0;padding-left:20px}
.info-body li{margin:3px 0}
.info-body code{background:var(--surface-alt);padding:1px 5px;border-radius:4px;font-size:.88em}
.info-body .formula{background:var(--surface-alt);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}

/* Appetite picker — same layout as mood, just emoji-based buttons */
.appetite-emoji{font-size:2rem;line-height:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.appetite-btn{padding:8px 4px;background:transparent;border:none;border-radius:0;cursor:pointer;transition:transform .15s ease;display:flex;flex-direction:column;align-items:center;gap:4px}
.appetite-btn:hover{transform:translateY(-2px)}
.appetite-btn.selected{background:transparent;box-shadow:none;transform:scale(1.18)}
.appetite-btn.selected .appetite-emoji{filter:drop-shadow(0 0 6px var(--bronze))}
.appetite-btn.selected .mood-label{color:var(--bronze-dk);font-weight:700}
.mood-label{font-size:.68rem;font-weight:600;line-height:1;color:var(--muted);text-align:center;letter-spacing:.02em;display:block}
.appetite-hint{margin-top:8px;text-align:center}
.data-picker{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.data-picker legend{padding:0 6px;font-size:.85rem;color:var(--muted);font-weight:600}
.data-picker .check{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer;margin:0}
.data-picker .check input{margin:0}
.badge-share-hint{display:block;font-size:.7rem;color:var(--muted);margin-top:2px}
.badge.unlocked{cursor:pointer;background:none;border:1px solid var(--line);text-align:center;padding:10px;border-radius:10px;transition:transform .15s ease,border-color .15s ease}
.badge.unlocked:hover{transform:translateY(-2px);border-color:var(--bronze)}
.badge-art{display:block;width:88px;height:88px;margin:0 auto 6px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg, var(--bronze-lt), var(--bronze));box-shadow:0 2px 8px rgba(0,0,0,.12)}
.badges-toggle{margin-top:10px;width:100%}
.badge-share-preview-wrap{margin:10px 0;display:flex;justify-content:center}
.badge-share-frame{width:min(86vw,340px);height:min(86vw,340px);flex-shrink:0;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.18);background:#0b1220}
.badge-share-frame canvas{display:block;width:100% !important;height:100% !important;max-height:none !important;border-radius:14px}
#badge-share-dialog{max-width:440px;width:92vw}
#badge-share-dialog form{box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
/* Appetite trend bars use same .mood-bar styling, but with reverse intent (low = good): */
#appetite-trend-bars .mood-bar.good{background:var(--bronze)}
#appetite-trend-bars .mood-bar.mid{background:var(--muted)}
#appetite-trend-bars .mood-bar.high{background:#fb923c}

/* Mood emoji styles (premium emoji pack swap) */
.mood-emoji{font-size:2rem;line-height:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.mood-emoji-big{font-size:3.5rem;line-height:1;display:flex;align-items:center;justify-content:center}
.mood-emoji-display{display:flex;align-items:center;justify-content:center}

/* Theme picker grid (premium) */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.theme-swatch{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:inherit;color:var(--text);transition:border-color .15s,transform .1s}
.theme-swatch:hover{transform:translateY(-1px)}
.theme-swatch.active{border-color:var(--bronze-dk);box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.theme-swatch-dot{width:36px;height:36px;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.theme-swatch-name{font-size:.72rem;font-weight:600;color:var(--muted)}
.theme-swatch.active .theme-swatch-name{color:var(--bronze-dk)}

/* Emoji style picker grid (premium) */
.emoji-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}
.emoji-style-swatch{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit;color:var(--text)}
.emoji-style-swatch.active{border-color:var(--bronze-dk);box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.emoji-row{display:flex;gap:4px;font-size:1.2rem;line-height:1}
.emoji-style-name{font-size:.72rem;font-weight:600;color:var(--muted)}
.emoji-style-swatch.active .emoji-style-name{color:var(--bronze-dk)}

/* Chart range selector (1M / 3M / 6M / 1Y / All) */
.range-bar{display:flex;gap:4px;background:var(--surface-alt);padding:3px;border-radius:8px;margin:6px 0 10px}
.range-btn{flex:1;background:transparent;border:0;color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;padding:6px 0;cursor:pointer;border-radius:6px;transition:background .15s,color .15s}
.range-btn.active{background:var(--surface);color:var(--bronze-dk);box-shadow:0 1px 2px rgba(0,0,0,.06)}
[data-theme="dark"] .range-btn.active{background:var(--bronze-dk);color:#fff}

/* Body type toggle (Male / Female) above injection-site diagram */
.body-toggle{display:flex;gap:4px;background:var(--surface-alt);padding:3px;border-radius:8px;margin:6px auto 8px;max-width:200px}
.body-toggle-btn{flex:1;background:transparent;border:0;color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;padding:6px 0;cursor:pointer;border-radius:6px;transition:background .15s,color .15s}
.body-toggle-btn.active{background:var(--surface);color:var(--bronze-dk);box-shadow:0 1px 2px rgba(0,0,0,.06)}
[data-theme="dark"] .body-toggle-btn.active{background:var(--bronze-dk);color:#fff}

.expense-list{list-style:none;padding:0;margin:8px 0 0}
.expense-list li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:6px 0;cursor:pointer;background:var(--surface)}
.expense-list li:hover{background:var(--surface-alt)}
.expense-row{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.expense-cat{color:var(--text)}
.expense-amount{color:var(--bronze-dk);font-variant-numeric:tabular-nums}
.expense-meta{margin-top:2px}
.passphrase-display{background:var(--surface-alt);border:1px dashed var(--bronze-dk);padding:10px;border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;word-break:break-all;margin:8px 0;user-select:all}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* Countdown ring */
.countdown-card{position:relative}
/* Ring is now an inline grid element (first column) — no longer absolutely positioned over the text. */
.countdown-ring-wrap{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex-shrink:0}
.countdown-ring{width:56px;height:56px;opacity:.85}
.countdown-ring-track{fill:none;stroke:#ffffff;stroke-opacity:.22;stroke-width:5}
.countdown-ring-progress{fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:32px 32px;stroke-dasharray:175.93;stroke-dashoffset:175.93;transition:stroke-dashoffset .8s ease}
.countdown-card.due .countdown-ring{animation:pulse 1.6s ease-in-out infinite;opacity:.55}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:.85}}

/* Hero card */
.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.hero-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.hero-stat .hero-num{font-size:1.5rem;font-weight:700;color:var(--bronze-dk);font-variant-numeric:tabular-nums;line-height:1.1}
.hero-stat .hero-num.gain{color:var(--accent-dk)}
.hero-stat .hero-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.hero-goal{margin-top:12px}
.hero-goal-bar{height:8px;background:var(--surface-alt);border-radius:6px;overflow:hidden}
.hero-goal-fill{height:100%;background:linear-gradient(90deg,var(--bronze) 0%,var(--bronze-dk) 100%);width:0%;transition:width 1s ease;border-radius:6px}
.hero-goal-text{font-size:.78rem;color:var(--muted);margin-top:4px;text-align:center}

/* Mood */
.mood-card .card-head h2{margin:0}
.mood-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.mood-btn{font-size:1.6rem;background:transparent;border:none;border-radius:0;padding:8px 4px;cursor:pointer;transition:transform .15s ease;display:flex;flex-direction:column;align-items:center;gap:4px}
.mood-btn:hover{transform:translateY(-2px)}
.mood-btn.selected{background:transparent;transform:scale(1.12)}
.mood-btn.selected .mood-emoji,.mood-btn.selected .mood-svg{filter:drop-shadow(0 0 6px var(--bronze))}
.mood-btn.selected .mood-label{color:var(--bronze-dk);font-weight:700}
.mood-saved{font-style:italic}

/* Food noise (1-10 slider) */
.foodnoise-picker{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.foodnoise-slider-row{display:flex;align-items:center;gap:10px}
.foodnoise-slider-row input[type=range]{flex:1;accent-color:var(--bronze)}
.foodnoise-end-label{flex-shrink:0}
.foodnoise-readout{text-align:center;font-size:1.4rem;font-weight:700;color:var(--bronze-dk);font-variant-numeric:tabular-nums}
.foodnoise-readout .muted{font-weight:400}
.foodnoise-save{align-self:center;padding:8px 22px}
.foodnoise-hint{margin-top:4px;text-align:center}
.foodnoise-logged-graphic{font-size:2.2rem;font-weight:700;color:var(--bronze-dk);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.foodnoise-logged-suffix{font-size:1rem;color:var(--muted);font-weight:500}

/* Catch-up (fill in a past day) */
.catchup-link-row{margin:2px 14px 0;text-align:center}
.catchup-modal{max-width:460px}
.catchup-modal form{max-height:86vh;overflow-y:auto}
.catchup-section{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.catchup-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.catchup-section .mood-picker,.catchup-section .foodnoise-slider-row{margin-top:6px}
.catchup-section .foodnoise-readout{font-size:1.1rem;margin-top:6px}
.catchup-status:empty{display:none}
.catchup-status{margin-top:10px;color:var(--bronze-dk)}
.catchup-clear{color:var(--muted)}
/* Trend bars double as the edit handle for their day. */
.mood-trend-bars .mood-bar{cursor:pointer}

/* Toast — sits above the bottom nav, never blocks input. */
.app-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 78px);transform:translate(-50%,12px);z-index:120;max-width:88vw;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:.92rem;font-weight:600;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.app-toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.app-toast{transition:none}}

/* Guidance (titration & missed-dose reference) */
.guidance-hint{margin:8px 14px 0;padding:10px 14px;background:rgba(199,145,91,.1);border:1px solid var(--bronze-dk);border-radius:10px;font-size:.9rem}
.guidance-hint a{color:var(--bronze-dk);font-weight:600;text-decoration:none}
.guidance-hint a:hover{text-decoration:underline}
.guidance-modal{padding:20px 22px;max-width:560px}
.guidance-modal h3{margin:0 0 8px;font-size:1.2rem}
.guidance-modal h4{margin:14px 0 4px;font-size:.95rem}
.guidance-modal p{line-height:1.55;font-size:.95rem}
.guidance-actions,.guidance-questions{margin:6px 0 8px;padding-left:22px;line-height:1.55}
.guidance-actions li,.guidance-questions li{margin-bottom:4px}
.guidance-disclaimer{margin-top:14px;padding-top:8px;border-top:1px dashed var(--line)}
.guidance-close{position:absolute;top:8px;right:10px;font-size:1.4rem;line-height:1;padding:4px 10px}

/* Medication history */
.medchange-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 4px}
.medchanges-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.medchange-row{background:var(--surface-alt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.medchange-row .btn-ghost{align-self:flex-end;font-size:.78rem;padding:2px 8px}

/* Trial benchmark selector on weight chart */
.benchmark-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 4px}
.benchmark-row select{margin:0;padding:4px 6px;font-size:.82rem;width:auto;max-width:60%}
.lock-pill.hidden{display:none}

/* Insights / Patterns */
.insights-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.insight-card{display:block;width:100%;text-align:left;background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--text);transition:transform .12s,border-color .15s,background .15s}
.insight-card:not(.pending):hover{transform:translateY(-1px);border-color:var(--bronze)}
.insight-card.pending{cursor:default;opacity:.78}
.insight-card.locked{cursor:pointer}
.insight-card.locked:hover{border-color:var(--bronze-dk);background:rgba(199,145,91,.05)}
.insight-card.is-premium{border-left:3px solid var(--bronze-dk)}
.insight-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.insight-head strong{font-size:.95rem}
.insight-card p{margin:0;font-size:.88rem;line-height:1.5}

/* Cycle tracking */
.lock-pill.optional{background:var(--surface-alt);color:var(--muted);font-weight:600;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}
.btn-danger.small,.btn-primary.small{padding:6px 12px;font-size:.85rem}
.cycle-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cycle-row{text-align:left;width:100%;background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--text);transition:border-color .15s,transform .1s}
.cycle-row:hover{border-color:var(--bronze);transform:translateY(-1px)}
.cycle-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;font-size:.92rem}
.cycle-row-symptoms{font-size:.82rem;color:var(--text)}
.cycle-row-notes{margin-top:4px}
.cycle-symptoms{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px 10px;margin-top:6px}
.check-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}
.check-row.small{font-size:.82rem}

/* Body diagram */
.body-diagram-wrap{display:flex;justify-content:center;padding:6px 0}
.body-svg{max-width:280px;width:100%;height:auto}
.body-shape{fill:var(--surface-alt);stroke:var(--line);stroke-width:1.5}
.body-site{cursor:pointer;transition:opacity .2s,transform .2s}
.body-site circle{transition:fill .3s,stroke .3s,r .3s}
.body-site:hover circle{stroke-width:3}
.body-site text{font-size:8px;font-weight:600;fill:var(--muted);text-anchor:middle;pointer-events:none}
.site-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);margin-top:6px;justify-content:center}
.site-legend span.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:4px}
.swatch.recent{background:#fb923c}
.swatch.medium{background:#0d9488}
.swatch.fresh{background:#5eead4}
.swatch.unused{background:transparent;border:1.5px solid var(--bronze-dk)}
.body-diagram-wrap{flex-direction:column;align-items:center}
.body-custom-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;padding:0 8px;max-width:340px}
.body-custom-chip{font:inherit;font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1.5px solid var(--bronze-dk);background:transparent;color:var(--text);cursor:pointer;transition:transform .15s,background .15s}
.body-custom-chip:hover{transform:translateY(-1px);background:var(--surface-alt)}
.body-custom-chip.recent{border-color:#c2410c;background:rgba(251,146,60,.18);color:#9a3412}
.body-custom-chip.medium{border-color:#0f766e;background:rgba(13,148,136,.18);color:#0f766e}
.body-custom-chip.fresh{border-color:#14b8a6;background:rgba(94,234,212,.18);color:#0f766e}
[data-theme="dark"] .body-custom-chip{color:var(--text)}
[data-theme="dark"] .body-custom-chip.recent{color:#fcd34d}
[data-theme="dark"] .body-custom-chip.medium,[data-theme="dark"] .body-custom-chip.fresh{color:#5eead4}

/* Dose timeline strip */
.dose-timeline-wrap{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.dose-timeline-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.dose-history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dose-history-list .dose-row{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--surface-alt);border-radius:6px;flex-wrap:wrap}
.dose-history-list .dose-row.current{background:color-mix(in srgb, var(--bronze) 18%, var(--surface-alt));border-left:3px solid var(--bronze-dk);font-weight:600}
.dose-history-list .dose-mg{min-width:60px;font-weight:600;color:var(--bronze-dk)}
.dose-history-list .dose-when{flex:1;color:var(--text)}
.dose-arrow{font-size:.8rem;font-weight:600}
.dose-arrow.up{color:#16a34a}
.dose-arrow.down{color:#dc2626}

/* Side effects */
.se-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.se-group{display:flex;flex-direction:column;gap:4px}
.se-group-title{margin:6px 0 2px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.se-row{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-radius:8px;background:var(--surface-alt)}
.se-row label{margin:0;flex:1;color:var(--ink);font-size:.85rem}
.se-row select{margin-top:0;padding:4px 6px;font-size:.8rem;width:auto;min-width:90px}
.se-group-row{margin-bottom:8px}
.se-group-row .se-group-title{margin:0 0 4px}
.se-pills{display:flex;flex-wrap:wrap;gap:6px}
.se-details summary{cursor:pointer;color:var(--bronze-dk);font-weight:600;padding:6px 0}

/* Symptoms card — standalone daily side-effect entry */
.weight-log-today{margin:2px 0 10px;font-size:.95rem}
.weight-log-card.logged .weight-log-today{color:var(--ink);font-weight:600}
.weight-log-btn{width:100%}
.weight-log-hint{margin-top:8px}
#weight-log-change.gain{color:var(--accent-dk)}

.symptoms-today{margin:2px 0 10px;font-size:.95rem}
.symptoms-card.logged .symptoms-today{color:var(--ink);font-weight:600}
.symptoms-log-btn{width:100%}
.symptoms-hint{margin-top:8px}
.symptoms-modal .se-grid{max-height:52vh;overflow-y:auto;padding-right:4px}
.catchup-symptoms-details summary{cursor:pointer;color:var(--bronze-dk);font-weight:600;padding:6px 0;font-size:.85rem}
.catchup-symptoms-details .se-grid{max-height:40vh;overflow-y:auto;padding-right:4px}
.side-effects-summary{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.se-pill{background:var(--surface-alt);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.78rem;display:flex;align-items:center;gap:6px}
.se-pill .se-count{font-weight:700;color:var(--bronze-dk)}
.se-pill.severe{border-color:var(--accent);background:rgba(249,115,22,.1)}
.se-pill.severe .se-count{color:var(--accent-dk)}

/* Empty state illustrations */
.empty-illus{display:inline-block;font-size:1.4rem;opacity:.5;margin-bottom:4px}

/* Badges */
.badges-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width: 380px){.badges-list{grid-template-columns:repeat(2,1fr)}}
.badge-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;background:linear-gradient(160deg,#fff,var(--surface-alt));border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;text-align:center}
.badge-tile:hover{transform:translateY(-2px);border-color:var(--bronze);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.badge-tile-art{width:72px;height:72px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--bronze-lt),var(--bronze));box-shadow:0 2px 8px rgba(0,0,0,.15),inset 0 0 0 2px rgba(255,255,255,.6)}
.badge-tile-label{font-size:.78rem;font-weight:600;color:var(--text);line-height:1.2}
.badges-list .badges-toggle{grid-column:1/-1}
.badge{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px 8px 12px;font-size:.82rem;display:flex;align-items:center;gap:8px;animation:badge-pop .4s ease-out;transition:transform .12s,box-shadow .15s}
.badge.unlocked{background:linear-gradient(135deg,var(--bronze) 0%,var(--bronze-dk) 100%);border-color:transparent;color:#fff;box-shadow:0 2px 6px rgba(15,23,42,.10),0 0 0 1px rgba(255,255,255,.06) inset}
.badge.unlocked .badge-label,
.badge.unlocked .badge-icon{color:#fff}
.badge .badge-icon{font-size:1.2rem;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.badge .badge-label{color:var(--ink);font-weight:600;letter-spacing:.1px}
.badge.locked{background:var(--surface);border-color:var(--line);opacity:.6}
.badge.locked .badge-icon{filter:grayscale(1);opacity:.55}
.badge.locked .badge-label{color:var(--muted);font-weight:500}
.badge.unlocked:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(15,23,42,.14)}
[data-theme="dark"] .badge{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .badge.unlocked{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 12px rgba(20,184,166,.18)}
@keyframes badge-pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* Color-coded shot rows by dose */
.shot-list li[data-intensity="1"]{border-left:3px solid #ccfbf1}
.shot-list li[data-intensity="2"]{border-left:3px solid color-mix(in srgb, var(--bronze) 60%, var(--surface-alt))}
.shot-list li[data-intensity="3"]{border-left:3px solid var(--bronze)}
.shot-list li[data-intensity="4"]{border-left:3px solid var(--bronze-dk)}

/* View transitions */
.view{animation:view-fade .3s ease}
@keyframes view-fade{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

/* Confetti */
.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:1000;animation:confetti-fall 1.8s ease-out forwards}
@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--x,0px),100vh) rotate(720deg);opacity:0}}

/* Pull-to-refresh indicator */
.ptr-indicator{position:fixed;top:8px;left:50%;transform:translateX(-50%) translateY(-50px);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;box-shadow:var(--shadow);z-index:100;font-size:.85rem;color:var(--bronze-dk);transition:transform .2s ease;pointer-events:none}
.ptr-indicator.show{transform:translateX(-50%) translateY(8px)}

/* Account banner / pill */
.acct-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(90deg,var(--bronze-lt),var(--surface-alt));border-bottom:1px solid var(--line);font-size:.85rem;flex-wrap:wrap}
.acct-banner.alt{background:linear-gradient(90deg,#fed7aa,#ffedd5)}
.acct-banner.trial-end{background:linear-gradient(90deg,#fde68a,#fef3c7)}
[data-theme="dark"] .acct-banner.trial-end{background:linear-gradient(90deg,#78350f,#92400e);color:#fff}
[data-theme="dark"] .acct-banner.alt{background:linear-gradient(90deg,#7c2d12,#9a3412);color:#fff}
.acct-banner span{flex:1;color:var(--ink)}
.btn-primary.tiny,.btn-ghost.tiny{padding:5px 12px;font-size:.78rem}

.hdr-actions{display:flex;align-items:center;gap:8px}
.acct-pill{background:var(--bronze-lt);color:var(--bronze-dk);padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.acct-pill.premium{background:linear-gradient(135deg,var(--bronze) 0%,var(--bronze-dk) 100%);color:#fff}
.acct-pill.trial{background:#fef3c7;color:#a16207}
.gdrive-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0;font-size:.75rem;padding:4px 9px;border-radius:20px;transition:background .15s}
.gdrive-pill:hover{background:var(--surface-alt);border-color:var(--bronze)}

/* Top Overlay Toast for Sync Notices/Errors */
.sync-toast-overlay{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100000;width:calc(100% - 32px);max-width:480px;background:var(--surface);border:2px solid var(--danger);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);animation:slideDown .25s ease-out}
.sync-toast-content{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.sync-toast-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
.sync-toast-text{flex:1;min-width:0}
.sync-toast-text strong{display:block;font-size:.88rem;color:var(--danger);line-height:1.25}
.sync-toast-text p{margin:3px 0 0;font-size:.82rem;color:var(--ink);line-height:1.35;word-break:break-word}
.sync-toast-buttons{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-top:2px}
@keyframes slideDown{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}

/* Account card */
.account-card .sub-status{margin:6px 0}
.trial-bar{height:6px;background:var(--surface-alt);border-radius:6px;overflow:hidden;margin:6px 0}
.trial-fill{height:100%;background:linear-gradient(90deg,var(--bronze) 0%,var(--bronze-dk) 100%);transition:width .8s ease}
.acct-err{color:var(--danger);font-size:.85rem;min-height:1.2em;margin:6px 0}

/* Reconstitution calc */
.recon-grid{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:8px;margin:8px 0}
.recon-result.big{flex-direction:column;align-items:flex-start;border-bottom:none;padding:6px 0 10px}
.recon-result.big strong{font-size:1.7rem;color:var(--bronze-dk)}
.recon-sub{font-size:.85rem;font-weight:400;color:var(--muted)}
.recon-custom{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin:6px 0 10px;padding:10px;background:var(--surface-alt);border-radius:8px}
.recon-custom label{margin:0;font-size:.78rem}
.recon-row{display:flex;flex-wrap:wrap;gap:14px;border-top:1px dashed var(--line);padding-top:8px;margin-top:6px}
.recon-row .recon-result{flex:1 1 auto;min-width:120px;border:none;padding:0}
.recon-warn{background:#fef3c7;color:#92400e;border-radius:6px;padding:8px 10px;margin:6px 0;font-size:.9rem}
.recon-grid label{margin:0;font-size:.78rem}
.recon-output{background:var(--surface-alt);border-radius:10px;padding:12px;margin:10px 0;font-variant-numeric:tabular-nums}
.recon-output .recon-result{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line)}
.recon-output .recon-result:last-child{border-bottom:none}
.recon-output .recon-result strong{color:var(--bronze-dk);font-size:1.05rem}
.recon-output.error{color:var(--danger);text-align:center;padding:14px}
@media (max-width:480px){
  .recon-grid{grid-template-columns:1fr 1fr}
  .recon-grid label:last-child{grid-column:span 2}
  .recon-grid label:nth-child(3){grid-column:auto}
}

/* Premium lock pill */
/* Premium pill — fixed amber/gold gradient so it's always recognizably "premium" regardless of which color theme the user picks.
   Matches the gold accent on the Premium bottom-nav tab. */
.lock-pill{display:inline-block;background:linear-gradient(135deg,#d97706 0%,#b45309 100%);color:#fff;font-size:.62rem;padding:2px 8px;border-radius:999px;font-weight:700;letter-spacing:.5px;margin-left:6px;vertical-align:middle;text-transform:uppercase;box-shadow:0 1px 3px rgba(180,83,9,.25)}
[data-theme="dark"] .lock-pill{background:linear-gradient(135deg,#f59e0b 0%,#b45309 100%);color:#fff}
/* Unlocked = green so it's clearly distinct from the gold "you need premium" pill. */
.lock-pill.unlocked{background:#047857;box-shadow:0 1px 3px rgba(4,120,87,.25)}
[data-theme="dark"] .lock-pill.unlocked{background:#059669}
.lock-pill.unlocked::before{content:'✓ '}

/* Supply list */
.supply-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.supply-list li{background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.supply-list .supply-name{font-weight:600}
.supply-list .supply-meta{font-size:.78rem;color:var(--muted);margin-top:2px}
.supply-list .supply-progress{height:5px;background:var(--surface);border-radius:5px;overflow:hidden;margin-top:6px}
.supply-list .supply-fill{height:100%;background:var(--bronze);transition:width .5s}
.supply-list li.expiring{border-color:var(--accent)}
.supply-list li.expired{border-color:var(--danger);opacity:.65}

/* Measurements/Labs/Cost summaries */
.measurement-summary,.lab-summary,.cost-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.summary-pill{background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:.85rem}
.summary-pill .summary-label{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;display:block}
.summary-pill .summary-value{font-weight:700;color:var(--bronze-dk);font-variant-numeric:tabular-nums}
.summary-pill .summary-trend{margin-left:6px;font-size:.78rem}
.summary-pill .summary-trend.down{color:var(--ok)}
.summary-pill .summary-trend.up{color:var(--accent)}

/* Plateau */
#plateau-card{background:linear-gradient(135deg,#fef3c7,#fffbeb);border-color:#fbbf24}
[data-theme="dark"] #plateau-card{background:linear-gradient(135deg,#78350f,#92400e);color:#fff;border-color:#d97706}

/* Premium upgrade list */
.premium-list{list-style:none;padding:0;margin:8px 0}
.premium-list li{padding:6px 0;font-size:.92rem}

/* Plan picker (radio cards) */
.plan-picker{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.plan-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface);margin:0}
.plan-option:has(input:checked){border-color:var(--bronze-dk);background:var(--bronze-lt)}
.plan-option input{margin:0;flex:0 0 auto;width:auto}
.plan-option-body{display:flex;flex-direction:column;gap:2px}
.plan-option-body strong{font-size:.95rem;color:var(--ink)}
.plan-save{display:inline-block;background:var(--ok);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:6px;margin-left:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle}

/* Premium feature cards — soft, non-paywall presentation. The .lock-pill marks them; tapping the upgrade CTA in the empty state or lock pill opens the upgrade modal. */
.lock-pill{cursor:pointer}
.lock-pill.unlocked{cursor:default}

/* Mood SVG faces — tinted in brand teal */
.mood-svg{width:34px;height:34px;display:block;margin:0 auto}
.mood-bg{fill:var(--bronze-lt);stroke:var(--bronze-dk);stroke-width:1.5}
.mood-eye{fill:var(--bronze-dk)}
.mood-eye-arc{stroke:var(--bronze-dk);stroke-width:1.6;stroke-linecap:round;fill:none}
.mood-mouth{stroke:var(--bronze-dk);stroke-width:1.8;stroke-linecap:round;fill:none}
.mood-mouth-fill{fill:var(--bronze-dk);stroke:var(--bronze-dk);stroke-width:1.2;stroke-linejoin:round}
.mood-btn{padding:10px 0}
.mood-btn.selected .mood-bg{fill:var(--bronze);stroke:var(--bronze-dk)}
.mood-btn.selected .mood-eye{fill:#fff}
.mood-btn.selected .mood-eye-arc{stroke:#fff}
.mood-btn.selected .mood-mouth{stroke:#fff}
.mood-btn.selected .mood-mouth-fill{fill:#fff;stroke:#fff}

/* Auth gate — fullscreen onboarding, hides app chrome */
body.auth-active #app-header,
body.auth-active #bottom-nav,
body.auth-active #account-banner,
body.auth-active #legacy-migrate-banner,
body.auth-active #install-dialog{display:none !important}
body.auth-active{padding-bottom:env(safe-area-inset-bottom)}
.auth-view{padding:0 !important}
body.auth-active .auth-view{display:flex !important;flex-direction:column;min-height:100vh;justify-content:center;align-items:center;padding:24px 16px 32px !important;background:linear-gradient(180deg,var(--bronze-lt) 0%,var(--bg) 60%)}
.auth-hero{text-align:center;margin:0 0 20px;max-width:440px}
.auth-logo{width:72px;height:72px;margin:0 auto 16px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.auth-logo img{width:100%;height:100%;display:block;border-radius:20px}
.auth-hero h1{font-size:1.9rem;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)}
.auth-tag{color:var(--muted);margin:0;font-size:1.05rem;line-height:1.5}
.auth-card{max-width:420px;width:100%;margin:0 auto}
.auth-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-alt);border-radius:10px;padding:4px;margin-bottom:16px}
.auth-toggle-btn{background:transparent;border:0;font:inherit;font-weight:600;font-size:.88rem;color:var(--muted);padding:10px;border-radius:8px;cursor:pointer}
.auth-toggle-btn.active{background:var(--surface);color:var(--bronze-dk);box-shadow:0 1px 3px rgba(15,23,42,.06)}
.auth-perks{margin:14px 0 0}
.auth-legal{max-width:420px;margin:14px auto 0;color:var(--muted)}

/* Mood — logged state (collapsed confirmation) */
.mood-logged{padding:6px 0 2px}
.mood-logged-row{display:flex;align-items:center;gap:12px}
.mood-logged-row .mood-svg{width:40px;height:40px;flex:0 0 40px}
.mood-logged-text strong{display:block;font-size:.95rem;color:var(--bronze-dk)}
.mood-logged-text .muted{font-size:.78rem}
#mood-logged-svg.mood-positive .mood-bg{fill:var(--bronze);stroke:var(--bronze-dk)}
#mood-logged-svg.mood-positive .mood-eye{fill:#fff}
#mood-logged-svg.mood-positive .mood-eye-arc{stroke:#fff}
#mood-logged-svg.mood-positive .mood-mouth{stroke:#fff}
#mood-logged-svg.mood-positive .mood-mouth-fill{fill:#fff;stroke:#fff}
#mood-logged-svg.mood-negative .mood-bg{fill:#fed7aa;stroke:var(--accent-dk)}
[data-theme="dark"] #mood-logged-svg.mood-negative .mood-bg{fill:#7c2d12}
#mood-logged-svg.mood-negative .mood-eye,
#mood-logged-svg.mood-negative .mood-mouth{stroke:var(--accent-dk);fill:var(--accent-dk)}

/* Mood trend (Insights) — 30-day bar strip */
.mood-trend-bars{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;align-items:flex-end;height:80px;padding:4px 0;background:var(--surface-alt);border-radius:8px;padding:6px 4px}
.mood-bar{background:var(--bronze);border-radius:2px;min-height:4px;transition:opacity .2s ease}
.mood-bar.empty{background:var(--line);opacity:.35;height:8px !important}
.mood-bar.v1{background:#dc2626}
.mood-bar.v2{background:#f97316}
.mood-bar.v3{background:#fbbf24}
.mood-bar.v4{background:#10b981}
.mood-bar.v5{background:var(--bronze-dk)}
.mood-bar:hover{opacity:.8}

/* Bottom nav (4 tabs) */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 0 calc(env(safe-area-inset-bottom) + 6px);z-index:40;box-shadow:0 -2px 12px rgba(15,23,42,.06)}
.nav-btn{background:none;border:0;color:var(--muted);font:inherit;font-size:.7rem;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;cursor:pointer;border-radius:8px;transition:color .2s ease,background .2s ease}
.nav-btn .nav-icon{width:22px;height:22px;fill:currentColor}
.nav-btn.active{color:var(--bronze-dk)}
.nav-btn.active .nav-icon{fill:var(--bronze-dk)}
.nav-btn:hover{background:var(--bronze-lt)}
/* Premium tab is intentionally distinct — gold/amber accent so users know there are paid features without burying them. */
.nav-btn-premium{color:#b45309}
.nav-btn-premium .nav-icon{fill:#b45309}
.nav-btn-premium.active{color:#92400e}
.nav-btn-premium.active .nav-icon{fill:#92400e}
.nav-btn-premium:hover{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%)}
[data-theme="dark"] .nav-btn-premium,
[data-theme="dark"] .nav-btn-premium .nav-icon{color:#fbbf24;fill:#fbbf24}
[data-theme="dark"] .nav-btn-premium.active,
[data-theme="dark"] .nav-btn-premium.active .nav-icon{color:#fcd34d;fill:#fcd34d}
[data-theme="dark"] .nav-btn-premium:hover{background:rgba(251,191,36,.12)}

/* Premium hero card at top of premium view */
.premium-hero{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #f59e0b}
.premium-hero h2{color:#92400e}
[data-theme="dark"] .premium-hero{background:linear-gradient(135deg,rgba(251,191,36,.12) 0%,rgba(245,158,11,.18) 100%);border-color:#92400e}
[data-theme="dark"] .premium-hero h2{color:#fcd34d}
.premium-hero-row{display:flex;gap:14px;align-items:center}
.premium-hero-icon{font-size:2rem;line-height:1}
.premium-hero-text{flex:1}
.premium-hero-text h2{margin:0 0 4px}
.premium-hero-text p{margin:0}

body{padding-bottom:calc(env(safe-area-inset-bottom) + 76px)}

/* Tab filtering inside #view-home — hide sections whose data-tab doesn't match the active tab.
   Other views (history, settings) are unaffected because their .view rule already controls display. */
body.tab-home #view-home > [data-tab]:not([data-tab="home"]){display:none}
body.tab-insights #view-home > [data-tab]:not([data-tab="insights"]){display:none}
body.tab-more #view-home > [data-tab]:not([data-tab="more"]){display:none}

/* Reminders settings — daily check-in rows */
.reminders-subhead{margin:18px 0 6px;font-size:.95rem;font-weight:600;color:var(--ink)}
.reminders-subhead:first-of-type{margin-top:0}
.daily-reminders{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.daily-reminder-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--border,#e5e7eb);border-radius:10px;background:var(--card-bg,transparent)}
.daily-reminder-toggle{display:flex;align-items:center;gap:8px;margin:0;flex:1;cursor:pointer}
.daily-reminder-toggle input[type="checkbox"]{margin:0}
.daily-reminder-emoji{font-size:1.15rem;line-height:1}
.daily-reminder-label{font-size:.95rem}
.daily-reminder-time{display:flex;align-items:center;gap:6px;margin:0}
.daily-reminder-time input[type="time"]{padding:4px 6px;font-size:.9rem}
#set-timezone{width:100%}

/* Embedded admin view — full-bleed iframe under the sub-header.
   Override .view max-width:560px so the admin table has room. */
#view-admin{max-width:none;padding:0}
#view-admin .sub-header{padding:10px 12px;max-width:560px;margin:0 auto;width:100%;box-sizing:border-box}
#admin-frame{flex:1;width:100%;border:0;background:var(--bg,#fff);min-height:calc(100vh - 60px)}
#view-admin .sub-header{display:flex;align-items:center;gap:8px}
#view-admin .sub-header h1{flex:1;margin:0}
#admin-refresh{font-size:1.1rem;line-height:1;padding:6px 10px;border-radius:8px}

/* ---------- Daily notes ---------- */
/* Visually hidden but read by screen readers — the notes search has a visible
   placeholder but needs a real label. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.note-text{width:100%;box-sizing:border-box;margin:6px 0 0;padding:10px 12px;font:inherit;font-size:.95rem;line-height:1.5;color:var(--text);background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;resize:vertical;min-height:72px;transition:border-color .15s,box-shadow .15s}
.note-text:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(199,145,91,.16)}
.note-text::placeholder{color:var(--muted);opacity:.8}
.note-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px}
.note-hint{margin:0;flex:1}
.note-count{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.65}

/* A day with a note gets a dot under its bar on every trend strip, so the
   context is discoverable from the chart rather than only from the list. */
.mood-trend-bars{padding-bottom:12px}
.mood-bar{position:relative}
.mood-bar.has-note::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--bronze-dk)}
.mood-bar.empty.has-note::after{background:var(--muted);opacity:.9}

.note-search-label{display:block;margin:8px 0 0}
.note-search{width:100%;box-sizing:border-box;margin:0;padding:8px 12px;font:inherit;font-size:.9rem;color:var(--text);background:var(--surface-alt);border:1px solid var(--line);border-radius:999px}
.note-search:focus{outline:none;border-color:var(--bronze)}
.note-journal{display:flex;flex-direction:column;gap:8px;margin:10px 0 6px;max-height:520px;overflow-y:auto}
.note-entry{display:block;width:100%;text-align:left;background:var(--surface-alt);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--text);transition:border-color .15s,transform .1s}
.note-entry:hover{border-color:var(--bronze);transform:translateY(-1px)}
.note-entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;font-size:.92rem}
.note-mood{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* Notes are free text and often multi-line — preserve the breaks the user typed
   rather than collapsing their paragraphs into one run-on line. */
.note-entry-text{font-size:.88rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

/* Dose ladder chips — the labelled titration steps, one tap from the dose field. */
.dose-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.dose-chip{font:inherit;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.dose-chip:hover{transform:translateY(-1px);background:var(--surface-alt);border-color:var(--bronze)}
.dose-chip.active{background:var(--bronze);border-color:var(--bronze-dk);color:#fff}
.supply-readout{margin:-4px 0 10px;font-size:.82rem;color:var(--bronze-dk);font-weight:600}
[data-theme="dark"] .supply-readout{color:var(--bronze)}

/* ---------- Touch targets ----------
   Measured on a phone viewport, 76 of 88 interactive elements came in under the
   44px minimum, and the icon buttons were 18x18 — a quarter of the area a
   fingertip actually needs, and the kind of thing Play's pre-launch report and
   Lighthouse both flag.

   Two different fixes, on purpose:
   - Controls whose SIZE is the design (buttons, inputs, chips) simply get a
     min-height. They were already full-width, so height was the only gap.
   - Icon buttons whose 18px circle IS the visual (the "i" affordances) keep
     their appearance and gain an invisible centred hit area instead. Growing
     them visually would wreck the heading rhythm they sit in. */
.btn-primary, .btn-ghost, .btn-danger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The small variants stay visually small but keep a usable target. */
.btn-danger.small, .btn-primary.small, .btn-ghost.small { min-height: 36px; }

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea { min-height: 44px; }

.dose-chip, .body-custom-chip { min-height: 36px; display: inline-flex; align-items: center; }

.back { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.nav-btn { min-height: 48px; }

/* Invisible, centred, and pointer-events stay on the button itself. */
.info-btn { position: relative; }
.info-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

@media (pointer: fine) {
  /* A mouse does not need a 44px target, and on desktop the taller controls
     make dense settings screens look inflated. */
  .btn-primary, .btn-ghost, .btn-danger { min-height: 36px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea { min-height: 34px; }
  .info-btn::after { width: 24px; height: 24px; }
}

/* Weight history: entries grouped by week, tap one to edit */
.weight-history{margin-top:10px}
.weight-history summary{cursor:pointer;color:var(--bronze-dk);font-weight:600;padding:6px 0}
.weight-week{margin-top:8px}
.weight-week-head{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600;padding:4px 0}
.weight-week-change.gain{color:var(--accent-dk)}
.weight-entry{display:flex;justify-content:space-between;width:100%;padding:8px 0;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;text-align:left}