/* =========================================================
   STOCKSKILL REGISTER — FINAL CLEAN UI
   Loaded AFTER app.css
   This file is the ONLY final register visual layer.
   ========================================================= */

.ss-register-page{
  background:#f5f8fc !important;
  min-height:calc(100vh - 104px) !important;
  overflow-x:hidden !important;
}


/* =========================================================
   HERO
   ========================================================= */

.ss-register-hero{
  background:
    radial-gradient(circle at 78% 35%,rgba(35,122,255,.20),transparent 30%),
    linear-gradient(135deg,#071e3a 0%,#0b2d5b 58%,#092957 100%) !important;
  color:#fff !important;
}

.ss-register-hero-inner{
  max-width:1120px !important;
  min-height:350px !important;
  margin:0 auto !important;
  padding:38px 28px 62px !important;
  box-sizing:border-box !important;
}

.ss-register-copy{
  max-width:620px !important;
}

.ss-register-eyebrow{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 16px !important;
  color:#ffc107 !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
}

.ss-join-icon{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  border-radius:50% !important;
  background:#ffc107 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.ss-join-icon svg{
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:#071e3a !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.ss-register-hero h1{
  margin:0 !important;
  color:#fff !important;
  font-size:58px !important;
  line-height:.98 !important;
  font-weight:900 !important;
  letter-spacing:-2px !important;
}

.ss-register-hero h1 span{
  color:#3292ff !important;
}

.ss-register-copy>p{
  margin:18px 0 25px !important;
  color:#eef5ff !important;
  font-size:17px !important;
  line-height:1.42 !important;
}

.ss-register-benefits{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
}

.ss-register-benefit{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:115px !important;
}

.ss-benefit{
  width:43px !important;
  height:43px !important;
  min-width:43px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.ss-benefit.learn{
  background:#00b050 !important;
}

.ss-benefit.practice{
  background:#328ff0 !important;
}

.ss-benefit.grow{
  background:#ffc107 !important;
}

.ss-benefit svg{
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.ss-benefit.grow svg{
  stroke:#071e3a !important;
}

.ss-register-benefit strong{
  display:block !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.1 !important;
}

.ss-register-benefit small{
  display:block !important;
  color:#dbe8f8 !important;
  font-size:10px !important;
  line-height:1.15 !important;
  margin-top:3px !important;
}


/* =========================================================
   DESKTOP VISUAL
   ========================================================= */

.ss-register-visual{
  max-width:270px !important;
}

.ss-invest-card{
  height:160px !important;
  border-radius:22px !important;
}


/* =========================================================
   REGISTRATION CARD
   ========================================================= */

.ss-register-card-wrap{
  max-width:1120px !important;
  margin:-36px auto 0 !important;
  padding:0 20px 80px !important;
  position:relative !important;
  z-index:20 !important;
  box-sizing:border-box !important;
}

.ss-register-card{
  background:#fff !important;
  border-radius:27px !important;
  padding:28px 38px 34px !important;
  box-sizing:border-box !important;
  box-shadow:0 18px 55px rgba(7,30,58,.15) !important;
}

.ss-register-heading{
  margin-bottom:20px !important;
}

.ss-student-icon{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
}

.ss-register-heading-text h2{
  color:#0b2d5b !important;
  font-size:27px !important;
  line-height:1.08 !important;
  letter-spacing:-.5px !important;
}

.ss-register-heading-text p{
  color:#70819a !important;
  font-size:14px !important;
  margin-top:4px !important;
}

.ss-secure{
  border-radius:35px !important;
}

.ss-field label{
  color:#0b2d5b !important;
}

.ss-input input,
.ss-input .input{
  box-sizing:border-box !important;
  border-radius:12px !important;
}

.ss-create-btn{
  background:#ffc107 !important;
  color:#071e3a !important;
  border:none !important;
}


/* =========================================================
   MOBILE — SAME PROPORTION AS LOGIN
   ========================================================= */

@media(max-width:760px){

  .ss-register-page{
    min-height:calc(100vh - 104px) !important;
  }

  .ss-register-hero-inner{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    padding:30px 18px 55px !important;
  }

  .ss-register-copy{
    max-width:none !important;
  }

  .ss-register-eyebrow{
    font-size:14px !important;
    gap:9px !important;
    margin-bottom:16px !important;
  }

  .ss-join-icon{
    width:37px !important;
    height:37px !important;
    min-width:37px !important;
  }

  .ss-join-icon svg{
    width:19px !important;
    height:19px !important;
  }

  /* IMPORTANT: compact login-style heading */
  .ss-register-hero h1{
    font-size:39px !important;
    line-height:.99 !important;
    letter-spacing:-1.7px !important;
  }

  .ss-register-copy>p{
    font-size:15px !important;
    line-height:1.4 !important;
    margin:17px 0 23px !important;
  }

  .ss-register-benefits{
    width:100% !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:5px !important;
  }

  .ss-register-benefit{
    flex:1 !important;
    min-width:0 !important;
    gap:6px !important;
  }

  .ss-benefit{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
  }

  .ss-benefit svg{
    width:19px !important;
    height:19px !important;
  }

  .ss-register-benefit strong{
    font-size:11px !important;
  }

  .ss-register-benefit small{
    font-size:8px !important;
    margin-top:2px !important;
  }

  /* Hide desktop illustration */
  .ss-register-visual{
    display:none !important;
  }

  /* Card begins early — no huge gap */
  .ss-register-card-wrap{
    width:100% !important;
    max-width:none !important;
    margin:-30px auto 0 !important;
    padding:0 8px 92px !important;
  }

  .ss-register-card{
    width:100% !important;
    padding:20px 15px 25px !important;
    border-radius:24px !important;
  }

  .ss-register-heading{
    display:grid !important;
    grid-template-columns:52px 1fr !important;
    gap:9px !important;
    align-items:center !important;
    margin-bottom:17px !important;
  }

  .ss-student-icon{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
  }

  .ss-register-heading-text h2{
    font-size:21px !important;
    line-height:1.05 !important;
    letter-spacing:-.35px !important;
    white-space:nowrap !important;
  }

  .ss-register-heading-text p{
    font-size:10px !important;
    line-height:1.25 !important;
    margin-top:4px !important;
  }

  .ss-secure{
    min-height:49px !important;
    padding:8px 12px !important;
    box-sizing:border-box !important;
  }

  .ss-secure>span{
    width:34px !important;
    height:34px !important;
  }

  .ss-secure strong{
    font-size:14px !important;
  }

  .ss-secure small{
    font-size:9px !important;
  }

  .ss-register-form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .ss-field label{
    font-size:12px !important;
    margin-bottom:6px !important;
  }

  .ss-input input,
  .ss-input .input{
    width:100% !important;
    height:50px !important;
    min-height:50px !important;
    font-size:13px !important;
    border-radius:11px !important;
  }

  .ss-password-rules{
    font-size:8px !important;
    gap:4px 9px !important;
    margin-top:5px !important;
  }

  .ss-terms{
    font-size:10px !important;
    line-height:1.35 !important;
  }

  .ss-create-btn{
    height:53px !important;
    min-height:53px !important;
    border-radius:12px !important;
    font-size:15px !important;
  }

  .ss-or{
    margin:19px 0 11px !important;
  }

  .ss-existing{
    font-size:11px !important;
  }

  /* Keep floating controls above everything */
  body:has(.ss-register-page) .floating-contact{
    z-index:10000 !important;
  }

  body:has(.ss-register-page) .mobile-bottom{
    z-index:9999 !important;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:390px){

  .ss-register-hero-inner{
    padding:27px 15px 52px !important;
  }

  .ss-register-hero h1{
    font-size:36px !important;
    letter-spacing:-1.45px !important;
  }

  .ss-register-copy>p{
    font-size:14px !important;
    margin:15px 0 21px !important;
  }

  .ss-benefit{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  .ss-register-benefit strong{
    font-size:10px !important;
  }

  .ss-register-benefit small{
    font-size:7px !important;
  }

  .ss-register-card-wrap{
    margin:-28px auto 0 !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .ss-register-card{
    padding:19px 14px 23px !important;
  }

  .ss-register-heading-text h2{
    font-size:20px !important;
  }
}