:root { color-scheme: dark; --bg:#101318; --card:#181d25; --text:#eef2f7; --muted:#9aa6b6; --line:#2c3542; --accent:#7cc4ff; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.card { width:min(430px,92vw); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; }
h1 { margin:0 0 8px; font-size:26px; letter-spacing:-.02em; }
.muted { color:var(--muted); }
form { display:grid; gap:12px; margin:18px 0; }
label { display:grid; gap:5px; color:var(--muted); font-size:13px; }
input { background:#0f131a; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; }
button { background:var(--accent); color:#06111c; border:0; border-radius:8px; padding:10px 14px; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
a { color:var(--accent); }
.status { min-height:1.4em; color:var(--accent); }
.status.error { color:#ff9b9b; }
code { color:var(--text); }
.actions { display:flex; gap:10px; margin:18px 0 12px; }
button.secondary { background:transparent; color:var(--text); border:1px solid var(--line); }
h2 { margin:22px 0 6px; font-size:17px; }
button.danger { background:#ff9b9b; }
button:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.link-card { width:min(520px,92vw); }
.button { display:inline-block; background:var(--accent); color:#06111c; border-radius:8px; padding:10px 14px; font-weight:600; text-decoration:none; }
.button.secondary { background:transparent; color:var(--text); border:1px solid var(--line); }
.link-code { font-size:34px; letter-spacing:.18em; font-weight:700; color:var(--accent); margin:18px 0 8px; font-variant-numeric:tabular-nums; }
.small { font-size:12px; }