:root {
  --ink: #17202a;
  --muted: #667085;
  --line: #d7dce2;
  --surface: #ffffff;
  --canvas: #f3f5f7;
  --blue: #1666c5;
  --blue-dark: #0d4d99;
  --green: #08783e;
  --green-bg: #e9f8f0;
  --red: #b42318;
  --red-bg: #fff0ee;
  --amber: #8a4b08;
  --amber-bg: #fff7df;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 1rem;
}

h1, h2, h3 { line-height: 1.2; }
h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.25rem); }
h2 { margin-top: .25rem; }
h3 { margin-bottom: .5rem; }
.eyebrow, .step-label { margin: 0 0 .3rem; color: var(--blue); font-weight: 750; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

main { max-width: 900px; margin: 0 auto; padding: 0 1rem 3rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.15rem, 4vw, 2rem); box-shadow: 0 4px 18px rgba(20, 30, 50, .06); }
.wizard-step { min-height: 360px; }
.hidden { display: none !important; }

.status { border-radius: 999px; padding: .45rem .8rem; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.status-offline { color: #5f2e09; background: #f5e7dc; }
.status-online { color: var(--green); background: var(--green-bg); }
.status-busy { color: var(--blue-dark); background: #e8f1fc; }

.notice { margin: 1rem 0; padding: .9rem 1rem; border-left: 5px solid; border-radius: 7px; }
.notice p { margin: .35rem 0 0; }
.danger { color: #7a271a; background: var(--red-bg); border-color: var(--red); }
.warning { color: #653c07; background: var(--amber-bg); border-color: #e19b16; }

button { appearance: none; border: 0; border-radius: 8px; padding: .75rem 1rem; font: inherit; font-weight: 750; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(22, 102, 197, .3); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }
.primary { color: white; background: var(--blue); }
.primary:hover:not(:disabled) { background: var(--blue-dark); }
.secondary { color: var(--blue-dark); background: #e7f0fb; }
.secondary:hover:not(:disabled) { background: #d5e6f8; }
.text-button { padding: .2rem; color: var(--blue); background: transparent; }
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1rem; }

.check-row { display: flex; align-items: flex-start; gap: .75rem; margin: 1.5rem 0; font-weight: 700; }
.check-row input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.info-panel { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
dt { font-weight: 700; } dd { margin: 0; overflow-wrap: anywhere; }
.pin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.pin-chip { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }
.board-guide { margin: 1.2rem 0; }
.board-image-wrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #eef2f5; }
.board-image { display: block; width: 100%; height: auto; }
.board-overlay { position: absolute; inset: 0; pointer-events: none; }
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.board-line { stroke: #ff3b30; stroke-width: 4; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.board-marker { position: absolute; width: clamp(17px, 2.5vw, 23px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid white; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 3px rgba(180, 35, 24, .9), 0 2px 5px rgba(0, 0, 0, .45); }
.board-marker-label { position: absolute; left: calc(100% + 7px); top: 50%; transform: translateY(-50%); padding: .14rem .38rem; border-radius: 4px; color: white; background: rgba(23, 32, 42, .92); font-size: clamp(.65rem, 1.6vw, .82rem); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.board-marker-label-left { left: auto; right: calc(100% + 7px); }
.board-guide-caption { margin: .45rem 0 0; color: var(--muted); font-size: .88rem; }
.firmware-file-list { margin: .5rem 0 0; padding-left: 1.4rem; color: var(--muted); }
.firmware-file-list code { color: var(--ink); }
.flash-progress-wrap { margin-top: 1.25rem; }
.flash-log { min-height: 90px; max-height: 180px; }
.muted, .result-details { color: var(--muted); }
.error-text { color: var(--red); font-weight: 650; }

.progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e6eaf0; }
.progress span { display: block; width: 0; height: 100%; background: var(--blue); transition: width .2s ease; }
.instruction, .instruction-list { margin: 1.3rem 0; padding: 1.1rem; border-radius: 9px; background: #edf4fc; font-size: 1.1rem; }
.instruction-list { padding-left: 2.5rem; }
.instruction-list li + li { margin-top: .5rem; }
.result { width: fit-content; margin-top: 1.25rem; padding: .45rem .9rem; border-radius: 8px; font-size: clamp(2rem, 10vw, 3.5rem); line-height: 1; font-weight: 900; letter-spacing: .04em; }
.result-pass { color: var(--green); background: var(--green-bg); }
.result-fail { color: var(--red); background: var(--red-bg); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: .85rem; }
.table-pass { color: var(--green); font-weight: 800; }
.table-fail { color: var(--red); font-weight: 800; }
pre { margin: .5rem 0; padding: 1rem; max-height: 320px; overflow: auto; border-radius: 8px; background: #111923; color: #e5edf7; font: .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.serial-log { min-height: 0; margin-top: 1rem; padding: 1rem; }
.serial-log summary { cursor: pointer; font-weight: 750; }
.log-actions { justify-content: space-between; }

@media (max-width: 560px) {
  .site-header { align-items: flex-start; }
  .status { margin-top: .2rem; }
  button { width: 100%; }
  .text-button { width: auto; }
  dl { grid-template-columns: 1fr; gap: .1rem; }
  dd { margin-bottom: .5rem; }
}