@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@600;700&family=Cormorant:ital,wght@0,400;0,600;1,400&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg-deep:#0a0d0b;
  --bg-panel:#121613;
  --bg-panel-2:#181d19;
  --ink:#c9c2ab;
  --ink-dim:#8a8878;
  --amber:#b8863b;
  --amber-dim:#7a5c2c;
  --rot:#6b2f27;
  --moss:#3f4f3a;
  --water-line:#37493d;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(184,134,59,0.07), transparent 60%),
    var(--bg-deep);
  color:var(--ink);
  font-family:'PT Serif', serif;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:56px 16px 60px;
  overflow-x:hidden;
  position:relative;
}

/* ---------- AMBIENT ---------- */
.ash-layer{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.ash{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:rgba(201,194,171,0.35);
  box-shadow:0 0 4px rgba(184,134,59,0.4);
  animation-name:drift; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes drift{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  8%{ opacity:0.7; }
  92%{ opacity:0.4; }
  100%{ transform:translate(var(--dx,20px), -110vh) rotate(180deg); opacity:0; }
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,0.6) 100%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:0.85;} 50%{opacity:1;} }
.glow-pulse{
  position:fixed;
  top:30%; left:50%;
  width:600px; height:600px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(184,134,59,0.08), transparent 70%);
  pointer-events:none;
  z-index:0;
  animation: glow-breathe 5s ease-in-out infinite;
}
@keyframes glow-breathe{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }

/* ---------- LAYOUT ---------- */
.stage{ width:100%; max-width:460px; position:relative; z-index:3; text-align:center; }

.title-wrap{ margin-bottom:14px; }
.title{
  font-family:'Cormorant SC', serif;
  font-size:2.8em;
  letter-spacing:0.12em;
  color:var(--amber);
  text-shadow:0 0 20px rgba(184,134,59,0.28);
  margin:0;
  animation: flicker 6s ease-in-out infinite;
  filter: url(#waterDistort);
}
.title .letter{ display:inline-block; transition: color 0.15s ease, transform 0.15s ease; }
.title .letter.glitching{
  color:var(--rot);
  text-shadow:0 0 16px rgba(107,47,39,0.85);
  transform:translateY(-3px) scale(1.08);
}
@keyframes flicker{
  0%,100%{ opacity:1; }
  44%{ opacity:0.82; }
  46%{ opacity:1; }
  71%{ opacity:0.9; }
  73%{ opacity:1; }
}
.subtitle{
  font-family:'Cormorant', serif;
  font-style:italic;
  color:var(--ink-dim);
  font-size:1.05em;
  margin-top:6px;
  letter-spacing:0.04em;
}

.intro-text{
  font-size:0.98em;
  line-height:1.7;
  color:var(--ink-dim);
  margin:22px auto 20px;
  max-width:380px;
}

.divider{
  width:160px;
  height:14px;
  color:var(--amber-dim);
  margin:0 auto 26px;
  display:block;
}

/* ---------- AUTH CARD ---------- */
.auth-card{
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--water-line);
  border-radius:4px;
  padding:8px 30px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55), inset 0 0 60px rgba(0,0,0,0.2);
  text-align:left;
  position:relative;
  overflow:hidden;
}
.auth-card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 3px);
}

.tabs{
  display:flex;
  position:relative;
  border-bottom:1px solid var(--water-line);
  margin:0 -30px 26px;
  padding:0 30px;
}
.tab{
  flex:1;
  background:none;
  border:none;
  color:var(--ink-dim);
  font-family:'Cormorant SC', serif;
  font-size:1.15em;
  letter-spacing:0.05em;
  padding:16px 0 12px;
  cursor:pointer;
  transition:color 0.25s ease;
}
.tab.active{ color:var(--amber); }
.tab:hover{ color:var(--ink); }
.tab-indicator{
  position:absolute;
  bottom:-1px;
  left:30px;
  width:calc(50% - 30px);
  height:2px;
  background:var(--amber);
  box-shadow:0 0 10px rgba(184,134,59,0.6);
  transition:transform 0.3s cubic-bezier(.4,1.4,.6,1);
}
.tab-indicator.to-register{
  transform:translateX(100%);
}

.auth-form{
  display:none;
  flex-direction:column;
  gap:16px;
  animation: form-in 0.4s ease;
}
.auth-form.active{ display:flex; }
@keyframes form-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field span{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7em;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.field input{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--water-line);
  border-radius:2px;
  padding:11px 12px;
  color:var(--ink);
  font-family:'PT Serif', serif;
  font-size:1em;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(184,134,59,0.12);
}
.field-hint{
  margin-top:-10px;
  font-size:0.72em;
  color:var(--ink-dim);
  font-style:italic;
}

.form-error{
  min-height:18px;
  font-size:0.82em;
  color:#d97a6c;
  font-style:italic;
}
.form-error.shake{ animation: error-shake 0.4s ease; }
@keyframes error-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}
.form-success{
  min-height:18px;
  font-size:0.85em;
  color:#8fb996;
  font-style:italic;
  line-height:1.5;
}
.forgot-link{
  align-self:center;
  color:var(--ink-dim);
  font-size:0.78em;
  text-decoration:none;
  font-style:italic;
  margin-top:-6px;
  transition:color 0.2s ease;
}
.forgot-link:hover{ color:var(--amber); }
.forgot-intro{
  font-size:0.85em;
  color:var(--ink-dim);
  line-height:1.6;
  margin:0 0 4px;
}

.submit-btn{
  background:rgba(184,134,59,0.1);
  border:1px solid var(--amber);
  color:var(--amber);
  font-family:'Cormorant SC', serif;
  font-size:1.1em;
  letter-spacing:0.05em;
  padding:12px;
  border-radius:2px;
  cursor:pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.submit-btn:hover{
  background:rgba(184,134,59,0.2);
  box-shadow:0 0 18px rgba(184,134,59,0.25);
  transform:translateY(-1px);
}
.submit-btn:disabled{
  opacity:0.5;
  cursor:default;
  transform:none;
  box-shadow:none;
}

.or-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:24px 0 18px;
  color:var(--ink-dim);
  font-family:'JetBrains Mono', monospace;
  font-size:0.7em;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.or-divider::before, .or-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--water-line);
}

.vk-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  background:rgba(90,130,180,0.08);
  border:1px solid rgba(90,130,180,0.4);
  color:#a9c2de;
  font-family:'PT Serif', serif;
  font-size:0.95em;
  padding:11px;
  border-radius:2px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.vk-btn:hover{
  background:rgba(90,130,180,0.16);
  border-color:rgba(90,130,180,0.7);
  transform:translateY(-1px);
}

.footnote{
  margin-top:22px;
  font-size:0.78em;
  font-style:italic;
  color:var(--ink-dim);
  line-height:1.6;
}

@media (max-width:480px){
  .auth-card{ padding:6px 20px 24px; }
  .tabs{ margin:0 -20px 22px; padding:0 20px; }
  .tab-indicator{ left:20px; width:calc(50% - 20px); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}