:root {
    color-scheme: light dark;
    --accent: #b3001b;
    --ok: #1a7f37;
    --err: #b3001b;
    --muted: #777;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
    margin: 0;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

main { width: 100%; max-width: 34rem; }

h1 { margin: 0 0 .25rem; font-size: 1.5rem; }

.subtitle { margin-top: 0; color: var(--muted); font-size: .9rem; }

form { display: grid; gap: 1rem; margin-top: 1.5rem; }

label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }

label.checkbox {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="file"] {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid #aaa;
    border-radius: 6px;
    background: transparent;
}

button {
    font: inherit;
    font-weight: 600;
    padding: .6rem 1rem;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

button:disabled { opacity: .5; cursor: wait; }

#progress { margin-top: 2rem; }

#progress h2 { font-size: 1rem; }

#steps { padding-left: 1.5rem; display: grid; gap: .35rem; }

#steps li { color: var(--muted); }

#steps li.active { color: inherit; font-weight: 600; }
#steps li.active::after { content: " …"; }
#steps li.done { color: var(--ok); }
#steps li.done::after { content: " ✓"; }
#steps li.failed { color: var(--err); }
#steps li.failed::after { content: " ✗"; }

#result { font-weight: 600; }
#result.success { color: var(--ok); }
#result.error { color: var(--err); }
#result a { font-weight: 400; }