/* auth.css — shared styles for login & register pages */
:root {
  --deep: #080010;
  --violet: #9333ea;
  --cobalt: #1d4ed8;
  --crimson: #dc2626;
  --blue: #3b82f6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  color: #e2d9f3;
  padding: 2rem 1rem;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(107,33,168,.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(29,78,216,.2) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 50% 90%, rgba(220,38,38,.18) 0%, transparent 60%);
  pointer-events: none;
}

.auth-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
}

.auth-card {
  background: rgba(12,0,25,.92);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(147,51,234,.25);
  box-shadow: 0 0 60px rgba(147,51,234,.2), 0 30px 60px rgba(0,0,0,.6);
}

.auth-back {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(180,160,220,.5);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color .2s;
}
.auth-back:hover { color: var(--violet); }

.auth-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--violet), var(--blue), var(--crimson));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .4rem;
}

.auth-sub {
  font-size: .85rem;
  color: rgba(180,160,220,.55);
  letter-spacing: .1em;
  margin-bottom: 1.75rem;
}

.form-group {
  margin-bottom: 1.1rem;
}
.form-group label {
  display: block;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(180,160,220,.65);
  margin-bottom: .4rem;
}
.optional { font-size: .65rem; color: rgba(180,160,220,.35); }

.dfh-input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(147,51,234,.3);
  border-radius: 8px;
  padding: .65rem .9rem;
  color: #e2d9f3;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.dfh-input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(147,51,234,.15);
}
.dfh-file { cursor: pointer; padding: .5rem .9rem; }

.dfh-btn {
  width: 100%;
  margin-top: .5rem;
  padding: .75rem;
  background: linear-gradient(135deg, var(--violet), var(--cobalt));
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.dfh-btn:hover { opacity: .9; transform: translateY(-1px); }

.alert-dfh {
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .88rem;
  line-height: 1.5;
}
.alert-error  { background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.35); color: #fca5a5; }
.alert-success{ background: rgba(29,185,84,.12);  border: 1px solid rgba(29,185,84,.35);  color: #86efac; }
.alert-success a { color: #4ade80; }

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .85rem;
  color: rgba(180,160,220,.45);
}
.auth-switch a { color: var(--violet); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }