body.brand { display: flex; align-items: center; justify-content: center; }
main { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 40px 16px 48px; text-align: center; }
.sigil { width: 190px; height: 190px; margin: 0 auto 16px; display: block; filter: drop-shadow(0 0 16px rgba(200,107,255,.28)) drop-shadow(0 0 22px rgba(201,164,92,.18)); }
h1 { margin: 0; font-weight: 500; font-size: 30px; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--gold2) 0%, var(--gold) 45%, #b9a6ff 80%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motto { margin: 10px 0 28px; color: var(--dim); font-style: italic; font-size: 17px; letter-spacing: .06em; }
.rule { display: flex; align-items: center; gap: 12px; color: var(--gold); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 20px; }
.rule:before { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--violet), var(--gold)); }
.rule:after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), var(--blue), transparent); }
form { display: grid; gap: 14px; text-align: left; max-width: 340px; margin: 0 auto; }
label { display: block; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: 18px var(--serif); color: var(--gold2); letter-spacing: .03em;
  background: linear-gradient(180deg, #0f0d09, #070605); border: 1px solid #3a3122; border-radius: 8px; outline: none; caret-color: var(--gold);
  transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--violet); box-shadow: 0 0 0 1px rgba(200,107,255,.4), 0 0 18px rgba(110,139,255,.25); }
.seal { justify-self: center; margin-top: 12px; width: 96px; height: 96px; border-radius: 50%; border: 0; cursor: pointer; color: #2b1d06;
  font: 600 13px var(--serif); letter-spacing: .25em; text-indent: .25em; text-transform: uppercase;
  background: radial-gradient(circle at 35% 30%, #f6e2a8, #c9a45c 45%, #7d5d22 100%);
  box-shadow: 0 0 0 3px #050506, 0 0 0 4px #6e5aa8, 0 0 26px rgba(200,107,255,.35), 0 10px 30px rgba(0,0,0,.6), inset 0 -6px 14px rgba(0,0,0,.35); }
.seal:active { transform: scale(.96); } .seal[disabled] { opacity: .6; cursor: wait; }
.err { min-height: 22px; margin-top: 18px; color: #c8775a; font-style: italic; letter-spacing: .04em; }
.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
footer { margin-top: 30px; color: #3d3650; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; }
/* второй шаг входа (двухфакторный вход) */
#f[hidden], #f2[hidden] { display: none; }   /* форма — grid, без этого hidden не прячет */
.hint2 { margin: 0; text-align: center; color: var(--dim); font-family: var(--sans); font-size: 13.5px; }
.hint2.small { font-size: 12px; }
#code { letter-spacing: .3em; text-align: center; font-size: 20px; }
.alt { justify-self: center; border: 1px solid #3a3122; background: rgba(12,11,9,.7); color: var(--gold2); border-radius: 10px; padding: 10px 16px; cursor: pointer; font: 14px var(--sans); }
.alt[hidden] { display: none; }
.rule[hidden] { display: none; }
#f3[hidden], #f3 label[hidden], #f2 label[hidden], .hint2[hidden], .rules li[hidden] { display: none; }
.rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font: 13px var(--sans); color: var(--dim); }
.rules li:before { content: "○ "; color: #6f6552; }
.rules li.ok { color: #9fd8a8; }
.rules li.ok:before { content: "✓ "; color: #7bd88f; }

/* ── страница входа: чёрно-белая, пока вход не подтверждён ── */
body.login { background: radial-gradient(ellipse at 50% 30%, #1a1a1d 0%, #121214 30%, #09090a 60%, #050506 80%); transition: background 1.6s ease; }
body.login:before { filter: grayscale(1); opacity: .05; }
body.login #aurora { filter: blur(9px) saturate(1); }
body.login main { transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
body.granted { background: radial-gradient(ellipse at 50% 30%, #2a2050 0%, #17122a 26%, #0b0909 48%, #050506 68%); }
body.granted main { opacity: 0; transform: scale(.94) translateY(12px); filter: blur(6px); pointer-events: none; }

/* знак появляется только при подтверждённом входе */
#welcome { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
body.granted #welcome { visibility: visible; }
.wSigil { width: min(300px, 62vw); opacity: 0; transform: scale(.3) rotate(-40deg); filter: blur(14px) drop-shadow(0 0 0 rgba(200,107,255,0)); }
body.granted .wSigil { animation: wSigil 1.25s .25s cubic-bezier(.16,1.1,.3,1) forwards, wGlow 2.4s 1.4s ease-in-out infinite alternate; }
@keyframes wSigil { 60% { opacity: 1; filter: blur(0) drop-shadow(0 0 40px rgba(200,107,255,.9)); }
  to { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) drop-shadow(0 0 22px rgba(125,249,255,.55)); } }
@keyframes wGlow { to { filter: drop-shadow(0 0 34px rgba(200,107,255,.75)); } }
.wRing { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(243,220,160,.9);
  box-shadow: 0 0 40px rgba(200,107,255,.7), inset 0 0 30px rgba(125,249,255,.5); opacity: 0; }
body.granted .wRing { animation: wRing 1.4s .2s cubic-bezier(.1,.7,.2,1) forwards; }
body.granted .wRing.r2 { animation-delay: .45s; border-color: rgba(125,249,255,.8); }
@keyframes wRing { 0% { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(7); } }
.wBurst { position: absolute; width: 0; height: 0; }
.wBurst i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; }
body.granted .wBurst i { animation: wSpark 1.3s var(--dl) cubic-bezier(.1,.8,.3,1) forwards; animation-delay: calc(.3s + var(--dl)); }
@keyframes wSpark { 0% { opacity: 1; transform: translate(0,0) scale(1.6); } 70% { opacity: .9; } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
.wText { position: absolute; top: calc(50% + min(170px, 36vw)); font: 500 13px var(--serif); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase;
  color: var(--gold2); opacity: 0; }
body.granted .wText { animation: wText .9s 1.25s ease forwards; }
@keyframes wText { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .5em; } }
/* уход в почту: знак и сияние «влетают» в экран и растворяются */
body.leaving #welcome { animation: wLeave .55s ease-in forwards; }
body.leaving #aurora { transition: opacity .55s ease-in, transform .55s ease-in; opacity: 0; transform: scale(1.3); }
@keyframes wLeave { to { opacity: 0; transform: scale(2.2); filter: blur(8px); } }
.rules:before { content: "Проверка: " attr(data-for); display: block; color: var(--gold); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
h1 + .rule, h1 + form { margin-top: 30px; }