/* WABOT.VIP login + signup UI-only polish. Scoped to the existing auth page. */
:root{
  --auth-page:#f4f8f6;
  --auth-card:#ffffff;
  --auth-panel:#fbfdfc;
  --auth-ink:#111827;
  --auth-muted:#66756e;
  --auth-line:#dce8e1;
  --auth-green:#07966b;
  --auth-green-dark:#056347;
  --auth-green-soft:#ebfaf3;
  --auth-focus:0 0 0 4px rgba(7,150,107,.12);
  --auth-shadow:0 24px 70px rgba(18,45,33,.13);
}

html,body{min-height:100%;}
body{
  margin:0;
  min-height:100dvh;
  color:var(--auth-ink);
  background:
    radial-gradient(circle at 8% 8%,rgba(7,150,107,.08),transparent 30%),
    radial-gradient(circle at 92% 92%,rgba(15,118,90,.06),transparent 32%),
    var(--auth-page);
}

/* Keep the complete login experience visually centered without changing structure. */
.of-shell{
  width:min(1040px,calc(100% - 40px));
  min-height:100dvh;
  margin:0 auto;
  padding:clamp(24px,4vh,48px) 0 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}
.of-grid{
  width:100%;
  min-height:min(650px,calc(100dvh - 118px));
  max-height:760px;
  margin:auto 0 0;
  border:1px solid var(--auth-line);
  border-radius:22px;
  overflow:hidden;
  background:var(--auth-card);
  box-shadow:var(--auth-shadow);
  align-items:stretch;
}
.of-brand-panel,.of-form-panel{min-height:100%;box-sizing:border-box;}
.of-brand-panel{
  padding:clamp(34px,4vw,52px) clamp(32px,4vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}
.of-brand-panel h1{margin-top:22px;line-height:1.08;letter-spacing:-.04em;}
.of-brand-panel p{max-width:560px;line-height:1.65;}
.of-kpis{gap:12px;}
.of-kpis article,.of-feature-grid article{padding:16px;border-radius:14px;}
.of-form-panel{
  display:grid;
  place-items:center;
  padding:clamp(32px,4.3vw,54px);
  background:var(--auth-panel);
}
.of-login-card{width:min(100%,430px);margin:0 auto;}
.of-card-head{margin-bottom:24px;align-items:flex-start;}
.of-card-head h2{margin-top:3px;font-size:clamp(30px,3vw,38px);line-height:1.08;letter-spacing:-.03em;}
.of-card-head p{margin-top:8px;line-height:1.5;color:var(--auth-muted);}
.of-login-card form{display:grid;gap:18px;}
.of-login-card label{font-size:12px;font-weight:800;letter-spacing:.01em;}
.of-input{min-height:48px;border-radius:12px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.of-input input{font-size:14px;}
.of-primary,.of-secondary{min-height:48px;border-radius:12px;font-size:14px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;}
.of-primary:hover,.of-secondary:hover{transform:translateY(-1px);}
.of-primary:active,.of-secondary:active{transform:translateY(0);}
.of-divider{margin:20px 0 16px;}
.of-secure-row{margin-top:16px;padding-top:16px;}
.of-footer{
  width:100%;
  margin:14px 0 auto;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#74827b;
  box-sizing:border-box;
}
.of-footer nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;}

/* Signup modal: centered, readable and internally scrollable. */
.wsu-modal{padding:clamp(16px,3vw,28px)!important;}
.wsu-backdrop{
  background:rgba(7,18,13,.60)!important;
  backdrop-filter:blur(9px) saturate(105%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(105%)!important;
}
.wsu-card{
  width:min(760px,100%)!important;
  max-height:min(88dvh,820px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid var(--auth-line)!important;
  border-radius:22px!important;
  background:var(--auth-card)!important;
  color:var(--auth-ink)!important;
  box-shadow:0 34px 100px rgba(5,27,18,.28)!important;
}
.wsu-header{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto;
  padding:25px 28px 21px!important;
  background:linear-gradient(180deg,#fff,#f8fcfa)!important;
  border-bottom:1px solid var(--auth-line)!important;
}
.wsu-header small{color:var(--auth-green)!important;font-size:10px!important;letter-spacing:1.65px!important;}
.wsu-header h2{display:block!important;margin:5px 0 0!important;color:var(--auth-ink)!important;font-size:28px!important;line-height:1.15!important;letter-spacing:-.02em!important;}
.wsu-header p{margin:9px 0 0!important;color:var(--auth-muted)!important;font-size:13px!important;line-height:1.55!important;}
.wsu-close{width:38px!important;height:38px!important;border-radius:11px!important;}
.wsu-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto!important;
  padding:22px 28px 26px!important;
  background:var(--auth-card)!important;
  scrollbar-gutter:stable;
}
.wsu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important;row-gap:14px!important;}
.wsu-grid label,.wsu-otp label{min-width:0;}
.wsu-grid label>span,.wsu-otp label>span{margin-bottom:7px!important;color:#34413b!important;font-size:11px!important;font-weight:850!important;}
.wsu-grid input,.wsu-grid select,.wsu-otp input{
  min-height:43px!important;
  border-radius:11px!important;
  border:1px solid var(--auth-line)!important;
  background:#fff!important;
  color:var(--auth-ink)!important;
  box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.wsu-grid input:focus,.wsu-grid select:focus,.wsu-otp input:focus{border-color:var(--auth-green)!important;box-shadow:var(--auth-focus)!important;}
.wsu-grid input::placeholder,.wsu-otp input::placeholder{color:#94a19b!important;opacity:1;}
.wsu-terms{margin-top:17px!important;gap:10px!important;color:#53615b!important;}
.wsu-terms input{flex:0 0 auto;margin-top:2px!important;accent-color:var(--auth-green)!important;}
.wsu-terms a{color:var(--auth-green-dark)!important;text-underline-offset:2px;}
.wsu-actions{margin-top:17px!important;}
.wsu-primary{min-height:47px!important;border-radius:11px!important;}
.wsu-text{margin-top:11px!important;color:var(--auth-green-dark)!important;}

@media(prefers-color-scheme:dark){
  :root{
    --auth-page:#08110d;
    --auth-card:#101a15;
    --auth-panel:#0d1712;
    --auth-ink:#f1f7f4;
    --auth-muted:#a7b6ae;
    --auth-line:#294035;
    --auth-green-soft:#123126;
    --auth-shadow:0 28px 80px rgba(0,0,0,.42);
  }
  body{
    background:
      radial-gradient(circle at 10% 10%,rgba(10,168,102,.11),transparent 30%),
      radial-gradient(circle at 90% 90%,rgba(7,150,107,.08),transparent 32%),
      var(--auth-page)!important;
  }
  .of-grid,.of-form-panel,.of-login-card{background:var(--auth-card)!important;}
  .of-brand-panel{background:linear-gradient(180deg,#132019,#0f1814)!important;}
  .of-input,.wsu-grid input,.wsu-grid select,.wsu-otp input{background:#0c1511!important;border-color:var(--auth-line)!important;color:var(--auth-ink)!important;}
  .of-input input{color:var(--auth-ink)!important;}
  .wsu-card,.wsu-body{background:var(--auth-card)!important;color:var(--auth-ink)!important;}
  .wsu-header{background:linear-gradient(180deg,#15231c,#101a15)!important;border-color:var(--auth-line)!important;}
  .wsu-header h2,.wsu-grid label>span,.wsu-otp label>span{color:var(--auth-ink)!important;}
  .wsu-close{background:#17271f!important;border-color:#2e493b!important;color:#e7f0eb!important;}
  .wsu-terms{color:var(--auth-muted)!important;}
}

@media(max-width:900px){
  .of-shell{width:min(760px,calc(100% - 28px));padding:20px 0;justify-content:flex-start;}
  .of-grid{min-height:auto;max-height:none;grid-template-columns:1fr!important;}
  .of-brand-panel{padding:32px;gap:22px;}
  .of-form-panel{padding:34px 28px;}
  .of-footer{margin-top:14px;flex-direction:column;align-items:flex-start;}
  .of-footer nav{justify-content:flex-start;gap:14px;}
}

@media(max-width:720px){
  .of-shell{width:min(100% - 20px,620px);padding:10px 0 18px;}
  .of-grid{border-radius:18px;}
  .of-brand-panel{display:none!important;}
  .of-form-panel{padding:26px 20px;min-height:calc(100dvh - 72px);}
  .of-login-card{width:100%;}
  .of-footer{padding:0 4px;font-size:11px;}
  .wsu-card{max-height:calc(100dvh - 24px)!important;border-radius:18px!important;}
  .wsu-header{padding:21px 20px 17px!important;}
  .wsu-header h2{font-size:23px!important;}
  .wsu-body{padding:18px 20px 22px!important;}
  .wsu-grid{grid-template-columns:1fr!important;gap:12px!important;}
}

@media(max-width:480px){
  .of-shell{width:100%;padding:0;}
  .of-grid{min-height:100dvh;border:0;border-radius:0;box-shadow:none;}
  .of-form-panel{padding:24px 18px;}
  .of-footer{display:none;}
  .wsu-modal{padding:0!important;align-items:stretch!important;}
  .wsu-card{height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;}
  .wsu-header{padding-top:max(18px,env(safe-area-inset-top))!important;}
  .wsu-body{padding-bottom:max(22px,env(safe-area-inset-bottom))!important;}
}

@media(prefers-reduced-motion:reduce){
  .of-primary,.of-secondary,.of-input,.wsu-grid input,.wsu-grid select,.wsu-otp input{transition:none!important;}
}