:root {
  --navy: #1F4D78;
  --navy-dark: #163957;
  --gold: #BE9632;
  --ink: #1d2733;
  --muted: #5b6878;
  --line: #d5dde6;
  --page: #eef2f6;
  --panel: #ffffff;
  --ok: #2f7a3e;
  --warn: #9a6a00;
  --bad: #b3261e;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--page);
}
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.5rem; background: var(--navy); color: #fff;
  border-bottom: 4px solid var(--gold);
}
.brand { font-family: "Calibri Light", Calibri, Carlito, sans-serif; font-size: 1.35rem; }
.mark { font-weight: 700; color: var(--gold); margin-right: .35rem; }
.who { font-size: .9rem; opacity: .9; }
main { max-width: 860px; margin: 1.5rem auto; padding: 0 1rem; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.panel.error { border-left: 5px solid var(--bad); }
h1, h2 { font-family: "Calibri Light", Calibri, Carlito, sans-serif; font-weight: 400; color: var(--navy); margin: 0 0 1rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
p { margin: .4rem 0 .8rem; max-width: 70ch; }

fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
legend { font-weight: 700; margin-bottom: .45rem; padding: 0; }

.seg { display: flex; flex-wrap: wrap; gap: 0; }
.seg legend { width: 100%; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; padding: .5rem 1rem; border: 1px solid var(--navy); margin-right: -1px;
  color: var(--navy); background: #fff;
}
.seg label:first-of-type span { border-radius: 4px 0 0 4px; }
.seg label:last-of-type span { border-radius: 0 4px 4px 0; }
.seg input:checked + span { background: var(--navy); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 1px; position: relative; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem 1.2rem; margin-bottom: 1.1rem; }
.f { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; }
input[type=text], input:not([type]), input[inputmode], select {
  font: inherit; font-weight: 400; padding: .5rem .6rem; border: 1px solid #9fb0c2; border-radius: 4px; background: #fff; color: var(--ink);
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

.opts label { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; cursor: pointer; }
.opts b { display: inline-block; min-width: 8.5rem; }
.checks { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.checks label { cursor: pointer; }
.note { color: var(--muted); font-size: .95rem; }

button {
  font: inherit; padding: .55rem 1.1rem; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--navy); background: #fff; color: var(--navy);
}
button.primary { background: var(--navy); color: #fff; }
button.primary:hover { background: var(--navy-dark); }
button:disabled { opacity: .55; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }

dl.kv { display: grid; grid-template-columns: 11rem 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.pw { font-family: Consolas, "Courier New", monospace; font-size: 1.05rem; }

ul.plain { margin: .2rem 0 1rem; padding-left: 1.2rem; }
.warn { border-left: 4px solid var(--warn); background: #fdf6e3; padding: .6rem .9rem; margin: 0 0 1rem; }
.warn ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.bad { border-left: 4px solid var(--bad); background: #fbeceb; padding: .6rem .9rem; margin: 0 0 1rem; }

ol.steps { list-style: none; padding: 0; margin: 0 0 1rem; }
ol.steps li { padding: .3rem 0 .3rem 1.8rem; position: relative; }
ol.steps li::before { position: absolute; left: .2rem; font-weight: 700; }
ol.steps li.run::before { content: "…"; color: var(--muted); }
ol.steps li.ok::before { content: "✓"; color: var(--ok); }
ol.steps li.fail::before { content: "✗"; color: var(--bad); }
ol.steps .detail { color: var(--muted); margin-left: .4rem; }

textarea {
  width: 100%; min-height: 14rem; font: inherit; padding: .6rem; border: 1px solid #9fb0c2; border-radius: 4px; resize: vertical;
}
.manual label { display: block; padding: .25rem 0; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 700; }

@media (max-width: 560px) {
  .bar { flex-direction: column; align-items: flex-start; }
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { margin-top: .4rem; }
  .opts b { min-width: 0; display: block; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }