:root {
    --ink: #1c2b3a;        /* primary text */
    --ink-2: #33475b;      /* secondary text */
    --muted: #64798e;      /* captions, hints */
    --muted-2: #55697e;    /* tagline, labels */
    --muted-3: #51677d;    /* links, hints */
    --brand: #2f6fed;      /* the button blue */
    --brand-deep: #1c4fd8; /* hover / focus */
    --brand-light: #5b9bff; /* gradient top */
    --brand-soft: #eef4ff;  /* selected option bg */
    --brand-soft-2: #f0f6ff; /* editing form bg */
    --taken: #22a06b;      /* success green */
    --taken-light: #4ecf8f; /* taken gradient top */
    --taken-ink: #147146;  /* done text */
    --taken-fill: #147146; /* filled stepper */
    --taken-fill-ink: #ffffff;
    --taken-soft: #e6f6ed; /* done row bg */
    --taken-text: #1d6f4c; /* done row text */
    --paper: #ffffff;      /* cards */
    --line: #d8e4ef;       /* borders */
    --line-soft: #e6edf4;  /* dashed dividers */
    --line-strong: #c3d2e0; /* off toggle border */
    --hover: #f2f7fc;      /* hover fills */
    --bg1: #eef4fb;        /* page gradient top */
    --bg2: #dcebf7;        /* page gradient bottom */
    --warn-bg: #fff7e0;
    --warn-line: #f0d17e;
    --warn-ink: #7a5b12;
    --danger: #a03424;
    --danger-line: #e6c4bb;
    --danger-soft: #fdf3f1;
    --danger-2: #b3402e;
    --toast-link: #9ec5ff; /* toast action link */
  }
  /* Dark palette: applies when the system setting is dark (no data-theme
     attribute) or when the user chose Dark (data-theme="dark"). The theme
     bootstrap script sets the attribute; system mode leaves it absent. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #e8eef5;        /* primary text */
      --ink-2: #c9d6e3;      /* secondary text */
      --muted: #90a5ba;
      --muted-2: #9db1c4;
      --muted-3: #9db1c4;
      --brand: #3f7ef7;
      --brand-deep: #5b8ff0;
      --brand-light: #6d9eff;
      --brand-soft: #1b2b4a;
      --brand-soft-2: #182538;
      --taken: #2fbf83;
      --taken-light: #4ecf8f;
      --taken-ink: #6fe0b1;
      --taken-fill: #1f8a5c;
      --taken-fill-ink: #eafff5;
      --taken-soft: #11332a;
      --taken-text: #6fe0b1;
      --paper: #15202e;
      --line: #2c3d52;
      --line-soft: #24344a;
      --line-strong: #35495f;
      --hover: #1c2938;
      --bg1: #0e1622;
      --bg2: #131e2c;
      --warn-bg: #3a3018;
      --warn-line: #6b5a26;
      --warn-ink: #ffd58a;
      --danger: #e06a55;
      --danger-line: #5a322a;
      --danger-soft: #3a1f1a;
      --danger-2: #e57662;
    }
    html:not([data-theme="light"]) .offline-badge { color: #ffd58a; background: #3a3018; border-color: #6b5a26; }
  }
  :root[data-theme="dark"] {
      --ink: #e8eef5;        /* primary text */
      --ink-2: #c9d6e3;      /* secondary text */
      --muted: #90a5ba;
      --muted-2: #9db1c4;
      --muted-3: #9db1c4;
      --brand: #3f7ef7;
      --brand-deep: #5b8ff0;
      --brand-light: #6d9eff;
      --brand-soft: #1b2b4a;
      --brand-soft-2: #182538;
      --taken: #2fbf83;
      --taken-light: #4ecf8f;
      --taken-ink: #6fe0b1;
      --taken-fill: #1f8a5c;
      --taken-fill-ink: #eafff5;
      --taken-soft: #11332a;
      --taken-text: #6fe0b1;
      --paper: #15202e;
      --line: #2c3d52;
      --line-soft: #24344a;
      --line-strong: #35495f;
      --hover: #1c2938;
      --bg1: #0e1622;
      --bg2: #131e2c;
      --warn-bg: #3a3018;
      --warn-line: #6b5a26;
      --warn-ink: #ffd58a;
      --danger: #e06a55;
      --danger-line: #5a322a;
      --danger-soft: #3a1f1a;
      --danger-2: #e57662;
  }
  html[data-theme="dark"] .offline-badge { color: #ffd58a; background: #3a3018; border-color: #6b5a26; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; } /* author display rules (e.g. .pill-btn) must not resurrect hidden elements */
  html, body { margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%);
    min-height: 100vh; min-height: 100dvh;
    color: var(--ink);
    display: flex; justify-content: center;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .app { width: 100%; max-width: 460px; }
  header { text-align: center; margin-bottom: 14px; }
  .header-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 6px; }
  .icon-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.25rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(28,52,84,.08);
    display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .icon-btn:hover { background: var(--hover); }
  .icon-btn:focus-visible { outline: 3px solid var(--brand-deep); }
  /* pressed state while the panel is open, so the button reads as active */
  .icon-btn[aria-expanded="true"] { background: var(--brand); border-color: var(--brand-deep); color: #ffffff; }
  .icon-btn[aria-expanded="true"]:hover { background: var(--brand-deep); }
  .icon-btn svg { display: block; height: 28px; width: auto; }
  h1 {
    font-weight: 800; font-size: 1.6rem; margin: 0 0 2px; letter-spacing: .2px;
  }
  h1 .capsule { display: inline-block; }
  h1 .capsule svg { display: inline-block; height: 1.02em; width: auto; vertical-align: -0.16em; margin-right: .24em; }
  .tagline {
    font-weight: 800; font-size: .98rem; letter-spacing: .2px;
    color: var(--muted-2); margin: 0 0 4px;
  }
  #todayLabel { color: var(--muted-2); font-size: .88rem; }
  .today-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
  .offline-badge {
    color: #8a5a00; background: #fff4d6; border: 1px solid #f0d98a;
    font-size: .72rem; line-height: 1.4; padding: 1px 9px; border-radius: 999px;
  }

  .card {
    background: var(--paper); border-radius: 20px;
    box-shadow: 0 8px 28px rgba(28, 52, 84, .10);
    padding: 24px 20px; margin-bottom: 16px;
  }
  .warning {
    background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
    border-radius: 12px; padding: 10px 14px; font-size: .9rem; margin-bottom: 16px;
  }

  .status { text-align: center; }

  .pill-btn {
    width: min(68vw, 250px); height: min(68vw, 250px);
    border: none; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--brand-light), var(--brand) 70%);
    color: var(--paper); cursor: pointer;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    box-shadow: 0 12px 26px rgba(47, 111, 237, .35), inset 0 -6px 12px rgba(0,0,0,.12);
    transition: transform .08s ease, background .3s ease;
    touch-action: manipulation; user-select: none;
  }
  .pill-btn:active { transform: scale(.96); }
  .pill-btn:focus-visible { outline: 4px solid var(--brand-deep); outline-offset: 4px; }
  .pill-btn .icon { font-size: 3.2rem; line-height: 1; }
  .pill-btn .icon svg { display: block; height: 3.3rem; width: auto; }
  .pill-btn .label { font-size: 1.4rem; font-weight: 800; letter-spacing: .5px; max-width: 75%; line-height: 1.15; }
  .pill-btn .label.long { font-size: 1.05rem; }
  .pill-btn.taken {
    background: radial-gradient(circle at 30% 25%, var(--taken-light), var(--taken) 70%);
    box-shadow: 0 12px 26px rgba(34, 160, 107, .35), inset 0 -6px 12px rgba(0,0,0,.12);
  }
  .pill-btn:disabled { opacity: .45; cursor: default; animation: none; }
  .pill-btn:disabled:active { transform: none; }
  @keyframes breathe {
    0%, 100% { box-shadow: 0 12px 26px rgba(47,111,237,.35), inset 0 -6px 12px rgba(0,0,0,.12); }
    50%      { box-shadow: 0 12px 38px rgba(47,111,237,.55), inset 0 -6px 12px rgba(0,0,0,.12); }
  }
  .pill-btn:not(.taken):not(:disabled) { animation: breathe 2.4s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .pill-btn { animation: none; }
    * { transition: none !important; }
  }

  .state-label { margin-top: 14px; font-size: 1.05rem; color: var(--ink-2); min-height: 1.4em; }
  .undo {
    margin-top: 8px; background: none; border: none; color: var(--muted-3);
    font-size: .95rem; text-decoration: underline; cursor: pointer; padding: 6px 10px;
  }
  .undo:hover { color: var(--danger-2); }
  .undo:focus-visible { outline: 2px solid var(--brand-deep); }

  /* per-pill palette (same in both themes) */
  :root {
    --pc-red: #d0453e; --pc-orange: #cf7a1a; --pc-amber: #a8821a;
    --pc-green: #379a50; --pc-teal: #2b9a8e; --pc-blue: #3a7bd6;
    --pc-purple: #7d52cf; --pc-pink: #c44f8a;
  }
  .pill-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; flex: none;
    background: var(--pc, var(--muted));
    margin-right: 6px; position: relative; top: -1px;
  }
  .swatch-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
  .swatch {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid transparent; background: var(--sc);
    cursor: pointer; padding: 0;
  }
  .swatch.selected { border-color: var(--ink); }
  .swatch-none { background: transparent; border: 2px dashed var(--muted); }
  .swatch-red { --sc: var(--pc-red); } .swatch-orange { --sc: var(--pc-orange); }
  .swatch-amber { --sc: var(--pc-amber); } .swatch-green { --sc: var(--pc-green); }
  .swatch-teal { --sc: var(--pc-teal); } .swatch-blue { --sc: var(--pc-blue); }
  .swatch-purple { --sc: var(--pc-purple); } .swatch-pink { --sc: var(--pc-pink); }
  /* multi-pill hero: one independent row per pill (shown when 2+ active pills) */
  .hero-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .hero-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 72px; padding: 12px 16px;
    border: none; border-radius: 16px; cursor: pointer;
    background: radial-gradient(120% 200% at 15% 0%, var(--brand-light), var(--brand) 70%);
    color: var(--paper); box-shadow: 0 6px 16px rgba(47, 111, 237, .30);
    text-align: left; touch-action: manipulation; user-select: none;
    font: inherit;
  }
  .hero-row:active { transform: scale(.985); }
  .hero-row:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
  .hero-row .icon { font-size: 1.7rem; line-height: 1; flex: none; color: var(--pc, currentColor); }
  .hero-row .icon svg { display: block; height: 1.85rem; width: auto; }
  .hero-row .main { flex: 1; min-width: 0; }
  .hero-row .name {
    display: block; font-size: 1.1rem; font-weight: 800; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hero-row .sub {
    display: block; font-size: .82rem; opacity: .92; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hero-row .chip {
    flex: none; font-size: .8rem; font-weight: 700; white-space: nowrap;
    background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 11px;
  }
  .hero-row.done, .hero-row:disabled {
    background: var(--taken-soft); color: var(--taken-text); box-shadow: none; cursor: default;
  }
  .hero-row.done:active { transform: none; }
  .hero-row.done .sub { opacity: .8; }
  .hero-row .sub.missed { color: var(--danger); }
  .hero-row.done .chip { background: var(--taken); color: var(--paper); }

  /* today + recently taken (main page) */
  .recent-title, .settings-title, .bm-title, .help-title {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted-2); margin: 0 0 10px;
  }
  .help-list { margin: 0 0 8px; padding-left: 18px; font-size: .95rem; color: var(--ink-2); }
  .help-list li { margin-bottom: 6px; }
  #helpPanel .data-heading { margin-top: 16px; }
  .faq-q { font-size: .95rem; font-weight: 600; color: var(--ink); margin: 12px 0 2px; }
  .faq-a { font-size: .9rem; color: var(--ink-2); margin: 0; }
  .help-text { font-size: .9rem; color: var(--ink-2); margin: 0 0 8px; }
  .version-line { font-size: .75rem; color: var(--muted); margin: 2px 0 0; }
  .share-url {
    display: inline-block; margin: 0 0 4px; padding: 6px 10px;
    background: var(--hover); border: 1px solid var(--line-soft); border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem; color: var(--ink-2); word-break: break-all;
  }
  .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 2px; }
  .qr-wrap canvas { display: block; border: 1px solid var(--line-soft); border-radius: 10px; image-rendering: pixelated; }
  .qr-caption { font-size: .78rem; color: var(--muted); margin: 0; }
  .recent-list { list-style: none; margin: 0; padding: 0; }
  .recent-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 4px; border-bottom: 1px dashed var(--line-soft);
  }
  .recent-row:last-child { border-bottom: none; }
  .recent-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .recent-main { font-weight: 600; color: var(--ink-2); font-size: 1rem; }
  .recent-sub { font-size: .82rem; color: var(--muted); }
  .recent-time { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .muted { color: var(--muted); font-weight: 400; }

  /* today rows */
  .today-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px; border-bottom: 1px dashed var(--line-soft);
  }
  .today-row:last-child { border-bottom: none; }
  .today-row.done { background: var(--taken-soft); border: 0; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
  .today-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .today-name {
    font-weight: 600; color: var(--ink-2); font-size: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .today-sub { font-size: .82rem; color: var(--muted); }
  .today-sub.done { color: var(--taken-ink); font-weight: 600; }
  .today-sub.missed { color: var(--danger); font-weight: 600; }
  .missed-btn {
    flex: none; border: 1px solid var(--line); background: none; color: var(--muted-2);
    border-radius: 10px; padding: 4px 10px; font-size: .8rem; font-weight: 600; cursor: pointer;
  }
  .missed-btn:hover { background: var(--hover); }
  .missed-btn:focus-visible { outline: 3px solid var(--brand-deep); }
  .missed-btn.on { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
  .adhere { font-size: .75rem; color: var(--muted); white-space: nowrap; }
  .toggle-pair { display: flex; gap: 6px; flex: none; }

  /* settings */
  .time-format { border: none; margin: 0; padding: 0; }
  .time-format legend { font-size: .95rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
  .option-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: 8px; cursor: pointer; font-size: .98rem; color: var(--ink-2);
  }
  .option-row.selected { border-color: var(--brand); background: var(--brand-soft); }
  .option-row input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }
  .option-note { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
  .flash { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 10px; }
  .remind-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; }
  .remind-status .option-note { flex-basis: 100%; }
  .remind-status .option-note { margin: 8px 0 0; }

  /* pills manager (settings) */
  .pills-section { margin-bottom: 14px; }
  .pill-list { list-style: none; margin: 0 0 8px; padding: 0; }
  .pill-item {
    display: flex; flex-direction: column; gap: 8px;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px;
  }
  .pill-item-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .pill-item-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .pill-item-name {
    font-weight: 600; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pill-item-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pill-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .pill-item-actions .data-btn { padding: 7px 10px; font-size: .85rem; }
  .pill-item-actions .move { padding: 7px 8px; font-size: 1rem; line-height: 1; }
  .pill-empty-note { font-size: .9rem; color: var(--muted); padding: 4px 2px 10px; }
  .pill-form { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
  .form-label { display: block; font-size: .95rem; font-weight: 600; color: var(--ink-2); margin: 10px 0 6px; }
  .form-label:first-child { margin-top: 4px; }
  .pill-form input[type="text"] {
    width: 100%; border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; font-size: 1rem; color: var(--ink-2); background: var(--paper);
  }
  .pill-form input[type="text"]::placeholder { color: var(--muted); }
  .pill-form input[type="text"]:focus-visible { outline: 3px solid var(--brand-deep); }
  .stepper { display: flex; align-items: center; gap: 10px; }
  .stepper-btn {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
    font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0;
  }
  .stepper-btn:hover { background: var(--hover); }
  .stepper-btn:disabled { opacity: .35; cursor: default; }
  .stepper-btn:focus-visible { outline: 3px solid var(--brand-deep); }
  .stepper-val { font-weight: 700; font-size: 1.1rem; min-width: 1.2em; text-align: center; }
  .stepper-unit { font-size: .85rem; color: var(--muted); }
  .dose-times-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
  .dose-times-row input[type="time"] {
    border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px;
    font-size: .95rem; background: var(--paper); color: var(--ink);
  }
  .dose-cell { display: inline-flex; align-items: center; gap: 4px; }
  .dose-cell input[type="time"] { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; font-size: .95rem; background: var(--paper); color: var(--ink); }
  .mute-btn {
    background: none; border: 1px solid var(--line); border-radius: 8px;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand);
  }
  .mute-btn.off { color: var(--muted); border-style: dashed; }
  .mute-btn:hover { border-color: var(--ink-2); }
  .mute-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .form-actions { display: flex; gap: 8px; margin-top: 14px; }
  .form-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .form-title-row .data-heading { margin: 0; }
  .form-badge {
    display: inline-block; background: var(--brand); color: var(--paper);
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    padding: 3px 10px; border-radius: 999px;
  }
  .pill-form.editing { border-color: var(--brand); background: var(--brand-soft-2); }

  .data-block { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
  .data-heading {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted-2); margin: 0 0 8px;
  }
  .data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .data-btn {
    padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--paper); color: var(--ink-2); font-size: .92rem; font-weight: 600; cursor: pointer;
  }
  .data-btn:hover { background: var(--hover); }
  .data-btn:focus-visible { outline: 3px solid var(--brand-deep); }
  .data-btn.danger { color: var(--danger); border-color: var(--danger-line); }
  .data-btn.danger:hover { background: var(--danger-soft); }
  .data-btn.danger.armed { background: var(--danger); border-color: var(--danger); color: var(--paper); }
  .data-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--paper); }
  .data-btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
  /* visually hidden but still focusable, keyboard users can import */
  #importFile {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  }

  /* bookmark instructions */
  .bm-intro { font-size: .92rem; color: var(--muted-3); margin: 0 0 10px; }
  .bm-steps { margin: 0; padding-left: 20px; }
  .bm-steps li { margin-bottom: 8px; font-size: .95rem; color: var(--ink-2); }
  .bm-steps li:last-child { margin-bottom: 0; }

  /* toast */
  .toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(12px);
    background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px;
    font-size: .92rem; box-shadow: 0 8px 24px rgba(28,52,84,.3);
    opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
    z-index: 10; max-width: calc(100vw - 32px); text-align: center;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
  .toast-action {
    background: none; border: none; padding: 0; margin-left: 10px;
    color: var(--toast-link); font-size: .95rem; font-weight: 700; cursor: pointer;
  }
  .toast-action:focus-visible { outline: 2px solid var(--toast-link); outline-offset: 2px; }
  /* the "reload for new version" action: bigger and filled, so it is easy to see */
  .toast-action.big {
    margin-left: 12px; padding: 7px 16px; border-radius: 999px;
    background: var(--brand); color: #ffffff; font-size: 1rem;
  }
  .toast-action.big:focus-visible { outline-color: var(--brand-deep); }

  .history-toggle {
    background: none; border: 0; border-radius: 8px; padding: 4px 6px;
    font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--muted-2); cursor: pointer;
  }
  .history-toggle:hover, .history-toggle:focus-visible { color: var(--ink-2); }
  .history-toggle:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
  .hist-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
  .showall-btn {
    background: none; border: none; color: var(--brand);
    font-size: .85rem; cursor: pointer; padding: 4px 8px;
  }
  .showall-btn:hover { text-decoration: underline; }
  .showall-btn:focus-visible { outline: 3px solid var(--brand-deep); }
  .stats { display: flex; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
  .onboard { margin: 0 0 14px; }
  .onboard-steps { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
  .onboard-steps li { margin-bottom: 6px; }
  .stat-window { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
  .stat-window-label { font-size: .8rem; color: var(--muted); }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
  .seg-btn {
    border: 0; background: transparent; color: var(--ink-2);
    font-size: .8rem; padding: 5px 10px; cursor: pointer;
  }
  .seg-btn + .seg-btn { border-left: 1px solid var(--line); }
  .seg-btn.on { background: var(--ink); color: var(--paper); }
  .stat { flex: 1; background: var(--hover); border-radius: 12px; padding: 10px 6px; text-align: center; }
  .stat .num { font-size: 1.3rem; font-weight: 700; }
  .stat .cap { font-size: .78rem; color: var(--muted-3); }

  #historyList { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
  .row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); font-size: .98rem; }
  .row:last-child { border-bottom: none; }
  .row-date { flex: 1; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-status { font-weight: 600; color: var(--muted); white-space: nowrap; }
  .row.done .row-status { color: var(--taken-ink); }
  .row.pre .row-status { font-weight: 400; }
  .row-month {
    list-style: none; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); padding: 12px 8px 4px;
  }
  .row-day {
    list-style: none; font-size: .82rem; font-weight: 700; color: var(--ink-2);
    padding: 10px 8px 2px;
  }
  .row-day:first-child { padding-top: 2px; }
  .empty-note { color: var(--muted); font-weight: 400; }
  .row-toggle {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    border: 2px solid var(--line-strong); background: var(--paper); color: var(--muted-3);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0;
  }
  .row-toggle:hover { background: var(--hover); border-color: var(--muted); color: var(--ink-2); }
  .row-toggle.on { border-color: var(--taken-fill); background: var(--taken-fill); color: var(--taken-fill-ink); }
  .row-toggle.on:hover { filter: brightness(.9); }
  .row-toggle:focus-visible { outline: 3px solid var(--brand-deep); }

  /* last-backup line + doctor summary */
  .import-preview { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
  .import-preview-lines { font-size: .85rem; color: var(--ink-2); margin: 0 0 10px; line-height: 1.6; white-space: pre-line; }
  .import-preview .data-actions { margin-top: 0; }
  .backup-line { font-size: .85rem; color: var(--muted-3); margin: 10px 0 0; }
  .backup-line.warn { color: var(--warn-ink); font-weight: 600; }
  .backup-line#dataStats { margin-top: 2px; }
  .footer-backup { margin: 8px 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; }
  .footer-export { padding: 4px 12px; font-size: .8rem; border-radius: 10px; }
  .sum-pill { margin: 0 0 18px; }
  .sum-pill h3 { font-size: 1.05rem; margin: 0 0 2px; }
  .sum-meta { font-size: .85rem; color: var(--muted-3); margin: 0 0 8px; }
  table.sum-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
  table.sum-table th {
    text-align: left; color: var(--muted); font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; border-bottom: 1px solid var(--line);
  }
  table.sum-table td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); }
  td.sum-ok { color: var(--taken-ink); font-weight: 600; }
  td.sum-part { color: var(--warn-ink); font-weight: 600; }
  td.sum-miss { color: var(--danger); }
  td.sum-pre { color: var(--muted); }
  .sum-empty { color: var(--muted); }
  .sum-foot { font-size: .8rem; color: var(--muted-3); margin: 14px 0 0; }

  /* history month calendar */
  .hist-cal { margin: 0 0 16px; }
  .cal-month { margin: 0 0 14px; }
  .cal-month h3 {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); margin: 0 0 6px;
  }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-dow { font-size: .68rem; color: var(--muted); text-align: center; font-weight: 600; }
  .cal-cell {
    aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--muted); background: var(--hover);
    border: 0; padding: 0; cursor: pointer; font-family: inherit;
  }
  .cal-cell.empty { background: none; }
  .cal-cell.full { background: var(--taken-soft); color: var(--taken-text); font-weight: 600; }
  .cal-cell.part { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
  .cal-cell.miss { background: var(--danger-soft); color: var(--danger); }
  .cal-cell.today { outline: 2px solid var(--brand); outline-offset: -2px; }
  .cal-cell.sel { outline: 2px solid var(--ink-2); outline-offset: -1px; }
  .cal-legend { display: flex; gap: 12px; font-size: .72rem; color: var(--muted-3); margin-top: 8px; }
  .cal-legend span::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
    margin-right: 4px; vertical-align: baseline;
  }
  .cal-legend .l-full::before { background: var(--taken-soft); border: 1px solid var(--taken-ink); }
  .cal-legend .l-part::before { background: var(--warn-bg); border: 1px solid var(--warn-line); }
  .cal-legend .l-miss::before { background: var(--danger-soft); border: 1px solid var(--danger-line); }
  /* 30-day bars (15 x 2) */
  .hist-bars { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; margin: 10px 0 4px; }
  .bar-cell { aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: 4px; background: var(--hover); cursor: pointer; }
  .bar-cell.empty { background: none; border: 1px dashed var(--line); }
  .bar-cell.full { background: var(--taken-soft); border: 1px solid var(--taken-ink); }
  .bar-cell.part { background: var(--warn-bg); border: 1px solid var(--warn-line); }
  .bar-cell.miss { background: var(--danger-soft); border: 1px solid var(--danger-line); }
  .bar-cell.today { outline: 2px solid var(--brand); outline-offset: -1px; }
  .bar-cell.sel { outline: 2px solid var(--ink-2); outline-offset: 1px; }
  /* day detail (tap a day in the bars or calendar) */
  .day-detail { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
  .dd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .dd-head h3 { margin: 0; font-size: .95rem; }
  .dd-close { border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; }
  .dd-row { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 0; font-size: .88rem; }
  .dd-name { font-weight: 600; color: var(--ink-2); }
  .dd-st { color: var(--muted-2); text-align: right; }
  .dd-none { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
  /* year view: 12 month tiles */
  .missed-line { color: var(--muted); font-size: .82rem; margin: 0 0 10px; line-height: 1.5; }
  .missed-line strong { color: var(--ink-2); font-weight: 600; }
  .year-view { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 14px; }
  .year-tile {
    border: 1px solid var(--line); background: var(--paper); border-radius: 8px;
    padding: 6px 4px; font: inherit; color: var(--ink); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
  }
  .year-tile .m { font-size: .72rem; font-weight: 600; color: var(--muted); }
  .year-tile .p { font-size: .82rem; font-weight: 700; }
  .year-tile.none { opacity: .45; cursor: default; }
  .year-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  /* pill list sections (active / paused / ended) */
  .pill-section-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted-3); margin: 12px 0 4px;
    list-style: none;
  }
  .pill-item.dimmed { opacity: .7; }

  /* print: show only the doctor summary */
  @media print {
    :root:not([data-theme="light"]), :root[data-theme="dark"] { /* always print light: paper, not a dark screen */
      --ink: #1c2b3a; --ink-2: #33475b; --muted: #64798e; --muted-2: #55697e;
      --muted-3: #51677d; --paper: #ffffff; --line: #d8e4ef; --line-soft: #e6edf4;
      --line-strong: #c3d2e0; --taken-ink: #147146; --taken-text: #1d6f4c;
      --taken-soft: #e6f6ed; --warn-ink: #7a5b12; --warn-bg: #fff7e0;
      --danger: #a03424; --danger-soft: #fdf3f1; --bg1: #ffffff; --bg2: #ffffff;
    }
    body { background: #ffffff; }
    body * { visibility: hidden; }
    #summaryPanel, #summaryPanel * { visibility: visible; }
    #summaryPanel { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; }
    #summaryPrintBtn, #summaryCopyBtn, #summaryCloseBtn { display: none; }
    #sheetPanel, #sheetPanel * { visibility: visible; }
    #sheetPanel { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; }
    #sheetPrintBtn, #sheetCloseBtn { display: none; }
    #sheetPanel .sheet-nav { display: none; }
  }

  /* monthly sheet */
  .sheet-nav { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 10px 0; }
  .sheet-nav .data-btn { padding: 4px 10px; font-size: .8rem; border-radius: 10px; }
  #sheetMonthLabel { font-weight: 600; min-width: 110px; text-align: center; }
  .sheet-pills { font-size: .82rem; color: var(--muted-2); margin: 0 0 8px; }
  .sheet-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .sheet-dow { font-size: .68rem; color: var(--muted); text-align: center; font-weight: 600; }
  .sheet-cell {
    border: 1px solid var(--line-soft); border-radius: 8px; min-height: 46px; padding: 4px 3px;
    font-size: .7rem; color: var(--muted); background: var(--paper);
  }
  .sheet-cell.empty { border: none; background: none; }
  .sheet-cell .num { font-weight: 600; }
  .sheet-cell.today { border-color: var(--brand); }
  .sheet-dot { display: inline-block; margin: 1px; font-size: .8rem; line-height: 1; }
  .sheet-dot.full { color: var(--taken-ink); }
  .sheet-dot.part { color: var(--warn-ink); }
  .sheet-dot.none { color: var(--muted-3); }

  footer { text-align: center; color: var(--muted-2); font-size: .8rem; }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  }