:root{--bg:#07101b;--panel:rgba(14,24,40,.90);--panel2:rgba(20,33,54,.80);--text:#edf5ff;--muted:#9eb0c8;--line:rgba(148,163,184,.20);--accent:#22d3ee;--accent2:#7c3aed;--mint:#34f5c5;--warn:#ffbd59;--danger:#fb7185;--shadow:0 20px 60px rgba(0,0,0,.46)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(900px 520px at 85% 8%,rgba(124,58,237,.20),transparent 58%),radial-gradient(760px 480px at 8% 76%,rgba(34,211,238,.14),transparent 56%),linear-gradient(rgba(4,8,15,.92),rgba(4,8,15,.98)),url("../../img/index-bg.png") center/cover fixed no-repeat}a{color:inherit}button,input{font:inherit}
header{position:sticky;top:0;z-index:10;background:rgba(3,7,18,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{max-width:1120px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}.brand-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--mint));box-shadow:0 0 18px rgba(34,211,238,.45)}nav{display:flex;align-items:center;gap:16px}nav a,.nav-button{font-size:14px;color:#d9e8fb;text-decoration:none}.nav-button{border:1px solid var(--line);background:rgba(255,255,255,.04);padding:8px 12px;border-radius:10px;cursor:pointer}
.wrap{max-width:1120px;margin:auto;padding:34px 22px 70px}.hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.hero h1{font-size:clamp(38px,5vw,58px);line-height:1;margin:8px 0 12px}.hero p{color:var(--muted);margin:0;line-height:1.7}.kicker,.eyebrow{color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.connection-state{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:rgba(2,6,23,.45);font-size:13px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(10px);padding:24px}.auth-panel{max-width:660px;margin:28px auto}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.panel-heading h2{margin:7px 0 0;font-size:22px}.lock,.download-icon{font-size:28px}.auth-panel form{display:grid;gap:16px}label{display:grid;gap:8px;font-weight:600}input{width:100%;border:1px solid rgba(148,163,184,.28);background:#0b1627;color:var(--text);padding:13px 14px;border-radius:12px;outline:none}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.12)}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;border-radius:12px;border:1px solid transparent;font-weight:800;text-decoration:none;cursor:pointer}.button.primary{background:linear-gradient(135deg,var(--mint),var(--accent));color:#041016}.button.secondary{background:rgba(2,6,23,.42);border-color:var(--line);color:var(--text)}.button:disabled,.button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button-row{display:flex;gap:10px;flex-wrap:wrap}.helper{color:var(--muted);font-size:13px;line-height:1.6;margin:14px 0 0}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.metric-card{padding:18px;border-radius:18px;background:var(--panel2);border:1px solid var(--line)}.metric-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.09em}.metric-card strong{display:block;margin:8px 0 6px;font-size:21px}.metric-card small{color:var(--muted);line-height:1.45}.dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.credential-row{padding:14px;border:1px solid var(--line);background:rgba(2,6,23,.32);border-radius:14px;margin:10px 0}.credential-row span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.credential-row strong,.credential-row code{display:block;margin-top:7px;overflow-wrap:anywhere;font-size:16px}.status-badge{padding:7px 11px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:800;text-transform:uppercase}.status-active{color:var(--mint);background:rgba(52,245,197,.08)}.status-warning{color:var(--warn);background:rgba(255,189,89,.08)}.status-danger{color:var(--danger);background:rgba(251,113,133,.08)}.download-panel p{color:var(--muted);line-height:1.7}.hash-box{margin-top:14px;padding:11px;border-radius:10px;background:#091322;border:1px solid var(--line);font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:#b9cbe0;overflow-wrap:anywhere}.devices-panel,.next-panel{margin-top:16px}.device-list{display:grid;gap:10px}.device-item{display:grid;grid-template-columns:1.2fr .8fr .7fr;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(2,6,23,.30)}.device-item strong,.device-item span,.device-item small{display:block}.device-item span,.device-item small{color:var(--muted);margin-top:4px}.device-state{justify-self:end;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:800}.empty-state{padding:18px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}.next-panel{display:flex;align-items:center;justify-content:space-between;gap:20px}.next-panel h2{margin:7px 0}.next-panel p{margin:0;color:var(--muted);line-height:1.6}.toast{position:fixed;right:22px;bottom:22px;max-width:420px;padding:14px 16px;border-radius:13px;background:#14233a;border:1px solid var(--line);box-shadow:var(--shadow);z-index:20}.toast.error{border-color:rgba(251,113,133,.5);color:#ffe8ee}.toast.success{border-color:rgba(52,245,197,.45);color:#e6fff8}.hidden{display:none!important}footer{border-top:1px solid var(--line);background:rgba(3,7,18,.72)}.foot{max-width:1120px;margin:auto;padding:18px 22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}.foot a{color:#dffaff}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.device-item{grid-template-columns:1fr 1fr}.device-state{justify-self:start}.next-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.nav{align-items:flex-start;flex-direction:column}.metrics{grid-template-columns:1fr}.wrap{padding:26px 14px 54px}.panel{padding:18px}.button-row .button{width:100%}.device-item{grid-template-columns:1fr}.hero h1{font-size:38px}}