:root {
    --bg: #f6f7f9; --panel: #ffffff; --ink: #14171c; --muted: #646b78;
    --line: #dfe3ea; --accent: #1f6feb; --accent-ink: #ffffff;
    --ok: #1a7f46; --warn: #a15c00; --err: #c0362c;
    --log-bg: #12151a; --log-ink: #c9d3e0;
    --radius: 10px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1216; --panel: #171b21; --ink: #e8ecf2; --muted: #9aa4b2;
      --line: #2a313b; --accent: #4a8fff; --accent-ink: #0b0e12;
      --ok: #4ec27e; --warn: #e0a33a; --err: #ff6b5e;
      --log-bg: #0b0e12; --log-ink: #b9c4d2;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 28px 16px 64px; background: var(--bg); color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .wrap { max-width: 860px; margin: 0 auto; }
  h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: -0.01em; }
  .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 24px; }
  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
  }
  label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted);
          margin-bottom: 6px; letter-spacing: 0.02em; text-transform: uppercase; }
  select {
    width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
  }
  input[type=text], input[type=date], input[type=password], input[type=number] {
    width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
  }
  input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
  .field { margin-bottom: 16px; }
  .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; text-transform: none;
          font-weight: 400; letter-spacing: 0; }
  button {
    font: inherit; font-weight: 600; font-size: 14.5px; padding: 10px 20px;
    border-radius: 7px; border: 1px solid transparent; cursor: pointer;
    background: var(--accent); color: var(--accent-ink);
  }
  button:hover:not(:disabled) { filter: brightness(1.08); }
  button:disabled { opacity: 0.5; cursor: not-allowed; }
  button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
  details { margin-bottom: 18px; }
  summary { cursor: pointer; font-size: 13.5px; color: var(--muted); user-select: none;
            padding: 4px 0; }
  details[open] summary { margin-bottom: 14px; }
  .check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; }
  .check input { margin-top: 3px; flex: none; }
  .check label { text-transform: none; font-size: 14px; color: var(--ink);
                 font-weight: 500; margin: 0; }
  .bar { height: 9px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 6px 0 16px; }
  .bar > i { display: block; height: 100%; width: 0%; background: var(--accent);
             border-radius: 99px; transition: width 0.35s ease; }
  .bar.indeterminate > i { width: 35% !important; animation: slide 1.3s ease-in-out infinite; }
  @keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
           gap: 14px; margin-bottom: 18px; }
  .stat .k { font-size: 11.5px; text-transform: uppercase; color: var(--muted);
             letter-spacing: 0.04em; font-weight: 600; }
  .stat .v { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums;
             margin-top: 2px; }
  .phase { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
           text-transform: uppercase; padding: 3px 9px; border-radius: 99px;
           background: var(--line); color: var(--muted); }
  .chart { margin: 0 0 18px; }
  .chart figcaption { display:flex; justify-content:space-between; align-items:baseline;
    gap:12px; margin-bottom:8px; flex-wrap:wrap; }
  .c-title { font-size:12px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em; }
  .c-key { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
  .sw { width:10px; height:10px; border-radius:3px; display:inline-block; }
  .sw.done { background: var(--accent); }
  .sw.todo { background: color-mix(in srgb, var(--muted) 35%, transparent); margin-left:8px; }
  .chart svg { width:100%; height:200px; display:block; overflow:hidden; }
  /* One transition per data change. Between chunks nothing is redrawn at all,
     so the curve holds perfectly still rather than shimmering. */
  .chart svg path { transition: d 450ms ease-out; }
  .chart svg rect { transition: width 450ms ease-out, x 450ms ease-out; }
  .chart svg line, .chart svg circle {
    transition: x1 450ms ease-out, x2 450ms ease-out, cx 450ms ease-out, opacity 200ms linear; }
  .c-axis { display:flex; justify-content:space-between; font-size:11.5px;
    color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums; }
  .hidden-for-now { display:none; }
  .signed { display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:var(--bg); }
  .signed b { font-weight:650; }
  .signed span span { color:var(--muted); font-size:13px; margin-left:8px; }
  .linkish { background:none; border:0; color:var(--accent); font-size:13.5px;
    padding:4px 6px; cursor:pointer; font-weight:600; }
  .term {
    background: var(--log-bg); border-radius: 9px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--log-ink) 18%, transparent);
    font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .term-bar { display:flex; align-items:center; gap:6px; padding:7px 11px;
    background: color-mix(in srgb, var(--log-ink) 10%, transparent); }
  .dot { width:10px; height:10px; border-radius:99px; display:inline-block; }
  .dot.r{background:#ff5f57} .dot.y{background:#febc2e} .dot.g{background:#28c840}
  .term-title { color: var(--log-ink); opacity:.65; font-size:11.5px; margin-left:6px; }
  .io { margin-left:auto; font-size:10.5px; letter-spacing:.1em; padding:2px 8px;
        border-radius:99px; color:var(--log-ink); opacity:.45; }
  .io.waiting     { background:rgba(254,188,46,.18); color:#febc2e; opacity:1; }
  .io.transferring{ background:rgba(40,200,64,.18);  color:#28c840; opacity:1; }
  .term-body { display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .term-col { padding:12px 14px; color: var(--log-ink); }
  .term-col + .term-col { border-left:1px solid color-mix(in srgb, var(--log-ink) 14%, transparent); }
  .term-h { color:#4ec27e; font-size:10.5px; letter-spacing:.14em; margin-bottom:8px; font-weight:700; }
  .kv { display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
  .kv span { opacity:.6; }
  .kv b { font-variant-numeric: tabular-nums; font-weight:600; }
  .term-break { display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid color-mix(in srgb, var(--log-ink) 14%, transparent); }
  .bk { padding:9px 14px; color:var(--log-ink); opacity:.75; font-size:11.5px; min-height:20px; }
  .bk + .bk { border-left:1px solid color-mix(in srgb, var(--log-ink) 14%, transparent); }
  .term .log { border-radius:0; border-top:1px solid color-mix(in srgb, var(--log-ink) 14%, transparent);
    max-height:150px; }
  @media (max-width:640px){ .term-body,.term-break{grid-template-columns:1fr}
    .term-col + .term-col,.bk + .bk{border-left:0;
      border-top:1px solid color-mix(in srgb, var(--log-ink) 14%, transparent);} }
  pre.log {
    background: var(--log-bg); color: var(--log-ink); border-radius: 8px;
    padding: 12px 14px; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    max-height: 260px; overflow: auto; margin: 0; white-space: pre-wrap;
    word-break: break-word;
  }
  .note { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 16px;
          border: 1px solid; }
  .note.err  { background: color-mix(in srgb, var(--err) 10%, transparent);
               border-color: color-mix(in srgb, var(--err) 35%, transparent); color: var(--err); }
  .note.ok   { background: color-mix(in srgb, var(--ok) 10%, transparent);
               border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
  .note.warn { background: color-mix(in srgb, var(--warn) 12%, transparent);
               border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
  .note strong { display: block; margin-bottom: 3px; }
  table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  td { padding: 5px 0; border-bottom: 1px solid var(--line); }
  td:first-child { color: var(--muted); }
  td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  tr:last-child td { border-bottom: 0; }
  .hide { display: none !important; }
  .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
         background: var(--bg); padding: 1px 5px; border-radius: 4px; }