:root {
  color-scheme: dark;
  font-family: "Manrope", "Google Sans", "Segoe UI", Arial, sans-serif;
  background: #0c0c0c;
  color: #fff;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  background: #0c0c0c url('/wallpaper.jpg') center / cover no-repeat fixed;
}

.page-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background: linear-gradient(120deg, rgb(0 0 0 / .72), rgb(0 0 0 / .2) 50%, rgb(0 0 0 / .64));
}

.access-panel {
  width: min(100%, 420px);
  border: 1px solid rgb(255 255 255 / .38);
  border-radius: 28px;
  background: linear-gradient(140deg, rgb(255 255 255 / .17), rgb(255 255 255 / .035));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .56), inset 0 -1px 0 rgb(255 255 255 / .08), 0 32px 96px rgb(0 0 0 / .48);
  backdrop-filter: blur(28px) saturate(0%);
  -webkit-backdrop-filter: blur(28px) saturate(0%);
}

.glass-content { position: relative; z-index: 3; padding: clamp(30px, 5vw, 42px); }

.logo-disc { display: grid; width: 92px; height: 92px; margin: 0 auto 30px; place-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / .74); border-radius: 50%; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgb(0 0 0 / .25); }
.logo-disc img { width: 72px; height: 72px; object-fit: cover; mix-blend-mode: multiply; }
h1 { margin: 0 0 34px; text-align: center; font-size: clamp(2.25rem, 7vw, 3.35rem); font-weight: 600; letter-spacing: -.07em; line-height: 1; }

form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
label { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgb(255 255 255 / .32);
  border-radius: 14px;
  padding: 0 13px;
  background: rgb(0 0 0 / .28);
  color: inherit;
  font: inherit;
}
input:focus { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; }
button {
  min-height: 50px;
  margin-top: 6px;
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 14px;
  background: #fff;
  color: #080808;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}
button:hover { background: #dedede; }
button:active { transform: translateY(1px); }
button:disabled { cursor: wait; opacity: .7; }
.form-status { min-height: 1.35em; margin: 0; font-size: .9rem; line-height: 1.5; }
.form-status.success, .form-status.error { color: #fff; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-transparency: reduce) {
  .access-panel { background: #161616; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 480px) {
  .page-shell { padding: 16px; }
  .glass-content { padding: 30px 24px; }
}