@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

  /* ── Houdini @property registrations — enables CSS transition of custom color props ── */
  @property --bg-color-1 {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(114,168,164,0.10);
  }
  @property --bg-color-2 {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(156,196,192,0.06);
  }

  :root {
    /* ── Healthcare Color Matrix (desaturated, reduced-blue) ── */
    --canvas-bg: #0c1014;
    --medical-surface: #1c2228;
    --medical-primary: #72a8a4;
    --medical-secondary: #9cc4c0;
    --medical-accent: #68b877;
    --medical-muted: #6b7a85;
    --medical-border: rgba(114,168,164,0.20);
    --specular-highlight: rgba(255,255,255,0.12);
    --shadow-color: rgba(4,9,15,0.45);

    /* ── Semantic aliases ── */
    --accent: var(--medical-primary);
    --accent-glass: rgba(114,168,164,0.10);
    --accent-tint: rgba(114,168,164,0.20);
    --accent2: #c0694a;
    --accent2-glass: rgba(192,105,74,0.12);
    --amber: #c49a3c;
    --amber-glass: rgba(196,154,60,0.12);
    --purple: #8573b8;
    --purple-glass: rgba(133,115,184,0.12);

    --text: #d8e6e4;
    --text2: #7a9fa0;
    --text3: rgba(122,159,160,0.55);

    /* ── Glass tokens ── */
    --glass: color-mix(in srgb, var(--medical-surface) 55%, transparent);
    --glass-strong: color-mix(in srgb, var(--medical-surface) 72%, transparent);
    --glass-border: var(--medical-border);

    /* ── Surfaces ── */
    --surface-mid:    rgba(28,34,40,0.50);
    --surface-subtle: rgba(28,34,40,0.30);
    --surface-ghost:  rgba(28,34,40,0.15);
    --divider:        rgba(114,168,164,0.12);

    --radius: 20px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --radius-pill: 100px;
    --shadow-card: 0 2px 8px var(--shadow-color), 0 8px 28px var(--shadow-color), inset 0 1px 0 var(--specular-highlight);
    --shadow-btn: 0 2px 8px var(--shadow-color), 0 1px 2px rgba(4,9,15,0.25);
    --blur: blur(20px) saturate(190%);
    --blur-md: blur(28px) saturate(230%);

    /* Status colors */
    --status-ok: #50a864;
    --status-ok-glass: rgba(80,168,100,0.15);
    --status-warn: #c89632;
    --status-warn-glass: rgba(200,150,50,0.15);
    --status-danger: #e05050;
    --status-danger-glass: rgba(200,70,60,0.12);
    --status-trigger: #c86432;
    --status-trigger-glass: rgba(200,100,50,0.12);
    /* Motion */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring-hard: cubic-bezier(0.34, 1.85, 0.50, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-base: 280ms;
    --duration-slow: 420ms;
    --duration-xslow: 480ms;
    /* Z-index */
    --z-header: 100;
    --z-dock: 200;
    --z-onboarding: 300;
    --z-sheet: 500;
    --z-modal: 600;
    --z-toast: 1000;
  }

  /* ── Light mode overrides (warm de-blued beige — original palette) ── */
  @media (prefers-color-scheme: light) {
    :root {
      --canvas-bg: #f5f3ef;
      --medical-surface: #e8e4de;
      --medical-primary: #5a9490;
      --medical-secondary: #7ab8b4;
      --medical-accent: #4a9b5a;
      --medical-muted: #8a9a9c;
      --medical-border: rgba(90,148,144,0.28);
      --text: #1a1612;
      --text2: #4a6466;
      --text3: rgba(74,100,102,0.55);
      --surface-mid:    rgba(90,148,144,0.12);
      --surface-subtle: rgba(90,148,144,0.07);
      --surface-ghost:  rgba(90,148,144,0.04);
      --divider:        rgba(90,148,144,0.14);
      --shadow-color:   rgba(0,20,18,0.08);
      --specular-highlight: rgba(255,255,255,0.72);
      --accent-glass: rgba(90,148,144,0.10);
      --accent-tint: rgba(90,148,144,0.18);
      --accent2: #b5543a;
      --accent2-glass: rgba(181,84,58,0.10);
    }
    body { background: var(--canvas-bg); }
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  html, body { max-width: 100vw; overflow-x: hidden; }

  body {
    font-family: -apple-system, 'DM Sans', sans-serif;
    /* Ambient color fields — driven by --bg-color-1/2 custom props, animated by Houdini */
    --bg-color-1: rgba(114,168,164,0.10);
    --bg-color-2: rgba(156,196,192,0.06);
    background:
      radial-gradient(ellipse at 6%  6%,   var(--bg-color-1)        0%, transparent 52%),
      radial-gradient(ellipse at 94% 7%,   var(--bg-color-2)        0%, transparent 48%),
      radial-gradient(ellipse at 93% 94%,  rgba(104,184,119,0.05)   0%, transparent 48%),
      radial-gradient(ellipse at 6%  93%,  rgba(114,168,164,0.04)   0%, transparent 48%),
      var(--canvas-bg);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* 480ms fluid interpolation across all ambient fields */
    transition: --bg-color-1 480ms ease, --bg-color-2 480ms ease, background-color 480ms ease;
  }

  /* ── Header ── */
  .app-header {
    background: color-mix(in srgb, var(--medical-surface) 6%, transparent);
    backdrop-filter: blur(28px) saturate(230%);
    -webkit-backdrop-filter: blur(28px) saturate(230%);
    border-bottom: 1px solid var(--medical-border);
    box-shadow: 0 1px 0 rgba(114,168,164,0.08), 0 4px 24px var(--shadow-color);
    padding: env(safe-area-inset-top) 1.25rem 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(58px + env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    gap: 10px;
    isolation: isolate;
  }

  .logo {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    color: var(--accent);
    letter-spacing: -0.3px;
    flex-shrink: 0;
  }
  .logo span { color: var(--text); font-style: italic; }

  /* ── Date pill ── */
  .date-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
  }
  .date-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    transition: transform 0.15s;
    line-height: 1;
  }
  .date-btn:active { transform: scale(0.82); }
  #currentDateDisplay {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    min-width: 120px;
    text-align: center;
  }
  .storage-info { font-size: 10px; color: var(--text3); margin-left: 6px; }
  .storage-info.warn { color: var(--accent2); }

  /* ── Liquid Dock System ── */
  .liquid-dock-system {
    position: fixed;
    /* max() picks the larger value: iOS adds ~34px from env() so its position
       stays unchanged; non-iOS browsers (no safe-area inset) get lifted to
       the 36px floor instead of sitting at 4px above the absolute bottom. */
    bottom: max(36px, calc(4px + env(safe-area-inset-bottom)));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-dock);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
    touch-action: none;
  }
  /* Home-screen PWA: push the dock partially into the safe-area zone so it
     sits close to the home indicator, mimicking native iOS tab-bar placement.
     max() guards against negative values on non-iOS PWAs with no safe-area. */
  @media (display-mode: standalone) {
    .liquid-dock-system {
      bottom: max(8px, calc(-10px + env(safe-area-inset-bottom)));
    }
  }

  /* ── Capsule + Detached FAB share IDENTICAL refractive glass tokens ── */
  .dock-capsule,
  .detached-action {
    background: rgba(255,248,248,0.24);
    backdrop-filter: blur(16px) saturate(210%) brightness(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(210%) brightness(1.12);
    border: 0.5px solid rgba(255,255,255,0.80);
    box-shadow:
      inset 0 1.5px 2px 0 rgba(255,255,255,0.80),
      inset 0 -1px 2px 0 rgba(255,255,255,0.17),
      0 2px 9px -1px rgba(0,0,0,0.055),
      0 10px 26px -5px rgba(0,0,0,0.09);
    isolation: isolate;
  }
  .dock-capsule {
    display: flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 5px;
    gap: 2px;
    position: relative;
    touch-action: none;
    overflow: visible;   /* allow the slider's vertical bulge to spill past the pill edge */
  }
  @media (prefers-color-scheme: dark) {
    .dock-capsule,
    .detached-action {
      background: rgba(20,25,32,0.28);
      backdrop-filter: blur(16px) saturate(230%) brightness(0.97);
      -webkit-backdrop-filter: blur(16px) saturate(230%) brightness(0.97);
      border: 0.5px solid rgba(255,255,255,0.18);
      box-shadow:
        inset 0 1px 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 1px 0 rgba(0,0,0,0.30),
        0 3px 10px -1px rgba(0,0,0,0.24),
        0 10px 26px -4px rgba(0,0,0,0.33);
    }
  }

  /* ── Hyper-refractive glass prism slider — fills the pill at rest,
        bulges out elastically on dynamic motion ── */
  .liquid-slider-cursor {
    position: absolute;
    top: 1px;
    left: 0;
    width: 64px;
    height: calc(100% - 2px);
    border-radius: var(--radius-pill);
    pointer-events: none;
    z-index: 0;
    will-change: transform, width, left, opacity;
    touch-action: none;
    overflow: hidden;
    transform-origin: center center;
    mix-blend-mode: normal;
    opacity: 1;
    transition: opacity 180ms ease;

    background: rgba(255,245,245,0.15);
    backdrop-filter: blur(12px) saturate(200%) brightness(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.15);
    border: 0.5px solid rgba(255,255,255,0.85);
    box-shadow:
      inset 0 1.5px 2px 0 rgba(255,255,255,0.9),
      inset 0 -1px 2px 0 rgba(255,255,255,0.2),
      0 2px 8px -1px rgba(0,0,0,0.06),
      0 8px 20px -4px rgba(0,0,0,0.08);
  }
  .liquid-slider-cursor.hidden { opacity: 0; }
  @media (prefers-color-scheme: dark) {
    .liquid-slider-cursor {
      border: 0.5px solid rgba(255,255,255,0.25);
      box-shadow:
        inset 0 1px 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 1px 0 rgba(0,0,0,0.3),
        0 4px 12px -2px rgba(0,0,0,0.25);
    }
  }

  /* Transient specular spotlight — narrow Gaussian peak under active touch */
  .liquid-slider-cursor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      circle at var(--press-x, 50%) var(--press-y, 50%),
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.20) 20%,
      transparent 45%
    );
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }
  .liquid-slider-cursor.pressing::after { opacity: 1; }

  /* Nav items inside capsule */
  .dock-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 76px;              /* identical width for every tab */
    padding: 6.5px 8px;       /* trimmed vertical padding → pill bar 5% shorter */
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: none;
    border: none;
    color: var(--medical-muted);
    font-family: -apple-system, 'DM Sans', sans-serif;
    transition: color 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    overflow: visible;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
  }
  .dock-item.active { color: var(--medical-primary); }
  .dock-item.active .tab-label {
    mix-blend-mode: normal;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }

  .tab-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.42s cubic-bezier(0.16, 1, 0.3, 1),
                filter    0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tab-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;          /* picks up dock-item color (muted → primary on active) */
  }
  .dock-item.active .tab-icon {
    transform: translateY(-1px) scale(1.14);
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
  }
  .tab-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1px; }

  /* ── Detached action button — FAB matches pill bar height (5% smaller) ── */
  .detached-action {
    width: 59px;
    height: 59px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--medical-primary);   /* matches pill bar; overridden per-page via showPage() */
    transform-origin: center center;
    overflow: hidden;
    transition:
      width        420ms cubic-bezier(0.34, 1.56, 0.64, 1),
      transform    240ms cubic-bezier(0.34, 1.85, 0.50, 1),
      opacity      280ms ease-out,
      margin-left  420ms cubic-bezier(0.34, 1.56, 0.64, 1),
      padding      420ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow   280ms ease-out;
  }
  .detached-action svg {
    width: 26px;
    height: 26px;
    display: block;
    fill: currentColor;          /* picks up FAB color (accent / accent2) */
  }
  /* Hover only on real pointer devices — prevents iOS sticky-hover keeping
     the FAB scaled up after release */
  @media (hover: hover) {
    .detached-action:hover { transform: scale(1.08) translateY(-2px); }
  }
  .detached-action:active {
    transform: scale(1.25);            /* dramatic grow on press */
    box-shadow:
      inset 0 2px 3px 0 rgba(255,255,255,0.95),
      inset 0 -1.5px 2px 0 rgba(255,255,255,0.25),
      0 6px 18px -2px rgba(0,0,0,0.12),
      0 18px 36px -6px rgba(0,0,0,0.16);
  }

  /* Collapsed state — FAB retracts back into the dock perimeter */
  .detached-action.collapsed {
    width: 0;
    opacity: 0;
    transform-origin: left center;
    transform: scale(0.3) translateX(-12px);
    margin-left: -0.75rem;       /* cancel the .liquid-dock-system gap */
    padding: 0;
    border-width: 0;
    outline: none;
    pointer-events: none;
    box-shadow: none;
  }

  /* ── Pages ── */
  .page {
    display: none;
    padding: 1.25rem 1.25rem;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom) + 1rem);
  }
  .page.active { display: block; }

  .section-title {
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    color: var(--text);
    margin-bottom: 1.1rem;
    letter-spacing: -0.5px;
    line-height: 1.15;
    text-align: left;
  }

  /* ── Glass cards ── */
  .card {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-card);
  }
  .card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-ghost);
  }
  .card-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
  /* Card-title icon — monochromatic SVG tinted via currentColor (matches bar/FAB philosophy) */
  .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--medical-primary); flex-shrink: 0; }
  .card-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }

  .meal-icon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .meal-icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
  .icon-breakfast { background: var(--amber-glass);   color: var(--amber); }
  .icon-lunch     { background: var(--accent-glass);  color: var(--medical-primary); }
  .icon-dinner    { background: var(--purple-glass);  color: var(--purple); }
  .icon-snack     { background: rgba(104,184,119,0.14); color: var(--medical-accent); }

  .card-body { padding: 1.25rem; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .form-grid.full { grid-template-columns: 1fr; }
  .field-group { display: flex; flex-direction: column; gap: 6px; }

  label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.55px; }

  /* ── Glass inputs ── */
  input[type="text"], input[type="time"], input[type="number"], input[type="date"], textarea, select {
    font-family: -apple-system, 'DM Sans', sans-serif;
    font-size: 16px;
    padding: 10px 14px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text);
    width: 100%;
    transition: all 0.2s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: light dark;
  }
  input:focus, textarea:focus, select:focus {
    background: var(--surface-mid);
    border-color: var(--medical-primary);
    box-shadow: 0 0 0 3px rgba(114,168,164,0.15);
  }
  textarea { resize: vertical; min-height: 80px; }

  /* ── Photos ── */
  .photo-upload-area { border: 2px dashed var(--medical-border); border-radius: var(--radius-sm); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--surface-ghost); position: relative; }
  .photo-upload-area:hover { border-color: var(--accent); background: var(--accent-glass); }
  .photo-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .photo-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 10px; }
  .photo-thumb-wrap { position: relative; }
  .photo-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--glass-border); cursor: pointer; display: block; }
  .photo-del { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.48); backdrop-filter: blur(4px); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .upload-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto 6px; color: var(--medical-primary); }
  .upload-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
  .upload-hint { font-size: 12px; color: var(--text2); margin-top: 4px; }

  /* ── Bristol ── */
  .bristol-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .bristol-btn { aspect-ratio: 1; border: 1.5px solid var(--divider); border-radius: var(--radius-xs); background: var(--surface-subtle); cursor: pointer; font-size: 10px; font-weight: 600; color: var(--text2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform 0.15s ease, background 0.2s, border-color 0.2s; padding: 4px 2px; -webkit-tap-highlight-color: transparent; user-select: none; }
  .bristol-btn .type-num { font-size: 17px; font-weight: 700; line-height: 1; }
  .bristol-btn:hover { border-color: var(--accent); background: var(--accent-glass); }
  .bristol-btn:active { transform: scale(0.88); }
  .bristol-btn.selected { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
  .bristol-btn.flash {
    animation: _bristol-flash 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes _bristol-flash {
    0%   { transform: scale(1);    background: var(--accent-tint);  border-color: var(--accent); color: var(--accent); }
    40%  { transform: scale(1.18); background: var(--accent-tint);  border-color: var(--accent); color: var(--accent); }
    100% { transform: scale(1);    background: var(--surface-subtle); border-color: var(--divider); color: var(--text2); }
  }

  /* ── Symptoms ── */
  .symptom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; margin-top: 8px; }
  .symptom-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1.5px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface-subtle); transition: all 0.2s; }
  .symptom-item.active { border-color: rgba(181,69,27,0.28); background: var(--accent2-glass); }
  .symptom-tag { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 13px; cursor: pointer; color: var(--text2); user-select: none; text-align: center; transition: all 0.15s; }
  .symptom-item.active .symptom-tag { color: var(--accent2); font-weight: 600; }
  .symptom-intensity { display: none; flex-direction: column; gap: 4px; }
  .symptom-item.active .symptom-intensity { display: flex; }
  .intensity-row { display: flex; gap: 4px; align-items: center; }
  .intensity-seg { flex: 1; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--medical-muted) 45%, transparent); border: 1px solid color-mix(in srgb, var(--medical-muted) 25%, transparent); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
  .intensity-label { font-size: 10px; color: var(--text3); display: flex; justify-content: space-between; }

  /* ── Exercise ── */
  .exercise-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; padding: 12px; background: var(--surface-subtle); border-radius: var(--radius-sm); border: 1px solid var(--divider); flex-wrap: wrap; }
  .exercise-row .field-group { flex: 1; min-width: 100px; }
  .remove-btn {
    background: color-mix(in srgb, var(--medical-surface) 55%, transparent);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--medical-border);
    color: var(--text2);
    cursor: pointer;
    font-size: 17px;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    box-shadow: inset 0 1px 0 var(--specular-highlight), 0 2px 8px var(--shadow-color);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .remove-btn:hover { background: var(--accent2-glass); border-color: rgba(192,105,74,0.35); color: var(--accent2); transform: scale(1.08); }
  .remove-btn:active { transform: scale(0.94); }

  /* ── Buttons ── */
  .add-btn { background: var(--surface-subtle); border: 1.5px dashed var(--medical-border); color: var(--accent); font-family: -apple-system, 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-pill); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; margin-top: 8px; }
  .add-btn:hover { background: var(--accent-glass); border-color: var(--accent); }
  .add-btn:active { transform: scale(0.97); }

  .save-btn { background: var(--medical-primary); color: #0c1014; border: none; font-family: -apple-system, 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; padding: 12px 28px; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.42s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 16px rgba(114,168,164,0.35), var(--shadow-btn); }
  .save-btn:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(114,168,164,0.45), var(--shadow-btn); }
  .save-btn:active { transform: scale(0.97); }
  .save-btn:disabled { background: var(--medical-muted); box-shadow: none; cursor: not-allowed; transform: none; }

  /* .save-fab/.report-fab removed — replaced by .detached-action inside .liquid-dock-system */

  /* Header sync button spin animation when syncing */
  @keyframes spin { to { transform: rotate(360deg); } }
  #header-sync-btn.spinning { animation: spin 0.8s linear infinite; }

  .action-bar { display: flex; gap: 8px; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--divider); background: var(--surface-ghost); flex-wrap: wrap; }

  .export-btn { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--text); border: 1px solid var(--glass-border); font-family: -apple-system, 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-btn); }
  .export-btn:hover { background: var(--glass-strong); }
  .export-btn:active { transform: scale(0.97); }
  .export-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

  /* ── Stool entry ── */
  .stool-entry { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; padding: 12px; padding-top: 40px; background: var(--surface-subtle); border-radius: var(--radius-sm); border: 1px solid var(--divider); margin-bottom: 8px; }
  .stool-entry .remove-btn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; font-size: 13px; }
  .stool-entry .stool-num { position: absolute; top: 10px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); opacity: 0.75; line-height: 26px; }


  /* ── Status badge ── */
  .status-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent-glass); color: var(--accent); border: 1px solid rgba(114,168,164,0.22); }
  .status-badge.empty { background: var(--surface-ghost); color: var(--text3); border-color: transparent; }

  /* ── Calendar ── */
  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 1rem; }
  .cal-day { position: relative; aspect-ratio: 1; border-radius: var(--radius-xs); border: 1px solid var(--divider); background: var(--surface-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all 0.2s; gap: 2px; }
  .cal-day .day-num { font-weight: 600; font-size: 13px; line-height: 1; }
  .cal-day .day-dots { display: flex; gap: 2px; }
  .cal-day .dot { width: 4px; height: 4px; border-radius: 50%; }
  /* Bristol dots — one per deposición, each tinted with its own type's colour */
  .cal-day .day-bristol-dots { display: flex; gap: 2px; min-height: 6px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 90%; }
  .cal-day .b-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08); }
  .cal-day:hover { background: var(--surface-mid); transform: scale(1.05); }
  .cal-day.has-data { background: var(--accent-glass); border-color: rgba(114,168,164,0.28); }
  .cal-day.today { border-color: var(--accent); border-width: 2px; background: var(--accent-glass); }
  .cal-day.today .day-num { color: var(--accent); }
  .cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 4px; }
  .cal-day-name { text-align: center; font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; }

  .month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
  .month-title { flex: 1; text-align: center; font-family: 'DM Serif Display', serif; font-size: 20px; font-weight: 700; color: var(--text); }

  /* ── Report controls ── */
  .report-period-btns {
    display: flex; gap: 6px; margin-bottom: 1.5rem;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .report-period-btns::-webkit-scrollbar { display: none; }
  .period-btn { padding: 8px 16px; border: 1.5px solid var(--divider); background: var(--surface-subtle); border-radius: var(--radius-pill); font-family: -apple-system, 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text2); transition: all 0.2s; white-space: nowrap; flex-shrink: 0; }
  .period-btn.active { border-color: var(--accent); background: var(--accent-glass); color: var(--accent); }
  .period-btn:hover { border-color: var(--accent); }

  .report-range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; padding: 12px 16px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); backdrop-filter: var(--blur); }
  .report-range label { text-transform: none; letter-spacing: 0; font-weight: 500; }
  .report-range input[type="date"] { width: auto; min-width: 140px; }

  /* ── Summary / KPI ── */
  .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
  .summary-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow-card); }
  .summary-num { font-family: 'DM Serif Display', serif; font-size: 30px; color: var(--text); line-height: 1.1; }
  .summary-label { font-size: 11px; color: var(--text2); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }

  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
  .kpi-donut { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow-card); }
  .kpi-donut svg { display: block; }
  .kpi-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; text-align: center; }

  /* ── Heatmap ── */
  .heat-month { margin-bottom: 1.25rem; }
  .heat-title { font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--text); margin-bottom: 8px; }
  .heat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .heat-dayname { font-size: 9px; font-weight: 700; color: var(--text3); text-align: center; text-transform: uppercase; padding: 4px 0; letter-spacing: 0.3px; }
  .heat-cell { aspect-ratio: 1; border-radius: 8px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 4px; font-size: 11px; font-weight: 600; min-height: 36px; }
  .heat-cell .heat-day { font-size: 12px; font-weight: 600; }
  .heat-cell .heat-cnt { font-size: 9px; font-weight: 500; align-self: flex-end; opacity: 0.9; }

  /* ── Bristol legend ── */
  .bristol-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--divider); }
  .bl-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
  .bl-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }

  /* ── Timeline ── */
  .timeline-item { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--divider); }
  .timeline-date { font-size: 12px; color: var(--text2); min-width: 80px; font-weight: 600; padding-top: 2px; }
  .timeline-content { flex: 1; }
  .tag-pill { display: inline-block; padding: 2px 8px; background: var(--surface-mid); border-radius: var(--radius-pill); font-size: 11px; color: var(--text2); margin: 2px; border: 1px solid var(--glass-border); }

  /* ── Toast (centered, iOS-style) ── */
  /* ── Toast — liquid glass, floats above dock ── */
  .saved-toast {
    position: fixed;
    bottom: calc(max(36px, 4px + env(safe-area-inset-bottom)) + 70px + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(255,248,248,0.30);
    backdrop-filter: blur(20px) saturate(210%) brightness(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(210%) brightness(1.12);
    border: 0.5px solid rgba(255,255,255,0.80);
    box-shadow:
      inset 0 1.5px 2px 0 rgba(255,255,255,0.80),
      inset 0 -1px 2px 0 rgba(255,255,255,0.17),
      0 4px 16px rgba(0,0,0,0.10),
      0 12px 32px rgba(0,0,0,0.07);
    color: var(--text);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: var(--z-toast);
    white-space: nowrap;
    pointer-events: none;
  }
  @media (display-mode: standalone) {
    .saved-toast { bottom: calc(max(8px, -10px + env(safe-area-inset-bottom)) + 70px + 10px); }
  }
  @media (prefers-color-scheme: dark) {
    .saved-toast {
      background: rgba(20,25,32,0.55);
      backdrop-filter: blur(20px) saturate(230%) brightness(0.97);
      -webkit-backdrop-filter: blur(20px) saturate(230%) brightness(0.97);
      border: 0.5px solid rgba(255,255,255,0.18);
      box-shadow:
        inset 0 1px 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 1px 0 rgba(0,0,0,0.30),
        0 4px 16px rgba(0,0,0,0.35),
        0 12px 32px rgba(0,0,0,0.25);
    }
  }
  .saved-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
  .saved-toast.error {
    background: rgba(181,69,27,0.22);
    border-color: rgba(220,100,60,0.50);
    color: var(--accent2);
    box-shadow:
      inset 0 1.5px 2px 0 rgba(255,200,160,0.35),
      inset 0 -1px 2px 0 rgba(0,0,0,0.20),
      0 4px 16px rgba(181,69,27,0.22),
      0 12px 32px rgba(181,69,27,0.12);
  }

  /* ── App banners (install prompt, iOS hint) — liquid glass above dock ── */
  .app-banner {
    position: fixed;
    bottom: calc(max(36px, 4px + env(safe-area-inset-bottom)) + 70px + 6px);
    left: 12px;
    right: 12px;
    z-index: calc(var(--z-toast) - 10);
    display: flex;
    background: rgba(255,248,248,0.28);
    backdrop-filter: blur(20px) saturate(210%) brightness(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(210%) brightness(1.12);
    border: 0.5px solid rgba(255,255,255,0.75);
    border-radius: var(--radius-md, 18px);
    box-shadow:
      inset 0 1.5px 2px 0 rgba(255,255,255,0.80),
      inset 0 -1px 2px 0 rgba(255,255,255,0.17),
      0 4px 20px rgba(0,0,0,0.12),
      0 12px 36px rgba(0,0,0,0.09);
  }
  @media (display-mode: standalone) {
    .app-banner { bottom: calc(max(8px, -10px + env(safe-area-inset-bottom)) + 70px + 6px); }
  }
  @media (prefers-color-scheme: dark) {
    .app-banner {
      background: rgba(20,25,32,0.65);
      backdrop-filter: blur(20px) saturate(230%) brightness(0.97);
      -webkit-backdrop-filter: blur(20px) saturate(230%) brightness(0.97);
      border: 0.5px solid rgba(255,255,255,0.16);
      box-shadow:
        inset 0 1px 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 1px 0 rgba(0,0,0,0.32),
        0 4px 20px rgba(0,0,0,0.40),
        0 12px 36px rgba(0,0,0,0.30);
    }
  }

  /* ── Empty state ── */
  .empty-state { text-align: center; padding: 3rem 2rem; color: var(--text2); }
  .empty-state .empty-icon { font-size: 44px; margin-bottom: 1rem; }
  .empty-state p { font-size: 14px; }

  /* ── Collapse toggle ── */
  .collapse-toggle { background: var(--surface-ghost); border: none; cursor: pointer; color: var(--text2); font-size: 13px; padding: 4px 9px; line-height: 1; transition: all 0.2s; border-radius: var(--radius-pill); pointer-events: none; }
  .collapse-toggle.open { transform: rotate(180deg); }
  .collapsible { overflow: hidden; }
  .clickable-header { cursor: pointer; user-select: none; }
  .clickable-header:hover { background: color-mix(in srgb, var(--medical-primary) 6%, var(--surface-ghost)); }

  /* ── Sleep row ── */
  .sleep-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

  /* ── Mood (compact) ── */
  .mood-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
  .mood-btn { padding: 5px 10px; border: 1px solid var(--divider); border-radius: var(--radius-pill); background: var(--surface-subtle); cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; gap: 4px; color: var(--text2); font-size: 12px; }
  .mood-btn:hover { transform: scale(1.05); background: var(--surface-mid); }
  .mood-btn:active { transform: scale(0.97); }
  .mood-btn.selected { border-color: rgba(114,168,164,0.36); background: var(--accent-glass); color: var(--accent); }
  .mood-emoji { font-size: 16px; }

  /* ── Water slider ── */
  .water-slider-wrap { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
  .water-range {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-mid);
    outline: none;
    cursor: pointer;
  }
  .water-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--medical-primary);
    box-shadow: 0 0 8px rgba(114,168,164,0.45);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .water-range::-webkit-slider-thumb:active { transform: scale(1.25); }
  .water-range::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--medical-primary);
    box-shadow: 0 0 8px rgba(114,168,164,0.45);
    cursor: pointer;
  }
  .water-readout {
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    color: var(--medical-primary);
    min-width: 62px;
    text-align: right;
    letter-spacing: -0.3px;
  }

  /* ── Sync badge ── */
  .sync-badge {
    display: inline-block;
    font-size: 12px; font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--divider);
    background: var(--surface-subtle);
    color: var(--text2);
    transition: all 0.3s;
  }
  .sync-badge[data-state="clean"]    { color: var(--medical-accent); border-color: rgba(104,184,119,0.3); background: rgba(104,184,119,0.08); }
  .sync-badge[data-state="dirty"]    { color: var(--amber); border-color: rgba(196,154,60,0.3); background: rgba(196,154,60,0.08); }
  .sync-badge[data-state="syncing"]  { color: var(--medical-primary); border-color: rgba(114,168,164,0.3); background: rgba(114,168,164,0.08); }
  .sync-badge[data-state="conflict"] { color: var(--accent2); border-color: rgba(192,105,74,0.3); background: rgba(192,105,74,0.08); }

  /* ── PDF / print layout guards ── */
  .timeline-item { break-inside: avoid; page-break-inside: avoid; }
  .card { break-inside: avoid; page-break-inside: avoid; }
  @media print {
    table { table-layout: fixed; width: 100%; box-sizing: border-box; word-break: break-word; }
    .day-block { break-inside: avoid; page-break-inside: avoid; }
  }

  /* ── Very tall/narrow phones (aspect-ratio ≤ 9/18, e.g. Galaxy Z Flip, 22:9) ── */
  @media (max-aspect-ratio: 9/18) {
    /* Ensure no element bleeds past viewport edges */
    .page { overflow-x: hidden; }
    /* Logo may overflow on extremely narrow viewports — allow shrinking */
    .logo { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Date display: never wider than available space */
    .date-nav { flex-shrink: 1; min-width: 0; }
    #currentDateDisplay { min-width: 0; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Dock items: compact on super-narrow screens */
    .dock-item { width: 64px; padding: 6px 4px; }
    .tab-label { font-size: 9px; }
  }

  /* ── Mobile ── */
  @media (max-width: 700px) {
    .app-header { padding: env(safe-area-inset-top) 1rem 0 1rem; height: calc(52px + env(safe-area-inset-top)); }
    .header-module-label { top: calc(env(safe-area-inset-top) + 26px); }
    #currentDateDisplay { min-width: 0; font-size: 11px; }
    .storage-info { display: none; }
    .page { padding: 1rem; padding-bottom: calc(72px + env(safe-area-inset-bottom) + 0.5rem); }
    .section-title { font-size: 26px; }
    .form-grid, .sleep-row { grid-template-columns: 1fr; }
    .bristol-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .bristol-btn { font-size: 9px; }
    .bristol-btn .type-num { font-size: 14px; }
    .mood-row { gap: 4px; }
    .mood-btn { font-size: 11px; padding: 4px 8px; }
  }

  /* ── Left detached home FAB — mirrors right detached-action, collapses rightward ── */
  #detached-home-btn {
    transition:
      width        420ms cubic-bezier(0.34, 1.56, 0.64, 1),
      transform    240ms cubic-bezier(0.34, 1.85, 0.50, 1),
      opacity      280ms ease-out,
      margin-right 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
      padding      420ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow   280ms ease-out;
  }
  #detached-home-btn.collapsed {
    width: 0;
    opacity: 0;
    transform-origin: right center;
    transform: scale(0.3) translateX(12px);
    margin-right: -0.75rem;   /* cancel the flex gap toward the capsule */
    margin-left: 0;
    padding: 0;
    border-width: 0;
    outline: none;
    pointer-events: none;
    box-shadow: none;
  }

  /* ── Dock: persistent at full scale across all states — hub-mode suppression removed ── */
  .liquid-dock-system {
    transition:
      transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity   480ms ease;
    transform-origin: center bottom;
  }

  /* ── Home FAB hub-active indicator — accent ring signals "you are here" on hub ── */
  #detached-home-btn.hub-active {
    color: var(--medical-primary);
    border-color: rgba(61,121,116,0.42);
    box-shadow:
      inset 0 1.5px 2px 0 rgba(255,255,255,0.80),
      inset 0 -1px 2px 0 rgba(255,255,255,0.17),
      0 2px 9px -1px rgba(0,0,0,0.055),
      0 10px 26px -5px rgba(0,0,0,0.09),
      0 0 0 2.5px var(--accent-tint);
  }
  @media (prefers-color-scheme: dark) {
    #detached-home-btn.hub-active {
      border-color: rgba(114,168,164,0.38);
      box-shadow:
        inset 0 1px 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 1px 0 rgba(0,0,0,0.30),
        0 3px 10px -1px rgba(0,0,0,0.24),
        0 10px 26px -4px rgba(0,0,0,0.33),
        0 0 0 2.5px rgba(114,168,164,0.22);
    }
  }

  /* ── Pill-build animation — capsule + tabs stream in from the Home FAB anchor ── */
  @keyframes _capsule-morph-open {
    0%   { transform: scaleX(0.04); opacity: 0; }
    100% { transform: scaleX(1);    opacity: 1; }
  }
  @keyframes _tab-stream-in {
    0%   { opacity: 0; transform: translateX(-14px) scale(0.72); }
    100% { opacity: 1; transform: none; }
  }

  .dock-capsule.stream-opening {
    transform-origin: left center;
    animation: _capsule-morph-open 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .dock-item.stream-in {
    animation: _tab-stream-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }


  /* ── State transition lock — kills pointer events for 480ms ── */
  .state-transitioning { pointer-events: none; }

  /* ── Header module label (cross-fades with logo — pure opacity, no Y movement) ── */
  .header-module-label {
    position: absolute;
    left: 1.25rem;
    top: calc(env(safe-area-inset-top) + 29px);
    transform: translateY(-50%);   /* centers within the 58px content band below safe-area */
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    color: var(--accent);
    letter-spacing: -0.3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
  }
  .header-module-label.visible {
    opacity: 1;
    pointer-events: none;
  }
  .logo {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .logo.dimmed { opacity: 0; pointer-events: none; }
  @keyframes _logo-enter {
    from { opacity: 0; translate: -10px 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  .logo.hub-entering {
    animation: _logo-enter 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* ── Hub page ── */
  #page-hub {
    padding-bottom: 3rem;
  }
  .hub-header {
    padding: 1.5rem 0 0.75rem;
  }
  .hub-subtitle { font-size: 15px; color: var(--text2); }

  .hub-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .hub-module-card {
    background: var(--glass);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition:
      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.28s ease,
      border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .hub-module-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--accent-glass);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }
  @media (hover: hover) {
    .hub-module-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-card), 0 14px 44px rgba(114,168,164,0.18);
      border-color: rgba(114,168,164,0.38);
    }
    .hub-module-card:hover::after { opacity: 1; }
  }
  .hub-module-card:active { transform: scale(0.97); }
  .hub-module-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glass);
    border: 1px solid var(--medical-border);
    color: var(--medical-primary);
    flex-shrink: 0;
  }
  .hub-module-icon svg { width: 28px; height: 28px; fill: currentColor; display: block; }
  .hub-module-name {
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    color: var(--text);
    letter-spacing: -0.4px;
    line-height: 1.2;
  }
  .hub-module-desc { font-size: 13px; color: var(--text2); line-height: 1.65; }
  .hub-module-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--divider);
    color: var(--text3);
    background: var(--surface-ghost);
    margin-top: 0.25rem;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .hub-module-badge.live {
    background: var(--accent-glass);
    border-color: rgba(114,168,164,0.28);
    color: var(--medical-primary);
  }

  /* ── Onboarding page ── */
  #page-onboarding {
    position: fixed;
    inset: 0;
    z-index: var(--z-onboarding);
    /* Explicit hex fallback first — Samsung Browser / older WebKit may not resolve
       CSS custom props inside the background shorthand reliably */
    background-color: #0c1014;
    background-image:
      radial-gradient(ellipse at 28% 18%, rgba(114,168,164,0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 75% 82%, rgba(104,184,119,0.10) 0%, transparent 50%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Override conflicting .page rules */
    max-width: none;
    margin: 0;
    padding: max(2rem, calc(env(safe-area-inset-top) + 1.5rem)) 1.5rem max(2rem, calc(env(safe-area-inset-bottom) + 1.5rem));
    overflow-y: auto;
    overflow-x: hidden;
  }
  @media (prefers-color-scheme: light) {
    #page-onboarding { background-color: #f5f3ef; }
  }
  #page-onboarding.active { display: flex; }

  .onboarding-card {
    width: 100%;
    max-width: 420px;
    background: var(--glass-strong);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .onboarding-logo {
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    color: var(--accent);
    letter-spacing: -0.8px;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 0.1rem;
  }
  .onboarding-logo span { color: var(--text); font-style: italic; }
  .onboarding-tagline { font-size: 13px; color: var(--text2); text-align: center; line-height: 1.6; }
  .onboarding-fields { display: flex; flex-direction: column; gap: 0.85rem; }
  .onboarding-divider {
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--text3); font-size: 11px;
  }
  .onboarding-divider::before,
  .onboarding-divider::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
  .onboarding-actions { display: flex; flex-direction: column; gap: 0.65rem; }
  .onboarding-google-btn {
    background: var(--medical-primary);
    color: #0c1014;
    border: none;
    font-family: -apple-system, 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 16px rgba(114,168,164,0.35), var(--shadow-btn);
  }
  @media (hover: hover) {
    .onboarding-google-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
  }
  .onboarding-google-btn:active { transform: scale(0.97); }
  .onboarding-google-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
  .onboarding-skip-btn {
    background: none;
    border: 1px solid var(--divider);
    color: var(--text2);
    font-family: -apple-system, 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
  }
  @media (hover: hover) {
    .onboarding-skip-btn:hover { background: var(--surface-subtle); border-color: var(--accent); color: var(--accent); }
  }
  .onboarding-skip-btn:active { transform: scale(0.97); }


  /* ── Module visibility toggle UI in settings ── */
  .module-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--divider);
  }
  .module-toggle-row:last-child { border-bottom: none; }
  .module-toggle-info { display: flex; flex-direction: column; gap: 2px; }
  .module-toggle-name { font-size: 14px; font-weight: 600; color: var(--text); }
  .module-toggle-desc { font-size: 11px; color: var(--text2); }
  .toggle-switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .toggle-track {
    position: absolute; inset: 0; border-radius: var(--radius-pill);
    background: var(--surface-mid); border: 1px solid var(--divider);
    cursor: pointer; transition: background 0.28s, border-color 0.28s;
  }
  .toggle-track::before {
    content: ''; position: absolute; left: 3px; top: 50%;
    transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%;
    background: var(--medical-muted);
    transition: left 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.28s;
  }
  .toggle-switch input:checked + .toggle-track { background: var(--accent-tint); border-color: var(--medical-primary); }
  .toggle-switch input:checked + .toggle-track::before { left: 21px; background: var(--medical-primary); }

  /* ── Planner GI Module ──────────────────────────────────────────────────── */

  .planner-flare-banner {
    display: none;
    background: linear-gradient(135deg, rgba(220,60,50,0.18), rgba(180,40,30,0.10));
    border: 1px solid rgba(220,60,50,0.30);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    animation: _flare-pulse 2.8s ease-in-out infinite;
  }
  .planner-flare-banner.visible { display: flex; align-items: flex-start; gap: 0.65rem; }
  .planner-flare-banner .flare-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .planner-flare-banner .flare-body { flex: 1; }
  .planner-flare-banner .flare-title { font-weight: 600; font-size: 14px; color: var(--status-danger); margin-bottom: 3px; }
  .planner-flare-banner .flare-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
  .planner-flare-banner .flare-link { font-size: 12px; color: var(--medical-primary); cursor: pointer; margin-top: 4px; display: inline-block; }
  @keyframes _flare-pulse {
    0%, 100% { border-color: rgba(220,60,50,0.30); }
    50%       { border-color: rgba(220,60,50,0.65); }
  }

  .planner-phase-banner {
    background: var(--glass);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
  }
  .planner-phase-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 0.5rem; }
  .planner-phase-stepper { display: flex; align-items: center; margin-bottom: 0.5rem; }
  .phase-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
  .phase-step-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--medical-muted); border: 2px solid var(--medical-border);
    transition: background 0.3s, border-color 0.3s;
  }
  .phase-step.active .phase-step-dot  { background: var(--medical-primary); border-color: var(--medical-primary); }
  .phase-step.done   .phase-step-dot  { background: var(--medical-primary); border-color: var(--medical-primary); opacity: 0.45; }
  .phase-step-label { font-size: 10px; color: var(--text3); text-align: center; line-height: 1.3; }
  .phase-step.active .phase-step-label { color: var(--medical-primary); font-weight: 600; }
  .phase-connector { flex: 1; height: 2px; background: var(--medical-border); margin-bottom: 14px; }
  .phase-connector.done { background: var(--medical-primary); opacity: 0.4; }
  .planner-phase-info { font-size: 12px; color: var(--text2); }
  .planner-phase-info strong { color: var(--text); }
  .planner-phase-action {
    margin-top: 0.75rem; font-size: 12px; font-weight: 500;
    color: var(--medical-primary); cursor: pointer; display: inline-block;
  }

  .planner-supp-strip {
    display: flex; gap: 0.6rem; overflow-x: auto;
    padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none;
  }
  .planner-supp-strip::-webkit-scrollbar { display: none; }
  .supp-chip {
    flex-shrink: 0;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    min-width: 112px; max-width: 150px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .supp-chip:active { transform: scale(0.95); }
  .supp-chip.taken  { background: rgba(114,168,164,0.12); border-color: rgba(114,168,164,0.35); }
  .supp-chip.skipped { opacity: 0.5; }
  .supp-chip-time   { font-size: 11px; color: var(--text3); margin-bottom: 2px; }
  .supp-chip-name   { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .supp-chip-dose   { font-size: 11px; color: var(--text2); margin-top: 2px; }
  .supp-chip-status { font-size: 10px; font-weight: 600; margin-top: 4px; letter-spacing: 0.04em; }
  .supp-chip-status.taken   { color: var(--medical-primary); }
  .supp-chip-status.pending { color: var(--text3); }
  .supp-chip-status.skipped { color: var(--status-warn); }

  .planner-search-bar {
    display: flex; align-items: center; gap: 0.65rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.7rem 0.9rem;
    cursor: pointer; transition: border-color 0.2s ease;
  }
  /* Restore text cursor when the bar contains a real focusable input */
  .planner-search-bar:focus-within { cursor: text; }
  .planner-search-bar:focus-within { border-color: rgba(114,168,164,0.5); }
  .planner-search-bar svg { width: 16px; height: 16px; fill: var(--text3); flex-shrink: 0; }
  .planner-search-bar input {
    flex: 1; background: none; border: none; outline: none;
    font-size: 14px; color: var(--text); font-family: inherit;
  }
  .planner-search-bar input::placeholder { color: var(--text3); }

  .planner-filter-chips { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.65rem; }
  .filter-chip {
    font-size: 12px; font-weight: 500; padding: 4px 11px;
    border-radius: var(--radius-pill); border: 1px solid var(--medical-border);
    color: var(--text2); background: transparent; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
  }
  .filter-chip:active { transform: scale(0.94); }
  /* Color applied only when chip is active (filter toggled on) */
  .filter-chip.fc-green.active   { background: var(--status-ok-glass); border-color: rgba(80,168,100,0.50); color: var(--status-ok); }
  .filter-chip.fc-amber.active   { background: var(--status-warn-glass); border-color: rgba(200,150,50,0.50); color: var(--status-warn); }
  .filter-chip.fc-red.active     { background: rgba(200,70,60,0.15);  border-color: rgba(200,70,60,0.50);  color: var(--status-danger); }
  .filter-chip.fc-trigger.active { background: rgba(200,100,50,0.15); border-color: rgba(200,100,50,0.45); color: var(--status-trigger); }
  /* Inactive chips show a subtle color dot via left border accent */
  .filter-chip.fc-green   { border-left: 3px solid rgba(80,168,100,0.45); }
  .filter-chip.fc-amber   { border-left: 3px solid rgba(200,150,50,0.45); }
  .filter-chip.fc-red     { border-left: 3px solid rgba(200,70,60,0.45);  }
  .filter-chip.fc-trigger { border-left: 3px solid rgba(200,100,50,0.40); }

  .food-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.65rem; margin-top: 0.85rem;
  }
  .food-card {
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.85rem; cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative; overflow: hidden;
  }
  .food-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .food-card.status-green::before { background: rgba(80,168,100,0.75); }
  .food-card.status-amber::before { background: rgba(200,150,50,0.75); }
  .food-card.status-red::before   { background: rgba(200,70,60,0.75); }
  .food-card:active { transform: scale(0.96); }
  .food-card-name { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
  .food-card-cat  { font-size: 11px; color: var(--text3); text-transform: capitalize; }
  .food-card-portion { font-size: 11px; color: var(--text2); margin-top: 4px; font-style: italic; }
  .food-card-trigger {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; color: var(--status-trigger);
    background: var(--status-trigger-glass); border: 1px solid rgba(200,100,50,0.25);
    border-radius: 4px; padding: 2px 5px; margin-top: 5px;
  }

  .food-detail-sheet {
    position: fixed; inset: 0; z-index: var(--z-sheet);
    pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  }
  .food-detail-sheet.open { opacity: 1; pointer-events: auto; }
  .food-detail-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
  .food-detail-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--medical-surface); border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.25rem 1.25rem 2.5rem;
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 72vh; overflow-y: auto;
  }
  .food-detail-sheet.open .food-detail-panel { transform: translateY(0); }
  .food-detail-handle { width: 36px; height: 4px; background: var(--medical-border); border-radius: 2px; margin: 0 auto 1.25rem; }
  .food-detail-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
  .food-detail-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .food-detail-icon.green { background: var(--status-ok-glass); }
  .food-detail-icon.amber { background: var(--status-warn-glass); }
  .food-detail-icon.red   { background: var(--status-danger-glass); }
  .food-detail-name { font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--text); letter-spacing: -0.3px; flex: 1; }
  .food-detail-status-tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); align-self: flex-start; }
  .food-detail-status-tag.green { background: var(--status-ok-glass); color: var(--status-ok); }
  .food-detail-status-tag.amber { background: var(--status-warn-glass); color: var(--status-warn); }
  .food-detail-status-tag.red   { background: var(--status-danger-glass);  color: var(--status-danger); }
  .food-detail-section { margin-bottom: 0.85rem; }
  .food-detail-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); margin-bottom: 4px; }
  .food-detail-section-value { font-size: 14px; color: var(--text2); line-height: 1.55; }
  .food-detail-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
  .food-detail-btn {
    flex: 1; padding: 0.75rem; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; font-family: inherit;
    border: none; cursor: pointer; transition: opacity 0.2s;
  }
  .food-detail-btn:active { opacity: 0.75; }
  .food-detail-btn.primary   { background: var(--medical-primary); color: #0c1014; }
  .food-detail-btn.secondary { background: var(--glass); color: var(--text); border: 1px solid var(--glass-border); }

  .food-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.85rem; }
  .food-list-item {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.75rem 0.85rem;
    cursor: pointer; transition: border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .food-list-item:active { transform: scale(0.98); }
  .fli-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .fli-dot.green { background: var(--status-ok); }
  .fli-dot.amber { background: var(--status-warn); }
  .fli-dot.red   { background: var(--status-danger); }
  .fli-info { flex: 1; min-width: 0; }
  .fli-name { font-size: 14px; color: var(--text); font-weight: 500; }
  .fli-meta { font-size: 12px; color: var(--text3); margin-top: 1px; }
  .fli-trigger { font-size: 10px; font-weight: 600; color: var(--status-trigger); }
  .food-list-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text3); font-size: 14px; line-height: 1.7; }

  .supp-card {
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 0.75rem;
  }
  .supp-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
  .supp-card-title { flex: 1; }
  .supp-card-name  { font-size: 15px; font-weight: 600; color: var(--text); }
  .supp-card-brand { font-size: 12px; color: var(--text3); margin-top: 1px; }
  .supp-card-type  {
    font-size: 11px; padding: 2px 7px; border-radius: var(--radius-pill);
    border: 1px solid var(--medical-border); color: var(--text3); flex-shrink: 0;
  }
  .supp-card-schedules { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
  .supp-sched-pill {
    font-size: 11px; color: var(--text2);
    background: var(--accent-glass); border: 1px solid var(--medical-border);
    border-radius: var(--radius-pill); padding: 2px 8px;
  }
  .supp-card-bar { margin-top: 0.75rem; height: 4px; background: var(--medical-muted); border-radius: 2px; overflow: hidden; }
  .supp-card-bar-fill { height: 100%; background: var(--medical-primary); border-radius: 2px; transition: width 0.45s ease; }
  .supp-card-stats { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--text3); }
  .supp-card-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
  .supp-action-btn {
    flex: 1; padding: 0.55rem; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; font-family: inherit;
    background: var(--glass); color: var(--text2);
    border: 1px solid var(--glass-border); cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .supp-action-btn.primary { background: rgba(114,168,164,0.12); color: var(--medical-primary); border-color: rgba(114,168,164,0.3); }
  .supp-action-btn.danger  { color: var(--status-danger); border-color: rgba(200,70,60,0.3); }
  .supp-action-btn:active  { opacity: 0.75; }

  .planner-form-overlay {
    position: fixed; inset: 0; z-index: var(--z-sheet);
    pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  }
  .planner-form-overlay.open { opacity: 1; pointer-events: auto; }
  .planner-form-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
  .planner-form-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--medical-surface); border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.25rem 1.25rem 2.5rem;
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh; overflow-y: auto;
  }
  .planner-form-overlay.open .planner-form-panel { transform: translateY(0); }
  .planner-form-handle { width: 36px; height: 4px; background: var(--medical-border); border-radius: 2px; margin: 0 auto 1.25rem; }
  .planner-form-title { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--text); margin-bottom: 1rem; }
  .planner-form-row { margin-bottom: 0.85rem; }
  .planner-form-row label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 4px; }
  .planner-form-row input,
  .planner-form-row select { width: 100%; padding: 0.65rem 0.75rem; box-sizing: border-box; background: var(--medical-surface); border: 1px solid var(--medical-border); border-radius: var(--radius-sm); color: var(--text); font-size: 16px; font-family: inherit; }
  .planner-sched-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
  .planner-sched-row  { display: flex; gap: 0.5rem; align-items: flex-end; }
  .planner-sched-row input { flex: 1; }
  .planner-sched-remove {
    background: none; border: 1px solid var(--medical-border);
    border-radius: var(--radius-sm); color: var(--text3); cursor: pointer;
    padding: 0.65rem 0.6rem; font-size: 16px; line-height: 1; flex-shrink: 0;
  }
  .planner-sched-add {
    background: none; border: 1px dashed var(--medical-border);
    border-radius: var(--radius-sm); color: var(--text3);
    padding: 0.5rem; width: 100%; cursor: pointer;
    font-size: 13px; font-family: inherit; margin-bottom: 0.85rem;
    transition: color 0.2s, border-color 0.2s;
  }
  .planner-sched-add:hover { color: var(--medical-primary); border-color: rgba(114,168,164,0.5); }
  .planner-form-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
  .planner-form-btn { flex: 1; padding: 0.75rem; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; font-family: inherit; border: none; cursor: pointer; transition: opacity 0.2s; }
  .planner-form-btn:active { opacity: 0.75; }
  .planner-form-btn.primary { background: var(--medical-primary); color: #0c1014; }
  .planner-form-btn.cancel  { background: var(--glass); color: var(--text2); border: 1px solid var(--glass-border); }

  .phase-card {
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 0.75rem;
  }
  .phase-option {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem; border-radius: var(--radius-sm);
    cursor: pointer; border: 2px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 0.5rem; -webkit-tap-highlight-color: transparent;
  }
  .phase-option:last-child { margin-bottom: 0; }
  .phase-option.selected { border-color: rgba(114,168,164,0.5); background: rgba(114,168,164,0.06); }
  .phase-option-radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--medical-border); flex-shrink: 0;
    transition: border-color 0.2s; display: flex; align-items: center; justify-content: center;
  }
  .phase-option.selected .phase-option-radio { border-color: var(--medical-primary); }
  .phase-option.selected .phase-option-radio::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--medical-primary); display: block;
  }
  .phase-option-name { font-size: 14px; font-weight: 600; color: var(--text); }
  .phase-option-desc { font-size: 12px; color: var(--text3); margin-top: 2px; line-height: 1.4; }

  .reintro-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0; border-bottom: 1px solid var(--divider);
  }
  .reintro-item:last-child { border-bottom: none; }
  .reintro-result-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .reintro-result-dot.pass    { background: var(--status-ok); }
  .reintro-result-dot.fail    { background: var(--status-danger); }
  .reintro-result-dot.partial { background: var(--status-warn); }
  .reintro-result-dot.pending { background: var(--text3); }
  .reintro-info { flex: 1; min-width: 0; }
  .reintro-food { font-size: 14px; font-weight: 500; color: var(--text); }
  .reintro-date { font-size: 12px; color: var(--text3); margin-top: 1px; }
  .reintro-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); flex-shrink: 0; }
  .reintro-badge.pass    { background: var(--status-ok-glass);  color: var(--status-ok); }
  .reintro-badge.fail    { background: var(--status-danger-glass);   color: var(--status-danger); }
  .reintro-badge.partial { background: var(--status-warn-glass);  color: var(--status-warn); }
  .reintro-badge.pending { background: var(--medical-muted);   color: var(--text3); }
  .reintro-delete-btn { background: none; border: none; color: var(--text3); cursor: pointer; padding: 4px 6px; font-size: 16px; }
  .reintro-edit-btn   { background: none; border: none; color: var(--text3); cursor: pointer; padding: 4px 6px; font-size: 15px; }

  /* Diary supplement check-in rows */
  .diary-supp-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0; border-bottom: 1px solid var(--divider);
  }
  .diary-supp-row:last-child { border-bottom: none; }
  .diary-supp-row.status-taken { opacity: 0.65; }
  .diary-supp-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; flex-wrap: wrap; }
  .diary-supp-name { font-size: 14px; font-weight: 500; color: var(--text); }
  .diary-supp-dose { font-size: 12px; color: var(--text3); background: var(--glass); border-radius: 4px; padding: 1px 6px; }
  .diary-supp-time { font-size: 12px; color: var(--text3); }
  .diary-supp-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .diary-supp-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--glass-border); background: var(--glass);
    font-size: 16px; font-weight: 600; cursor: pointer; color: var(--text2);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .diary-supp-btn.taken.active  { background: #22c87022; border-color: #22c870; color: #22c870; }
  .diary-supp-btn.skip.active   { background: #aaa4; border-color: #888; color: var(--text); }
  .diary-supp-btn:active        { transform: scale(0.9); }
  .diary-supp-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); }
  .diary-supp-badge.taken   { background: #22c87022; color: #22c870; }
  .diary-supp-badge.skipped { background: var(--medical-muted); color: var(--text3); }
  .diary-supp-badge.pending { color: var(--text3); }

  /* Phase color chips */
  .phase-color-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .phase-color-chip {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s;
  }
  .phase-color-chip.selected { border-color: var(--text); transform: scale(1.2); }
  .phase-color-chip:active   { transform: scale(0.9); }

  /* Phase milestone rows in form */
  .phase-milestone-row {
    display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
  }
  .phase-milestone-row input { height: 36px; padding: 0 8px; font-size: 14px; border-radius: var(--radius-sm); border: 1px solid var(--medical-border); background: var(--medical-surface); color: var(--text); font-family: inherit; }
  .pmr-del { flex-shrink: 0; width: 28px; height: 28px; background: none; border: 1px solid var(--glass-border); border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--text3); display: flex; align-items: center; justify-content: center; }
  .pmr-del:active { opacity: 0.6; }

  /* Danger button variant */
  .planner-form-btn.danger { background: #ff3b3022; color: var(--status-danger); border: 1px solid #ff3b3044; }
  .planner-form-btn.danger:active { opacity: 0.75; }

  /* Trigger toggle button */
  .food-detail-btn.trigger-toggle { background: #c8643222; color: #c86432; border: 1px solid #c8643244; }
  .food-detail-btn.trigger-toggle.active { background: #22c87022; color: #22c870; border-color: #22c87044; }
  .food-detail-btn.trigger-toggle:active { opacity: 0.75; }

  /* Edit phase button on phase block */
  .phase-edit-btn:active { opacity: 0.6; }

  .planner-insights { display: flex; flex-direction: column; gap: 0.5rem; }
  .insight-row {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); font-size: 13px; color: var(--text2); line-height: 1.5;
  }
  .insight-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

  .adherence-sheet {
    position: fixed; inset: 0; z-index: var(--z-sheet);
    pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  }
  .adherence-sheet.open { opacity: 1; pointer-events: auto; }
  .adherence-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
  .adherence-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--medical-surface); border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.25rem 1.25rem 2.5rem;
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .adherence-sheet.open .adherence-panel { transform: translateY(0); }
  .adherence-handle { width: 36px; height: 4px; background: var(--medical-border); border-radius: 2px; margin: 0 auto 1rem; }
  .adherence-supp-name   { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--text); margin-bottom: 4px; }
  .adherence-supp-detail { font-size: 13px; color: var(--text2); margin-bottom: 1.25rem; }
  .adherence-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .adherence-action-btn {
    padding: 0.85rem; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; font-family: inherit; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
  }
  .adherence-action-btn .btn-icon { font-size: 22px; }
  .adherence-action-btn.taken   { background: rgba(114,168,164,0.15); color: var(--medical-primary); border: 1px solid rgba(114,168,164,0.3); }
  .adherence-action-btn.skipped { background: var(--glass); color: var(--text2); border: 1px solid var(--glass-border); }
  .adherence-action-btn:active  { opacity: 0.75; }

  .planner-add-fab {
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom) + 0.85rem);
    right: 1rem; z-index: var(--z-header);
    width: 48px; height: 48px;
    background: var(--medical-primary); color: #0c1014;
    border-radius: 50%; border: none;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(114,168,164,0.35);
    cursor: pointer; font-size: 26px; font-weight: 300;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .planner-add-fab.visible { display: flex; }
  .planner-add-fab:active { transform: scale(0.91); }

  .planner-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text3); font-size: 14px; line-height: 1.7; }
  .planner-empty .empty-big-icon { font-size: 38px; margin-bottom: 0.75rem; }

  .reintro-form-overlay {
    position: fixed; inset: 0; z-index: var(--z-sheet);
    pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  }
  .reintro-form-overlay.open { opacity: 1; pointer-events: auto; }
  .reintro-form-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
  .reintro-form-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--medical-surface); border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.25rem 1.25rem 2.5rem;
    transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 75vh; overflow-y: auto;
  }
  .reintro-form-overlay.open .reintro-form-panel { transform: translateY(0); }

  /* ── Zona de peligro ── */
  .card.danger-zone-card { border-color: rgba(200,70,60,0.22); }
  .danger-zone-card .card-header { background: rgba(200,70,60,0.05); }

  .danger-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(200,70,60,0.10);
    border: 1.5px solid rgba(200,70,60,0.35);
    color: var(--status-danger);
    font-family: -apple-system, 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s ease;
  }
  .danger-btn:hover  { background: rgba(200,70,60,0.18); border-color: rgba(200,70,60,0.55); }
  .danger-btn:active { transform: scale(0.96); }

  /* ── Danger modals ── */
  .danger-modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    pointer-events: none; opacity: 0;
    transition: opacity 0.25s ease;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .danger-modal-overlay.open { opacity: 1; pointer-events: auto; }
  .danger-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.60); backdrop-filter: blur(5px); }
  .danger-modal-panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 520px;
    background: var(--medical-surface);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.5rem 1.5rem 2.5rem;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh; overflow-y: auto;
  }
  .danger-modal-overlay.open .danger-modal-panel { transform: translateY(0); }
  .danger-modal-icon { font-size: 36px; text-align: center; margin-bottom: 0.75rem; }
  .danger-modal-title {
    font-family: 'DM Serif Display', serif;
    font-size: 22px; color: var(--text);
    text-align: center; margin-bottom: 1rem; letter-spacing: -0.3px;
  }
  .danger-modal-body { font-size: 13px; color: var(--text2); line-height: 1.65; }
  .danger-modal-body p  { margin-bottom: 0.5rem; }
  .danger-modal-body ul { padding-left: 1.25rem; }
  .danger-modal-body li { margin-bottom: 3px; }
  .danger-modal-body code { font-size: 12px; background: var(--surface-mid); padding: 1px 5px; border-radius: 4px; color: var(--text); }
  .danger-modal-actions { display: flex; gap: 0.65rem; margin-top: 1.25rem; }
  .danger-modal-btn {
    flex: 1; padding: 0.8rem; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; font-family: inherit;
    border: none; cursor: pointer;
    transition: opacity 0.2s, transform 0.15s ease;
  }
  .danger-modal-btn:active { transform: scale(0.96); }
  .danger-modal-btn.cancel  { background: var(--glass); color: var(--text2); border: 1px solid var(--glass-border); }
  .danger-modal-btn.confirm { background: rgba(200,70,60,0.15); color: var(--status-danger); border: 1.5px solid rgba(200,70,60,0.40); }
  .danger-modal-btn.confirm:hover { background: rgba(200,70,60,0.25); }

  /* Snapshot list items */
  .snapshot-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 0.75rem 0.85rem;
    cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
  }
  .snapshot-item:hover  { border-color: rgba(114,168,164,0.4); background: var(--accent-glass); }
  .snapshot-item:active { transform: scale(0.98); }
  .snapshot-item-info   { flex: 1; min-width: 0; }
  .snapshot-item-name   { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .snapshot-item-date   { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .snapshot-item-badge  {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--accent-glass); color: var(--medical-primary);
    border: 1px solid rgba(114,168,164,0.28);
    flex-shrink: 0; white-space: nowrap;
  }
  .snapshot-item-badge.latest { background: rgba(104,184,119,0.15); color: var(--medical-accent); border-color: rgba(104,184,119,0.3); }

  /* ── Vitals placeholder ── */
  .vitals-placeholder {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--text2);
  }
  .vitals-placeholder .ph-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: var(--accent-glass);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medical-primary);
    border: 1px solid var(--medical-border);
  }
  .vitals-placeholder .ph-icon svg { width: 34px; height: 34px; fill: currentColor; display: block; }
  .vitals-placeholder h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 26px;
    color: var(--text);
    margin-bottom: 0.75rem;
    letter-spacing: -0.3px;
  }
  .vitals-placeholder p {
    font-size: 13px;
    line-height: 1.7;
    max-width: 340px;
    margin: 0 auto;
  }

  /* ── Warning symptoms banner ─────────────────────────────────────────────── */
  .planner-warning-banner {
    display: none;
    background: linear-gradient(135deg, rgba(192,0,0,0.14), rgba(160,0,0,0.08));
    border: 1.5px solid rgba(192,0,0,0.40);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    gap: 0.65rem;
    animation: _flare-pulse 2s ease-in-out infinite;
  }
  .planner-warning-banner.visible { display: flex; align-items: flex-start; }
  .warning-banner-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
  .warning-banner-body { flex: 1; }
  .warning-banner-title { font-weight: 700; font-size: 14px; color: #C00000; margin-bottom: 3px; }
  .warning-banner-desc  { font-size: 12px; color: var(--text2); line-height: 1.5; }
  .warning-banner-details summary { font-size: 12px; color: var(--medical-primary); cursor: pointer; margin-top: 6px; }

  /* ── GI Protocol chip ────────────────────────────────────────────────────── */
  .gi-protocol-chip {
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.01em;
  }

  /* ── GI Protocol timeline ────────────────────────────────────────────────── */
  .gi-phase-block { margin-bottom: 0; }
  .gi-phase-block.completed .gi-phase-header { opacity: 0.72; }

  .gi-phase-header {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.7rem 0.75rem;
    border-radius: var(--radius-xs);
    background: var(--surface-subtle);
    margin-bottom: 6px;
  }
  .gi-phase-status-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
  .gi-phase-header-body { flex: 1; }
  .gi-phase-name  { font-size: 14px; font-weight: 700; color: var(--text); }
  .gi-phase-dates { font-size: 11px; color: var(--text3); display: block; margin-top: 2px; }
  .gi-phase-desc  { font-size: 12px; color: var(--text2); margin-top: 3px; }

  .gi-phase-progress-bar {
    height: 4px; background: var(--divider); border-radius: 2px;
    margin: 0 0 8px 0; overflow: hidden;
  }
  .gi-phase-progress-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }

  .gi-milestones { padding: 0 0 2px 1rem; margin-bottom: 6px; }
  .gi-milestone {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 5px 4px; cursor: pointer; border-radius: 6px;
    transition: background 0.15s;
  }
  .gi-milestone:hover { background: var(--surface-subtle); }
  .gi-milestone-check { font-size: 13px; flex-shrink: 0; color: var(--text3); margin-top: 1px; }
  .gi-milestone.done .gi-milestone-check { color: var(--medical-primary); }
  .gi-milestone-body { flex: 1; }
  .gi-milestone-name { font-size: 13px; color: var(--text2); }
  .gi-milestone.done .gi-milestone-name { color: var(--text3); text-decoration: line-through; }

  .gi-phase-connector {
    width: 2px; height: 16px; margin: 0 0 6px 12px;
    border-left: 2px dashed; opacity: 0.35;
  }

  /* ── Notification toggle ─────────────────────────────────────────────────── */
  .notif-toggle { display: inline-flex; align-items: center; cursor: pointer; }
  .notif-toggle input { display: none; }
  .notif-toggle-track {
    width: 42px; height: 24px; background: var(--divider);
    border-radius: 12px; position: relative;
    transition: background 0.22s;
  }
  .notif-toggle input:checked + .notif-toggle-track { background: var(--medical-primary); }
  .notif-toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: left 0.22s cubic-bezier(0.34,1.56,0.64,1);
  }
  .notif-toggle input:checked ~ .notif-toggle-track .notif-toggle-thumb { left: 21px; }

  /* ── Analytics heatmap ───────────────────────────────────────────────────── */
  .adh-heatmap { display: flex; flex-direction: column; gap: 10px; }
  .adh-heatmap-row { display: flex; align-items: center; gap: 8px; }
  .adh-heatmap-name { font-size: 11px; color: var(--text2); width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adh-heatmap-cells { display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; }
  .adh-cell { width: 9px; height: 18px; border-radius: 2px; flex-shrink: 0; }
  .adh-cell.taken   { background: var(--medical-primary); }
  .adh-cell.skipped { background: var(--accent2); opacity: 0.6; }
  .adh-cell.empty   { background: var(--divider); }