/*
 STARPOINT V87 — PROFILE FIRST-SCREEN POLISH
 UI-only override for the information-input screen.
 IMPORTANT: No interpretation, prompt, payment, calculation, cache, API, or result logic changes.
*/
:root{
  --sp87p-ink:#30343d;
  --sp87p-body:#737781;
  --sp87p-muted:#a3a7af;
  --sp87p-line:#e5e9ed;
  --sp87p-mint:#70d4ce;
  --sp87p-mint-soft:#eefaf8;
  --sp87p-lilac:#aa92e4;
  --sp87p-lilac-soft:#f5f1fb;
  --sp87p-paper:#ffffff;
}

/* Keep this layer strictly on the first/profile screen. */
body.sp-ref-ui .profile-page{
  background:
    radial-gradient(circle at 12% 3%,rgba(111,212,205,.055),transparent 26%),
    radial-gradient(circle at 90% 10%,rgba(170,146,228,.055),transparent 28%),
    #fbfcfd!important;
}
body.sp-ref-ui .profile-page main{
  background:transparent!important;
}
body.sp-ref-ui .profile-page aside{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(225,230,235,.9)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 18px 46px rgba(66,75,96,.055)!important;
}

/* Hero: airy reference language + a more premium iridescent planet/orb. */
body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero,
body.sp-ref-ui .profile-page aside>.v76-page-hero{
  position:relative!important;
  isolation:isolate!important;
  display:block!important;
  min-height:204px!important;
  margin:0 0 24px!important;
  padding:31px 148px 29px 25px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:24px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(250,253,253,.98) 52%,rgba(250,247,254,.98))!important;
  box-shadow:inset 0 0 0 1px rgba(229,233,237,.84)!important;
  color:var(--sp87p-ink)!important;
}
body.sp-ref-ui .profile-page aside>.v76-page-hero>div{
  position:relative!important;
  z-index:3!important;
  min-width:0!important;
}
body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero h1,
body.sp-ref-ui .profile-page aside>.v76-page-hero h1{
  position:relative!important;
  z-index:3!important;
  margin:0 0 12px!important;
  color:var(--sp87p-ink)!important;
  font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",serif!important;
  font-size:27px!important;
  font-weight:760!important;
  line-height:1.25!important;
  letter-spacing:-.05em!important;
}
body.sp-ref-ui .profile-page aside>.v76-page-hero h1:after{
  content:"✦"!important;
  display:inline-block!important;
  margin-left:9px!important;
  color:#9f8bdd!important;
  font-family:inherit!important;
  font-size:13px!important;
  line-height:1!important;
  transform:translateY(-4px)!important;
  text-shadow:12px 10px 0 rgba(111,211,204,.55)!important;
}
body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero p,
body.sp-ref-ui .profile-page aside>.v76-page-hero p{
  position:relative!important;
  z-index:3!important;
  max-width:260px!important;
  margin:0!important;
  color:#969aa3!important;
  font-size:12px!important;
  font-weight:520!important;
  line-height:1.65!important;
  letter-spacing:-.015em!important;
}

/* Main glass planet. Multiple radial layers give depth without using an image. */
body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero:before,
body.sp-ref-ui .profile-page aside>.v76-page-hero:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:2!important;
  top:27px!important;
  right:27px!important;
  width:112px!important;
  height:112px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 26% 22%,rgba(255,255,255,.98) 0 4%,rgba(255,255,255,.62) 5% 10%,transparent 11%),
    radial-gradient(circle at 76% 28%,rgba(255,255,255,.44) 0 3%,transparent 4%),
    radial-gradient(circle at 30% 29%,rgba(120,225,216,.82) 0%,rgba(138,223,220,.66) 25%,rgba(151,207,226,.64) 46%,rgba(174,178,231,.74) 70%,rgba(163,142,224,.85) 100%)!important;
  border:1px solid rgba(255,255,255,.88)!important;
  box-shadow:
    inset 11px 13px 26px rgba(255,255,255,.40),
    inset -13px -16px 25px rgba(112,91,190,.13),
    0 18px 30px rgba(112,143,196,.15),
    0 0 0 7px rgba(231,248,246,.28)!important;
  filter:saturate(.92)!important;
  pointer-events:none!important;
}
/* Fine orbit ring around the planet. */
body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero:after,
body.sp-ref-ui .profile-page aside>.v76-page-hero:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:2!important;
  top:72px!important;
  right:13px!important;
  width:142px!important;
  height:39px!important;
  border:1px solid rgba(156,142,220,.25)!important;
  border-left-color:rgba(107,208,201,.25)!important;
  border-right-color:rgba(107,208,201,.14)!important;
  border-radius:50%!important;
  background:transparent!important;
  transform:rotate(-11deg)!important;
  box-shadow:none!important;
  opacity:.9!important;
  pointer-events:none!important;
}

/* Form rhythm */
body.sp-ref-ui .profile-page aside>label,
body.sp-ref-ui .profile-page aside>.row{
  margin-top:19px!important;
}
body.sp-ref-ui .profile-page aside>label,
body.sp-ref-ui .profile-page aside .row>label{
  color:#41464f!important;
  font-size:13px!important;
  font-weight:780!important;
  letter-spacing:-.02em!important;
}
body.sp-ref-ui .profile-page aside>small,
body.sp-ref-ui .profile-page aside label>small,
body.sp-ref-ui .profile-page aside .v72-birth-note,
body.sp-ref-ui .profile-page aside .v72-region-help{
  color:#a2a6ad!important;
  font-weight:500!important;
  line-height:1.58!important;
}

/* Inputs: white/pearl surface instead of the blue block feel. */
body.sp-ref-ui.v77-minimal-ui .profile-page aside input,
body.sp-ref-ui.v77-minimal-ui .profile-page aside select,
body.sp-ref-ui.v77-minimal-ui .profile-page aside textarea,
body.sp-ref-ui .profile-page aside input,
body.sp-ref-ui .profile-page aside select,
body.sp-ref-ui .profile-page aside textarea{
  min-height:55px!important;
  margin-top:9px!important;
  padding-left:15px!important;
  padding-right:15px!important;
  border:1px solid #e1e6ea!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fff 0%,#fdfefe 100%)!important;
  color:#30343d!important;
  box-shadow:0 8px 22px rgba(61,72,94,.035)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
body.sp-ref-ui .profile-page aside input:focus,
body.sp-ref-ui .profile-page aside select:focus,
body.sp-ref-ui .profile-page aside textarea:focus{
  outline:0!important;
  border-color:#addfd9!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(111,211,204,.10),0 9px 22px rgba(61,72,94,.04)!important;
}
body.sp-ref-ui .profile-page aside input::placeholder,
body.sp-ref-ui .profile-page aside textarea::placeholder{
  color:#b7bac1!important;
}

/* Segmented choices: mint for calendar, lilac for gender. */
body.sp-ref-ui.v77-minimal-ui .profile-page aside .seg i,
body.sp-ref-ui .profile-page aside .seg i{
  min-height:48px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e0e5e9!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#838790!important;
  font-weight:720!important;
  box-shadow:none!important;
}
body.sp-ref-ui .profile-page aside .row>label:first-child .seg input:checked+i{
  background:linear-gradient(145deg,#eefaf8,#f8fdfc)!important;
  color:#63bdb6!important;
  border-color:#bfe6e2!important;
  box-shadow:inset 0 0 0 1px rgba(111,211,204,.10)!important;
}
body.sp-ref-ui .profile-page aside .row>label:last-child .seg input:checked+i{
  background:linear-gradient(145deg,#f7f3fc,#fcfaff)!important;
  color:#8e7ac8!important;
  border-color:#ddd2f0!important;
  box-shadow:inset 0 0 0 1px rgba(170,146,228,.10)!important;
}

/* Date step buttons */
body.sp-ref-ui .profile-page aside .yearStep{
  gap:7px!important;
  margin-top:9px!important;
}
body.sp-ref-ui .profile-page aside .yearStep button{
  min-height:39px!important;
  border:1px solid #e5e8ec!important;
  border-radius:11px!important;
  background:#fafbfc!important;
  color:#969aa3!important;
  font-weight:720!important;
  box-shadow:none!important;
}
body.sp-ref-ui .profile-page aside .yearStep button:active{
  background:linear-gradient(145deg,#eefaf8,#f5f1fb)!important;
  color:#77718d!important;
  border-color:#d7dfe5!important;
}

/* Main CTA: the reference mint → lilac brand gradient. */
body.sp-ref-ui.v77-minimal-ui .profile-page aside .primary,
body.sp-ref-ui .profile-page aside .primary{
  min-height:57px!important;
  margin-top:25px!important;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(105deg,#6fd5ce 0%,#86d5df 45%,#aa93e4 100%)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  box-shadow:0 12px 25px rgba(125,151,207,.16)!important;
}
body.sp-ref-ui .profile-page aside .primary:active{
  transform:translateY(1px)!important;
  box-shadow:0 7px 18px rgba(125,151,207,.13)!important;
}

/* Secondary blocks remain quiet so the input flow stays primary. */
body.sp-ref-ui .profile-page aside .v72-lunar-help,
body.sp-ref-ui .profile-page aside .notice,
body.sp-ref-ui .profile-page aside details,
body.sp-ref-ui .profile-page aside .saju-qa{
  border-color:#e7eaee!important;
  box-shadow:0 10px 26px rgba(62,71,91,.035)!important;
}

@media(max-width:640px){
  body.sp-ref-ui .profile-page main{padding-left:12px!important;padding-right:12px!important}
  body.sp-ref-ui .profile-page aside{
    padding:22px 18px 96px!important;
    border-radius:25px!important;
    box-shadow:0 13px 34px rgba(66,75,96,.045)!important;
  }
  body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero,
  body.sp-ref-ui .profile-page aside>.v76-page-hero{
    min-height:190px!important;
    padding:28px 122px 25px 20px!important;
    border-radius:21px!important;
  }
  body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero h1,
  body.sp-ref-ui .profile-page aside>.v76-page-hero h1{font-size:25px!important}
  body.sp-ref-ui .profile-page aside>.v76-page-hero p{max-width:230px!important;font-size:11px!important}
  body.sp-ref-ui .profile-page aside>.v76-page-hero:before{
    top:27px!important;right:18px!important;width:94px!important;height:94px!important;
  }
  body.sp-ref-ui .profile-page aside>.v76-page-hero:after{
    top:64px!important;right:6px!important;width:120px!important;height:34px!important;
  }
}
@media(max-width:390px){
  body.sp-ref-ui .profile-page aside{padding-left:14px!important;padding-right:14px!important}
  body.sp-ref-ui.v77-minimal-ui .profile-page aside>.v76-page-hero,
  body.sp-ref-ui .profile-page aside>.v76-page-hero{
    min-height:180px!important;
    padding:25px 108px 23px 17px!important;
  }
  body.sp-ref-ui .profile-page aside>.v76-page-hero:before{
    width:82px!important;height:82px!important;right:16px!important;top:27px!important;
  }
  body.sp-ref-ui .profile-page aside>.v76-page-hero:after{
    width:105px!important;height:31px!important;right:4px!important;top:58px!important;
  }
  body.sp-ref-ui .profile-page aside>.v76-page-hero h1{font-size:23px!important}
}