/* WABOT.VIP Login Parent Green/Black Theme V2
   Visual-only override for login + existing signup modal.
   No routes, APIs, forms, OTP, authentication or JavaScript are changed. */
:root{
  --wgb-green:#18c875;
  --wgb-green-strong:#0fb865;
  --wgb-green-dark:#087a49;
  --wgb-green-soft:#e9f9f0;
  --wgb-black:#101713;
  --wgb-ink:#17211c;
  --wgb-muted:#6b7771;
  --wgb-line:#dce7e1;
  --wgb-card:#ffffff;
  --wgb-page:#f5f8f6;
  --wgb-shadow:0 22px 60px rgba(13,39,27,.10);
  --wgb-focus:0 0 0 4px rgba(24,200,117,.14);
}
html,body{
  background:
    radial-gradient(circle at 8% 12%,rgba(24,200,117,.09),transparent 28%),
    radial-gradient(circle at 92% 88%,rgba(16,23,19,.05),transparent 32%),
    var(--wgb-page)!important;
  color:var(--wgb-ink)!important;
}
.of-shell{background:transparent!important}
.of-grid{
  background:var(--wgb-card)!important;
  border:1px solid var(--wgb-line)!important;
  box-shadow:var(--wgb-shadow)!important;
}
.of-brand-panel{
  background:linear-gradient(155deg,#ffffff 0%,#f4faf7 72%,#edf8f2 100%)!important;
  border-color:var(--wgb-line)!important;
}
.of-form-panel,.of-login-card{background:#fff!important}
.of-brand-mark{
  background:linear-gradient(135deg,var(--wgb-black),#233129)!important;
  color:var(--wgb-green)!important;
  box-shadow:0 10px 24px rgba(16,23,19,.18)!important;
}
.of-brand strong{color:var(--wgb-black)!important}
.of-brand strong span{color:var(--wgb-green-strong)!important}
.of-trust-pill{
  background:var(--wgb-black)!important;
  color:#fff!important;
  border-color:var(--wgb-black)!important;
  box-shadow:none!important;
}
.of-brand-panel h1,.of-card-head h2{color:var(--wgb-black)!important}
.of-brand-panel p,.of-card-head p,.of-kpis span,.of-feature-grid span,.of-secure-row,.of-footer{color:var(--wgb-muted)!important}
.of-kpis article,.of-feature-grid article{
  background:#fff!important;
  border:1px solid var(--wgb-line)!important;
  box-shadow:none!important;
}
.of-kpis b,.of-feature-grid b{color:var(--wgb-black)!important}
.of-lock{
  background:var(--wgb-green-soft)!important;
  color:var(--wgb-green-dark)!important;
  border:1px solid #c8ecd9!important;
}
.of-card-head small{color:var(--wgb-green-dark)!important}
.of-login-card{box-shadow:none!important}
.of-login-card label{color:#38463f!important}
.of-input{
  background:#fff!important;
  border:1px solid #d7e2dc!important;
  box-shadow:none!important;
}
.of-input:focus-within{
  border-color:var(--wgb-green)!important;
  box-shadow:var(--wgb-focus)!important;
}
.of-input input{color:var(--wgb-black)!important;background:transparent!important}
.of-input input::placeholder{color:#97a39d!important}
.of-input>span{color:#65726b!important}
.of-input button{color:var(--wgb-green-dark)!important}
.of-check input{accent-color:var(--wgb-green-strong)!important}
.of-check span{color:#536159!important}
.of-primary,.wsu-primary{
  background:linear-gradient(135deg,var(--wgb-black) 0%,#17251e 52%,var(--wgb-green-dark) 100%)!important;
  color:#fff!important;
  border:1px solid rgba(24,200,117,.34)!important;
  box-shadow:0 12px 26px rgba(12,34,23,.18)!important;
}
.of-primary:hover,.wsu-primary:hover{
  background:linear-gradient(135deg,#0d1511 0%,#14231b 45%,var(--wgb-green-strong) 100%)!important;
  transform:translateY(-1px)!important;
}
.of-secondary{
  background:#fff!important;
  color:var(--wgb-black)!important;
  border:1px solid var(--wgb-green)!important;
  box-shadow:none!important;
}
.of-secondary:hover{background:var(--wgb-green-soft)!important;color:var(--wgb-green-dark)!important}
.of-divider:before,.of-divider:after{background:var(--wgb-line)!important}
.of-divider span{background:#fff!important;color:#929e98!important}
.of-secure-row{border-color:var(--wgb-line)!important}
.of-footer a{color:#65716b!important}
.of-footer a:hover{color:var(--wgb-green-dark)!important}

/* Existing same-page signup popup */
.wsu-backdrop{background:rgba(5,12,8,.70)!important;backdrop-filter:blur(8px)!important}
.wsu-card{
  background:#fff!important;
  border:1px solid #d8e5de!important;
  box-shadow:0 30px 90px rgba(4,18,10,.28)!important;
}
.wsu-header{
  background:linear-gradient(155deg,#101713 0%,#17251e 62%,#0c7045 100%)!important;
  border-color:#26372e!important;
}
.wsu-header small{color:#77e6aa!important}
.wsu-header h2{color:#fff!important}
.wsu-header p{color:#c7d4cd!important}
.wsu-close{background:rgba(255,255,255,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.18)!important}
.wsu-close:hover{background:rgba(24,200,117,.20)!important}
.wsu-body{background:#fff!important}
.wsu-grid label>span,.wsu-otp label>span{color:#35423b!important}
.wsu-grid input,.wsu-grid select,.wsu-otp input{
  background:#fff!important;
  color:var(--wgb-black)!important;
  border:1px solid #d7e2dc!important;
  box-shadow:none!important;
}
.wsu-grid input:focus,.wsu-grid select:focus,.wsu-otp input:focus{
  border-color:var(--wgb-green)!important;
  box-shadow:var(--wgb-focus)!important;
}
.wsu-terms{color:#58665f!important}
.wsu-terms input{accent-color:var(--wgb-green-strong)!important}
.wsu-terms a,.wsu-text{color:var(--wgb-green-dark)!important}
.wsu-otp-icon{background:var(--wgb-green-soft)!important;color:var(--wgb-green-dark)!important}
.wsu-otp h3{color:var(--wgb-black)!important}
.wsu-otp p{color:var(--wgb-muted)!important}
.wsu-message.success{background:#eaf9f1!important;color:#11633d!important;border-color:#bce8d0!important}
.wsu-message.error{background:#fff2f2!important;color:#992f2f!important;border-color:#f0c7c7!important}

@media (prefers-color-scheme:dark){
  :root{
    --wgb-ink:#f3f7f5;
    --wgb-muted:#9eada5;
    --wgb-line:#26372f;
    --wgb-card:#101713;
    --wgb-page:#090e0b;
    --wgb-shadow:0 24px 70px rgba(0,0,0,.42);
  }
  html,body{
    background:
      radial-gradient(circle at 10% 8%,rgba(24,200,117,.10),transparent 28%),
      radial-gradient(circle at 90% 90%,rgba(24,200,117,.06),transparent 30%),
      var(--wgb-page)!important;
  }
  .of-grid,.of-form-panel,.of-login-card,.wsu-card,.wsu-body{background:#101713!important}
  .of-brand-panel{background:linear-gradient(155deg,#111914 0%,#0c120f 72%,#102219 100%)!important}
  .of-brand strong,.of-brand-panel h1,.of-card-head h2,.wsu-otp h3{color:#f5faf7!important}
  .of-brand-mark{background:#07100b!important;color:var(--wgb-green)!important;border:1px solid #234c35!important}
  .of-kpis article,.of-feature-grid article{background:#141f19!important;border-color:#293c32!important}
  .of-kpis b,.of-feature-grid b,.of-login-card label,.wsu-grid label>span,.wsu-otp label>span{color:#e2ebe6!important}
  .of-input,.wsu-grid input,.wsu-grid select,.wsu-otp input{background:#0c130f!important;border-color:#2a4035!important;color:#f4f8f6!important}
  .of-input input{color:#f4f8f6!important}
  .of-input input::placeholder,.wsu-grid input::placeholder,.wsu-otp input::placeholder{color:#78877f!important}
  .of-secondary{background:#101713!important;color:#8cf0b9!important;border-color:#2d8d5b!important}
  .of-divider span{background:#101713!important}
  .wsu-backdrop{background:rgba(0,5,2,.82)!important}
  .wsu-grid select option{background:#101713!important;color:#fff!important}
  .wsu-terms,.wsu-otp p{color:#a4b2aa!important}
}

@media(max-width:800px){
  .of-grid{box-shadow:none!important}
  .of-form-panel{background:transparent!important}
  .of-login-card{background:var(--wgb-card)!important;border:1px solid var(--wgb-line)!important;box-shadow:var(--wgb-shadow)!important}
}
@media(max-width:480px){
  .of-login-card{border-radius:18px!important}
  .wsu-card{box-shadow:none!important}
}