.wrap { max-width:860px; margin:0 auto; padding:20px 16px 60px; }
.login { max-width:340px; margin:12vh auto 0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; }
.login h1 { margin:0 0 14px; font-size:20px; }
.login label { display:grid; gap:4px; color:var(--muted); margin-top:10px; font-size:14px; }
.login .btn { width:100%; margin-top:16px; }
input { background:var(--panel-2); border:1px solid var(--line); border-radius:8px; color:var(--text); font:inherit; padding:9px 11px; width:100%; }
input:focus { outline:none; border-color:var(--accent); }
.err { color:var(--danger); margin-top:10px; font-size:14px; }
.top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.top h1 { font-size:20px; margin:0 auto 0 0; }
.tabs { display:flex; gap:6px; margin-bottom:14px; }
.tab { background:none; border:1px solid var(--line); border-radius:8px; padding:7px 14px; color:var(--muted); }
.tab.on { background:var(--panel-2); color:var(--text); border-color:var(--muted); }
.badge { display:inline-block; min-width:20px; padding:0 6px; margin-left:6px; border-radius:10px; background:var(--accent); color:#0e0f14; font-size:12px; font-weight:700; text-align:center; }
.row { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.row .info { flex:1; min-width:200px; }
.row .mail { font-weight:600; word-break:break-all; }
.row .meta { color:var(--muted); font-size:13px; margin-top:3px; }
.code { font-size:34px; font-weight:700; letter-spacing:0.14em; font-variant-numeric:tabular-nums; color:var(--accent); }
.btns { display:flex; gap:6px; flex-wrap:wrap; }
.btns .btn { padding:6px 11px; font-size:14px; }
.pill { font-size:12px; padding:2px 8px; border-radius:10px; margin-left:8px; }
.pill.on { background:#1d3a2c; color:#5fd29b; }
.pill.off { background:#3d2220; color:var(--danger); }
.empty { text-align:center; color:var(--muted); padding:40px 16px; border:1px dashed var(--line); border-radius:12px; line-height:1.5; }
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:16px; z-index:10; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; max-width:380px; width:100%; }
.modal p { margin:0 0 16px; line-height:1.5; }
.modal .btns { justify-content:flex-end; }