/* ===============================
   DEFAULT (fallback)
================================ */
:root {
  --bg: #f3f4f8;
  --text: #1f2a3d;
  --card: #ffffff;
  --input: #f8f9fc;
  --border: #dfe3ee;
  --primary: #3f73e0;
  --muted: #6b7280;
}

/* ===============================
   LIGHT THEME
================================ */
:root[data-theme='light'] {
  --bg: #f3f4f8;
  --text: #1f2a3d;
  --card: #ffffff;
  --input: #f8f9fc;
  --border: #dfe3ee;
  --primary: #3f73e0;
  --muted: #6b7280;
  --ph: #090909

}


/* ===============================
   DARK THEME COLORS
================================ */
:root[data-theme='dark'] {
  --bg: #08113a;
  --text: #f5f7ff;
  --card: rgba(5, 10, 30, 0.65);
  --input: rgba(10, 20, 60, 0.65);
  --border: rgba(132, 151, 255, 0.15);
  --primary: #3f73e0;
  --muted: #b8c1e3;
  --ph: #f9f9f9
}

/* ===============================
   GLOBAL RESET
================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background: var(--bg);
}

/* ===============================
   DARK MODE BACKGROUND (EXACT IMAGE STYLE)
================================ */
:root[data-theme='dark'] body {
  background:
  
    /* Top glow behind logo */
    radial-gradient(circle at 50% 90px, rgba(255, 255, 255, 0.10), transparent 25%),
    /* Top glow behind logo */
    radial-gradient(circle at 50% 130px, rgba(255, 255, 255, 0.15), transparent 25%),



    /* Main center glow behind card */
    radial-gradient(circle at 50% 350px, rgba(255, 255, 255, 0.25), transparent 25%), 
    /* Main center glow behind card */
    radial-gradient(circle at 50% 450px, rgba(255, 255, 255, 0.25), transparent 25%),
    /* Main center glow behind card */
    radial-gradient(circle at 50% 550px, rgba(255, 255, 255, 0.15), transparent 25%), 
    /* Main center glow below card */
    radial-gradient(circle at 50% 650px, rgba(255, 255, 255, 0.15), transparent 25%),
    /* Main center glow below card */
    radial-gradient(circle at 50% 750px, rgba(255, 255, 255, 0.15), transparent 25%), 
    /* Main lower glow below card */
    radial-gradient(circle at 50% 950px, rgba(255, 255, 255, 0.15), transparent 25%),


   
    /* Dark vignette edges */
    radial-gradient(circle at center, transparent 55%, rgba(0,0,0,0.20) 100%),

    /* Deep navy base */
    linear-gradient(180deg, #02020e 50%, #02020e 50%, #02020e 100%);
  background-attachment: fixed;
}

/* ===============================
   LAYOUT
================================ */
.auth-wrap {
  max-width: 420px;
  margin: 40px auto;
  padding: 20px;
}

.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(12px);
}

/* ===============================
   TYPOGRAPHY
================================ */
.auth-title {
  text-align: center;
  margin: 0 0 16px;
}



/* ===============================
   INPUTS
================================ */
.input {
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  outline: none;
  transition: 0.3s ease;
}

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(63,115,224,0.25);
}

.input::placeholder {
  color: var(--ph);
  opacity: 0.5;
}

/* ===============================
   BUTTONS
================================ */

.help-btn {
  position: fixed;
  bottom: 14px;
  right: 14px;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;   

  background: linear-gradient(135deg, #1c3faa, #162d7a);
  color: #ffffff;

  font-weight: 500;
  text-decoration: none;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.25s ease;
}

.help-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.help-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: rgba(0,0,0,1);
  background: rgba(255,255,255,1);
  display: grid;
  place-items: center;
  font-weight: bold;
  font-size: 13px;
}
.btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s ease;
}

.btn:hover {
  opacity: 0.92;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* ===============================
   MUTED TEXT
================================ */
.muted {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

a {
  color: var(--primary);
  text-decoration: none;
}

.error-message {
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
  color: #ff4d4f /* soft red */
  min-height: 18px; /* prevents layout jump */
}