:root {
  --ink:#002630;
  --cyan:#00d9e8;
  --muted:#899da6;
  --line:#e8eef0
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#e8eff2;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  color:var(--ink)
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  border:0
}
.app {
  max-width:430px;
  min-height:100dvh;
  background:white;
  margin:auto;
  position:relative;
  padding-bottom:76px;
  box-shadow:0 0 30px #00263014
}
.top {
  height:67px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px
}
.brand {
  font-size:23px;
  font-weight:850;
  letter-spacing:-1px
}
.brand b {
  color:#00bfd0
}
.headicons {
  display:flex;
  gap:20px;
  font-size:20px
}
.view {
  padding:10px 16px 28px
}
.hidden {
  display:none!important
}
.small {
  font-size:11px;
  color:#859aa4
}
.eyebrow {
  font-size:12px;
  color:#91a4ac
}
.balance {
  font-size:45px;
  letter-spacing:-1px;
  font-weight:800;
  margin:8px 0 1px
}
.pillrow {
  display:flex;
  gap:9px;
  margin:22px 0 18px
}
.pill {
  flex:1;
  background:#f5f7f8;
  border-radius:30px;
  padding:11px 0;
  font-size:13px;
  font-weight:700
}
.pill i {
  display:inline-grid;
  place-items:center;
  background:#002a35;
  color:white;
  border-radius:50%;
  width:24px;
  height:24px;
  font-style:normal;
  margin-right:7px
}
.strip {
  border:1px solid #e2f1f4;
  background:#f5fdfe;
  border-radius:12px;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  margin-bottom:16px
}
.card {
  border-radius:16px;
  padding:20px 18px;
  margin-bottom:22px
}
.gradient {
  background:linear-gradient(115deg,#f2fcfd,#c8faff)
}
.hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:160px
}
.hero h3 {
  margin:7px 0;
  font-size:17px
}
.hero .wheel-mini {
  width:106px;
  height:106px;
  flex-shrink:0
}
.primary {
  background:var(--cyan);
  border-radius:30px;
  padding:13px 20px;
  color:#002630;
  font-weight:750
}
.dark {
  background:#002630;
  color:white;
  border-radius:30px;
  padding:10px 17px;
  font-weight:700
}
.outlined {
  border:1px solid #e5ebed;
  background:#f5f7f8;
  border-radius:30px;
  padding:13px
}
.invitebox {
  background:#f7f9fa;
  border:1px solid #e6edef
}
.invitebox h3 {
  font-size:15px
}
.sectionrow {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:22px 0 10px
}
.sectionrow h3 {
  font-size:15px;
  margin:0
}
.reward {
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 0;
  border-bottom:1px solid #edf0f1
}
.reward .ico {
  border-radius:50%;
  background:#f3f8fa;
  width:37px;
  height:37px;
  display:grid;
  place-items:center
}
.reward strong {
  font-size:13px
}
.reward p {
  font-size:10px;
  color:#8ca0a8;
  margin:4px 0
}
.reward .plus {
  margin-left:auto;
  font-size:21px;
  font-weight:800
}
.nav {
  height:65px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:1px solid #edf0f1;
  display:flex;
  justify-content:space-around;
  align-items:center;
  position:fixed;
  max-width:430px;
  margin:auto
}
.nav button {
  background:none;
  color:#99a6ac;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  font-size:10px
}
.nav button span {
  font-size:23px
}
.nav button.active {
  color:#002630;
  font-weight:800
}
h2 {
  font-size:21px;
  margin:7px 0 22px
}
.invitehero {
  min-height:134px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.invitehero .num {
  font-size:44px;
  font-weight:800
}
.gift {
  font-size:75px;
  filter:drop-shadow(6px 8px 0 #00d5e8)
}
.codecard {
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:18px
}
.code {
  font-size:29px;
  letter-spacing:3px;
  font-weight:800;
  margin:12px 0 17px
}
.two {
  display:flex;
  gap:10px
}
.two button {
  flex:1
}
.stats {
  display:flex;
  margin:20px 0
}
.stats>div {
  width:50%;
  padding:0 4px
}
.stats>div+div {
  border-left:1px solid #e9eff1;
  padding-left:22px
}
.stats b {
  font-size:24px
}
.notice {
  font-size:11px;
  color:#849aa3;
  line-height:1.6
}
.withdraw .token {
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:8px 0 22px;
  margin-bottom:20px
}
.coin {
  width:36px;
  height:36px;
  background:#25a17a;
  color:white;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:24px
}
.network {
  border:1px solid #e1e8eb;
  background:#f8fafb;
  padding:16px;
  border-radius:12px;
  display:flex;
  gap:12px;
  align-items:center;
  margin:8px 0
}
.network.selected {
  border-color:#002630;
  background:#fff
}
.network input {
  accent-color:#002630;
  margin-left:auto
}
.fieldlabel {
  font-size:12px;
  font-weight:750;
  margin:22px 0 10px
}
.input {
  width:100%;
  border:1px solid #e8eef0;
  border-radius:12px;
  padding:17px 13px;
  background:#f5f7f8;
  outline:none;
  font-size:13px
}
.input:focus {
  border-color:#00cddf
}
.warn {
  background:#fff8eb;
  color:#98743b;
  padding:15px;
  border-radius:12px;
  font-size:11px;
  line-height:1.6;
  margin:16px 0
}
.calc {
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid #e8eef0;
  font-size:12px
}
.calc b {
  font-size:22px
}
.modalbg {
  position:fixed;
  inset:0;
  background:#00232d60;
  display:grid;
  place-items:center;
  z-index:5;
  padding:20px;
  backdrop-filter:blur(4px)
}
.modal {
  width:min(354px,100%);
  background:white;
  border-radius:24px;
  padding:30px 22px 22px;
  text-align:center;
  position:relative
}
.close {
  position:absolute;
  right:17px;
  top:12px;
  background:none;
  color:#82969e;
  font-size:23px
}
.modal h2 {
  margin:9px 0 7px
}
.wheelbox {
  width:270px;
  height:270px;
  margin:25px auto 18px;
  position:relative
}
.wheelbox .wheel {
  margin:0
}
.wheel {
  width:270px;
  height:270px;
  margin:25px auto 18px;
  position:relative;
  border:8px solid #d8fbff;
  border-radius:50%;
  box-shadow:0 0 0 8px #f2feff;
  transition:transform 4s cubic-bezier(.12,.72,.12,1);
  background:conic-gradient(#00dbe7 0deg 60deg,#f0fdff 60deg 120deg,#00dbe7 120deg 180deg,#f0fdff 180deg 240deg,#00dbe7 240deg 300deg,#f0fdff 300deg 360deg)
}
.segment {
  position:absolute;
  top:50%;
  left:50%;
  width:70px;
  text-align:center;
  font-size:17px;
  font-weight:800;
  line-height:1.05;
  transform-origin:center center
}
.segment small {
  display:block;
  font-size:8px;
  font-weight:400;
  margin-top:3px
}
.hub {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:73px;
  height:73px;
  border:4px solid white;
  border-radius:50%;
  background:#002630;
  color:#00dbea;
  font-weight:900;
  font-size:25px;
  z-index:2;
  display:grid;
  place-items:center;
  line-height:1
}
.hub small {
  font-size:9px;
  color:white;
  font-weight:400
}
.pointer {
  position:absolute;
  z-index:6;
  top:17px;
  left:calc(50% - 11px);
  width:0;
  height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:31px solid #002630
}
.modal .primary {
  width:100%;
  margin-top:14px
}
.tag {
  font-size:11px;
  color:#869ba4
}
.demo {
  background:#fff6dd;
  border:1px solid #ffe3a5;
  border-radius:8px;
  padding:8px;
  font-size:11px;
  margin:0 16px 8px;
  color:#805d14
}
.toast {
  position:fixed;
  z-index:10;
  bottom:85px;
  left:50%;
  transform:translateX(-50%);
  background:#002630;
  color:white;
  padding:12px 20px;
  border-radius:30px;
  white-space:nowrap;
  font-size:13px
}
.mini-note {
  font-size:10px;
  color:#90a1a8
}
.mutedbtn {
  opacity:.5;
  cursor:not-allowed
}
@media(min-width:600px) {
  .app {
    min-height:850px
  }
  .nav {
    left:0;
    right:0
  }
}

/* Wheel pointer remains fixed while the wheel element rotates. */
.wheelbox .pointer { position: absolute; z-index: 8; }
.mini-wheel {
  border-radius: 50%;
  border: 7px solid #b4f6fc;
  background: conic-gradient(#00dbe7 0 60deg, #f2feff 60deg 120deg, #00dbe7 120deg 180deg, #f2feff 180deg 240deg, #00dbe7 240deg 300deg, #f2feff 300deg 360deg);
  position: relative;
}
.mini-wheel-center {
  position: absolute; top: 30%; left: 30%; width: 40%; height: 40%;
  border-radius: 50%; background: #002630; color: #00dbe7;
  display: grid; place-items: center; font-weight: 900;
}

/* The fixed triangular pointer straddles the outer wheel rim (half outside). */
.wheelbox .pointer {
  top: -15px;
  left: calc(50% - 11px);
  z-index: 9;
  pointer-events: none;
}