: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;
}




.ap-dmask[hidden] { display:none !important; }
.ap-dmask {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 2vw, 12px);
}
.ap-dlg {
  position: relative;
  width: min(1000px, 98vw);
  background: rgba(0,58,66,.80);
  border-radius: clamp(10px, 2vw, 16px);
  padding: clamp(8px, 1.6vw, 12px);
  color: #fff;
  animation: fade-in .25s ease-in-out;
  box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
  isolation: isolate;
  z-index: 5;
}
.ap-dlg::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 5px; 
  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;
}
.ap-dlg-close {
  position: absolute;
  right: clamp(8px, 2vw, 12px);
  top: clamp(8px, 2vw, 12px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #0D0C0C;
  border: 2px solid #032A42;
  font-size: 30px;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.ap-dlg-close:active {
  transform: translateY(1px);
}

.ap-dlg-ribbon {
  --ribbon-h: clamp(60px, 12vw, 80px);
  position: relative;
  height: var(--ribbon-h);
  margin-top: calc(-1 * var(--ribbon-h) + 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ap-dlg-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 94%);
  height: 100%;
  background: url('/claim/assets/img/txtbg.png') center/contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}
.ap-dlg-ribbon-text {
  position: relative;
  z-index: 1;
  line-height: 1;
  font-weight: 800;
  font-size: clamp(14px, 3.4vw, 18px);
  color: #4FE7FF;
  letter-spacing: .02em;
  white-space: nowrap;
  text-transform: uppercase;
}
.ap-dlg-body {
  margin-top: clamp(6px, 1.4vw, 10px);
}

.ap-dlg-frame {
  position: relative;
  border-radius: clamp(8px, 1.6vw, 12px);
  overflow: hidden;
  margin: 0;
  padding: clamp(8px, 1.2vw, 16px);
}

.ap-dlg-frame .ap-dlg-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  background: #016785;
}

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }




.ap-cmask[hidden]{display:none!important}
.ap-cmask{
  position:fixed; inset:0; z-index:30;
  background: transparent;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vw,16px);
}
.ap-cdlg{
  width:min(560px,92vw);
  border-radius:16px;
  background: linear-gradient(180deg,#63d6c2,#27a9a6);
  box-shadow: 0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
  padding: clamp(16px,3vw,22px);
  text-align:center;
  color:#0a2b2f;
}
.ap-cmsg{
  font-weight:800;
  font-size: clamp(14px,3.6vw,18px);
  color:#0b2435;
  line-height:1.5;
  margin-bottom: clamp(14px,3vw,18px);
}
.ap-cbtns{ display:flex; gap:12px; justify-content:center }
.ap-cok, .ap-ccancel{
  min-width: 108px;
  height: 44px;
  border-radius: 999px;
  border:0;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.ap-cok{
  background: linear-gradient(180deg,#ffd25e,#ffc130);
  color:#2a2300;
}
.ap-ccancel{
  background: #e8f1f7;
  color:#233b49;
}