/* Login / register */
.auth-body { background: #fff; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }

.auth-hero { position: relative; overflow: hidden; background: linear-gradient(155deg, #0c1d3b 0%, var(--navy) 55%, #1a3a6e 100%); color: #fff; padding: 2.4rem 3rem; display: flex; flex-direction: column; }
.auth-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -150px; bottom: -140px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(244, 123, 32, .95), rgba(244, 123, 32, .15) 70%); }
.auth-hero::after { content: ""; position: absolute; width: 260px; height: 260px; left: -90px; top: 38%; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .05); }
.auth-logo { height: 44px; width: auto; align-self: flex-start; position: relative; z-index: 1; }
.auth-hero-body { margin: auto 0; max-width: 460px; position: relative; z-index: 1; padding: 2rem 0; }
.auth-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .12); border-radius: 20px; padding: .25rem .8rem; font-size: .75rem; font-weight: 500; margin-bottom: 1rem; }
.auth-hero h1 { color: #fff; font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: .8rem; }
.auth-hero p { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.auth-points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .65rem; }
.auth-points li { display: flex; gap: .6rem; align-items: center; font-size: .9rem; }
.auth-points i { color: var(--orange); font-size: 1.05rem; }
.auth-foot { position: relative; z-index: 1; font-size: .78rem; color: rgba(255, 255, 255, .6); }

.auth-side { display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; background: linear-gradient(135deg, #f7f9fd, #eef3fb); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 2rem 2rem 1.6rem; box-shadow: 0 18px 50px rgba(16, 38, 74, .1); }
.auth-card h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: .2rem; }
.auth-sub { color: var(--muted); margin-bottom: 1.3rem; }
.auth-logo-mobile { display: none; height: 34px; margin-bottom: 1.2rem; }
.auth-alt { text-align: center; color: var(--muted); margin: 1.2rem 0 0; font-size: .85rem; }
.auth-alt a { font-weight: 600; }

.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; }
.pw-toggle:hover { color: var(--navy); background: #f1f5fb; }

@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-logo-mobile { display: block; }
  .auth-side { min-height: 100vh; }
}
@media (max-width: 480px) {
  .auth-card { padding: 1.5rem 1.2rem 1.2rem; border-radius: 16px; }
}

/* Icon inputs */
.input-ic { position: relative; }
.input-ic > .bx:first-child { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a97ab; font-size: 1.2rem; pointer-events: none; transition: color .2s; }
.input-ic .form-control { padding-left: 2.4rem; }
.input-ic:focus-within > .bx:first-child { color: var(--orange); }
.input-ic .form-control:has(~ .pw-toggle) { padding-right: 2.6rem; }
.auth-link { font-size: .78rem; font-weight: 500; }
.auth-card-wide { max-width: 520px; }

/* Card header badge */
.auth-badge { width: 56px; height: 56px; border-radius: 16px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; font-size: 1.8rem; margin-bottom: 1rem; box-shadow: 0 8px 18px rgba(244, 123, 32, .18); animation: mz-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.auth-badge-ok { background: var(--green-soft); color: var(--green); box-shadow: 0 8px 18px rgba(22, 163, 74, .18); }
.auth-badge-bad { background: var(--red-soft); color: var(--red); box-shadow: 0 8px 18px rgba(239, 68, 68, .18); }
.auth-card { animation: mz-rise .55s ease both; }

/* Hero: staggered points + floating chips */
.auth-points li { animation: fade-right .7s ease both; animation-delay: calc(.25s + var(--i, 0) * .12s); }
.auth-chip { animation: fade-down .6s ease both; }
.hero-floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hf { position: absolute; display: inline-flex; align-items: center; gap: .45rem; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; padding: .5rem .8rem; font-size: .78rem; font-weight: 500; color: #fff; animation: mz-float 6s ease-in-out infinite; }
.hf i { font-size: 1.15rem; color: #ffb877; }
.hf-1 { top: 14%; right: 9%; }
.hf-2 { bottom: 24%; right: 8%; animation-delay: -2s; }
.hf-3 { bottom: 13%; left: 7%; animation-delay: -4s; }
@keyframes mz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1199.98px) { .hf-1 { display: none; } }

/* Password strength meter */
.pw-meter { display: flex; align-items: center; gap: 4px; margin-top: .55rem; }
.pw-meter span { flex: 1; height: 5px; border-radius: 4px; background: #e3e9f3; transition: background .25s; }
.pw-meter em { font-style: normal; font-size: .7rem; color: var(--muted); margin-left: .5rem; min-width: 96px; text-align: right; }
.pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--amber); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: #84cc16; }
.pw-meter[data-score="4"] span:nth-child(-n+4) { background: var(--green); }