:root{
  --mi-accent:#f59e0b;
  --mi-accent-hover:#bb4d00;
  --mi-text:#111827;
  --mi-muted:#6b7280;
  --mi-border:#e5e7eb;
  --mi-bg:rgba(17,24,39,.72);
  --mi-card:#fff;
  --mi-shadow:0 20px 40px rgba(0,0,0,.18);
  --mi-focus:rgba(245,158,11,.14);
}

/* Loader spinner */
.loader {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--mi-accent);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: none;
  margin: 10px auto;
}
.loader.is-active { display: block; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Modal container */
.mi-auth-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--mi-bg);
  z-index: 10000;
}
.mi-auth-modal.is-open { display:flex; }

/* Card */
.mi-auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  background: var(--mi-card);
  border-radius: 14px;
  box-shadow: var(--mi-shadow);
  overflow-y: auto;
  animation: mi-fade-up .28s ease;
}

/* Close button */
.mi-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background:#fff;
  border:1px solid var(--mi-border);
  border-radius:8px;
  padding:6px;
  cursor:pointer;
}
.mi-modal-close i { width:20px; height:20px; stroke:#374151; }

/* Header */
.mi-auth-header { padding:16px 20px 8px; }
#mi-auth-title { margin:0; font-size:1.25rem; color:var(--mi-text); }
#mi-auth-subtitle { margin:6px 0 0; color:var(--mi-muted); font-size:.95rem; }

/* Tabs */
.mi-tab-pane { display:none; padding:16px 20px; }
.mi-tab-pane.is-active { display:block; }

/* Form fields */
.mi-form { margin-top:6px; }
.mi-field {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--mi-border);
  border-radius:10px;
  background:#fbfbfb;
  margin-bottom:14px; /* extra space for error lines */
  flex-wrap: wrap;    /* allow error to wrap below */
  transition: border-color .2s, box-shadow .2s;
}
.mi-field:focus-within {
  border-color:var(--mi-accent);
  box-shadow:0 0 0 3px var(--mi-focus);
  background:#fff;
}
.mi-field.invalid {
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,0.12);
  background:#fff;
}
.mi-field input {
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:var(--mi-text);
  font-size:.95rem;
  padding:6px 0;
  min-width: 0; /* prevent overflow in flex contexts */
  font-family: "DM Sans", sans-serif;
}
.mi-field input::placeholder { color:#9ca3af; }

/* Inline error message under fields */
.mi-error-msg {
  flex-basis:100%;
  margin-top:6px;
  font-size:.85rem;
  line-height:1.2;
  color:#dc2626;
}

/* Icons */
.mi-icon { color:#374151; width:18px; height:18px; }

/* Password eye toggle */
.mi-password { gap:6px; }
.mi-eye {
  background:none;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mi-eye .mi-eye-off { display:none; }
.mi-eye.is-on .mi-eye-on { display:none; }
.mi-eye.is-on .mi-eye-off { display:inline; }
.mi-eye svg { width:18px; height:18px; stroke:#374151; }

/* Captcha */
.mi-captcha-text {
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-weight:700;
  letter-spacing:.14rem;
  background:linear-gradient(120deg,#fff7ed,#fde68a);
  padding:4px 8px;
  border-radius:6px;
  user-select:none;
  color:#111827;
}

/* Buttons */
.mi-btn {
  width:100%;
  padding:11px;
  border-radius:10px;
  border:1px solid #1f2937;
  font-weight:700;
  cursor:pointer;
  transition: background .2s, color .2s;
}
.mi-btn-primary { background:#111827; color:#fff; }
.mi-btn-primary:hover { background:#1f2937; }

/* Rows & links */
.mi-row { display:flex; align-items:center; gap:10px; margin-top:10px; }
.mi-between { justify-content:space-between; margin-top: 20px; }

.mi-link {
  background:none;
  border:none;
  color:#1f2937;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
  transition: color .2s;
}
.mi-link:hover { color:var(--mi-accent-hover); }

/* Form messages */
.mi-form-msg {
  margin-top:10px;
  font-size:.9rem;
  min-height:1.2em;
}
.mi-form-msg.error { color:#dc2626; }
.mi-form-msg.success { color:#16a34a; }

/* OTP timer */
.mi-timer {
  display:block;
  margin-top:8px;
  font-size:.85rem;
  color:#6b7280;
  font-style: italic;
}

/* Responsive */
@media (max-width:480px){
  .mi-auth-card{max-width:100%; padding:12px;}
  #mi-auth-title{font-size:1.2rem;}
  .mi-field{margin-bottom:16px;}
}

/* Animations */
@keyframes mi-fade-up {
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}

.mi-social-auth {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.mi-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: #9ca3af; /* Neutral gray */
    font-size: 0.75rem;
    font-weight: 600;
}

.mi-divider::before,
.mi-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}

.mi-divider span {
    padding: 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}