/* Login page: left form, right playful teal hero (bedendenbeyne.com style) */
.login-page { display: grid; grid-template-columns: 42% 58%; min-height: 100vh; }
@media (max-width: 900px) { .login-page { grid-template-columns: 1fr; } .login-hero { display: none; } }
.login-left { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); display: flex; align-items: center; justify-content: center; padding: 30px; position: relative; }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 24px; box-shadow: 0 20px 60px rgba(17,98,95,.12); padding: 28px; }
.login-card .logo { display: flex; justify-content: center; margin-bottom: 18px; }
.login-card .logo img { height: 70px; }
.login-card h1 { font-size: 20px; text-align: center; margin-bottom: 4px; }
.login-card p.sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.login-card .form-control { background: #f1f7fb; border-color: transparent; padding: 12px 14px; border-radius: 12px; }
.login-card .form-control:focus { background: #fff; }
.login-card .forgot { display: block; text-align: center; font-size: 13px; margin: 6px 0 14px; color: #556; }
.login-card .btn-login { width: 100%; background: var(--theme-color); padding: 13px; font-size: 15px; letter-spacing: .5px; }
.login-card .demo-hint { margin-top: 16px; font-size: 11px; color: var(--muted); text-align: center; background: var(--smoke); border-radius: 10px; padding: 8px; }
.login-footer { position: absolute; bottom: 0; left: 0; right: 0; background: var(--sidebar-bg); color: #cfe3e2; font-size: 11px; text-align: center; padding: 8px; letter-spacing: 1px; }
.login-hero { background: var(--teal); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.login-hero .hero-text { position: relative; z-index: 2; text-align: center; color: #fff; padding: 20px; }
.login-hero .hero-text h2 { font-family: var(--title-font); font-weight: 700; font-size: clamp(42px, 6vw, 72px); color: #fff; line-height: 1.05; margin: 0; text-shadow: 0 4px 20px rgba(0,0,0,.15); }
.login-hero .hero-text h2 span { color: var(--theme-color2); display: block; }
.login-hero .hero-text p { font-size: 16px; opacity: .9; max-width: 460px; margin: 16px auto 0; }
.login-hero .hero-text .pill-btn { display: inline-block; margin-top: 22px; background: var(--theme-color); color: #fff; border-radius: 30px; padding: 12px 28px; font-family: var(--title-font); font-weight: 600; }
.login-hero .shape { position: absolute; border-radius: 50%; opacity: .9; animation: float 6s ease-in-out infinite; }
.login-hero .shape.s1 { width: 26px; height: 26px; border: 6px solid var(--theme-color2); background: transparent; top: 18%; left: 12%; }
.login-hero .shape.s2 { width: 18px; height: 18px; background: var(--red); top: 30%; right: 16%; animation-delay: 1s; }
.login-hero .shape.s3 { width: 34px; height: 34px; border: 6px solid #fff; background: transparent; bottom: 28%; left: 20%; border-radius: 8px; transform: rotate(20deg); animation-delay: 2s; }
.login-hero .shape.s4 { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 28px solid var(--theme-color); border-radius: 0; top: 60%; right: 22%; animation-delay: .5s; }
.login-hero .shape.s5 { width: 14px; height: 14px; background: #3fa9f5; top: 72%; left: 50%; animation-delay: 1.5s; }
.login-hero .shape.s6 { width: 44px; height: 44px; border: 7px solid var(--pink); background: transparent; top: 12%; right: 32%; animation-delay: 2.5s; }
.login-hero .abc { position: absolute; font-family: var(--title-font); font-weight: 700; font-size: 60px; color: rgba(255,255,255,.25); transform: rotate(-12deg); }
.login-hero .abc.a1 { top: 8%; left: 40%; } .login-hero .abc.a2 { bottom: 10%; right: 10%; transform: rotate(10deg); }
.login-hero .clouds { position: absolute; left: 0; right: 0; bottom: -2px; height: 110px; background: radial-gradient(circle at 10% 100%, #fff 0 60px, transparent 61px), radial-gradient(circle at 28% 100%, #fff 0 80px, transparent 81px), radial-gradient(circle at 48% 100%, #fff 0 55px, transparent 56px), radial-gradient(circle at 66% 100%, #fff 0 85px, transparent 86px), radial-gradient(circle at 86% 100%, #fff 0 65px, transparent 66px), radial-gradient(circle at 100% 100%, #fff 0 50px, transparent 51px); z-index: 1; }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }