:root {
      --auth-primary: #3f78e0;
      --auth-purple: #6c5ce7;
      --auth-violet: #8b5cf6;
      --auth-ink: #0f172a;
      --auth-muted: #64748b;
      --auth-border: rgba(15, 23, 42, .08);
    }
    body.auth-modern {
      min-height: 100vh;
      background: linear-gradient(135deg, #f0f5ff 0%, #f7f3ff 50%, #fdf4ff 100%);
      position: relative;
      overflow-x: hidden;
    }
    body.auth-modern::before,
    body.auth-modern::after {
      content: "";
      position: fixed;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    body.auth-modern::before {
      width: 480px; height: 480px;
      background: rgba(63, 120, 224, .28);
      top: -160px; left: -160px;
    }
    body.auth-modern::after {
      width: 420px; height: 420px;
      background: rgba(108, 92, 231, .25);
      bottom: -160px; right: -160px;
    }
    .auth-shell {
      position: relative; z-index: 1;
      min-height: 100vh; padding: 1.5rem 1rem;
      display: flex; align-items: center; justify-content: center;
    }
    .auth-grid {
      display: grid; grid-template-columns: 1.05fr .95fr;
      width: 100%; max-width: 1080px;
      background: #fff; border-radius: 28px; overflow: hidden;
      box-shadow: 0 32px 80px rgba(15, 23, 42, .14);
      border: 1px solid rgba(15, 23, 42, .04);
    }
    @media (max-width: 991px) {
      .auth-grid { grid-template-columns: 1fr; max-width: 520px; }
    }
    .auth-brand-panel {
      position: relative;
      background: linear-gradient(135deg, #3f78e0 0%, #6c5ce7 60%, #8b5cf6 100%);
      color: #fff; padding: 3rem 2.5rem;
      display: flex; flex-direction: column; justify-content: space-between;
      overflow: hidden;
    }
    .auth-brand-panel::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.18) 0%, transparent 40%),
                  radial-gradient(circle at 80% 90%, rgba(255,255,255,.12) 0%, transparent 50%);
      pointer-events: none;
    }
    .auth-brand-panel > * { position: relative; z-index: 1; }
    .auth-brand-logo img { height: 32px; width: auto; }
    .auth-brand-eyebrow {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .35rem .85rem; background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
      font-size: .75rem; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; margin-bottom: 1rem;
    }
    .auth-brand-title {
      font-size: 2rem; font-weight: 800; line-height: 1.2;
      letter-spacing: -.02em; margin-bottom: 1rem;
    }
    .auth-brand-desc {
      color: rgba(255,255,255,.85); font-size: 1rem;
      line-height: 1.6; margin-bottom: 1.75rem;
    }
    .auth-brand-features { list-style: none; padding: 0; margin: 0 0 2rem; }
    .auth-brand-features li {
      display: flex; align-items: flex-start; gap: .75rem;
      padding: .55rem 0; color: rgba(255,255,255,.92); font-size: .95rem;
    }
    .auth-brand-features li i {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      background: rgba(255,255,255,.18);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .9rem; margin-top: 2px;
    }
    .auth-brand-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
      padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18);
    }
    .auth-brand-stats .stat .num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
    .auth-brand-stats .stat .lbl { font-size: .78rem; color: rgba(255,255,255,.72); margin-top: .2rem; }
    @media (max-width: 991px) { .auth-brand-panel { display: none; } }
    .auth-form-panel {
      padding: 3rem 2.75rem;
      display: flex; flex-direction: column; justify-content: center;
    }
    @media (max-width: 575px) { .auth-form-panel { padding: 2rem 1.5rem; } }
    .auth-mobile-logo { display: none; text-align: center; margin-bottom: 1.5rem; }
    .auth-mobile-logo img { height: 32px; width: auto; }
    @media (max-width: 991px) { .auth-mobile-logo { display: block; } }
    .auth-form-eyebrow {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .3rem .8rem; background: rgba(63, 120, 224, .1);
      color: var(--auth-primary); border: 1px solid rgba(63, 120, 224, .2);
      border-radius: 999px; font-size: .72rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem;
    }
    .auth-form-title {
      font-size: 1.65rem; font-weight: 800; color: var(--auth-ink);
      letter-spacing: -.01em; margin-bottom: .35rem;
    }
    .auth-form-subtitle { color: var(--auth-muted); font-size: .95rem; margin-bottom: 1.75rem; }
    .auth-alert {
      border: 0; border-radius: 14px; padding: .85rem 1rem; font-size: .9rem;
      margin-bottom: 1rem; display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5;
    }
    .auth-alert i { flex-shrink: 0; font-size: 1.1rem; margin-top: 2px; }
    .auth-alert-danger { background: rgba(239, 68, 68, .1); color: #b91c1c; }
    .auth-field { margin-bottom: 1.25rem; }
    .auth-field label {
      font-size: .82rem; font-weight: 700; color: #334155;
      margin-bottom: .4rem; display: block;
    }
    .auth-input-wrap { position: relative; }
    .auth-input-wrap > i {
      position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
      color: #94a3b8; font-size: 1.05rem; pointer-events: none;
    }
    .auth-input {
      width: 100%; padding: .85rem 1rem .85rem 2.6rem;
      border: 1px solid var(--auth-border); border-radius: 12px;
      background: #fff; color: var(--auth-ink); font-size: .95rem;
      transition: border-color .2s ease, box-shadow .2s ease; outline: 0;
    }
    .auth-input:focus {
      border-color: var(--auth-primary);
      box-shadow: 0 0 0 4px rgba(63, 120, 224, .12);
    }
    .auth-pwd-toggle {
      position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
      border: 0; background: transparent; width: 38px; height: 38px;
      border-radius: 8px; color: #64748b; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .auth-pwd-toggle:hover { background: #f1f5f9; color: var(--auth-primary); }
    .auth-submit {
      width: 100%; padding: .95rem 1rem; border: 0; border-radius: 12px;
      background: linear-gradient(135deg, var(--auth-primary), var(--auth-purple));
      color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .auth-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 32px rgba(63, 120, 224, .35);
    }
    .auth-cta-row {
      margin-top: 1.75rem; text-align: center;
      color: var(--auth-muted); font-size: .92rem;
    }
    .auth-cta-row a { color: var(--auth-primary); font-weight: 700; text-decoration: none; }
    .auth-cta-row a:hover { text-decoration: underline; }
    .auth-back-home { margin-top: .75rem; text-align: center; font-size: .85rem; }
    .auth-back-home a {
      color: #94a3b8; text-decoration: none;
      display: inline-flex; align-items: center; gap: .25rem;
    }
    .auth-back-home a:hover { color: var(--auth-primary); }
    .auth-trust {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: .85rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem;
      border-top: 1px dashed rgba(15, 23, 42, .08);
      font-size: .8rem; color: #94a3b8;
    }
    .auth-trust span { display: inline-flex; align-items: center; gap: .25rem; }
    .auth-trust i { color: var(--auth-primary); font-size: 1rem; }
.auth-alert-success { background: rgba(16, 185, 129, .12); color: #047857; }