:root{
  --gold:#D4AF37;--gold-deep:#B8932F;--gold-soft:#E8C766;
  --bg:#07070a;--panel:#141417;--line:#2a2a30;--ink:#f4f1e8;--ink-dim:#b9b4a6;--ink-mute:#7d7a72;
  --ok:#3fae6b;--err:#d9534f;
  --font-display:'Cinzel',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;
  font-family:var(--font-body);color:var(--ink);
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(212,175,55,.06), transparent 55%),
    var(--bg);
}
.portal{width:100%;max-width:430px}
.portal-card{background:linear-gradient(180deg,var(--panel),#0d0d10);border:1px solid var(--line);
  border-radius:20px;padding:34px 30px;box-shadow:0 22px 60px rgba(0,0,0,.6);position:relative;overflow:hidden}
.portal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.crest{width:62px;height:62px;border-radius:16px;margin:0 auto 16px;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:30px;color:#1a1405;
  box-shadow:0 8px 24px rgba(212,175,55,.35)}
.portal h1{font-family:var(--font-display);text-align:center;font-size:25px;margin:0 0 4px}
.portal .sub{text-align:center;color:var(--ink-mute);font-size:13px;margin-bottom:8px}
.ssid{text-align:center;font-size:13px;color:var(--gold-soft);margin-bottom:22px}
.ssid b{font-weight:600}
label{display:block;font-size:12.5px;color:var(--ink-dim);margin:0 0 6px}
input{width:100%;background:#0a0a0d;border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;border-radius:11px;font-size:16px;font-family:var(--font-body);margin-bottom:16px}
input:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(212,175,55,.14)}
.connect{width:100%;border:none;cursor:pointer;padding:14px;border-radius:11px;font-size:15px;font-weight:700;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#1a1405;
  box-shadow:0 6px 20px rgba(212,175,55,.3);font-family:var(--font-body)}
.connect:hover{filter:brightness(1.06)}
.err{background:rgba(217,83,79,.12);border:1px solid rgba(217,83,79,.4);color:#f3a6a4;
  padding:11px 14px;border-radius:11px;font-size:13.5px;margin-bottom:18px}
.help{text-align:center;color:var(--ink-mute);font-size:12px;margin-top:20px;line-height:1.6}
.success-icon{width:70px;height:70px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:rgba(63,174,107,.15);border:2px solid var(--ok);color:var(--ok);font-size:34px}
.foot{text-align:center;color:var(--ink-mute);font-size:11px;margin-top:18px;letter-spacing:.04em}