:root { --blue: #0b6aa2; --ink: #1e293b; --mute: #64748b; --line: #e2e8f0; --bg: #f8fafc; --red: #b91c1c; --green: #15803d; --amber: #b45309; }
* { box-sizing: border-box; }
body { margin: 0; font: 13px/1.45 "Segoe UI", Aptos, system-ui, sans-serif; color: var(--ink); background: var(--bg); }
header { background: var(--blue); color: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header .who { margin-left: auto; font-size: 12px; }
header button { background: transparent; border: 1px solid #ffffff88; color: #fff; }
main { max-width: 1080px; margin: 18px auto; padding: 0 16px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; }
.panel > h2 { font-size: 13px; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f1f5f9; border-radius: 8px 8px 0 0; display: flex; align-items: center; gap: 8px; }
.panel > h2 .actions { margin-left: auto; display: flex; gap: 6px; }
.body { padding: 12px 14px; }
.row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.row > label { width: 13rem; flex: none; color: #334155; font-weight: 500; text-align: right; }
.row .hint { color: var(--mute); font-size: 12px; }
input, select { font: inherit; padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
button { font: inherit; padding: 5px 12px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; }
button.primary { background: #0f172a; color: #fff; border-color: #0f172a; }
button:disabled { opacity: .5; cursor: default; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
tr.click:hover td { background: #f0f9ff; cursor: pointer; }
.notice { padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.notice.error { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.notice.ok { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
.notice.info { background: #f0f9ff; color: #075985; border: 1px solid #bae6fd; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; background: #f1f5f9; color: #334155; }
.badge.ready { background: #dcfce7; color: var(--green); } .badge.stopped { background: #fee2e2; color: var(--red); } .badge.starting, .badge.keys_received { background: #fef3c7; color: var(--amber); }
ol.steps { margin: 0; padding-left: 20px; } ol.steps li { margin: 3px 0; } ol.steps li.done { color: var(--green); } ol.steps li.now { font-weight: 600; } ol.steps li.later { color: var(--mute); }
.mono { font-family: Consolas, ui-monospace, monospace; font-size: 12px; word-break: break-all; }
.muted { color: var(--mute); }
.card { max-width: 560px; margin: 50px auto; }
.row > label.inline { width: auto; margin-left: 8px; }
.mono.big { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
h3 { font-size: 13px; margin: 14px 0 6px; }
.badge.started { background: #dcfce7; color: var(--green); } .badge.packaged, .badge.downloaded { background: #fef3c7; color: var(--amber); }
a.button { display: inline-block; padding: 5px 12px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; color: var(--ink); text-decoration: none; }
a.button.primary { background: #0f172a; color: #fff; border-color: #0f172a; }
.wizard main { max-width: 1180px; }
.wizard-grid { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: start; }
@media (max-width: 800px) { .wizard-grid { grid-template-columns: 1fr; } }
.body ol.wsteps { list-style: none; margin: 0; padding: 0; } ol.wsteps li { margin: 2px 0; } ol.wsteps a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
ol.wsteps li.now a { background: #e0f2fe; font-weight: 600; } ol.wsteps li.done a { color: var(--green); }
.small { font-size: 12px; }
.body ol, .body ul { padding-left: 22px; } .body li { margin: 5px 0; }
.foot { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; } .spacer { flex: 1; }
label.check { display: flex; align-items: center; gap: 6px; font-weight: 500; }
code { font-family: Consolas, ui-monospace, monospace; font-size: 12px; background: #f1f5f9; padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.copy { display: inline-flex; align-items: center; gap: 4px; } .copy button, .codeblock button { padding: 1px 8px; font-size: 12px; }
.codeblock { position: relative; margin: 8px 0; } .codeblock pre { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 6px; overflow-x: auto; font-size: 12px; margin: 0; }
.codeblock button { position: absolute; top: 6px; right: 6px; }
table.answers td { vertical-align: middle; } table.answers label { white-space: nowrap; }