/* =============================================
   SECURITY WEB — Light Premium, Blue Theme
   ============================================= */
:root {
  --blue-900: #0f172a;
  --blue-800: #1e3a5f;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  --bg:       #f8fafc;
  --bg-card:  #ffffff;
  --bg-soft:  #f1f5f9;

  --text:     #0f172a;
  --text-soft:#475569;
  --text-xs:  #94a3b8;

  --green:  #059669;
  --red:    #dc2626;
  --amber:  #d97706;
  --green-bg:#ecfdf5;
  --red-bg:  #fef2f2;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow:    0 4px 16px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.12);

  --radius:    10px;
  --radius-lg: 16px;
  --font: 'Inter', system-ui, sans-serif;
  --t: 0.2s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }

/* ── TYPOGRAPHY ── */
h1 { font-size: clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.15; letter-spacing:-0.02em; color:var(--text); }
h2 { font-size: clamp(1.4rem,3vw,2rem); font-weight:700; line-height:1.2; color:var(--text); }
h3 { font-size:1.15rem; font-weight:600; color:var(--text); }
h4 { font-size:0.95rem; font-weight:600; color:var(--text); }
p  { line-height:1.7; color:var(--text-soft); }
.text-muted  { color:var(--text-xs); }
.text-blue   { color:var(--blue-600); }
.text-green  { color:var(--green); }
.text-red    { color:var(--red); }
.text-amber  { color:var(--amber); }

/* ── LAYOUT ── */
.container    { width:100%; max-width:1200px; margin:0 auto; padding:0 2rem; }
.container-sm { max-width:560px; margin:0 auto; padding:0 1.5rem; }
.section      { padding:5rem 0; }
.section-sm   { padding:3rem 0; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-1{gap:0.5rem;} .gap-2{gap:1rem;} .gap-3{gap:1.5rem;} .gap-4{gap:2rem;}

/* ── NAVIGATION (Desktop only) ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--bg-card); border-bottom:1px solid #e2e8f0;
  height:64px; box-shadow:var(--shadow-sm);
}
.nav-inner {
  height:100%; display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; max-width:1400px; margin:0 auto;
}
.nav-logo { display:flex; align-items:center; gap:0.65rem; font-weight:800; font-size:1.1rem; color:var(--text); }
.nav-logo i { color:var(--blue-600); font-size:1.4rem; }
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-link {
  padding:0.5rem 0.9rem; border-radius:var(--radius);
  font-size:0.875rem; font-weight:500; color:var(--text-soft);
  transition:all var(--t);
}
.nav-link:hover { background:var(--blue-50); color:var(--blue-700); }
.nav-link.active { background:var(--blue-50); color:var(--blue-700); font-weight:600; }
.nav-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--blue-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem; cursor:pointer;
}
.nav-email { font-size:0.85rem; color:var(--text-soft); }

@media(max-width:768px){ .nav { display:none; } }

/* ── BOTTOM NAV (Mobile only) ── */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--bg-card); border-top:1px solid var(--bg-soft);
  height:70px; box-shadow:0 -4px 20px rgba(0,0,0,0.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner {
  display:flex; align-items:center; justify-content:space-around;
  height:70px; padding:0 0.25rem;
  max-width:500px; margin:0 auto;
}
.bottom-nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0.25rem;
  padding:0.4rem 0.15rem;
  min-width:48px; max-width:70px;
  font-size:0.65rem; font-weight:500; color:var(--text-soft);
  transition:all 0.2s ease;
  text-decoration:none; border-radius:10px;
}
.bottom-nav-item i {
  font-size:1.2rem;
  transition:transform 0.2s ease;
}
.bottom-nav-item:hover {
  color:var(--blue-600);
  background:var(--blue-50);
}
.bottom-nav-item:hover i {
  transform:translateY(-2px);
}
.bottom-nav-item.active {
  color:var(--blue-600);
  background:linear-gradient(135deg,var(--blue-50),var(--blue-100));
}
.bottom-nav-item.active i {
  transform:translateY(-1px);
}
@media(max-width:900px){ .bottom-nav { display:flex; } }
@media(max-width:480px){
  .bottom-nav{ height:64px; }
  .bottom-nav-inner{ height:64px; padding:0 0.15rem; }
  .bottom-nav-item{ min-width:44px; padding:0.35rem 0.1rem; font-size:0.6rem; gap:0.2rem; }
  .bottom-nav-item i{ font-size:1.1rem; }
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.7rem 1.4rem; border-radius:var(--radius);
  font-size:0.9rem; font-weight:600; cursor:pointer; border:none;
  transition:all var(--t); font-family:var(--font);
}
.btn-lg { padding:1rem 2rem; font-size:1rem; }
.btn-sm { padding:0.45rem 0.9rem; font-size:0.8rem; }
.btn-blue  { background:var(--blue-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-blue:hover { background:var(--blue-700); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-soft  { background:var(--blue-50); color:var(--blue-700); }
.btn-soft:hover { background:var(--blue-100); }
.btn-ghost { background:transparent; color:var(--text-soft); }
.btn-ghost:hover { background:var(--bg-soft); color:var(--text); }
.btn-dark  { background:var(--text); color:#fff; }
.btn-dark:hover { background:var(--blue-900); transform:translateY(-1px); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { opacity:0.9; transform:translateY(-1px); }
.btn-red   { background:var(--red); color:#fff; }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none!important; }

/* ── CARDS ── */
.card {
  background:var(--bg-card); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--shadow-sm);
}
.card-blue {
  background:var(--blue-600); border-radius:var(--radius-lg);
  padding:1.5rem; color:#fff;
}
.card-soft {
  background:var(--bg-soft); border-radius:var(--radius-lg); padding:1.5rem;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem;
}
.card-title { font-size:0.95rem; font-weight:600; color:var(--text); }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.3rem 0.75rem; border-radius:100px;
  font-size:0.72rem; font-weight:600;
  background:var(--bg-soft); color:var(--text-soft);
}
.badge-blue  { background:var(--blue-50); color:var(--blue-700); }
.badge-green { background:var(--green-bg); color:var(--green); }
.badge-red   { background:var(--red-bg); color:var(--red); }
.badge-amber { background:#fffbeb; color:var(--amber); }
.dot-live { width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; animation:pdot 2s infinite; }
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── FORMS ── */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:0.82rem; font-weight:600; color:var(--text-soft); margin-bottom:0.45rem; }
.input-wrap { position:relative; }
.input-wrap i { position:absolute; left:0.9rem; top:50%; transform:translateY(-50%); color:var(--text-xs); font-size:0.9rem; }
.form-input {
  width:100%; padding:0.85rem 1rem 0.85rem 2.6rem;
  background:var(--bg-soft); color:var(--text);
  border:none; border-radius:var(--radius);
  font-size:0.95rem; font-family:var(--font);
  transition:all var(--t);
}
.form-input.no-icon { padding-left:1rem; }
.form-input.with-eye { padding-right:2.8rem; }
.password-toggle {
  position:absolute; right:0.9rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-xs); cursor:pointer;
  font-size:1rem; padding:0.25rem; display:flex; align-items:center; justify-content:center;
  transition:color var(--t);
}
.password-toggle:hover { color:var(--blue-600); }
.form-input:focus { outline:none; background:var(--bg-card); box-shadow:0 0 0 2.5px var(--blue-500); }
.form-input::placeholder { color:var(--text-xs); }
.btn-submit {
  width:100%; padding:1rem; background:var(--blue-600); color:#fff;
  border:none; border-radius:var(--radius); font-size:1rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:0.75rem; transition:all var(--t); font-family:var(--font);
}
.btn-submit:hover:not(:disabled) { background:var(--blue-700); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-submit:disabled { opacity:0.45; cursor:not-allowed; transform:none; }

/* ── ALERTS ── */
.alert {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.9rem 1.1rem; border-radius:var(--radius);
  font-size:0.875rem; font-weight:500; margin-bottom:1rem;
}
.alert-error   { background:var(--red-bg); color:var(--red); }
.alert-success { background:var(--green-bg); color:var(--green); }
.alert-info    { background:var(--blue-50); color:var(--blue-700); }

/* ── STEPS ── */
.steps { display:flex; gap:0.5rem; margin-bottom:2rem; }
.step { flex:1; height:4px; background:var(--bg-soft); border-radius:100px; transition:background var(--t); }
.step.active    { background:var(--blue-600); }
.step.completed { background:var(--green); }

/* ── STATS ── */
.stat-num   { font-size:2.25rem; font-weight:800; color:var(--text); line-height:1; }
.stat-label { font-size:0.75rem; font-weight:600; color:var(--text-xs); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.35rem; }

/* ── PROGRESS ── */
.progress-bar  { height:6px; background:var(--bg-soft); border-radius:100px; overflow:hidden; }
.progress-fill { height:100%; border-radius:100px; background:var(--blue-600); transition:width 0.6s ease; }
.progress-fill.green { background:var(--green); }
.progress-fill.amber { background:var(--amber); }
.progress-fill.red   { background:var(--red); }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:var(--shadow-sm); }
table { width:100%; border-collapse:collapse; }
th { padding:0.75rem 1.25rem; text-align:left; font-size:0.72rem; font-weight:700; color:var(--text-xs); text-transform:uppercase; letter-spacing:0.06em; background:var(--bg-soft); }
td { padding:1rem 1.25rem; font-size:0.875rem; color:var(--text-soft); }
tbody tr { border-bottom:1px solid var(--bg-soft); }
tbody tr:hover { background:var(--blue-50); }
tbody tr:last-child { border-bottom:none; }


/* ── ICON BOX ── */
.icon-box {
  width:44px; height:44px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.ib-blue  { background:var(--blue-50); color:var(--blue-600); }
.ib-green { background:var(--green-bg); color:var(--green); }
.ib-red   { background:var(--red-bg); color:var(--red); }
.ib-amber { background:#fffbeb; color:var(--amber); }

/* ── DIVIDER ── */
.divider { height:1px; background:var(--bg-soft); margin:1.5rem 0; }

/* ── AUTH SPLIT LAYOUT ── */
.auth-layout {
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr;
}
.auth-left {
  background:var(--blue-600); padding:4rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-left-deco {
  position:absolute; top:-80px; right:-80px;
  width:340px; height:340px; border-radius:50%;
  background:rgba(255,255,255,0.07);
}
.auth-left-deco2 {
  position:absolute; bottom:-60px; left:-60px;
  width:260px; height:260px; border-radius:50%;
  background:rgba(255,255,255,0.05);
}
.auth-left-content { position:relative; z-index:1; color:#fff; }
.auth-left-logo { display:flex; align-items:center; gap:0.65rem; font-weight:800; font-size:1.25rem; color:#fff; margin-bottom:3rem; }
.auth-left-logo i { font-size:1.5rem; opacity:0.9; }
.auth-left h2 { color:#fff; margin-bottom:1rem; }
.auth-left p  { color:rgba(255,255,255,0.75); margin-bottom:2.5rem; }
.auth-feat { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.auth-feat-icon {
  width:42px; height:42px; border-radius:var(--radius);
  background:rgba(255,255,255,0.15); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff;
}
.auth-feat-text h4 { color:#fff; margin-bottom:0.2rem; font-size:0.9rem; }
.auth-feat-text p  { color:rgba(255,255,255,0.65); font-size:0.82rem; margin:0; }
.auth-left-stats { display:flex; gap:2rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.15); position:relative; z-index:1; }
.auth-left-stat .num { font-size:1.75rem; font-weight:800; color:#fff; }
.auth-left-stat .lbl { font-size:0.75rem; color:rgba(255,255,255,0.65); }

.auth-right {
  display:flex; align-items:center; justify-content:center;
  padding:3rem 4rem; background:var(--bg);
}
.auth-form-box { width:100%; max-width:420px; }
.auth-form-title { font-size:1.75rem; font-weight:800; margin-bottom:0.4rem; }
.auth-form-sub   { color:var(--text-soft); font-size:0.9rem; margin-bottom:2rem; }
.auth-footer-link { text-align:center; margin-top:1.5rem; font-size:0.875rem; color:var(--text-soft); }
.auth-footer-link a { color:var(--blue-600); font-weight:600; }
.auth-footer-link a:hover { text-decoration:underline; }

@media(max-width:768px) {
  .auth-layout { grid-template-columns:1fr; }
  .auth-left { display:none; }
  .auth-right { padding:2rem 1.5rem; padding-bottom:5rem; min-height:100vh; align-items:flex-start; padding-top:3rem; }
}

/* ── PAGE LAYOUT ── */
.page-wrap { padding-top:64px; min-height:100vh; background:var(--bg); }
@media(max-width:768px) { .page-wrap { padding-top:0; padding-bottom:64px; } }

.page-header { background:var(--bg-card); padding:2rem; box-shadow:var(--shadow-sm); }
.page-body   { padding:2rem; max-width:1400px; margin:0 auto; }

@media(max-width:768px) {
  .page-header { padding:1.25rem; }
  .page-body   { padding:1rem; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
}

/* ── SPINNER ── */
.spinner {
  display:inline-block; width:1rem; height:1rem;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }

/* ── UTILS ── */
.mt-1{margin-top:0.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;}
.mb-1{margin-bottom:0.5rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;} .mb-4{margin-bottom:2rem;}
.text-center{text-align:center;} .text-right{text-align:right;}
.w-full{width:100%;}
.hidden{display:none!important;}
.rounded{border-radius:var(--radius);}
.rounded-lg{border-radius:var(--radius-lg);}

/* ── NAVIGATION RESPONSIVE ── */
body.has-nav { padding-top: 64px; padding-bottom: 0; }

/* Navigation Desktop (Top) */
.nav-desktop {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--bg-soft);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue-600);
}

.nav-brand i { font-size: 1.25rem; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: all var(--t);
}

.nav-link:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.nav-link.active {
  background: var(--blue-50);
  color: var(--blue-600);
}

.nav-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  color: var(--red);
  cursor: pointer;
  transition: all var(--t);
}

.nav-logout:hover { background: var(--red-bg); }

/* Navigation Mobile (Bottom) */
.nav-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--bg-card);
  border-top: 1px solid var(--bg-soft);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.5rem;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  min-width: 60px;
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--t);
}

.nav-item i { font-size: 1.25rem; }

.nav-item:hover { color: var(--blue-600); }

.nav-item.active {
  color: var(--blue-600);
}

/* Responsive */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
  body.has-nav { padding-top: 0; padding-bottom: 80px; }
}

/* =============================================
   MOBILE NAVIGATION MODERNE
   ============================================= */
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.6rem 0.5rem;
  min-width: 64px;
  border-radius: 12px;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mobile-nav-item i {
  font-size: 1.3rem;
  transition: transform 0.2s ease;
}

.mobile-nav-item:hover {
  color: var(--blue-600);
  background: var(--blue-50);
}

.mobile-nav-item:hover i {
  transform: translateY(-2px);
}

.mobile-nav-item.active {
  color: var(--blue-600);
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
}

.mobile-nav-item.active i {
  transform: translateY(-1px);
}

/* Safe area pour iPhone */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nav-mobile {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(70px + env(safe-area-inset-bottom));
  }
  body.has-nav { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* =============================================
   MOBILE CONTENT PADDING
   ============================================= */
@media (max-width: 768px) {
  .container { padding: 0 1rem; }
  .container-sm { padding: 0 1rem; }

  /* Auth pages mobile padding */
  .auth-split-right {
    padding: 1.5rem !important;
    padding-bottom: 100px !important;
  }

  /* Dashboard mobile */
  .dashboard-header {
    padding: 1.25rem 1rem !important;
  }

  .stats-band-inner {
    padding: 0 0.75rem !important;
    gap: 0.5rem !important;
  }

  .dashboard-section {
    padding: 1.25rem 1rem !important;
  }

  /* Analysis mobile */
  .page-header {
    padding: 1.25rem 1rem !important;
  }

  .analysis-container {
    padding: 0 1rem 1.5rem !important;
  }

  /* Logs mobile */
  .logs-container {
    padding: 0 1rem 1.5rem !important;
  }

  /* Profile mobile */
  .hero {
    padding: 1rem !important;
    padding-bottom: 100px !important;
  }

  .hero-inner {
    padding: 0.5rem !important;
  }

  /* Cards spacing mobile */
  .card {
    padding: 1rem !important;
  }

  .card-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }

  /* Table mobile */
  .logs-table th,
  .logs-table td {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

  /* Form inputs mobile */
  .form-input {
    padding: 0.75rem 1rem 0.75rem 2.4rem !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }

  /* Buttons mobile */
  .btn {
    padding: 0.65rem 1.2rem !important;
  }

  .btn-lg {
    padding: 0.85rem 1.5rem !important;
  }

}

/* =============================================
   AUTH PAGES MOBILE IMPROVEMENTS
   ============================================= */
@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
  }

  .auth-split-left {
    display: none;
  }

  .auth-split-right {
    padding: 1.5rem;
    min-height: 100vh;
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 100px;
  }

  .auth-box {
    max-width: 100%;
    width: 100%;
  }

  /* Show compact header on mobile auth */
  .mobile-auth-header {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bg-soft);
  }

  .mobile-auth-header i {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--blue-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }

  .mobile-auth-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
  }
}

@media (max-width: 480px) {
  .auth-split-right {
    padding: 1rem;
    padding-top: 1.5rem;
  }

  .auth-box-header {
    margin-bottom: 1.5rem;
  }

  .auth-box-header i {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .auth-box-header h1 {
    font-size: 1.25rem;
  }

  .otp-input {
    width: 42px !important;
    height: 52px !important;
    font-size: 1.25rem !important;
  }

  .otp-inputs {
    gap: 0.5rem !important;
  }
}