/* Sign-in screen */
.auth { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; }
.auth-hero { background: radial-gradient(circle at 15% 15%, #24378a 0, var(--navy) 35%, var(--navy-deep) 100%); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent); }
.auth-hero::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(245, 166, 35, .08); }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { font-size: 46px; line-height: 1.12; margin: 22px 0 16px; font-weight: 800; letter-spacing: -.5px; }
.auth-hero h1 em { color: var(--amber); font-style: normal; }
.auth-hero p { color: #c7d2fe; font-size: 17px; line-height: 1.65; max-width: 500px; margin: 0; }
.hero-row { display: flex; gap: 40px; align-items: center; }
.features { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.features li { display: flex; gap: 10px; align-items: center; color: #e0e7ff; }
.features li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--navy-deep); font-weight: 800; font-size: 13px; flex-shrink: 0; }

/* Floating certificate mockup */
.mock { width: 210px; flex-shrink: 0; background: #fff; border-radius: 14px; padding: 16px; color: var(--navy); box-shadow: var(--shadow-lg); transform: rotate(4deg); animation: float 6s ease-in-out infinite; }
.mock .bar { height: 8px; border-radius: 4px; background: #e8ebf5; margin-bottom: 7px; }
.mock .bar.t { width: 70%; height: 10px; background: var(--navy); }
.mock .bar.s { width: 45%; }
.mock .qrbox { margin: 14px auto 10px; width: 110px; height: 110px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; border: 1px solid var(--border); position: relative; overflow: hidden; }
.mock .qrbox::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: scan 2.4s ease-in-out infinite; }
.mock .ok { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 12px Inter, sans-serif; color: var(--success); }
@keyframes float { 50% { transform: rotate(4deg) translateY(-10px); } }
@keyframes scan { 0%, 100% { top: 8%; } 50% { top: 90%; } }

.auth-side { display: grid; place-items: center; padding: 40px 24px; background: #fff; }
.auth-card { width: 100%; max-width: 400px; animation: rise .5s ease both; }
.auth-card h2 { font-size: 30px; color: var(--navy); margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); margin: 0 0 28px; }
.auth-card .btn-amber { width: 100%; padding: 14px; }
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; color: #9ca3af; font-size: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }

@media (max-width: 1000px) { .mock { display: none; } }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding: 36px 24px; }
  .auth-hero h1 { font-size: 30px; }
  .features { display: none; }
}