:root { --bg:#0f1117; --panel:#171a23; --line:#262b38; --text:#e7e9ee; --muted:#8a90a0; --acc:#7c8cff; --ok:#3ecf8e; --bad:#ff6b6b; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
.screen { display:none; min-height:100vh; }
.screen.show { display:flex; }
#view-login, #view-2fa { align-items:center; justify-content:center; padding:20px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; transition:transform .2s, border-color .2s; }
.card:hover { border-color:#343a4b; }
.content .card { max-width:640px; margin-bottom:16px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { margin:0 0 16px; } h3 { margin:8px 0 4px; font-size:15px; }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
label.row { flex-direction:row; justify-content:space-between; align-items:center; color:var(--text); }
input, select, textarea { background:#0c0e14; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px; font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(124,140,255,.15); }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--acc); }
.code { text-align:center; font-size:24px; letter-spacing:8px; }
.btn { border:0; border-radius:10px; padding:10px 16px; font-size:14px; cursor:pointer; transition:transform .12s, opacity .2s, background .2s; }
.btn:active { transform:scale(.97); }
.btn.primary { background:var(--acc); color:#fff; }
.btn.primary:hover { opacity:.9; }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.danger { background:var(--bad); color:#fff; }
.msg { min-height:18px; margin:0; font-size:13px; color:var(--bad); }
.muted { color:var(--muted); } .small { font-size:12px; }
.fade-in { animation:fade .35s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.pane { display:none; } .pane.show { display:block; }
#view-admin { display:none; }
#view-admin.show { display:flex; }
.side { width:220px; background:var(--panel); border-right:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:16px; }
.brand { font-weight:700; font-size:18px; }
nav { display:flex; flex-direction:column; gap:4px; }
.tab { background:none; border:0; color:var(--muted); text-align:left; padding:10px 12px; border-radius:8px; cursor:pointer; transition:background .2s, color .2s; font-size:14px; }
.tab:hover { background:#1d2130; color:var(--text); }
.tab.active { background:#232945; color:var(--text); }
.side .btn { margin-top:auto; }
.content { flex:1; padding:28px; overflow:auto; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.kpi span { color:var(--muted); font-size:12px; } .kpi b { font-size:22px; }
#chart svg { width:100%; height:180px; }
#chart rect { fill:var(--acc); opacity:.85; transition:opacity .2s; } #chart rect:hover { opacity:1; }
#tok-list .tk { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; flex-wrap:wrap; }
#tok-list .tk:last-child { border-bottom:0; }
.badge { font-size:11px; padding:2px 8px; border-radius:99px; background:#232945; color:var(--muted); margin-left:4px; }
.badge.on { color:var(--ok); } .badge.off { color:var(--bad); }
.docs pre { background:#0c0e14; border:1px solid var(--line); border-radius:10px; padding:12px; overflow:auto; font-size:12px; }
.docs code { background:#0c0e14; padding:2px 6px; border-radius:6px; font-size:12px; }
.newtok { background:#0c0e14; border:1px dashed var(--ok); border-radius:10px; padding:10px; word-break:break-all; font-family:monospace; font-size:13px; color:var(--ok); }
@media (max-width:700px){ #view-admin { flex-direction:column; } .side { width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; } nav { flex-direction:row; flex-wrap:wrap; } .side .btn { margin:0; } }