:root { --fg:#1a2230; --muted:#5a6b80; --bg:#f5f7fa; --card:#fff; --accent:#1f6feb; --border:#d8dee8; --err:#b3261e; --ok:#1a7f37; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem; background:var(--card); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.brand { font-weight:700; color:var(--accent); text-decoration:none; font-size:1.1rem; }
nav { margin-left:auto; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
nav a { color:var(--fg); text-decoration:none; }
nav a:hover { color:var(--accent); }
.who { color:var(--muted); }
main { max-width:920px; margin:1.5rem auto; padding:0 1.25rem; }
footer { text-align:center; color:var(--muted); padding:2rem 1rem; font-size:.85rem; }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; margin-top:1.75rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; max-width:480px; display:flex; flex-direction:column; gap:.75rem; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; color:var(--muted); }
label.checkbox, label.checkbox { flex-direction:row; align-items:center; gap:.5rem; }
input, textarea { font:inherit; padding:.5rem .6rem; border:1px solid var(--border); border-radius:6px; background:#fff; color:var(--fg); }
button, .btn { font:inherit; cursor:pointer; background:var(--accent); color:#fff; border:0; border-radius:6px; padding:.5rem .9rem; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { filter:brightness(.95); }
.flash { padding:.6rem .9rem; border-radius:6px; margin:.5rem 0; }
.flash.error { background:#fdecea; color:var(--err); border:1px solid #f3c2bd; }
.flash.ok { background:#e9f6ec; color:var(--ok); border:1px solid #b8e0c2; }
.grid { width:100%; border-collapse:collapse; margin:.5rem 0; background:var(--card); }
.grid th, .grid td { border:1px solid var(--border); padding:.5rem .6rem; text-align:left; vertical-align:top; font-size:.9rem; }
.actions form { display:inline; }
.actions .inline input { width:9rem; }
.mono, pre.cert, .mono input, .mono textarea { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; word-break:break-all; }
pre.cert { background:#0d1117; color:#c9d1d9; padding:1rem; border-radius:8px; overflow:auto; }
.sp-list { list-style:none; padding:0; }
.sp-list li { display:flex; align-items:center; gap:1rem; padding:.6rem .9rem; border:1px solid var(--border); border-radius:8px; margin-bottom:.5rem; background:var(--card); }
.sp-name { font-weight:600; }
.sp-list .btn { margin-left:auto; }
.hint { color:var(--muted); font-size:.88rem; }
.btn.ghost { background:#fff; color:var(--accent); border:1px solid var(--border); }
.dl { display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0; }
.steps { line-height:1.7; padding-left:1.2rem; }
.steps li { margin:.25rem 0; }
.card.secret { border:2px solid var(--accent); background:#eef4ff; max-width:640px; }
.card.secret input { background:#fff; }
.card.gprofile { max-width:760px; }
.card.gprofile h3 { margin:.1rem 0 .6rem; }
/* vertical key/value table: label hugs its text, value fills the row and never wraps */
.grid.kv th { white-space:nowrap; width:1%; text-align:left; vertical-align:middle; background:#f7f9fc; }
.grid.kv td { width:auto; }
.copyfield { width:100%; background:#fff; }