/* ZooLanka authentication design — night navy × gold (login / register / parent login). */
:root[data-theme="dark"],:root[data-theme="light"]{--bg-main:#060914;--bg-panel:#0d1427;--text-primary:#eef0f6;--text-secondary:#9aa3b8;--border-color:rgba(148,163,210,.14);--input-bg:#0a1022;--primary-logic:#060914;--accent-logic:#d4a64a;--accent-hover:#e8c46e;--shadow-lg:0 30px 80px rgba(0,0,0,.6);--brand-gradient:none}
html{color-scheme:dark}
body{background:#060914!important;color:#eef0f6!important}
.layout-wrapper{background:radial-gradient(900px 500px at 100% 0%,rgba(212,166,74,.08),transparent 60%),#060914}

/* brand panel: the planet mark, orbit rings and a quiet star field */
.brand-section{position:sticky!important;top:0!important;align-self:flex-start!important;flex:1.1!important;height:100vh!important;min-height:100vh!important;padding:0!important;color:#fff!important;overflow:hidden!important;
  background:
    url('../uploads/branding/zoolanka-logo.png') center 36%/min(46%,420px) no-repeat,
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 72%,rgba(243,214,139,.7),transparent 60%),
    radial-gradient(1px 1px at 30% 82%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 58%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 44% 8%,rgba(243,214,139,.6),transparent 60%),
    radial-gradient(520px 520px at 50% 36%,rgba(212,166,74,.16),transparent 65%),
    radial-gradient(800px 600px at 0% 100%,rgba(43,62,140,.35),transparent 60%),
    linear-gradient(160deg,#0b1230 0%,#060914 70%)!important;
  border-right:1px solid rgba(212,166,74,.22)}
.brand-section:before{content:"";position:absolute;left:50%;top:36%;width:min(78%,700px);aspect-ratio:2.6/1;transform:translate(-50%,-50%) rotate(-18deg);border:1.5px solid rgba(212,166,74,.28);border-radius:50%;z-index:1;pointer-events:none;
  animation:zlOrbit 26s linear infinite}
.brand-section:after{content:"";position:absolute;left:50%;top:36%;width:min(92%,820px);aspect-ratio:2.2/1;transform:translate(-50%,-50%) rotate(14deg);border:1px dashed rgba(212,166,74,.16);border-radius:50%;z-index:1;pointer-events:none}
@keyframes zlOrbit{to{transform:translate(-50%,-50%) rotate(342deg)}}
@media (prefers-reduced-motion:reduce){.brand-section:before{animation:none}}
.brand-section>*{display:none!important}
.brand-section>.brand-content-bottom{display:block!important;position:absolute!important;left:9%;right:9%;bottom:8%;z-index:2;color:#fff!important;text-align:center}
.brand-section .brand-content-bottom h1{color:#f5f1e6!important;font-size:clamp(28px,3vw,44px)!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.01em}
.brand-section .brand-content-bottom h1 span{display:block;background:linear-gradient(135deg,#f6e3a1 0%,#d4a64a 45%,#9c6f22 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:#d4a64a!important}
.brand-section .brand-content-bottom p{color:#aeb6cc!important;margin:12px auto 0;max-width:520px}
.brand-section .badges{display:flex!important;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.brand-section .badges .badge{background:rgba(212,166,74,.08)!important;color:#f3d68b!important;border:1px solid rgba(212,166,74,.3)!important;padding:8px 16px!important;border-radius:999px!important;font-weight:700;font-size:13px}
.brand-section .badges .badge i{color:#d4a64a!important}

/* form side */
.login-section,.register-section{position:relative;flex:.9!important;background:transparent!important;padding:96px 7vw 55px!important;align-items:flex-start!important}
.login-section:before,.register-section:before{content:"";position:absolute;top:26px;left:7vw;width:46px;height:46px;background:url('../uploads/branding/zoolanka-logo.png') center/contain no-repeat;filter:drop-shadow(0 4px 12px rgba(212,166,74,.35))}
.login-box,.register-box{position:relative;width:100%!important;max-width:560px!important;margin:auto!important;padding:42px!important;
  background:linear-gradient(180deg,#111a33,#0d1427)!important;border:1px solid rgba(212,166,74,.2)!important;border-radius:22px!important;box-shadow:0 30px 80px rgba(0,0,0,.6)!important}
.login-box:before,.register-box:before{background:linear-gradient(90deg,transparent,#d4a64a,#f3d68b,#d4a64a,transparent)!important}
.login-header h2{color:#f5f1e6!important;font-size:32px!important}.login-header p{color:#9aa3b8!important}.form-group label{color:#cfd4e4!important}
.input-wrapper input,.input-wrapper select,.login-box input,.register-box input,.register-box select,.register-box textarea{background:#0a1022!important;color:#eef0f6!important;border:1px solid #26305a!important;border-radius:11px!important}
.input-wrapper input::placeholder,.register-box input::placeholder,.login-box input::placeholder{color:#5f6a8a!important}
.input-wrapper input:focus,.input-wrapper select:focus,.login-box input:focus,.register-box input:focus,.register-box select:focus{border-color:#d4a64a!important;box-shadow:0 0 0 4px rgba(212,166,74,.14)!important}
.input-wrapper select option,.register-box select option{background:#0d1427;color:#eef0f6}
.field-icon,.password-toggle,.select-arrow{color:#7c86a3!important}
.input-wrapper:focus-within .field-icon{color:#d4a64a!important}
.login-btn{background:linear-gradient(135deg,#f6e3a1 0%,#d4a64a 45%,#9c6f22 100%)!important;color:#1a1206!important;font-weight:800!important;border-radius:11px!important;box-shadow:0 14px 30px rgba(212,166,74,.28)!important}
.login-btn:hover{filter:brightness(1.08);transform:translateY(-2px)!important}
.login-btn i{color:#1a1206!important}
.register-link,.mobile-footer{color:#9aa3b8!important}.register-link a,.forgot-link,.forgot-password a{color:#e8c46e!important}
.theme-toggle-wrapper{display:none!important}
.error-card{background:rgba(239,68,68,.1)!important;border-color:rgba(239,68,68,.3)!important;color:#fca5a5!important}
input[type=checkbox],input[type=radio]{accent-color:#d4a64a}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #0a1022 inset!important;-webkit-text-fill-color:#eef0f6!important}

@media(max-width:900px){
  .brand-section{display:none!important}
  .login-section,.register-section{padding:96px 18px 36px!important;min-height:100vh!important}
  .login-section:before,.register-section:before{left:50%;transform:translateX(-50%);top:26px}
  .login-box,.register-box{max-width:620px!important;padding:32px 22px!important}
}