
    :root{
      --brand:#6366f1;
      --brand-dark:#4338ca;
      --brand-light:#eef2ff;
      --surface:#ffffff;
      --muted:#6b7280;
      --muted-light:#9ca3af;
      --body-bg:#f4f6fb;
    }
    *{box-sizing:border-box}
    body{
      font-family:'Inter',sans-serif;
      background:
        radial-gradient(120% 120% at 92% 8%,rgba(99,102,241,.35) 0%,rgba(99,102,241,0) 60%),
        linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);
      color:#1f2937;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:48px 16px;
      position:relative;
    }
    body::before{
      content:'';
      position:fixed;
      inset:-40% auto auto -25%;
      width:72vw;
      height:72vw;
      background:radial-gradient(circle at center,rgba(59,130,246,.15),rgba(59,130,246,0) 65%);
      z-index:0;
    }
    .container{
      position:relative;
      z-index:1;
    }
    .card{
      border-radius:16px;
      border:none;
      background:var(--surface);
      box-shadow:0 24px 60px rgba(15,23,42,.08);
      backdrop-filter:blur(6px);
      position:relative;
      overflow:hidden;
    }
    .card > *{
      position:relative;
      z-index:1;
    }
    .card::before{
      content:'';
      position:absolute;
      top:-60px;
      right:-60px;
      width:180px;
      height:180px;
      background:radial-gradient(circle at center,rgba(99,102,241,.12),rgba(99,102,241,0) 70%);
      transform:rotate(25deg);
      pointer-events:none;
    }
    .card::after{
      content:'';
      position:absolute;
      bottom:-90px;
      left:-70px;
      width:220px;
      height:220px;
      background:radial-gradient(circle at center,rgba(14,165,233,.1),rgba(14,165,233,0) 75%);
      pointer-events:none;
    }
    .card hr{
      opacity:.25;
      margin:2rem 0 1.5rem;
    }
    .auth-brand{
      font-weight:700;
      color:var(--brand);
      letter-spacing:.01em;
    }
    .auth-subtitle{
      color:var(--muted);
    }
    .nav-tabs{
      border:none;
      gap:.75rem;
    }
    .nav-tabs .nav-link{
      border:none;
      border-radius:999px;
      padding:.55rem 1.2rem;
      font-weight:600;
      color:var(--muted);
      background:transparent;
      transition:all .2s ease;
    }
    .nav-tabs .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
      box-shadow:0 10px 20px rgba(99,102,241,.25);
    }
    .nav-tabs .nav-link:not(.active):hover{
      color:var(--brand-dark);
      background:var(--brand-light);
    }
    .form-label{
      font-weight:600;
      color:#344055;
    }
    .form-control{
      border-radius:12px;
      border:1px solid #e2e8f0;
      padding:.65rem .85rem;
      background-color:#f8fafc;
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .form-control:focus{
      border-color:var(--brand);
      box-shadow:0 0 0 .22rem rgba(99,102,241,.15);
      background-color:#fff;
    }
    .form-text{
      color:var(--muted-light);
    }
    .btn{
      border-radius:12px;
      font-weight:600;
    }
    .btn-primary,.btn-success{
      color:#fff;
      border:none;
      background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
      box-shadow:0 12px 24px rgba(99,102,241,.25);
    }
    .btn-primary:hover,.btn-success:hover{
      background:linear-gradient(135deg,var(--brand-dark) 0%,#312e81 100%);
    }
    .btn-outline-secondary{
      color:var(--muted);
      border-color:#d8dee7;
      background-color:#fff;
    }
    .btn-outline-secondary:hover{
      color:#1f2937;
      background-color:#e5e7eb;
      border-color:#d8dee7;
    }
.btn-secondary{
  border:none;
  color:#1f2937;
  background-color:#e2e8f0;
}
.btn-secondary:hover{
  background-color:#cbd5f5;
}
.theme-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border:1px solid rgba(99,102,241,.2);
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(99,102,241,0));
  color:var(--brand-dark);
  padding:.5rem 1rem;
  font-size:.92rem;
  border-radius:999px;
  font-weight:600;
  transition:all .25s ease;
  box-shadow:0 10px 20px rgba(99,102,241,.15);
}
.theme-toggle .theme-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(99,102,241,.15);
  font-size:1.05rem;
  line-height:1;
}
.theme-toggle::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.18);
  opacity:0;
  transition:opacity .25s ease;
}
.theme-toggle:hover{
  color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  box-shadow:0 16px 28px rgba(99,102,241,.28);
}
.theme-toggle:hover .theme-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.theme-toggle:focus-visible{
  outline:none;
}
.theme-toggle:focus-visible::after{
  opacity:1;
}
.theme-toggle.is-dark{
  border-color:rgba(148,163,184,.35);
  background:linear-gradient(135deg,rgba(148,163,184,.25),rgba(99,102,241,.35));
  color:#f8fafc;
  box-shadow:0 16px 32px rgba(2,6,23,.5);
}
.theme-toggle.is-dark .theme-icon{
  background:rgba(15,23,42,.45);
  color:#facc15;
}
.theme-toggle.is-dark::after{
  border-color:rgba(148,163,184,.4);
}
    a{
      color:var(--brand);
      font-weight:500;
      text-decoration:none;
    }
    a:hover{
      color:var(--brand-dark);
      text-decoration:underline;
    }
    .small-muted{
      font-size:.92rem;
      color:var(--muted);
    }
    footer{
      font-size:.9rem;
      color:var(--muted);
    }
    #forgotModal .modal-content{
      border-radius:18px;
      border:none;
      box-shadow:0 24px 60px rgba(15,23,42,.18);
    }
    #forgotModal .modal-header{
      border:none;
      padding-bottom:0;
    }
    #forgotModal .modal-footer{
      border:none;
      padding-top:0;
    }
    #forgotModal .modal-body{
      padding-top:1.2rem;
    }
    #forgotModal .modal-title{
      font-weight:600;
      color:#1f2937;
    }
    #forgotModal .modal-body p{
      color:var(--muted);
    }
#forgotMsg.alert{
  border-radius:14px;
}
.app-footer{
  font-size:.9rem;
  color:#6b7280;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  align-items:center;
  padding:1.5rem 1rem;
  border-top:1px solid rgba(148,163,184,.28);
  backdrop-filter:blur(12px);
}
.app-footer__tip{
  max-width:520px;
}
.app-footer__credit{
  font-weight:500;
}
.app-footer a{
  font-weight:600;
}
body.theme-dark{
  background:
    radial-gradient(120% 120% at 95% 5%,rgba(14,165,233,.22) 0%,rgba(14,165,233,0) 60%),
    linear-gradient(180deg,#0b1220 0%,#111827 100%);
  color:#e2e8f0;
}
body.theme-dark::before{
  background:radial-gradient(circle at center,rgba(99,102,241,.22),rgba(99,102,241,0) 70%);
  opacity:.7;
}
body.theme-dark .card{
  background:#0f172a;
  border:1px solid rgba(148,163,184,.12);
  box-shadow:0 26px 70px rgba(2,6,23,.65);
  color:#f8fafc;
}
body.theme-dark .card::before{
  background:radial-gradient(circle at center,rgba(99,102,241,.22),rgba(99,102,241,0) 75%);
}
body.theme-dark .card::after{
  background:radial-gradient(circle at center,rgba(34,211,238,.18),rgba(34,211,238,0) 75%);
}
body.theme-dark .auth-brand{
  color:#c7d2fe;
}
body.theme-dark .auth-subtitle{
  color:#94a3b8;
}
body.theme-dark .nav-tabs{
  background:rgba(15,23,42,.55);
  border-radius:999px;
  padding:.3rem;
}
body.theme-dark .nav-tabs .nav-link{
  color:#a5b4fc;
}
body.theme-dark .nav-tabs .nav-link:not(.active):hover{
  background:rgba(99,102,241,.32);
  color:#f8fafc;
}
body.theme-dark .form-label{
  color:#e2e8f0;
}
body.theme-dark .form-control{
  background-color:#0b1220;
  color:#e2e8f0;
  border:1px solid #1f2937;
}
body.theme-dark .form-control:focus{
  border-color:#6366f1;
  box-shadow:0 0 0 .22rem rgba(99,102,241,.28);
  background-color:#111b2e;
}
body.theme-dark{
  color:#f8fafc;
}
body.theme-dark .form-text,
body.theme-dark .small-muted,
body.theme-dark footer,
body.theme-dark .app-footer{
  color:#cbd5f5;
  background:rgba(15,23,42,.72);
  border-top:1px solid rgba(99,102,241,.28);
  backdrop-filter:blur(14px);
}
body.theme-dark .btn-outline-secondary{
  color:#f1f5f9;
  border-color:#475569;
  background-color:transparent;
}
body.theme-dark .btn-outline-secondary:hover{
  background-color:#1e293b;
  border-color:#64748b;
}
body.theme-dark .btn-secondary{
  background-color:#1e293b;
  color:#e2e8f0;
}
body.theme-dark .btn-secondary:hover{
  background-color:#22304a;
}
body.theme-dark a{
  color:#c7d2fe;
}
body.theme-dark a:hover{
  color:#e0e7ff;
}
body.theme-dark .app-footer a{
  color:#c7d2fe;
}
body.theme-dark .app-footer__tip{
  color:#cbd5f5;
}
body.theme-dark .text-muted{
  color:#cbd5f5!important;
}
body.theme-dark .swal2-toast{
  background:#0f172acc!important;
  color:#e2e8f0;
}
body.theme-dark .swal2-toast .swal2-title{
  color:#e2e8f0;
}
    .swal2-toast{
      border-radius:14px!important;
      background:#ffffffde!important;
      backdrop-filter:blur(8px);
      box-shadow:0 16px 36px rgba(15,23,42,.16)!important;
      padding:.9rem 1.1rem!important;
    }
    .swal2-toast .swal2-title{
      font-size:.95rem!important;
      font-weight:600;
      color:#1f2937;
    }
    .swal2-toast .swal2-icon{
      margin:0 0 0 .3rem!important;
    }
    @media(max-width:992px){
      body{padding:32px 12px}
      .card{margin:0 12px}
    }
    @media(max-width:576px){
      body{padding:24px 12px}
      .nav-tabs{gap:.35rem}
      .nav-tabs .nav-link{padding:.45rem 1rem;font-size:.95rem}
    }

body.theme-dark,
body.theme-dark *{
  color:#fff!important;
}
body.theme-dark .form-control::placeholder{
  color:rgba(255,255,255,.7);
}
