:root{--bg:#0f1012;--card:#16171a;--line:#26272b;--text:#e9e9e6;--mute:#7b7b76;--accent:#ff5a1f}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#08080a;color:var(--text);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{display:flex;align-items:center;justify-content:center;padding:20px}
main{width:min(760px,100%);background:var(--bg);border-radius:22px;padding:34px 30px 26px}
.brand{display:flex;gap:10px;align-items:center;font-weight:600;font-size:17px;letter-spacing:.05em}
.sub{color:var(--mute);margin:6px 0 24px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{display:block;position:relative;text-decoration:none;color:var(--text);background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:20px 20px 18px;min-height:130px;transition:border-color .15s}
.card:hover,.card:focus-visible{border-color:var(--accent);outline:none}
.card b{display:block;font-size:19px;font-weight:500;margin-bottom:6px}
.card span{display:block;color:var(--mute);font-size:12.5px}
.card .host{position:absolute;left:20px;bottom:16px;font:10px ui-monospace,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.card .key{position:absolute;right:16px;top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--mute);border:.5px solid var(--line);border-radius:6px;padding:1px 7px}
.card.last .key{color:var(--accent);border-color:#5a2a18}
.remember{display:flex;gap:8px;align-items:center;color:var(--mute);margin-top:22px;font-size:12.5px;cursor:pointer}
.remember input{accent-color:var(--accent)}
.hint{color:var(--mute);font-size:11.5px;margin:10px 0 0}
code{font-family:ui-monospace,Menlo,monospace;color:var(--text)}
@media(max-width:560px){.cards{grid-template-columns:1fr}}