:root { --paper:#E8ECEF; --panel:#fff; --ink:#14233A; --soft:#4A5A70; --line:#C5CED8; --lower:#1F7A6C; --medium:#B77A00; --high:#B5402F; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
header, main, footer { max-width:980px; margin:0 auto; padding:0 20px; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding-top:22px; padding-bottom:18px; border-bottom:2px solid var(--ink); }
.brand { font-weight:800; font-size:21px; text-decoration:none; letter-spacing:-0.01em; }
.pilot { font-size:14px; color:var(--soft); margin-right:auto; }
nav { display:flex; align-items:center; gap:18px; font-size:15px; }
nav form { margin:0; }
main { padding-top:28px; padding-bottom:48px; }
h1 { font-size:clamp(28px, 5vw, 40px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 20px; }
h2 { font-size:21px; margin:26px 0 10px; }
.card h2 { margin-top:8px; }
p { margin:0 0 14px; max-width:42em; }
.small { font-size:14px; color:var(--soft); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin:0 0 24px; }
.card { background:var(--panel); border:2px solid var(--ink); border-radius:14px; padding:20px; display:block; }
.card.narrow { max-width:420px; }
a.card.bot { text-decoration:none; display:flex; flex-direction:column; gap:6px; box-shadow:5px 5px 0 var(--ink); }
a.card.bot:hover { transform:translate(-1px,-1px); box-shadow:7px 7px 0 var(--ink); }
label { display:block; font-size:15px; font-weight:600; margin:0 0 14px; }
input:not([type=checkbox]):not([type=hidden]) { display:block; width:100%; margin-top:6px; padding:11px 12px; font:inherit; border:2px solid var(--ink); border-radius:8px; background:#fff; color:var(--ink); }
label.check { font-weight:400; display:flex; gap:10px; align-items:flex-start; max-width:36em; }
label.check input { margin-top:5px; width:18px; height:18px; flex:none; }
button, .button { display:inline-block; font:inherit; font-weight:700; padding:12px 20px; border:2px solid var(--ink); border-radius:8px; background:var(--ink); color:#fff; cursor:pointer; text-decoration:none; }
button:hover, .button:hover { background:#0B1626; }
button.danger { background:#fff; color:var(--high); border-color:var(--high); }
button.danger:hover { background:var(--high); color:#fff; }
button.link { background:none; border:0; padding:0; color:inherit; font-weight:400; text-decoration:underline; }
button.link:hover { background:none; }
.actions { display:flex; flex-wrap:wrap; gap:20px 28px; align-items:flex-end; margin:20px 0; }
.actions form { margin:0; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.note, .error { padding:12px 16px; border-radius:8px; border-left:6px solid var(--lower); background:#fff; max-width:42em; }
.error { border-left-color:var(--high); }
.state, .grade { display:inline-block; font-size:13px; font-weight:700; padding:3px 10px; border-radius:20px; border:2px solid var(--ink); align-self:flex-start; }
p.state { font-size:15px; }
.s-running { background:var(--lower); color:#fff; border-color:var(--lower); }
.s-paused, .s-awaiting_key, .s-awaiting_verify { background:#fff; color:var(--medium); border-color:var(--medium); }
.s-refused { background:var(--high); color:#fff; border-color:var(--high); }
.g-lower { border-color:var(--lower); color:var(--lower); }
.g-medium, .g-medium-high { border-color:var(--medium); color:var(--medium); }
.g-high { border-color:var(--high); color:var(--high); }
.figures { display:flex; flex-wrap:wrap; gap:14px 40px; margin:18px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.figures div { margin:0; }
dt { font-size:13px; color:var(--soft); }
dd { margin:0; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
pre.key { background:#fff; border:2px dashed var(--ink); border-radius:8px; padding:12px; overflow-wrap:anywhere; white-space:pre-wrap; font-size:14px; max-width:42em; }
ol { padding-left:1.3em; max-width:42em; }
li { margin-bottom:8px; }
details { margin:22px 0; }
summary { cursor:pointer; font-size:15px; color:var(--soft); margin-bottom:12px; }
footer { padding-top:18px; padding-bottom:36px; border-top:1px solid var(--line); font-size:13px; color:var(--soft); }
@media (max-width:600px) { body { font-size:16px; } .pilot { width:100%; order:3; } }