:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f3f4f6; color: #171717; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
main { width: min(680px, 100%); margin: 0 auto; min-height: 100vh; background: white; }
header { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #d4d4d4; }
header strong { font-size: 20px; }
header span { color: #666; }
section { padding: 24px 20px; display: grid; gap: 16px; }
form, .manual { display: grid; gap: 14px; }
h1 { margin: 0 0 8px; font-size: 24px; }
label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #aaa; background: white; font: inherit; }
button { min-height: 44px; border: 1px solid #171717; background: #171717; color: white; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
.progress-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid #d4d4d4; }
.progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-heading strong { font-size: 15px; }
.progress-heading span { color: #555; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 12px; accent-color: #171717; }
output { min-height: 24px; color: #444; overflow-wrap: anywhere; font-size: 14px; }
.progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.progress-steps li { display: flex; gap: 7px; min-width: 0; color: #888; }
.progress-steps li > span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.progress-steps div { display: grid; gap: 2px; min-width: 0; }
.progress-steps strong { font-size: 13px; }
.progress-steps small { font-size: 11px; line-height: 1.3; }
.progress-steps li.active { color: #171717; }
.progress-steps li.done { color: #16794b; }
.progress-steps li.done > span { background: #16794b; border-color: #16794b; color: white; }
.source { margin-top: 12px; }
.remote { padding: 10px; border-left: 3px solid #171717; background: #f3f4f6; font-size: 14px; }
details { border-top: 1px solid #d4d4d4; padding-top: 14px; }
summary { cursor: pointer; font-weight: 600; }
.manual { margin-top: 14px; }
@media (max-width: 520px) {
  .progress-steps { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
}