:root {
    --ink:        #191714;
    --ink-raised: #232019;
    --ink-line:   #353026;
    --chalk:      #F2EDE3;
    --chalk-dim:  #9C9384;
    --brass:      #C89440;
    --brass-soft: #6b4f20;
    --done:       #7FA05C;
    --warn:       #C4603F;
    --r: 10px;
    --pad: 16px;
  }

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

  html, body {
    margin: 0; padding: 0;
    background: var(--ink);
    color: var(--chalk);
    font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
  }

  .wrap { max-width: 620px; margin: 0 auto; padding: 0 var(--pad); }

  /* ---------- header ---------- */
  header {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(var(--ink) 78%, rgba(25,23,20,0));
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: 12px;
  }
  .hgrid { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .htitle { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
  .hmeta { font-size: 0.78rem; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }

  /* ---------- generic ---------- */
  button, input, select, textarea { font: inherit; color: inherit; }

  .btn {
    background: var(--ink-raised);
    border: 1px solid var(--ink-line);
    color: var(--chalk);
    border-radius: var(--r);
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 550;
  }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .btn.primary { background: var(--brass); border-color: var(--brass); color: #1a1509; }
  .btn.ghost { background: transparent; }
  .btn.danger { color: var(--warn); border-color: #4a2a20; }
  .btn.sm { padding: 6px 10px; font-size: 0.8rem; }
  .btn.wide { width: 100%; }

  .row { display: flex; gap: 8px; align-items: center; }
  .spread { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
  .grow { flex: 1; min-width: 0; }
  .muted { color: var(--chalk-dim); }
  .small { font-size: 0.8rem; }
  .stack > * + * { margin-top: 10px; }

  input[type="text"], input[type="number"], input[type="date"], textarea, select {
    background: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: 8px;
    padding: 9px 10px;
    width: 100%;
    font-variant-numeric: tabular-nums;
  }
  input:focus, textarea:focus, select:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: transparent; }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; }

  /* ---------- pair / exercise ---------- */
  .pairhead {
    display: flex; align-items: center; gap: 10px;
    margin: 26px 0 10px;
    color: var(--brass);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.04em;
  }
  .pairhead::after { content: ""; flex: 1; height: 1px; background: var(--brass-soft); opacity: 0.6; }
  .pairnote { color: var(--chalk-dim); font-size: 0.74rem; font-weight: 400; letter-spacing: 0; }

  .ex {
    background: var(--ink-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--r);
    margin-bottom: 8px;
    overflow: hidden;
  }
  .ex.allDone { border-color: #3d4a30; }

  .exhead {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
  }
  .exname { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
  .extarget { color: var(--chalk-dim); font-size: 0.78rem; margin-top: 2px; }
  .exlast { color: var(--chalk-dim); font-size: 0.74rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .extally {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--chalk-dim);
    padding-top: 2px;
  }
  .extally b { color: var(--done); font-weight: 650; }

  .exbody { padding: 0 14px 14px; }

  .setrow {
    display: grid;
    grid-template-columns: 22px 1fr 14px 1fr 44px 34px;
    gap: 7px;
    align-items: center;
    margin-bottom: 7px;
  }
  .setno { color: var(--chalk-dim); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: center; }
  .times { color: var(--chalk-dim); text-align: center; font-size: 0.8rem; }
  .setrow input { text-align: center; padding: 10px 4px; font-size: 1.02rem; font-weight: 550; }
  .setrow.done input { color: var(--done); border-color: #3d4a30; }

  .tick {
    height: 40px; border-radius: 8px;
    border: 1px solid var(--ink-line);
    background: transparent;
    color: var(--chalk-dim);
    font-size: 1rem; cursor: pointer;
    display: grid; place-items: center;
  }
  .tick.on { background: var(--done); border-color: var(--done); color: #16210b; }
  .xbtn {
    height: 40px; border: none; background: transparent;
    color: var(--chalk-dim); font-size: 1.1rem; cursor: pointer; border-radius: 8px;
  }

  .exnote { color: var(--chalk-dim); font-size: 0.78rem; font-style: italic; margin: 2px 0 10px; }

  /* ---------- nav ---------- */
  nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--ink-raised);
    border-top: 1px solid var(--ink-line);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
  }
  nav button {
    flex: 1; background: none; border: none; cursor: pointer;
    padding: 12px 4px 14px;
    color: var(--chalk-dim); font-size: 0.72rem; font-weight: 550;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  nav button.on { color: var(--brass); border-top-color: var(--brass); }
  nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- misc blocks ---------- */
  .card {
    background: var(--ink-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--r);
    padding: 14px;
  }
  .empty { text-align: center; color: var(--chalk-dim); padding: 48px 20px; }
  .empty p { margin: 0 0 16px; }

  .planpick { display: grid; gap: 8px; }
  .planpick button { text-align: left; padding: 14px; }
  .planpick .pname { font-weight: 600; font-size: 1rem; display: block; }
  .planpick .pdesc { color: var(--chalk-dim); font-size: 0.8rem; }

  .hitem { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
  .hdate { font-variant-numeric: tabular-nums; font-weight: 600; }

  pre.out {
    background: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--chalk-dim);
  }

  .toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(88px + env(safe-area-inset-bottom));
    background: var(--brass); color: #1a1509;
    padding: 10px 18px; border-radius: 99px;
    font-size: 0.85rem; font-weight: 600;
    z-index: 60; pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .toast { animation: pop .18s ease-out; }
    @keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } }
  }

  h2.sec { font-size: 0.95rem; font-weight: 650; margin: 24px 0 10px; }
  h2.sec:first-child { margin-top: 8px; }
  label.f { display: block; font-size: 0.78rem; color: var(--chalk-dim); margin-bottom: 4px; }