:root{
  --max-w: 1200px;
  --page-gutter: clamp(6px, 1.6vw, 14px);
  --content-w: calc(100% - 2*var(--page-gutter));
  --tabbar-h: clamp(96px, 26vw, 220px);
}

.ap-page{
  min-height: 100dvh;
  padding: var(--page-gutter);
  padding-bottom: calc(var(--tabbar-h) + clamp(10px, 3vw, 18px));
  background: #0c1c36 url('/claim/assets/img/bg_index.png') center top / cover no-repeat fixed;
}

.ap-title{
  width: min(var(--content-w), var(--max-w));
  margin: 10px auto;
}

.ap-title-text{
  margin: 0 0 clamp(10px, 5vw, 18px);
  text-align: center;
  font-family: "Luckiest Guy","Baloo 2","Lilita One",
               "Nunito","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(38px, 8vw, 48px);

  background-image: linear-gradient(180deg,#ffffff 0%,#ecfbff 35%,#c9f1ff 65%,#a8e7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  -webkit-text-stroke: clamp(1.6px,.48vw,3px) #0a4054;
  text-shadow:
    0 .5vw 0 rgba(0,0,0,.08),
    0 1.2vw 1.8vw rgba(0,0,0,.35),
    0 0 0 .8px #0a4054;
}

@supports not (-webkit-background-clip: text){
  .ap-title-text{
    color:#e7fbff;
    background:none;
  }
}

.ap-tabs{
  width: min(var(--content-w), var(--max-w));
  margin: 0 auto clamp(12px, 3vw, 18px);
  display: flex;
  gap: 0;
  padding: clamp(4px, 1vw, 6px);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
}
.ap-tab{
  flex: 1;
  height: clamp(42px, 10.6vw, 58px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #395a66;
  font-weight: 900;
  font-size: clamp(16px, 3.8vw, 22px);
  letter-spacing: .02em;
}
.ap-tab.is-active{
  color:#fff;
  background: linear-gradient(180deg,#59c78a,#2e9b63);
  box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5);
}

.ap-view{ display:block }
.ap-view[hidden]{ display:none }

.ap-list{
  width: min(var(--content-w), var(--max-w));
  margin: 0 auto;
  display: grid;
  gap: clamp(10px, 2.6vw, 16px);
  list-style: none;
  padding: 0;
}

.ap-card{
  position: relative;
  display: block;
  border-radius: clamp(10px, 2.2vw, 14px);
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,.02);
}
.ap-card .ap-img{
  width: 100%;
  aspect-ratio: 3 / 1; 
  height: auto;
  object-fit: cover;
  display: block;
}

.ap-card::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg,#fff3c4,#ffdc73 25%,#caa23a 60%,#ffe89a 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@supports not (-webkit-mask: none){
  .ap-card{ box-shadow: 0 0 0 2px #d6b35f; }
}


.ap-task-wrap{
  width: min(var(--content-w), var(--max-w));
  margin: 0 auto clamp(18px, 3.5vw, 22px);
}

.ap-task-badge{
  display: inline-block;
  width: fit-content; 
  padding: clamp(7px,1.6vw,10px) clamp(12px,2.4vw,16px);
  border-radius: clamp(8px,1.6vw,12px);
  background: linear-gradient(180deg,#62d3af,#3cae8f);
  color: #fff;
  font-weight: 600;
  font-size: clamp(13px, 3.6vw, 16px);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  margin-left: clamp(4px, 1vw, 10px);
}

.ap-task-panel{
  margin-top: clamp(10px, 2.6vw, 14px);
  padding: clamp(16px,3.6vw,20px);
  border-radius: clamp(12px, 2vw, 14px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.25), transparent 60%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.25);
  color:#eaf7ff;
  text-align:center;
}