:root{--gold:#f4d38a;--gold-2:#e8b85a;--ink:#f6efff;--muted:#bba9d9;--bg1:#1a0733;--bg2:#07020f;--card:#1b0d33cc;--line:#f4d38a44;--danger:#ff9aa8}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100vh;display:flex;align-items:safe center;justify-content:center;overflow-x:hidden;color:var(--ink);font:16px/1.45 "Segoe UI",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#4a1b86 0%,var(--bg1) 38%,var(--bg2) 80%) fixed}
.sky{position:fixed;inset:0;pointer-events:none}
.sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:twinkle 3s ease-in-out infinite alternate}
.sky i:nth-child(1){top:8%;left:12%}.sky i:nth-child(2){top:18%;left:78%;animation-delay:.6s}.sky i:nth-child(3){top:33%;left:6%;animation-delay:1.2s}
.sky i:nth-child(4){top:62%;left:90%;animation-delay:.3s}.sky i:nth-child(5){top:80%;left:18%;animation-delay:1.8s}.sky i:nth-child(6){top:12%;left:45%;animation-delay:2.1s}
.sky i:nth-child(7){top:47%;left:70%;animation-delay:.9s}.sky i:nth-child(8){top:90%;left:60%;animation-delay:1.5s}.sky i:nth-child(9){top:26%;left:30%;animation-delay:2.6s}
.sky i:nth-child(10){top:70%;left:40%;animation-delay:.2s}.sky i:nth-child(11){top:5%;left:92%;animation-delay:1.1s}.sky i:nth-child(12){top:55%;left:24%;animation-delay:2.3s}
@keyframes twinkle{from{opacity:.15;transform:scale(.7)}to{opacity:.9;transform:scale(1.2)}}
.fog{position:fixed;inset:auto -20% -10% -20%;height:45vh;pointer-events:none;background:radial-gradient(ellipse at center,#9b5cff22,transparent 70%);filter:blur(30px);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(8%)}}
.gate{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center;width:min(1000px,100%);padding:32px 16px}
.orb{position:relative;display:grid;place-items:center}
.orb img{width:min(360px,70vw);aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid var(--line);box-shadow:0 0 60px #9b5cff66,0 0 120px #f4d38a22;animation:float 6s ease-in-out infinite}
.orb .halo{position:absolute;width:min(420px,80vw);aspect-ratio:1;border-radius:50%;border:1px dashed #f4d38a55;animation:spin 60s linear infinite}
@keyframes float{50%{transform:translateY(-10px)}}@keyframes spin{to{transform:rotate(360deg)}}
.card{padding:34px 30px 24px;border-radius:24px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 30px 80px #000a,inset 0 0 40px #9b5cff14}
.brand{margin:0 0 14px;font:700 14px Georgia,serif;letter-spacing:.24em;color:var(--gold)}.brand b{color:#fff}.brand span{margin-right:4px}
h1{margin:0;font:700 34px/1.1 "Palatino Linotype",Georgia,serif;background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:8px 0 22px;color:var(--muted);font-size:14px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
label small{font-weight:400;font-size:12px;line-height:1.4}code{color:var(--gold)}
input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #ffffff22;background:#0b0418cc;color:var(--ink);font:16px "Segoe UI",sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f4d38a33}
.pass{position:relative;display:block}.pass input{padding-right:48px}
.pass button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px}
.hint{margin:-4px 0 0;font-size:12px;color:var(--muted)}
.error{min-height:1.2em;margin:0;color:var(--danger);font-size:14px}
.enter{margin-top:4px;padding:14px;border:0;border-radius:14px;cursor:pointer;font:800 17px "Segoe UI",sans-serif;letter-spacing:.04em;color:#1a0b2e;
  background:linear-gradient(180deg,#fff0c4,var(--gold) 45%,var(--gold-2));box-shadow:0 10px 30px #f4d38a33;transition:transform .15s,filter .15s}
.enter:hover{filter:brightness(1.07)}.enter:active{transform:translateY(1px)}.enter:disabled{opacity:.6;cursor:wait}
.foot{margin:18px 0 0;text-align:center;font-size:12px;color:var(--muted)}
[hidden]{display:none!important}
@media (max-width:760px){.gate{grid-template-columns:1fr;gap:18px}.orb img{width:150px}.orb .halo{width:190px}.card{padding:26px 20px 20px}h1{font-size:28px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}