.auth-screen { display: grid; place-items: start center; min-height: calc(100vh - 120px); padding-top: 20px; }
.auth-card { width: min(760px, 100%); padding: 20px; overflow: hidden; }

.auth-hero { 
  position: relative; 
  text-align: center; 
  padding: 32px 20px; 
  border-radius: 24px; 
  background: linear-gradient(135deg, #172345 0%, #2b3962 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(23, 35, 69, 0.25);
  color: white; 
}
.auth-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(113, 231, 228, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 20% 80%, rgba(128, 98, 245, 0.15) 0%, transparent 40%);
  pointer-events: none;
}

.mini-title { margin: 8px 0 4px; color: #80e2ff; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; position: relative; z-index: 1;}
.auth-hero h1 { margin: 0; color: #ffffff; font-size: clamp(2.7rem, 13vw, 4.5rem); line-height: .9; letter-spacing: -.03em; position: relative; z-index: 1;}
.lead { margin: 12px auto 0; max-width: 580px; line-height: 1.5; font-weight: 800; color: #aab8d4; position: relative; z-index: 1;}

.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 12px; padding: 6px; background: var(--navy); border-radius: 20px; }
.auth-tab, .nav-tab { min-height: 46px; border-radius: 15px; background: transparent; color: white; font-weight: 950; text-shadow: 0 2px 0 #0b1332; }
.auth-tab.active, .nav-tab.active { color: var(--navy); background: linear-gradient(180deg, #fff788, var(--yellow)); text-shadow: 0 2px 0 rgba(255,255,255,.55); box-shadow: inset 0 -5px 0 rgba(221, 134, 22, .32); }

.demo-box { display: grid; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 22px; background: rgba(128, 98, 245, .12); border: 4px dashed rgba(23, 35, 69, .25); }
.demo-box p { margin-bottom: 0; }
.demo-accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.demo-account { display: grid; gap: 3px; text-align: left; padding: 10px; border-radius: 16px; color: var(--navy); background: white; border: 3px solid var(--navy); }
.demo-account span { font-size: .82rem; color: #51607e; font-weight: 900; }

@media (max-width: 700px) { .demo-accounts { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .auth-hero h1 { letter-spacing: -.08em; } }