:root {
            --bg: #f2f4f7;
            --ink: #1a2330;
            --muted: #5a6574;
            --line: #d4dae4;
            --surface: #fff;
            --accent: #1f4b7a;
            --danger: #8a1c1c;
            --ok: #0f5a2f;
            --focus: #0b6bcb;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: "Segoe UI", "Noto Sans", sans-serif;
            color: var(--ink);
            background:
                radial-gradient(1000px 420px at 0% -10%, #dce7f4 0%, transparent 55%),
                var(--bg);
            line-height: 1.45;
        }
        .shell { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
        header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
        h1 { margin: 0 0 6px; font-size: clamp(1.45rem, 4vw, 1.8rem); }
        .lede { margin: 0; color: var(--muted); max-width: 46ch; }
        .actions { display: flex; flex-wrap: wrap; gap: 8px; }
        button {
            font: inherit; cursor: pointer; border: 0; border-radius: 8px;
            padding: 9px 12px; background: var(--accent); color: #fff;
        }
        button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--line); }
        button.danger { background: var(--danger); }
        button:disabled { opacity: 0.55; cursor: not-allowed; }
        button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
        .panel {
            background: var(--surface); border: 1px solid var(--line);
            border-radius: 12px; padding: 16px; margin-top: 14px;
        }
        .panel h2 { margin: 0 0 6px; font-size: 1.12rem; }
        .hint { margin: 0 0 12px; color: var(--muted); font-size: 0.94rem; }
        .status { min-height: 1.3em; margin: 8px 0 0; color: var(--muted); }
        .status.error { color: var(--danger); }
        .status.ok { color: var(--ok); }
        .row {
            display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
            align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line);
        }
        .row:first-of-type { border-top: 0; padding-top: 0; }
        .row strong { display: block; }
        .meta { color: var(--muted); font-size: 0.88rem; margin: 2px 0 0; }
        .badge {
            display: inline-block; font-size: 0.78rem; padding: 2px 8px;
            border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
        }
        .badge.current { border-color: var(--accent); color: var(--accent); }
        .nav-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
        .nav-links a { color: var(--accent); }
        dl { margin: 0; display: grid; gap: 8px; }
        dt { font-weight: 600; }
        dd { margin: 0; color: var(--muted); }
        @media (max-width: 560px) {
            .row { flex-direction: column; }
        }
        .actions--spaced { margin-bottom: 12px; }