:root{color-scheme:dark;--bg:#090f1d;--panel:#111c30;--line:#293954;--text:#edf4ff;--muted:#a8b9d0;--accent:#60baff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top right,#193456 0,transparent 40%),var(--bg);color:var(--text);font:15px/1.6 "Segoe UI",Tahoma,sans-serif;min-height:100vh}
header{display:flex;align-items:center;gap:13px;padding:22px max(24px,calc((100% - 1150px)/2));border-bottom:1px solid var(--line)}
header p{color:var(--muted);font-size:12px;margin:0}
.brand{display:grid;place-items:center;color:#8ed6ff;font-weight:800;letter-spacing:1px;background:#172c4f;border:1px solid #416595;border-radius:12px;width:52px;height:52px}
main{max-width:1150px;margin:44px auto;padding:0 24px 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
#login{max-width:440px;margin:70px auto}
h1{font-size:30px;line-height:1.2;margin:10px 0}
h2{font-size:18px;margin:0}
.eyebrow{color:#79c9ff;font-size:12px;font-weight:700}
.sub{color:var(--muted);margin:7px 0 20px}
label{display:block;margin:16px 0 6px}
input{width:100%;padding:12px;background:#0c1628;border:1px solid #3a4d69;border-radius:9px;color:var(--text);font:inherit}
button{cursor:pointer;font:inherit;border-radius:9px;padding:9px 16px}
button:disabled{opacity:.5;cursor:default}
.primary{background:#76c5ff;color:#081727;border:0;font-weight:700;margin-top:18px;width:100%}
.ghost{background:transparent;border:1px solid #49617f;color:var(--text)}
.ghost:hover{background:#22334f}
:focus-visible{outline:3px solid #8bd8ff;outline-offset:2px}
.page-head,.list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}
.layout{display:grid;grid-template-columns:340px 1fr;gap:20px}
.code-box{margin-top:20px;padding:15px;background:#0a2635;border:1px solid #286b82;border-radius:10px}
.code-box p{margin:0 0 10px;color:#b8dbe6;font-size:13px}
code{display:block;overflow-wrap:anywhere;text-align:left;font:14px/1.5 Consolas,monospace;letter-spacing:.5px;margin-bottom:10px}
.list{display:grid;gap:9px}
.row{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.row p{color:var(--muted);font-size:12px;margin:3px 0 0}
.tag{color:#a7ddff}
#message{color:#ffd185;min-height:25px}
[hidden]{display:none!important}
@media(max-width:700px){main{margin:25px auto}.layout{grid-template-columns:1fr}.page-head{align-items:center}header{padding:18px 24px}}