/* BioFilz - design system, landing page, app shell. Self-hosted fonts, dark mode, mobile-first. */

@font-face{font-family:Sora;src:url(/fonts/sora-600-latin.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-800-latin.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-400-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-600-latin.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --brand:#4f46e5; --brand-2:#06b6d4; --brand-soft:#eef2ff;
  --grad:linear-gradient(135deg,#4f46e5,#06b6d4);
  --accent:#f43f5e; --warn:#d97706; --good:#0f9d58; --bad:#dc2626;
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#eef2f7; --ink:#0f172a; --muted:#5b6b82;
  --line:#e3e9f1; --line-2:#eef2f7;
  --shadow:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 14px 44px rgba(15,23,42,.16);
  --radius:16px; --radius-sm:10px;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --head:Sora,var(--sans);
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0a1020; --surface:#111a2d; --surface-2:#16203a; --ink:#e8eef8; --muted:#93a4bd;
    --line:#1f2c47; --line-2:#18233c; --brand-soft:#1b2450;
    --shadow:0 1px 3px rgba(0,0,0,.45); --shadow-lg:0 18px 54px rgba(0,0,0,.6);
  }
}
:root[data-theme=dark]{
  --bg:#0a1020; --surface:#111a2d; --surface-2:#16203a; --ink:#e8eef8; --muted:#93a4bd;
  --line:#1f2c47; --line-2:#18233c; --brand-soft:#1b2450;
  --shadow:0 1px 3px rgba(0,0,0,.45); --shadow-lg:0 18px 54px rgba(0,0,0,.6);
}
/* ---- skins: chosen in Settings, stamped on <html data-theme> ---- */
:root[data-theme=tron]{
  --brand:#00e5ff; --brand-2:#2f7bff; --brand-soft:#062a38;
  --grad:linear-gradient(135deg,#00e5ff,#2f7bff);
  --accent:#ff8a00; --warn:#ffb020; --good:#39ff8f; --bad:#ff4d4d;
  --bg:#03070d; --surface:#081221; --surface-2:#0c1a2e; --ink:#d9f7ff; --muted:#6fb3c8;
  --line:#0f3247; --line-2:#0b2536;
  --shadow:0 0 0 1px rgba(0,229,255,.12),0 1px 3px rgba(0,0,0,.6); --shadow-lg:0 0 32px rgba(0,229,255,.18),0 18px 54px rgba(0,0,0,.7);
}
:root[data-theme=tron] .btn:not(.btn-ghost){box-shadow:0 0 14px rgba(0,229,255,.35);color:#03070d}
:root[data-theme=tron] .card,:root[data-theme=tron] .item,:root[data-theme=tron] .tile{border-color:#0f3a52}
:root[data-theme=red]{
  --brand:#e11d48; --brand-2:#f97316; --brand-soft:#3a0d18;
  --grad:linear-gradient(135deg,#e11d48,#f97316);
  --accent:#fbbf24; --warn:#f59e0b; --good:#22c55e; --bad:#ff6b6b;
  --bg:#110407; --surface:#1c0a0f; --surface-2:#26111a; --ink:#ffe9ec; --muted:#c48a95;
  --line:#3b1522; --line-2:#2c101a;
  --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 18px 54px rgba(0,0,0,.65);
}
:root[data-theme=orange]{
  --brand:#f97316; --brand-2:#facc15; --brand-soft:#3a2008;
  --grad:linear-gradient(135deg,#f97316,#facc15);
  --accent:#f43f5e; --warn:#fbbf24; --good:#4ade80; --bad:#ff6b6b;
  --bg:#130b03; --surface:#1f1308; --surface-2:#2a1b0b; --ink:#fff1e3; --muted:#c9a078;
  --line:#3f2812; --line-2:#2f1d0c;
  --shadow:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 18px 54px rgba(0,0,0,.65);
}
:root[data-theme=orange] .btn:not(.btn-ghost){color:#1a0d02}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.4rem,1fr));gap:.6rem}
.skin{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.7rem .4rem;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;font:600 .84rem var(--sans)}
.skin.on{border-color:var(--brand)}
.skin .sw{width:100%;height:2.4rem;border-radius:9px;display:flex;align-items:flex-end;justify-content:flex-start;padding:.3rem;gap:.25rem}
.skin .sw i{display:block;width:.9rem;height:.9rem;border-radius:50%}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
h1,h2,h3,h4{font-family:var(--head);line-height:1.18;margin:0 0 .5em;letter-spacing:-.02em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none!important}
.muted{color:var(--muted)}
.spacer{flex:1}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- buttons / inputs ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:var(--radius-sm);
  padding:.62rem 1.1rem;font:600 .92rem/1.2 var(--sans);color:#fff;background:var(--grad);cursor:pointer;
  transition:filter .15s,transform .05s;white-space:nowrap;text-align:center}
.btn:hover{filter:brightness(1.07);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:.88rem 1.6rem;font-size:1rem}
.btn-sm{padding:.4rem .72rem;font-size:.82rem}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2);filter:none;border-color:var(--brand);color:var(--ink)}
.btn-danger{background:var(--bad)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.linklike{background:none;border:0;color:var(--muted);cursor:pointer;font:500 .9rem/1.2 var(--sans);
  display:inline-flex;align-items:center;gap:.45em;padding:.35rem 0}
.linklike:hover{color:var(--brand)}
.in,input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],
input[type=date],input[type=time],input[type=datetime-local],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.62rem .78rem;font:400 16px/1.35 var(--sans);color:var(--ink)}
@media (min-width:800px){.in,input,select,textarea{font-size:.95rem}}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
textarea{min-height:6rem;resize:vertical}
label{font:600 .8rem/1.4 var(--sans);color:var(--muted);display:block;margin:.75rem 0 .3rem}
.err{color:var(--bad);font-size:.86rem;margin:.5rem 0}
.ok-msg{color:var(--good);font-size:.86rem;margin:.5rem 0}
.icon-btn{background:none;border:0;color:var(--ink);cursor:pointer;padding:.42rem;border-radius:9px;display:inline-flex}
.icon-btn:hover{background:var(--surface-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
/* date/time inputs have a wide intrinsic size and will otherwise crush their neighbour */
.row2>*,.row3>*{min-width:0}
@media (max-width:520px){.row3{grid-template-columns:1fr 1fr}}
@media (max-width:430px){.row2:has(input[type=datetime-local]){grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;
  padding:.34rem .7rem;font:600 .8rem/1 var(--sans);cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pill{display:inline-flex;align-items:center;gap:.35em;border-radius:999px;padding:.2rem .6rem;
  font:600 .72rem/1.5 var(--sans);background:var(--surface-2);color:var(--muted)}
.pill.good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.pill.brand{background:var(--brand-soft);color:var(--brand)}

/* ---- icons (mask, currentColor) ---- */
.ic{display:inline-block;width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-.18em}
.fic{width:1.7rem;height:1.7rem;color:var(--brand)}
.ic-home{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V21h14V9.5'/></svg>")}
.ic-pill{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='8' width='19' height='8' rx='4' transform='rotate(-45 12 12)'/><path d='M8.5 8.5 15.5 15.5'/></svg>")}
.ic-food{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v8a2 2 0 0 0 4 0V3'/><path d='M7 11v10'/><path d='M17 3c-2 0-3 2-3 5s1 4 3 4v9'/></svg>")}
.ic-scale{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><path d='M8 11a4 4 0 0 1 8 0'/><path d='M12 11 10.5 8'/></svg>")}
.ic-lab{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3v6.5L4.5 17A2.5 2.5 0 0 0 6.7 21h10.6a2.5 2.5 0 0 0 2.2-3.9L15 9.5V3'/><path d='M8 3h8'/><path d='M7.5 14h9'/></svg>")}
.ic-note{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h9l5 5v13H5z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>")}
.ic-chart{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20V4M16 20v-7M22 20H2'/></svg>")}
.ic-spark{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/><path d='M18 16l.8 2.2L21 19l-2.2.8L18 22l-.8-2.2L15 19l2.2-.8z'/></svg>")}
.ic-heart{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 1 0-7.1 7.1L12 21l8.8-8.3a5 5 0 0 0 0-7.1z'/></svg>")}
.ic-user{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>")}
.ic-cam{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h3.5L8 5.5h8L17.5 8H21v12H3z'/><circle cx='12' cy='13.5' r='3.5'/></svg>")}
.ic-file{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H6v18h12V7z'/><path d='M14 3v4h4'/></svg>")}
.ic-plus{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
.ic-bt{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 7 10 10-5 4V3l5 4L7 17'/></svg>")}
.ic-more{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>")}
.ic-check{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m4 12.5 5 5L20 6.5'/></svg>")}
.ic-shield{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8.3-8 9-4.5-.7-8-4-8-9V6z'/><path d='m9 12 2 2 4-4'/></svg>")}
.ic-bolt{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h7l-1 8 9-12h-7z'/></svg>")}
.ic-smile{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M8.5 14.5a4.5 4.5 0 0 0 7 0'/><path d='M9 9.5h.01M15 9.5h.01'/></svg>")}
.ic-moon{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/></svg>")}
.ic-wave{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12c2.5-5 5-5 7.5 0s5 5 7.5 0 3.5-3 5-1'/></svg>")}
.ic-target{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.5'/></svg>")}
.ic-fork{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3v7a2 2 0 0 0 4 0V3'/><path d='M8 12v9'/><path d='M16 3v18'/><path d='M14 3h4v6h-4z'/></svg>")}
.ic-head{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12.5' r='5.5'/><path d='m9.6 12.6 1.5-2.3 1 2.7 1.3-2 1 1.4'/><path d='M12 4.4V2.6M6.3 6.8 5 5.5M17.7 6.8 19 5.5M4.6 12.5H2.8M21.2 12.5h-1.8'/></svg>")}
.ic-drop{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3s6 6.5 6 10.5A6 6 0 0 1 6 13.5C6 9.5 12 3 12 3z'/></svg>")}
.ic-trash{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16'/><path d='M9 7V4h6v3'/><path d='M6 7l1 14h10l1-14'/></svg>")}
.ic-edit{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L20 8l-4-4L4 16z'/></svg>")}
.ic-out{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 4h4v16h-4'/><path d='M10 8l-4 4 4 4'/><path d='M6 12h9'/></svg>")}
.ic-star{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linejoin='round'><path d='m12 3 2.6 5.7 6.4.7-4.7 4.3 1.3 6.3L12 17l-5.6 3 1.3-6.3L3 9.4l6.4-.7z'/></svg>")}
.ic-lock{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>")}
.ic-clock{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5.5l3.5 2'/></svg>")}

/* =========================================================
   LANDING
   ========================================================= */
.lhead{display:flex;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,3rem);max-width:1180px;margin:0 auto;
  flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.55rem;font:700 1.12rem/1 var(--head);color:var(--ink);
  letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand b{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{width:1.65rem;height:1.65rem;border-radius:9px;background:var(--grad);display:inline-block;position:relative;flex:none}
.logo::after{content:'';position:absolute;inset:0;background:#fff;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h3.5l2-5 3 10 2.5-7 1.5 2H21'/></svg>") center/72% no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h3.5l2-5 3 10 2.5-7 1.5 2H21'/></svg>") center/72% no-repeat}
.lnav{margin-left:auto;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.lnav a{color:var(--muted);font:600 .9rem/1 var(--sans);padding:.5rem .6rem;border-radius:8px}
.lnav a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}

.hero{max-width:1180px;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,3rem) 2rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:880px){.hero{grid-template-columns:1fr;padding-top:.5rem}}
.hero h1{font-size:clamp(2rem,5.2vw,3.35rem);font-weight:800;margin-bottom:.55rem}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1rem,1.9vw,1.15rem);color:var(--muted);max-width:34rem;margin:0 0 1.4rem}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero-note{margin-top:.9rem;font-size:.85rem;color:var(--muted)}
.hero-art{position:relative;min-height:320px}
.ha{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem;font-size:.86rem}
.ha b{display:block;font:700 .95rem/1.3 var(--head)}
.ha small{color:var(--muted)}
.ha .ic{width:1.5rem;height:1.5rem;color:var(--brand)}
.ha-1{top:2%;left:2%;width:74%}
.ha-2{top:31%;right:0;width:66%}
.ha-3{top:60%;left:6%;width:70%}
.ha-4{bottom:0;right:4%;width:56%}
@media (max-width:880px){.hero-art{min-height:270px;margin-top:1rem}}

section.band{max-width:1180px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,3rem)}
section.band h2{font-size:clamp(1.5rem,3.4vw,2.15rem);text-align:center;margin-bottom:.4rem}
section.band .sub{text-align:center;color:var(--muted);max-width:44rem;margin:0 auto 2rem}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.feat h3{font-size:1.05rem;margin:.7rem 0 .35rem}
.feat p{margin:0;color:var(--muted);font-size:.92rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem}
.step{padding:1.1rem 1.2rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.step .num{display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center;border-radius:50%;
  background:var(--grad);color:#fff;font:700 .95rem/1 var(--head);margin-bottom:.6rem}
.step h4{font-size:1rem;margin:0 0 .3rem}
.step p{margin:0;color:var(--muted);font-size:.9rem}

.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;align-items:start}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.price.feature{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent),var(--shadow-lg)}
.price h3{font-size:1.1rem;margin-bottom:.15rem}
.price .amt{font:800 2.2rem/1.1 var(--head);margin:.3rem 0}
.price .amt span{font:600 .9rem/1 var(--sans);color:var(--muted)}
.price ul{list-style:none;padding:0;margin:1rem 0 1.4rem;display:grid;gap:.5rem;font-size:.9rem;color:var(--muted)}
.price li{display:flex;gap:.55rem;align-items:flex-start}
.price li .ic{color:var(--brand);margin-top:.15rem}
.price .btn{margin-top:auto}
.price .tag{align-self:flex-start;margin-bottom:.4rem}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;
  margin-bottom:.7rem}
.faq summary{cursor:pointer;font:600 1rem/1.4 var(--head);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--brand);font-weight:700}
.faq details[open] summary::after{content:'\2013'}
.faq p{color:var(--muted);margin:.7rem 0 0;font-size:.93rem}

.cta-band{background:var(--grad);color:#fff;text-align:center;padding:clamp(2.2rem,6vw,3.6rem) 1.5rem;margin-top:2rem}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,3.4vw,2rem)}
.cta-band p{opacity:.92;max-width:38rem;margin:0 auto 1.4rem}
.cta-band .btn{background:#fff;color:var(--brand)}

.disclaim{max-width:1180px;margin:0 auto;padding:1.6rem clamp(1rem,4vw,3rem);}
.disclaim .box{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:1.1rem 1.25rem;
  display:flex;gap:.9rem;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.disclaim .box .ic{color:var(--warn);width:1.5rem;height:1.5rem;flex:none}
.disclaim .box b{color:var(--ink)}

.lfoot{border-top:1px solid var(--line);margin-top:2rem;background:var(--surface)}
.lfoot-in{max-width:1180px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 1rem;display:flex;gap:2rem;
  flex-wrap:wrap;justify-content:space-between}
.lfoot nav{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:flex-start}
.lfoot nav a{color:var(--muted);font-size:.9rem}
.copy{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 2rem;color:var(--muted);font-size:.82rem}

/* essentials pages */
.pagewrap{max-width:820px;margin:0 auto;padding:1rem clamp(1rem,4vw,3rem) 3rem}
.prose h1{font-size:clamp(1.7rem,4vw,2.3rem)}
.prose h2{font-size:1.25rem;margin-top:2rem}
.prose p,.prose li{color:var(--muted)}
.prose li{margin-bottom:.35rem}

/* =========================================================
   APP SHELL
   ========================================================= */
.app{display:none;min-height:100vh}
body.in-app .app{display:block}
body.in-app .landing{display:none}
body.in-app{background:var(--bg)}

.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.6rem;padding:.6rem clamp(.7rem,3vw,1.5rem)}
.topbar .brand{font-size:1.02rem}
.topbar .who{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.creds{font:600 .78rem/1 var(--sans);color:var(--muted);background:var(--surface-2);border-radius:999px;
  padding:.35rem .65rem;white-space:nowrap}
.avatar{width:2rem;height:2rem;border-radius:50%;background:var(--grad);color:#fff;border:0;cursor:pointer;
  font:700 .8rem/1 var(--sans);display:inline-flex;align-items:center;justify-content:center}

.shell{display:flex;max-width:1400px;margin:0 auto;min-height:calc(100vh - 3.3rem)}
.side{width:216px;flex:none;padding:1rem .6rem;border-right:1px solid var(--line);position:sticky;top:3.3rem;
  height:calc(100vh - 3.3rem);overflow:auto}
.side a{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:10px;color:var(--muted);
  font:600 .92rem/1.2 var(--sans);margin-bottom:.15rem}
.side a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.side a.on{background:var(--brand-soft);color:var(--brand)}
.side .sep{margin:.9rem .75rem .4rem;font:700 .7rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.7}
.main{flex:1;min-width:0;padding:1rem clamp(.7rem,3vw,1.6rem) 6rem}
@media (max-width:899px){.side{display:none}.main{padding-bottom:5.6rem}}

.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:flex;background:color-mix(in srgb,var(--surface) 95%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
@media (min-width:900px){.tabbar{display:none}}
.tabbar button{flex:1;background:none;border:0;color:var(--muted);cursor:pointer;padding:.5rem .2rem .55rem;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;font:600 .68rem/1.2 var(--sans)}
.tabbar button .ic{width:1.35rem;height:1.35rem}
.tabbar button.on{color:var(--brand)}

.page-h{display:flex;align-items:flex-end;gap:.8rem;flex-wrap:wrap;margin:.3rem 0 1rem}
.page-h h1{font-size:clamp(1.35rem,3.5vw,1.8rem);margin:0}
.page-h .sub{color:var(--muted);font-size:.9rem;margin:.15rem 0 0}
.page-h .acts{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;
  box-shadow:var(--shadow);margin-bottom:1rem}
.card h2{font-size:1.05rem;margin:0 0 .2rem;display:flex;align-items:center;gap:.5rem}
.card h2 .ic{color:var(--brand)}
.card .card-sub{color:var(--muted);font-size:.85rem;margin:0 0 .9rem}
.card-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.card-h h2{margin:0}
.card-h .acts{margin-left:auto;display:flex;gap:.4rem}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* the one-button "add anything by photo" call to action on Today */
.photo-cta{display:flex;align-items:center;gap:.9rem;width:100%;margin:0 0 1rem;padding:.95rem 1.1rem;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;text-align:left;
  background:var(--grad);color:#fff;box-shadow:var(--shadow);font:inherit;transition:filter .15s,transform .05s}
.photo-cta:hover{filter:brightness(1.06)}
.photo-cta:active{transform:translateY(1px)}
.photo-cta .pc-ic{display:flex;align-items:center;justify-content:center;flex:none;
  width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(255,255,255,.18)}
.photo-cta .pc-ic .ic{width:1.4rem;height:1.4rem}
.photo-cta .pc-t{flex:1;min-width:0;display:block}
.photo-cta .pc-t b{display:block;font:700 1.02rem/1.3 var(--head)}
.photo-cta .pc-t small{display:block;font-size:.8rem;opacity:.9;line-height:1.35}
.photo-cta .pc-go{flex:none;opacity:.85}
.photo-cta .pc-go .ic{width:1.3rem;height:1.3rem}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;
  box-shadow:var(--shadow);cursor:pointer;text-align:left;font:inherit;color:inherit;display:block;width:100%}
.tile:hover{border-color:var(--brand)}
.tile .lbl{display:flex;align-items:center;gap:.4rem;font:600 .76rem/1 var(--sans);color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.tile .lbl .ic{color:var(--brand);width:1rem;height:1rem}
.tile .val{font:800 1.6rem/1.15 var(--head);margin:.4rem 0 .1rem;display:flex;align-items:baseline;gap:.3rem}
.tile .val small{font:600 .8rem/1 var(--sans);color:var(--muted)}
.tile .sub{font-size:.8rem;color:var(--muted)}
.tile .up{color:var(--bad)}.tile .down{color:var(--good)}

/* quick check-in grid */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.6rem}
.qbtn{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.75rem .5rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;font:600 .8rem/1.2 var(--sans);color:var(--ink)}
.qbtn:hover{border-color:var(--brand)}
.qbtn .ic{width:1.6rem;height:1.6rem;color:var(--brand)}
.qbtn .sc{font:700 .78rem/1 var(--sans);color:var(--muted)}
.qbtn.done{background:var(--brand-soft);border-color:var(--brand)}
.qbtn.done .sc{color:var(--brand)}

.scale5{display:flex;gap:.5rem;justify-content:center;margin:1rem 0}
.scale5 button{flex:1;max-width:4rem;aspect-ratio:1;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font:700 1.15rem/1 var(--head);color:var(--ink)}
.scale5 button:hover{border-color:var(--brand)}
.scale5 button.on{background:var(--grad);color:#fff;border-color:transparent}
.scale-legend{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted)}

/* list rows */
.list{display:flex;flex-direction:column;gap:.5rem}
.item{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:.7rem .85rem}
.item .thumb{width:2.6rem;height:2.6rem;border-radius:9px;object-fit:cover;background:var(--surface-2);flex:none}
.item .ib{min-width:0;flex:1}
.item .t{font:600 .95rem/1.3 var(--sans);word-break:break-word}
.item .s{font-size:.8rem;color:var(--muted)}
.item .acts{display:flex;gap:.2rem;flex:none}
.medcal-wrap{overflow-x:auto;padding:.2rem 0}
.medcal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,14px);grid-auto-columns:14px;gap:3px;width:max-content}
.medcal .c{display:block;width:14px;height:14px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}
.medcal .c.blank{background:transparent;border-color:transparent}
.medcal .c.full,.medcal-legend .sw.full{background:var(--good);border-color:var(--good)}
.medcal .c.part,.medcal-legend .sw.part{background:color-mix(in srgb,var(--good) 45%,var(--surface));border-color:var(--good)}
.medcal .c.miss,.medcal-legend .sw.miss{background:color-mix(in srgb,var(--bad) 55%,var(--surface));border-color:var(--bad)}
.medcal .c.skip,.medcal-legend .sw.skip{background:color-mix(in srgb,var(--warn) 55%,var(--surface));border-color:var(--warn)}
.medcal .c.extra,.medcal-legend .sw.extra{background:color-mix(in srgb,var(--brand) 45%,var(--surface));border-color:var(--brand)}
.medcal .c.none,.medcal-legend .sw.none{background:var(--surface-2)}
.medcal .c.plus{box-shadow:inset 0 0 0 2px var(--brand)}
.medcal-legend{flex-wrap:wrap;gap:.5rem .9rem;margin-top:.5rem}
.medcal-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid var(--line);margin-right:.3rem;vertical-align:-1px}
.keynums{grid-template-columns:repeat(3,1fr)}
@media(max-width:400px){.keynums .tile{padding:.7rem .7rem}.keynums .tile .val{font-size:1.25rem}}
.secrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 1rem}
.sec{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.sec .ic{color:var(--brand);width:1rem;height:1rem}
.sec .t{font:600 .86rem/1.2 var(--sans)}
.sec .s{font-size:.74rem;color:var(--muted);line-height:1.25}
.sec.warn .s{color:var(--bad)}
.sec:hover{border-color:var(--brand)}
.doselist .slot-h{display:flex;justify-content:space-between;align-items:baseline}
.doselist .slot-h .cnt{font-weight:600;letter-spacing:0;text-transform:none;font-size:.76rem}
.doselist .item.dose .ib{cursor:pointer}
.doselist .icon-btn.more{color:var(--muted)}
.doselist .icon-btn.more .ic{transform:rotate(90deg)}
.list[hidden]{display:none}
.tickbtn.ghost{background:transparent;color:var(--brand)}
.tickbtn.off{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.linklike.tog{display:flex;width:100%;background:none;border:0;padding:.55rem 0 .2rem;cursor:pointer;color:var(--muted);text-align:left}
.sheet-h{font:700 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.7rem .8rem .25rem}
.sheet-h:first-child{padding-top:.2rem}
.sortlist .item{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.sortlist.sorting{cursor:grabbing}
.item .grip{flex:none;display:flex;align-items:center;justify-content:center;width:2rem;height:2.4rem;margin-right:-.3rem;color:var(--muted);cursor:grab;touch-action:none;border-radius:8px}
.item .grip svg{fill:currentColor}
.item .grip:active,.item.lifting .grip{color:var(--brand);cursor:grabbing}
.item.lifting{position:relative;z-index:2;transform:scale(1.02);box-shadow:0 10px 28px rgba(0,0,0,.18);border-color:var(--brand)}
.item.done{opacity:.62}
.item.done .t{text-decoration:line-through}
.tickbtn{width:2.3rem;height:2.3rem;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:transparent;flex:none}
.tickbtn:hover{border-color:var(--brand)}
.tickbtn.on{background:var(--good);border-color:var(--good);color:#fff}
.tickbtn.skip{background:var(--warn);border-color:var(--warn);color:#fff}
.tickbtn .ic{width:1.1rem;height:1.1rem}
.slot-h{font:700 .74rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:.9rem 0 .1rem}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--muted)}
.empty .ic{width:2.6rem;height:2.6rem;color:var(--line);display:block;margin:0 auto .7rem}
.empty h3{font-size:1.05rem;color:var(--ink)}

/* pattern correlation row: icon + strength on one line, the sentence full width below */
.plink{flex-wrap:wrap;row-gap:.35rem}
.plink .thumb{order:1;width:2rem;height:2rem}
.plink>.pill{order:2;margin-left:auto}
.plink .ib{order:3;flex:1 1 100%}
.plink .t{font-size:.9rem}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font:600 .74rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:.5rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.55rem .6rem;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* charts */
.chartbox{position:relative;width:100%;height:230px}
.chartbox canvas{width:100%;height:100%;display:block}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:.5rem}
.legend i{width:.7rem;height:.7rem;border-radius:3px;display:inline-block;margin-right:.3rem;vertical-align:-1px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(8,12,24,.55);display:flex;align-items:center;justify-content:center;
  padding:1rem;z-index:200;overflow-y:auto}
.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:480px;
  padding:1.4rem;position:relative;max-height:calc(100vh - 2rem);overflow-y:auto}
.modal.wide{max-width:760px}
.modal h2{font-size:1.2rem;margin-bottom:.25rem;padding-right:2rem}
.modal .msub{color:var(--muted);font-size:.88rem;margin:0 0 1rem}
.modal .x{position:absolute;top:.6rem;right:.6rem;font-size:1.05rem;line-height:1;color:var(--muted)}
.modal .foot{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.modal .foot .btn{flex:1}
/* Entry forms put Save and Cancel at the TOP, and keep them there while the
   form scrolls. `order` moves them visually only - the DOM keeps fields first,
   so tabbing still runs through the inputs before reaching the buttons. */
.modal form{display:flex;flex-direction:column}
.modal form > .foot{
  order:-1;margin:0 0 1rem;position:sticky;top:0;z-index:4;
  background:var(--surface);padding:.2rem 0 .7rem;
  border-bottom:1px solid var(--line);
}
/* the sticky bar would otherwise slide under the close button */
.modal form > .foot::before{
  content:'';position:absolute;left:0;right:0;top:-1.4rem;height:1.4rem;background:var(--surface);
}
@media (max-width:560px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;padding-bottom:calc(1.4rem + var(--safe-b))}
}

/* toast */
#toast-root{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(4.6rem + var(--safe-b));z-index:300;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:min(92vw,26rem)}
@media (min-width:900px){#toast-root{bottom:1.4rem}}
.toast{background:#0f172a;color:#fff;padding:.7rem 1rem;border-radius:11px;font-size:.9rem;box-shadow:var(--shadow-lg);
  transition:opacity .25s;text-align:center}
.toast.err{background:var(--bad)}
.toast.good{background:var(--good)}

/* dropzone + preview */
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;color:var(--muted);
  cursor:pointer;background:var(--surface-2)}
.drop:hover,.drop.over{border-color:var(--brand);color:var(--brand)}
.drop .ic{width:2rem;height:2rem;display:block;margin:0 auto .5rem}
.tbl .mk{font:inherit;color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted);padding:0;cursor:pointer;text-align:left}
.tbl .mk:hover{color:var(--brand);border-bottom-color:var(--brand)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.55rem}
.pcell{display:block;padding:0;border:1px solid var(--line);border-radius:.6rem;overflow:hidden;background:var(--soft);cursor:pointer;text-align:left}
.pcell img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.pcap{display:block;font-size:.72rem;color:var(--mut);padding:.3rem .4rem;line-height:1.25}
.pcompare{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pcompare img{display:block;width:100%;max-height:60vh;object-fit:contain;margin-top:.4rem;border-radius:.5rem;background:var(--soft)}
.upload-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.upload-row .btn{flex:1;min-width:9rem}
.preview{max-height:220px;border-radius:12px;display:block;margin:.7rem auto;box-shadow:var(--shadow)}
.spin{width:1.1rem;height:1.1rem;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:sp .7s linear infinite}
.spin.dark{border-color:color-mix(in srgb,var(--brand) 30%,transparent);border-top-color:var(--brand)}
@keyframes sp{to{transform:rotate(360deg)}}
.working{display:flex;align-items:center;gap:.6rem;justify-content:center;color:var(--muted);padding:1.2rem;font-size:.9rem}

/* AI output */
.ai-body{font-size:.94rem}
.ai-body h2{font:700 1rem/1.35 var(--head);margin:1.2rem 0 .35rem;color:var(--ink)}
.ai-body h2:first-child{margin-top:0}
.ai-body p{margin:.5rem 0;color:var(--muted)}
.ai-body ul{margin:.5rem 0;padding-left:1.15rem;color:var(--muted)}
.ai-body li{margin:.3rem 0}
.ai-body strong{color:var(--ink)}
.med-note{border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:12px;padding:.75rem .9rem;
  font-size:.82rem;color:var(--muted);display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0}
.med-note .ic{color:var(--warn);flex:none;margin-top:.1rem}
.med-note b{color:var(--ink)}

/* banners */
.banner{border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;display:flex;gap:.7rem;align-items:center;
  font-size:.9rem;flex-wrap:wrap}
.banner.up{background:var(--brand-soft);color:var(--brand)}
.banner.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.banner .btn{margin-left:auto}
.banner b{color:inherit}

/* fab */
.fab{position:fixed;right:1rem;bottom:calc(4.4rem + var(--safe-b));width:3.4rem;height:3.4rem;border-radius:50%;
  border:0;background:var(--grad);color:#fff;box-shadow:var(--shadow-lg);cursor:pointer;z-index:65;
  display:flex;align-items:center;justify-content:center}
.fab .ic{width:1.6rem;height:1.6rem}
@media (min-width:900px){.fab{bottom:1.6rem;right:1.6rem}}

/* sheet menu */
.sheet{display:grid;gap:.35rem}
.sheet button,.sheet a{display:flex;align-items:center;gap:.75rem;padding:.75rem .8rem;border-radius:11px;
  background:none;border:0;color:var(--ink);font:600 .95rem/1.2 var(--sans);cursor:pointer;text-align:left;width:100%}
.sheet button:hover,.sheet a:hover{background:var(--surface-2);text-decoration:none}
.sheet .ic{color:var(--brand)}
.sheet .sm{font-weight:500;font-size:.8rem;color:var(--muted);display:block}


/* --- zoomable charts --- */
.chartwrap { position: relative; }
.chart-range { display: flex; gap: .25rem; justify-content: flex-end; margin: 0 0 .35rem; }
.chart-range .rbtn {
  font: 600 11px/1 Inter, system-ui, sans-serif; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .55rem; cursor: pointer;
}
.chart-range .rbtn:hover { color: var(--ink); border-color: var(--muted); }
.chart-range .rbtn.on { color: #fff; background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); }
.chart-hint { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: .3rem; opacity: .75; }
@media (hover: none) { .chart-hint::before { content: ''; } }


/* --- hydration --- */
.hyd-total { font-size: 1.5rem; font-weight: 700; margin: .1rem 0 .5rem; }
.hyd-total .muted { font-size: .9rem; font-weight: 500; }
.hyd-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hyd-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .25s; }
.hyd-sub { font-size: .84rem; margin: .4rem 0 .2rem; }
.hyd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: .8rem 0 .2rem; }
.hyd-btn {
  display: flex; align-items: center; gap: .5rem; text-align: left; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; min-height: 3rem;
}
.hyd-btn:hover { border-color: var(--brand); background: var(--surface-2); }
.hyd-btn.mine { border-style: dashed; }
.hyd-btn.mine .hyd-plus { color: var(--brand-2, var(--brand)); }
.hyd-btn:active { transform: scale(.98); }
.hyd-plus { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 999px; background: var(--brand); color: #fff; }
.hyd-plus .ic { width: 1rem; height: 1rem; }
.hyd-l { flex: 1; font-weight: 600; font-size: .88rem; line-height: 1.15; }
.hyd-ml { color: var(--muted); font-size: .78rem; flex: none; }
@media (max-width: 400px) { .hyd-grid { grid-template-columns: 1fr; } }


/* --- breathing & meditation --- */
.bx-card .bx-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.bx-caution { border-color: #e8b4a8; }
@media (prefers-color-scheme: dark) { .bx-caution { border-color: #6b3b30; } }
.bx { text-align: center; }
.bx-orb {
  width: min(58vw, 15rem); height: min(58vw, 15rem); margin: 1.2rem auto .6rem;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--surface-2) 0%, transparent 72%);
}
.bx-orb-i {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--brand), #7c4ddb 70%);
  transform: scale(.45); opacity: .6;
  transition: transform .08s linear, opacity .08s linear;
}
.bx-phase { font-size: 1.32rem; font-weight: 600; margin-top: .2rem; }
.bx-count { font: 700 2.6rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; margin: .1rem 0; }
.bx-left { color: var(--muted); font-size: .9rem; min-height: 2.4em; }
.warnbox {
  border: 1px solid #f0c9c4; background: #fdf5f4; border-radius: 10px;
  padding: .8rem .95rem; margin: .6rem 0 1rem;
}
.warnbox p { margin: .45rem 0; font-size: .92rem; color: #7a2718; }
@media (prefers-color-scheme: dark) {
  .warnbox { border-color: #6b3b30; background: #2a1618; }
  .warnbox p { color: #f0bdb2; }
}
.ackrow { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0 0;
          font-weight: 500; font-size: .92rem; cursor: pointer; }
.ackrow input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .12rem; }


/* --- breathing sound toggles --- */
.bx-snd { display: flex; gap: .5rem; justify-content: center; margin: 1rem 0 .2rem; }
.sndbtn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font: 600 .84rem/1 inherit;
}
.sndbtn .ic { width: 1rem; height: 1rem; }
.sndbtn:hover { border-color: var(--brand); color: var(--ink); }
.sndbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sndbtn.on .ic { filter: brightness(3); }


/* --- meditation --- */
.medgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; margin: .3rem 0 .2rem; }
.medbtn { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; cursor: pointer;
  padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; }
.medbtn:hover { border-color: var(--brand); background: var(--surface-2); }
.medbtn b { font-size: .9rem; }
.medbtn small { color: var(--muted); font-size: .76rem; }
.medguide { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between;
  padding: .7rem 0; border-bottom: 1px solid var(--line); }
.medguide:last-child { border-bottom: 0; }
.medguide .pill { margin-left: .45rem; }
.medguide .btn { flex: none; align-self: center; }
.medwave { height: 4px; border-radius: 999px; margin: 1.4rem auto .9rem; max-width: 15rem;
  background: linear-gradient(90deg, var(--brand), #7c4ddb, var(--brand));
  background-size: 200% 100%; animation: medflow 4s linear infinite; }
.medwave.n-white { animation-duration: 1.1s } .medwave.n-pink { animation-duration: 2.4s }
.medwave.n-brown { animation-duration: 5s }
@keyframes medflow { to { background-position: 200% 0 } }
.medvol-l { display: flex; align-items: center; gap: .5rem; justify-content: center;
  margin: 1rem 0 .2rem; color: var(--muted); font-size: .85rem; }
.medvol { flex: 0 1 12rem; }
.note-soft { border-left: 3px solid var(--line); padding: .55rem .8rem; margin: .9rem 0 0;
  color: var(--muted); font-size: .85rem; background: var(--surface-2); border-radius: 0 8px 8px 0; }