:root {
  --bg:#050914;
  --panel:rgba(11,18,35,.72);
  --line:rgba(122,210,255,.16);
  --text:#eaf7ff;
  --muted:#7f9bb0;
  --cyan:#55e7ff;
  --purple:#a56cff;
}

* { box-sizing:border-box; }

html,body {
  margin:0;
  min-height:100%;
}

body {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:22px;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 15% 10%,rgba(64,105,255,.13),transparent 30%),
    radial-gradient(circle at 85% 15%,rgba(165,108,255,.11),transparent 28%),
    linear-gradient(180deg,#050914,#030711 58%,#050914);
  overflow:hidden;
}

.orb {
  position:fixed;
  border-radius:999px;
  filter:blur(75px);
  pointer-events:none;
  opacity:.18;
}

.orb-a {
  width:340px;
  height:340px;
  background:#386cff;
  top:-100px;
  left:-100px;
}

.orb-b {
  width:300px;
  height:300px;
  background:#a56cff;
  right:-90px;
  top:180px;
}

.access-panel {
  width:min(430px,100%);
  padding:38px 32px;
  text-align:center;
  border-radius:26px;
  border:1px solid var(--line);
  background:linear-gradient(
    145deg,
    rgba(18,29,54,.76),
    rgba(8,13,27,.68)
  );
  backdrop-filter:blur(18px);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}

.mark {
  width:64px;
  height:64px;
  margin:0 auto 22px;
  border-radius:19px;
  display:grid;
  place-items:center;
  font-size:29px;
  font-weight:750;
  color:#051018;
  background:linear-gradient(
    135deg,
    var(--cyan),
    #90f5ff 44%,
    var(--purple)
  );
  box-shadow:0 0 38px rgba(85,231,255,.25);
}

.domain {
  color:var(--cyan);
  font-size:11px;
  letter-spacing:.28em;
}

h1 {
  margin:14px 0 5px;
  font-size:32px;
  letter-spacing:.08em;
  font-weight:600;
}

.subtitle {
  margin:0;
  color:var(--muted);
  font-size:14px;
}

form {
  display:grid;
  gap:15px;
  margin-top:32px;
  text-align:left;
}

label {
  color:var(--muted);
  font-size:12px;
}

input {
  width:100%;
  margin-top:7px;
  padding:14px;
  color:var(--text);
  outline:none;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(3,8,18,.72);
}

input:focus {
  border-color:rgba(85,231,255,.55);
  box-shadow:0 0 0 3px rgba(85,231,255,.07);
}

button {
  margin-top:4px;
  border:0;
  border-radius:12px;
  padding:14px;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  letter-spacing:.12em;
  color:#041018;
  background:linear-gradient(
    100deg,
    var(--cyan),
    #78b4ff,
    var(--purple)
  );
}

#loginError {
  min-height:15px;
  margin:0;
  text-align:center;
  color:#ff668f;
  font-size:11px;
}

.footer {
  margin-top:24px;
  color:#48657a;
  font-size:9px;
  letter-spacing:.22em;
}

.secondary-button {
  margin-top: 0;
  color: #8fa9ba;
  background: transparent;
  border: 1px solid rgba(122,210,255,.18);
}

.secondary-button:hover {
  color: #eaf7ff;
  border-color: rgba(85,231,255,.45);
}

.secondary-button {
  display: block;
  width: auto;
  margin: 4px auto 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #607586;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .55;
  box-shadow: none;
}

.secondary-button:hover,
.secondary-button:focus {
  color: #91a9ba;
  background: transparent;
  opacity: .9;
}