/* ============================================================
   MEA ASSISTANT V2 — AUTH STYLESHEET (Login & Register)
   MEA DNA intact. Cloudflare-inspired. Dark Premium.
   ============================================================ */


/* ─────────────────────────────────────────────────────────
   1. TOKENS (same as landing)
───────────────────────────────────────────────────────── */
:root {
  --clr-bg      : #050505;
  --clr-card    : #0f0f0f;
  --clr-red     : #C41E3A;
  --clr-red-dim : #8B0000;
  --clr-white   : #F0EDE8;
  --clr-grey    : #9A9690;
  --clr-border  : rgba(255,255,255,0.07);
  --clr-input   : rgba(255,255,255,0.04);
  --clr-input-focus: rgba(196,30,58,0.12);

  --f-display : 'Bebas Neue', sans-serif;
  --f-body    : 'Cormorant Garamond', serif;
  --f-mono    : 'Space Mono', monospace;

  --ease      : cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast    : 0.22s var(--ease);
  --t-med     : 0.38s var(--ease);
}

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

html {
  overflow-x    : hidden;
  scroll-behavior: smooth;
}

body {
  background  : var(--clr-bg);
  color       : var(--clr-white);
  font-family : var(--f-body);
  font-size   : 16px;
  line-height : 1.7;
  min-height  : 100vh;
  overflow-x  : hidden;
  display     : flex;
  align-items : center;
  justify-content: center;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-red); }


/* ─────────────────────────────────────────────────────────
   2. GRAIN OVERLAY
───────────────────────────────────────────────────────── */
.grain {
  position         : fixed;
  inset            : 0;
  z-index          : 9000;
  pointer-events   : none;
  opacity          : 0.025;
  will-change      : transform;
  background-image : url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size  : 200px;
  animation        : grain-shift 0.2s steps(1) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0);    }
  25%  { transform: translate(-3%,2%); }
  50%  { transform: translate(2%,-3%); }
  75%  { transform: translate(3%,1%);  }
  100% { transform: translate(-1%,3%); }
}


/* ─────────────────────────────────────────────────────────
   3. AUTH BACKGROUND
───────────────────────────────────────────────────────── */
.auth-bg {
  position : fixed;
  inset    : 0;
  z-index  : -1;
  background:
    radial-gradient(ellipse 55% 60% at 15% 50%, rgba(196,30,58,0.10), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 20%, rgba(196,30,58,0.06), transparent 55%),
    linear-gradient(160deg, #0A0000 0%, var(--clr-bg) 50%, #0D0000 100%);
}


/* ─────────────────────────────────────────────────────────
   4. AUTH WRAPPER
───────────────────────────────────────────────────────── */
.auth-wrap {
  width      : 100%;
  min-height : 100vh;
  display    : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding    : 2rem 1.25rem;
  gap        : 2rem;
}


/* ─────────────────────────────────────────────────────────
   5. AUTH CARD (Cloudflare-inspired panel)
───────────────────────────────────────────────────────── */
.auth-card {
  width      : 100%;
  max-width  : 420px;
  background : rgba(15,15,15,0.85);
  border     : 1px solid var(--clr-border);
  border-top : 1px solid rgba(196,30,58,0.25);
  padding    : 2.5rem 2rem 2rem;
  position   : relative;
  /* Red top glow */
  box-shadow :
    0 0 0 1px rgba(196,30,58,0.05),
    0 24px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(196,30,58,0.1);
  animation  : card-in 0.55s var(--ease) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Red accent line left */
.auth-card::before {
  content    : "";
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 2px;
  height     : 100%;
  background : linear-gradient(to bottom, var(--clr-red), transparent);
}

/* Register card slightly taller — allow for wider */
.auth-card.register-card {
  max-width : 460px;
}


/* ─────────────────────────────────────────────────────────
   6. AUTH CARD HEADER
───────────────────────────────────────────────────────── */
.auth-logo {
  font-family    : var(--f-display);
  font-size      : 2.2rem;
  letter-spacing : 0.15em;
  color          : var(--clr-red);
  display        : block;
  line-height    : 1;
}
.auth-sub {
  font-family    : var(--f-mono);
  font-size      : 0.5rem;
  letter-spacing : 0.3em;
  color          : var(--clr-grey);
  text-transform : uppercase;
  margin-bottom  : 1.5rem;
}

.auth-title {
  font-family : var(--f-display);
  font-size   : clamp(2rem, 8vw, 2.8rem);
  line-height : 0.9;
  letter-spacing: 0.02em;
  margin-bottom : 1.75rem;
}
.auth-title .outline {
  -webkit-text-stroke: 1px var(--clr-white);
  color               : transparent;
}


/* ─────────────────────────────────────────────────────────
   7. ALERT BOX
───────────────────────────────────────────────────────── */
.auth-alert {
  padding       : 0.75rem 1rem;
  border-left   : 2px solid var(--clr-red);
  background    : rgba(196,30,58,0.08);
  font-family   : var(--f-mono);
  font-size     : 0.62rem;
  letter-spacing: 0.05em;
  color         : var(--clr-white);
  margin-bottom : 1.25rem;
  animation     : fade-in 0.25s var(--ease);
}
.auth-alert.success {
  border-color : #2ecc71;
  background   : rgba(46,204,113,0.08);
  color        : #a8f0c6;
}
.auth-alert.warning {
  border-color : #f39c12;
  background   : rgba(243,156,18,0.08);
  color        : #f8d08a;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────────────────
   8. FORM FIELDS
───────────────────────────────────────────────────────── */
.auth-form {
  display        : flex;
  flex-direction : column;
  gap            : 1.1rem;
}

.field-group {
  display        : flex;
  flex-direction : column;
  gap            : 0.35rem;
}

/* Two-column row (for name/username on register) */
.field-row {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 0.75rem;
}

.field-label {
  font-family    : var(--f-mono);
  font-size      : 0.55rem;
  letter-spacing : 0.2em;
  color          : var(--clr-grey);
  text-transform : uppercase;
}

.input-wrap {
  position : relative;
}

.field-input {
  width        : 100%;
  background   : var(--clr-input);
  border       : 1px solid var(--clr-border);
  color        : var(--clr-white);
  font-family  : var(--f-body);
  font-size    : 0.9rem;
  padding      : 0.65rem 0.85rem;
  outline      : none;
  transition   : border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  border-radius: 0; /* flat — Cloudflare aesthetic */
}
.field-input::placeholder {
  color   : rgba(154,150,144,0.45);
  font-size: 0.82rem;
}
.field-input:focus {
  border-color : var(--clr-red);
  background   : var(--clr-input-focus);
  box-shadow   : 0 0 0 3px rgba(196,30,58,0.08);
}
.field-input.error {
  border-color : #e74c3c;
  background   : rgba(231,76,60,0.05);
}

/* Password field — room for toggle button */
.input-wrap .field-input {
  padding-right : 2.5rem;
}

.toggle-pw {
  position    : absolute;
  right       : 0.75rem;
  top         : 50%;
  transform   : translateY(-50%);
  background  : none;
  border      : none;
  color       : var(--clr-grey);
  cursor      : pointer;
  padding     : 4px;
  transition  : color var(--t-fast);
  line-height : 0;
}
.toggle-pw:hover { color: var(--clr-white); }

.field-error {
  font-family : var(--f-mono);
  font-size   : 0.55rem;
  letter-spacing: 0.05em;
  color       : #e74c3c;
  min-height  : 0.8rem;
}


/* ─────────────────────────────────────────────────────────
   9. SUBMIT BUTTON
───────────────────────────────────────────────────────── */
.btn-submit {
  margin-top    : 0.5rem;
  width         : 100%;
  padding       : 0.8rem 1.5rem;
  background    : var(--clr-red);
  border        : 1px solid var(--clr-red);
  color         : var(--clr-white);
  font-family   : var(--f-mono);
  font-size     : 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor        : pointer;
  transition    : background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  display       : flex;
  align-items   : center;
  justify-content: center;
  gap           : 0.6rem;
  position      : relative;
  overflow      : hidden;
}
.btn-submit:hover:not(:disabled) {
  background : var(--clr-red-dim);
  box-shadow : 0 0 20px rgba(196,30,58,0.35);
}
.btn-submit:disabled {
  opacity : 0.6;
  cursor  : not-allowed;
}
.btn-submit.loading .btn-text { opacity: 0; }

/* Spinner */
.btn-loader {
  display        : none;
  width          : 14px;
  height         : 14px;
  border         : 2px solid rgba(240,237,232,0.25);
  border-top-color: var(--clr-white);
  border-radius  : 50%;
  animation      : spin 0.6s linear infinite;
  position       : absolute;
}
.btn-submit.loading .btn-loader { display: block; }
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────────
   10. SWITCH LINK
───────────────────────────────────────────────────────── */
.auth-switch {
  margin-top  : 1.5rem;
  text-align  : center;
  font-family : var(--f-mono);
  font-size   : 0.6rem;
  letter-spacing: 0.1em;
  color       : var(--clr-grey);
}
.auth-link {
  color       : var(--clr-red);
  border-bottom: 1px solid transparent;
  transition  : border-color var(--t-fast);
}
.auth-link:hover { border-color: var(--clr-red); }


/* ─────────────────────────────────────────────────────────
   11. DECO LINE
───────────────────────────────────────────────────────── */
.auth-deco {
  display     : flex;
  align-items : center;
  gap         : 1rem;
  width       : 100%;
  max-width   : 420px;
}
.deco-line {
  flex        : 1;
  height      : 1px;
  background  : linear-gradient(to right, transparent, rgba(196,30,58,0.25), transparent);
}
.deco-label {
  font-family    : var(--f-mono);
  font-size      : 0.48rem;
  letter-spacing : 0.3em;
  color          : rgba(154,150,144,0.4);
  text-transform : uppercase;
  white-space    : nowrap;
}


/* ─────────────────────────────────────────────────────────
   12. RESPONSIVE
───────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .auth-card { padding: 3rem 2.5rem 2.5rem; }
}

@media (max-width: 400px) {
  .field-row {
    grid-template-columns : 1fr;
  }
}


/* ─────────────────────────────────────────────────────────
   13. REDUCED MOTION
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration      : 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration     : 0.01ms !important;
  }
  .grain { animation: none; }
}