:root {
    --bg:#0b1220;
    --card:#101a2b;
    --stroke:#1f2b43;
    --txt:#e8efff;
    --mut:#9fb1d1;
    --btn:#3b82f6;
    --btn-hi:#60a5fa;
    --led-g:#22c55e;
    --led-y:#eab308;
    --led-r:#ef4444;
}

* { box-sizing:border-box; }
html,body { height:100%; }

body {
    margin:0;
    background:
      radial-gradient(1200px 600px at 10% 0%, #1d283a 0, #020617 55%),
      radial-gradient(800px 800px at 90% 90%, #1d283a 0, #020617 60%);
    color:var(--txt);
    font:16px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

.wrap {
    min-height:100%;
    display:grid;
    place-items:center;
    padding:28px;
}

.card {
    width:100%;
    max-width:520px;
    background:rgba(16,26,43,.78);
    border:1px solid var(--stroke);
    border-radius:24px;
    padding:22px 24px 18px;
    box-shadow:0 20px 60px rgba(0,0,0,.35),
               inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(6px);
}

.head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}

h1 {
    margin:0;
    font-size:26px;
    letter-spacing:.2px;
}

.sub {
    margin:4px 0 16px;
    font-size:14px;
    color:var(--mut);
}

.field {
    margin-top:12px;
}

.field label {
    display:block;
    font-size:13px;
    color:var(--mut);
    margin-bottom:4px;
}

.field input {
    width:100%;
    padding:11px 12px;
    border-radius:12px;
    border:1px solid var(--stroke);
    background:#020617;
    color:var(--txt);
    font-size:15px;
}

.field input:focus {
    outline:2px solid #3b82f655;
    border-color:#3b82f6;
}

.btn {
    width:100%;
    margin:16px 0 6px;
    padding:13px 18px;
    border:0;
    border-radius:999px;
    background:linear-gradient(180deg,var(--btn),var(--btn-hi));
    color:#fff;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(37,99,235,.45);
}

.btn:hover {
    filter:brightness(1.05);
    box-shadow:0 14px 40px rgba(37,99,235,.6);
}

.link-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    margin-top:4px;
}

.link {
    color:var(--mut);
    text-decoration:none;
    cursor:pointer;
}

.link:hover {
    text-decoration:underline;
}

.hint {
    font-size:11px;
    color:var(--mut);
    text-align:right;
}

.msg {
    margin-top:8px;
    font-size:13px;
    color:#fca5a5;
}

.status {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:16px;
    color:var(--mut);
    font-size:13px;
}

.leds { display:flex;gap:10px; }
.led { width:12px;height:12px;border-radius:999px;filter:drop-shadow(0 0 4px rgba(0,0,0,.4)); }
.g {background:var(--led-g);}
.y {background:var(--led-y);}
.r {background:var(--led-r);}

.pulse { animation:pulse 1.6s infinite ease-in-out; }
.p0 { animation-delay:0s; }
.p1 { animation-delay:.33s; }
.p2 { animation-delay:.66s; }

@keyframes pulse {
    0% { opacity:.55; box-shadow:0 0 4px currentColor; }
    50% { opacity:1; box-shadow:0 0 12px currentColor; }
    100% { opacity:.55; box-shadow:0 0 4px currentColor; }
}

@media (max-width:520px) {
    .card { padding:18px 16px 14px;border-radius:20px; }
    h1 { font-size:22px; }
}