:root {
      --bg: #f2f7f4;
      --card: #ffffff;
      --ink: #16312a;
      --muted: #5c7a70;
      --line: #d3e3db;
      --primary: #0f7a5c;
      --primary-soft: #e2f4ec;
      --danger: #c4382b;
      --warning: #a86400;

      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: #0d1a16;
        --card: #14261f;
        --ink: #e4f5ee;
        --muted: #8fb3a5;
        --line: #244438;
        --primary: #4cd0a3;
        --primary-soft: #173b2e;
        --danger: #ff8272;
        --warning: #f0b04a;
      }
    }

    :root[data-theme="dark"] {
      --bg: #0d1a16;
      --card: #14261f;
      --ink: #e4f5ee;
      --muted: #8fb3a5;
      --line: #244438;
      --primary: #4cd0a3;
      --primary-soft: #173b2e;
      --danger: #ff8272;
      --warning: #f0b04a;
    }

    /* ---------- Base ---------- */
    * { box-sizing: border-box; }
    html { scroll-padding-top: env(safe-area-inset-top, 0px); }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 16px/1.5 "Nunito Sans", system-ui, sans-serif;
    }

    main {
      max-width: 860px;
      margin: 0 auto;
      padding: 22px 16px 48px;
    }

    h1 {
      margin: 0 0 6px;
      font: 800 clamp(28px, 5.5vw, 42px)/1.08 Fraunces, Georgia, serif;
    }

    h2 {
      margin: 16px 0 6px;
      font: 600 21px Fraunces, Georgia, serif;
    }

    .subtitle { margin: 0 0 16px; color: var(--muted); }
    .footnote { margin-top: 20px; color: var(--muted); }

    /* ---------- Components ---------- */
    .card {
      margin-bottom: 12px;
      padding: 16px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: flex-end;
    }

    .btn {
      padding: 8px 15px;
      font: 600 15px inherit;
      font-family: inherit;
      color: var(--ink);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      cursor: pointer;
    }

    .btn.primary {
      color: #fff;
      background: var(--primary);
      border-color: var(--primary);
    }

    .btn.theme-toggle { float: right; }

    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
      outline: 3px solid var(--primary);
      outline-offset: 2px;
    }

    input[type="text"],
    textarea {
      width: 100%;
      padding: 10px;
      font: inherit;
      color: var(--ink);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    textarea { min-height: 190px; }

    .tag {
      display: inline-block;
      margin-right: 6px;
      padding: 2px 9px;
      font-size: 12px;
      font-weight: 700;
      color: var(--primary);
      background: var(--primary-soft);
      border-radius: 10px;
    }

    .tag.changed { color: var(--warning); }

    .alert {
      margin: 10px 0;
      padding: 10px 12px;
      font-weight: 700;
      background: var(--primary-soft);
      border-left: 5px solid var(--danger);
      border-radius: 8px;
    }

    .item {
      margin: 8px 0;
      padding: 12px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .item.done { opacity: 0.5; text-decoration: line-through; }
    .item-meta { margin-top: 4px; font-size: 14px; color: var(--muted); }
    .item-actions { margin-top: 8px; }