:root {
  --bg: #2A0F17;
  --card: #2F1119;
  --line: rgba(243,213,140,.28);
  --text: #F7E6D6;
  --muted: #D2B4A6;
  --gold-ink: #2A1404;
  --danger: #FF8A80;
  --ok: #8FE0B0;
  --gold-metal: linear-gradient(135deg, #FBEBB5 0%, #E2BD6A 24%, #B4842F 50%, #EED08A 74%, #C29341 100%);
  --gold-text: linear-gradient(135deg, #FBE7A8 0%, #E2BD6A 40%, #C29341 70%, #F3D58C 100%);
}
* { box-sizing: border-box; }
html { background: var(--bg); min-height: 100%; }
html, body { margin: 0; min-height: 100%; color: var(--text); font-family: Manrope, system-ui, -apple-system, sans-serif; }
body { display: flex; justify-content: center; align-items: flex-start; padding: 0 16px; min-height: 100vh; position: relative; }
/* бархатный фон: золотое свечение снизу, розовое справа */
html { background: #16070B; }
body { background: radial-gradient(120% 70% at 50% 0%, #5A1E2E 0%, #2A0F17 52%, #16070B 100%) fixed; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before { left: 0; right: 0; bottom: -80px; height: 360px; background: radial-gradient(55% 60% at 50% 100%, rgba(233,190,90,.20), transparent 70%); }
body::after { right: -120px; top: 120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(200,60,90,.22), transparent 70%); }
.login { width: 100%; max-width: 420px; margin: 56px 0 40px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,235,225,.06); border: 1px solid var(--line); border-radius: 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.brand img { width: 56px; height: 56px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.brand span { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 28px;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 { margin: 0; font-weight: 800; font-size: 24px; line-height: 1.25; }
.sub { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
button, input { font-family: inherit; font-size: 16px; }
.btn-google, .btn-gold { width: 100%; height: 54px; border-radius: 18px; border: 0; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-google { background: #fff; color: #1F1F1F; text-decoration: none; }
.btn-google svg { width: 20px; height: 20px; }
.btn-gold { background: var(--gold-metal); color: var(--gold-ink); text-shadow: 0 1px 0 rgba(255,255,255,.5);
  transition: transform .08s, box-shadow .08s;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(90,50,10,.3), 0 5px 0 #7A5212, 0 12px 26px rgba(0,0,0,.45); }
.btn-gold:not(:disabled):active { transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(90,50,10,.3), 0 1px 0 #7A5212, 0 5px 12px rgba(0,0,0,.4); }
.btn-gold:disabled { opacity: .55; cursor: default; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 6px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
input[type=email] { width: 100%; height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,235,225,.06); color: var(--text); outline: none; }
input[type=email]::placeholder { color: #A88A7E; }
input[type=email]:focus { border-color: #D9B25C; }
.msg { font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 14px; background: rgba(255,235,225,.07); border: 1px solid var(--line); }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }
.fine { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 18px; text-align: center; }
.fine a { color: #F3D58C; }
.legal { display: flex; justify-content: center; gap: 18px; margin-top: 4px; }
.legal a { color: var(--muted); font-size: 12px; text-decoration: none; }
.legal a:hover { color: #F3D58C; }
[hidden] { display: none !important; }