:root{
  --bg:#111112;
  --surface:rgba(23,23,23,.6);
  --stroke:rgba(255,255,255,.16);
  --stroke-soft:rgba(255,255,255,.1);
  --text:#fff;
  --text-50:rgba(255,255,255,.5);
  --accent:#8626FF;
  --accent-border:#AD6BFF;
  --lilac:#A28BFF;
  --orange:#F1981B;
  --cyan:#7DE7FF;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg)}
html{overflow-x:hidden;overflow-x:clip}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}
img{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.page{position:relative}
.container{width:1024px;max-width:calc(100% - 32px);margin:0 auto;position:relative}

/* ---------- decorative layers ---------- */
.decor{position:absolute;pointer-events:none;user-select:none}
.hero-canvas{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1440px;height:1200px;overflow:visible;pointer-events:none;z-index:0}
.hero-bg{top:0;left:1.5px;width:1437px;height:492px;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 99%)}
.cta1{top:0;left:0;width:834px;height:544px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 98%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 98%)}
.cta2{top:226px;left:620px;width:820px;height:693px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 98%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 98%)}
.banner-bg{top:0;left:1.5px;width:1437px;height:492px;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 99%)}

/* ---------- header ---------- */
.header{
  position:relative;z-index:20;
  height:76px;
  background:rgba(20,20,21,.3);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  display:flex;align-items:center;
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 18%,rgba(255,255,255,1) 82%,rgba(255,255,255,0) 100%);
  opacity:.16;
}
.header .container{display:flex;align-items:center;justify-content:space-between}
.header-left{display:flex;align-items:center;gap:40px}
.logo img{width:43px;height:34px}
.nav{display:flex;align-items:center;gap:12px}
.nav-btn{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:24px;
  font-size:16px;font-weight:600;line-height:20px;color:var(--text-50);
  border:1px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.nav-btn img{width:20px;height:20px;transition:filter .2s}
.nav-btn:hover{color:#fff}
.nav-btn:hover img{filter:brightness(2)}
.nav-btn.active{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
}
.nav-btn.active img{filter:brightness(2)}
.header-right{display:flex;align-items:center;gap:26px}
.points{display:flex;align-items:center;gap:6px}
.points b{font-size:18px;font-weight:700}
.points img{width:22px;height:22px}
.user-pill{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px 8px 8px;border-radius:24px;
  background:rgba(30,30,31,.6);border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
}
.user-pill .avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.user-pill span{font-size:16px;font-weight:600;line-height:20px}
.user-pill img.caret{width:20px;height:20px}

/* ---------- shared type ---------- */
.eyebrow{font-size:18px;font-weight:500;line-height:24px}
.h-section{font-size:36px;font-weight:700;line-height:44px}
.h-page{font-size:32px;font-weight:700;line-height:39px}
.sub-page{margin-top:12px;font-size:18px;font-weight:500;line-height:22px;color:var(--text-50)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 24px;border-radius:16px;
  font-size:16px;font-weight:600;line-height:20px;color:#fff;
  background:var(--accent);
  border:1px solid var(--accent-border);
  transition:filter .2s, transform .1s;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn-white{background:#fff;border-color:#fff;color:#4F00B3}
.btn-white:hover{filter:brightness(.95)}

/* ---------- balance card ---------- */
.balance{
  position:relative;z-index:10;
  margin-top:58px;
  border-radius:24px;
  background:var(--bg);
  border:1px solid var(--stroke);
  padding:24px;
  display:flex;flex-direction:column;gap:32px;
  overflow:hidden;
}
.balance-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.balance-info{display:flex;flex-direction:column;gap:12px}
.balance-title{font-size:18px;font-weight:500;line-height:22px;color:var(--text-50)}
.balance-value{display:flex;align-items:center;gap:10px}
.balance-value b{font-size:32px;font-weight:600;line-height:39px}
.balance-value img{width:36px;height:36px}

/* profile user row */
.profile-user{display:flex;align-items:center;gap:16px}
.profile-user .avatar-lg{width:62px;height:62px;border-radius:50%;object-fit:cover}
.profile-user .p-username{font-size:24px;font-weight:700;line-height:29px}
.profile-user .p-handle{margin-top:4px;font-size:18px;line-height:22px;color:var(--lilac)}

/* ---------- progress strip ---------- */
.progress-block{display:flex;flex-direction:column;gap:24px}
.progress-head{display:flex;align-items:flex-start;justify-content:space-between}
.progress-head h2{font-size:24px;font-weight:700;line-height:29px}
.progress-arrows{display:flex;align-items:center;gap:6px}
.arrow-btn{
  width:26px;height:26px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.arrow-btn:hover{background:rgba(255,255,255,.14)}
.arrow-btn[disabled]{opacity:.5;cursor:default}
.arrow-btn svg{width:12px;height:12px}
.progress-strip{display:flex;overflow:hidden;scroll-behavior:smooth}
.p-item{flex:0 0 192px;display:flex;flex-direction:column;align-items:center;gap:16px}
.p-track{position:relative;width:192px;height:14px}
.p-track .seg{position:absolute;top:6px;height:2px;width:96px;background:rgba(255,255,255,.12)}
.p-track .seg.left{left:0}
.p-track .seg.right{left:96px}
.p-track .seg.done{background:var(--lilac)}
.p-track .dot{
  position:absolute;left:89px;top:0;width:14px;height:14px;border-radius:50%;
  background:#313131;border:1px solid rgba(255,255,255,.16);
}
.p-track .dot.done{
  background:#fff;border-color:var(--lilac);
  box-shadow:0 0 14px rgba(162,139,255,.9);
}
.p-value{font-size:12px;font-weight:500;line-height:15px;color:var(--text-50)}
.p-card{
  width:180px;height:224px;border-radius:20px;
  padding:20px 10px 10px;
  background:rgba(255,255,255,.03);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.p-card.current{
  background:rgba(186,155,226,.05);
  border:1px solid rgba(220,193,255,.16);
}
.p-card .p-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.p-card img.badge{width:100px;height:100px}
.p-card img.badge.dim{opacity:.5}
.p-meta{display:flex;flex-direction:column;gap:2px;text-align:center}
.p-name{font-size:14px;font-weight:500;color:var(--text-50)}
.p-rank{font-size:16px;font-weight:600}
.p-chip{
  width:160px;height:30px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:500;
}
.p-chip.locked{color:var(--text-50)}
.p-chip img{width:16px;height:16px}
.p-chip img.coin{width:22px;height:22px}

/* ---------- category filter pill ---------- */
.cat-pill{
  display:inline-flex;align-items:center;gap:12px;
  padding:3px;border-radius:99px;
  background:rgba(20,20,21,.3);border:1px solid rgba(255,255,255,.05);
}
.cat-btn{
  display:flex;align-items:center;
  padding:9px 16px;border-radius:24px;
  font-size:16px;font-weight:600;line-height:20px;color:var(--text-50);
  border:1px solid transparent;
  transition:color .2s,background .2s;
}
.cat-btn:hover{color:#fff}
.cat-btn.active{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}

/* ---------- shop grids ---------- */
.shop-head{margin-top:28px}
.grid{display:grid;gap:36px 20px;margin-top:40px;position:relative;z-index:5}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.pcard{display:flex;flex-direction:column;gap:12px;position:relative}
.pcard-img{position:relative;border-radius:20px;overflow:hidden}
.pcard-img>img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-img.r24{border-radius:24px}
.pcard-img.bordered{background:rgba(255,255,255,.02);border:1px solid var(--stroke);padding:0}
.pcard-body{padding:0 16px;display:flex;flex-direction:column;gap:12px}
.pcard-name{font-size:18px;font-weight:700;line-height:22px}
.pcard-name.dimmed{color:var(--text-50)}
.pcard-desc{margin-top:4px;font-size:16px;line-height:19px;color:var(--text-50)}
.pcard-desc.sm{font-size:14px;line-height:17px}
.price{display:flex;align-items:center;gap:6px}
.price b{font-size:18px;font-weight:700;line-height:22px}
.price img{width:22px;height:22px}
.avail{font-size:16px;line-height:19px}
.avail .lbl{color:var(--text-50)}
.badge-cyan{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:16px;
  background:rgba(125,231,255,.12);color:var(--cyan);
  font-size:14px;font-weight:600;line-height:16px;
}
.badge-cyan.abs{position:absolute;top:10px;left:10px;z-index:2}
.badge-cyan.abs-b{position:absolute;bottom:10px;left:10px;z-index:2}
.chip-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:8px 16px;border-radius:26px;z-index:2;
  background:rgba(17,17,18,.42);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:16px;font-weight:600;line-height:19px;white-space:nowrap;
}
.img-grad::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 80%,rgba(0,0,0,.8) 100%);
}
.lock-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:147px;padding:12px 16px;border-radius:14px;
  background:rgba(17,17,18,.42);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.lock-overlay img{width:24px;height:24px}
.lock-overlay .lo-t{font-size:14px;line-height:17px;color:var(--text-50)}
.lock-overlay .lo-d{margin-top:4px;font-size:16px;font-weight:600;line-height:19px;color:#fff}
.time-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:16px;
  background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.16);
  font-size:14px;font-weight:600;line-height:16px;white-space:nowrap;
}
.time-chip img{width:18px;height:18px}
.time-chip.past{background:rgba(241,152,27,.12);border-color:rgba(241,152,27,.2);color:var(--orange)}
.ev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.count-line{display:flex;align-items:center;gap:10px;font-size:16px;line-height:19px}
.count-line img{width:20px;height:20px}
.count-line .lbl{color:var(--text-50)}

/* ---------- earn page ---------- */
.panel{
  position:relative;z-index:5;
  border-radius:40px;
  background:var(--bg);border:1px solid var(--stroke);
  padding:24px;
  display:flex;flex-direction:column;gap:28px;
}
.panel h2{font-size:24px;font-weight:600;line-height:29px}
.ref-points{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:18px;line-height:22px}
.ref-points b{font-weight:700}
.ref-points img{width:22px;height:22px}
.subcard{
  border-radius:20px;background:var(--surface);
  padding:24px;display:flex;align-items:center;gap:32px;
}
.subcard .grow{flex:1}
.sub-label{font-size:16px;line-height:19px;color:var(--text-50)}
.sub-value{margin-top:8px;font-size:22px;font-weight:600;line-height:27px}
.ref-stats{padding:20px;display:flex;align-items:stretch;gap:32px}
.ref-stat{display:flex;gap:14px}
.ref-stat img{width:22px;height:22px}
.ref-stat .rs-t{font-size:16px;line-height:19px;color:var(--text-50)}
.ref-stat .rs-v{margin-top:4px;font-size:32px;font-weight:600;line-height:39px}
.ref-divider{width:1px;background:rgba(255,255,255,.1)}
.link-purple{color:var(--lilac);font-size:16px;font-weight:500;cursor:pointer}
.link-purple:hover{text-decoration:underline}
.task-group{display:flex;flex-direction:column;gap:20px}
.task-list{display:flex;flex-direction:column;gap:8px}
.task{
  display:flex;align-items:center;gap:16px;
  padding:16px 24px;border-radius:20px;background:var(--surface);
  transition:background .2s;cursor:pointer;
}
.task:hover{background:rgba(30,30,31,.75)}
.task-ic{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--lilac);
  display:flex;align-items:center;justify-content:center;
}
.task-ic img{width:22px;height:22px}
.task-ic.locked{border:none;background:rgba(255,255,255,.12)}
.task-ic.locked img{width:24px;height:24px}
.task-txt{flex:1;min-width:0}
.task-main{font-size:18px;font-weight:500;line-height:22px}
.task-sub{margin-top:4px;font-size:16px;line-height:19px;color:var(--text-50)}
.task-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.task-pts{display:flex;align-items:center;gap:6px}
.task-pts b{font-size:18px;font-weight:700;line-height:22px}
.task-pts img{width:22px;height:22px}
.task-note{font-size:14px;line-height:17px;color:var(--text-50)}
.task-note.md{font-size:16px;line-height:19px}
.task-lvl{font-size:18px;font-weight:600;line-height:22px;text-align:right}
.task-caret{flex:0 0 11px;width:11px;height:6px}

/* ---------- profile ---------- */
.tabs-pill{margin-top:28px;position:relative;z-index:5}
.hist-card{
  position:relative;z-index:5;margin-top:20px;
  border-radius:32px;background:var(--bg);
  border:1px solid rgba(255,255,255,.12);
  padding:24px;overflow:hidden;
}
.hist-toolbar{display:flex;align-items:center;gap:24px}
.hist-tools{display:flex;align-items:center;gap:12px;flex:1}
.tool-box{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:12px;background:#171717;
  font-size:16px;font-weight:500;line-height:20px;
  cursor:pointer;transition:background .2s;
}
.tool-box:hover{background:#1e1e1f}
.tool-box img{width:20px;height:20px}
.tool-box input{
  background:none;border:none;outline:none;color:#fff;
  font-family:inherit;font-size:16px;width:220px;
}
.tool-box input::placeholder{color:var(--text-50)}
.hist-total{font-size:16px;font-weight:600;line-height:20px}
.hist-scroll{margin-top:12px;max-height:760px;overflow-y:auto;position:relative;padding-right:16px}
.hist-scroll::-webkit-scrollbar{width:8px}
.hist-scroll::-webkit-scrollbar-thumb{background:#232325;border-radius:4px}
.hist-date{padding:20px 0 8px;font-size:14px;font-weight:500;line-height:18px;color:var(--text-50)}
.hist-row{
  display:flex;align-items:center;gap:40px;
  padding:12px;border-radius:16px;
  transition:background .2s;
}
.hist-row:hover{background:rgba(255,255,255,.03)}
.hist-left{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.hist-thumb{
  flex:0 0 60px;width:60px;height:60px;border-radius:9px;overflow:hidden;
  background:#fff;
}
.hist-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.hist-thumb.coin{background:none;display:flex;align-items:center;justify-content:center}
.hist-thumb.coin img{width:40px;height:38px;object-fit:contain;border-radius:0}
.hist-name{font-size:16px;font-weight:500;line-height:20px}
.hist-status{margin-top:4px;font-size:14px;line-height:17px;color:var(--text-50)}
.hist-status.orange{color:var(--orange)}
.hist-status.purple{color:var(--lilac)}
.hist-amt{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap}
.hist-amt.plus{color:var(--lilac)}
.hist-amt img{width:24px;height:22px}
.hist-fade{
  position:absolute;left:0;right:0;bottom:0;height:60px;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,18,0),rgba(17,17,18,.9));
  border-radius:0 0 32px 32px;z-index:6;
}

/* ---------- FAQ ---------- */
.faq-head{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;gap:12px}
.faq{position:relative;z-index:5;margin:36px auto 0;width:640px;max-width:100%;display:flex;flex-direction:column;gap:12px}
.faq-item{
  border-radius:24px;
  background:var(--surface);border:1px solid var(--stroke);
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px;text-align:left;
  font-size:20px;font-weight:600;line-height:26px;color:#fff;
}
.faq-q svg{flex:0 0 24px;width:24px;height:24px;transition:transform .25s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-sep{
  height:1px;margin:0 24px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 5%,rgba(255,255,255,.5) 94%,rgba(255,255,255,0) 100%);
  opacity:.3;
}
.faq-a{padding:24px;font-size:16px;line-height:22px;color:var(--text-50)}

/* ---------- footer ---------- */
.footer-zone{position:relative;margin-top:100px;background:linear-gradient(180deg,rgba(20,20,21,0) 0,#141415 160px)}
.footer-zone.plain{background:transparent;margin-top:100px}
.footer-decor{position:absolute;top:-154px;left:0;right:0;height:792px;pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 72%,transparent 94%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 72%,transparent 94%)}
.footer-decor img{width:1440px;height:792px;position:absolute;left:50%;margin-left:-720px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.footer-cta{
  position:relative;z-index:2;
  padding:160px 0 0;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  text-align:center;
}
.footer-cta h2{
  font-size:48px;font-weight:700;line-height:58px;
  background:radial-gradient(120% 160% at 50% 20%, #ffffff 24%, #CCCCFD 74%, rgba(204,204,253,.4) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.footer-cta p{font-size:18px;font-weight:500;line-height:22px;color:rgba(198,186,245,.7)}
.footer{
  position:relative;z-index:2;
  margin-top:100px;
  background:rgba(19,19,20,.72);
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  padding:24px 0;
}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
  opacity:.16;
}
.footer-grid{display:flex;gap:24px}
.footer-brand{width:291px;flex:0 0 auto}
.footer-brand img{width:51px;height:40px}
.footer-cols{display:flex;gap:24px;flex:1}
.footer-col{width:343px;display:flex;flex-direction:column;gap:12px}
.footer-col .col-title{font-size:14px;line-height:17px;color:var(--text-50)}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:16px;font-weight:500;line-height:19px;transition:color .2s}
.footer-links a:hover{color:var(--lilac)}
.footer-email{font-size:24px;font-weight:600;line-height:29px}
.socials{margin-top:12px;display:flex;gap:8px}
.social-btn{
  width:44px;height:44px;border-radius:12px;
  background:#19191A;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.social-btn:hover{background:#222}
.social-btn svg{width:18px;height:18px;color:#fff}
.social-btn svg path{fill:currentColor}
.footer-sep{
  height:1px;margin:24px 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 15%,rgba(255,255,255,.16) 85%,rgba(255,255,255,0));
}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--text-50)}
.footer-bottom .legal{display:flex;gap:40px}
.footer-bottom a:hover{color:#fff}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:32px;left:50%;transform:translate(-50%,20px);
  padding:12px 24px;border-radius:16px;
  background:#232325;border:1px solid rgba(255,255,255,.12);
  font-size:15px;font-weight:500;opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;z-index:100;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- home page specifics ---------- */
.promo{position:relative;z-index:5;margin-top:100px;text-align:center;display:flex;flex-direction:column;gap:12px}
.shop{
  position:relative;z-index:5;
  margin-top:40px;
  border-radius:24px;
  background:var(--surface);border:1px solid var(--stroke);
  padding:24px;height:310px;
  overflow:hidden;
  display:block;
}
.shop-art{position:absolute;top:0;right:0;height:100%;width:auto;max-width:72%;
  pointer-events:none;object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.shop-title{font-size:24px;font-weight:600;line-height:29px}
.shop-sub{margin-top:6px;font-size:16px;line-height:19px;color:var(--text-50)}
.shop .btn{margin-top:24px;position:relative;z-index:2}
.products{position:relative;z-index:5;margin-top:20px;display:flex;gap:20px}
.product{
  position:relative;flex:1;height:152px;
  border-radius:24px;overflow:hidden;
  background:var(--surface);border:1px solid var(--stroke);
  padding:24px;display:block;
  transition:border-color .2s;
}
.product:hover{border-color:rgba(255,255,255,.3)}
.product-art{position:absolute;top:0;right:0;width:197px;height:152px;pointer-events:none;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.product-name{font-size:24px;font-weight:600;line-height:29px;color:var(--text-50);position:relative}
.product-desc{margin-top:6px;font-size:16px;line-height:19px;color:var(--text-50);position:relative;white-space:pre-line}
.product-label{
  position:absolute;top:10px;right:10px;
  padding:8px 16px;border-radius:26px;
  background:rgba(17,17,18,.42);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:16px;font-weight:600;line-height:19px;
}
.today{position:relative;z-index:5;margin-top:100px;text-align:center}
.stats{margin:40px auto 0;width:640px;max-width:100%;display:flex;gap:12px}
.stat{
  text-align:left;
  flex:1;height:80px;border-radius:20px;
  background:var(--surface);border:1px solid var(--stroke);
  padding:16px;display:flex;flex-direction:column;justify-content:center;gap:7px;
}
.stat-name{font-size:16px;line-height:19px;color:var(--text-50);text-align:left}
.stat-value{display:flex;align-items:center;gap:6px}
.stat-value b{font-size:18px;font-weight:700;line-height:22px}
.stat-value img{width:22px;height:22px}

/* ---------- responsive ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   AUTH STATES
   ============================================================ */
html.auth-pending [data-auth],
html.auth-pending [data-guest]{visibility:hidden}
body.guest [data-auth]{display:none!important}
body.authed [data-guest]{display:none!important}

.btn-ghost{
  background:transparent;border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.btn-ghost:hover{background:rgba(255,255,255,.06);filter:none}
.btn-sm{padding:9px 18px;border-radius:14px}

/* guest hero card (замена баланс-карты) */
.join-card{
  position:relative;z-index:10;
  margin-top:58px;border-radius:24px;
  background:var(--bg);border:1px solid var(--stroke);
  padding:56px 24px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;overflow:hidden;
}
.join-card::before{
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(50% 50% at 50% 0%, rgba(134,38,255,.22), transparent 70%);
  pointer-events:none;
}
.join-card h1{
  position:relative;font-size:40px;font-weight:700;line-height:48px;
  background:radial-gradient(120% 160% at 50% 20%, #fff 30%, #CCCCFD 80%, rgba(204,204,253,.5) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.join-card p{position:relative;font-size:18px;line-height:24px;color:var(--text-50);max-width:520px}
.join-actions{position:relative;display:flex;gap:12px;margin-top:8px}

/* auth gate (earn / profile для гостя) */
.gate{
  position:relative;z-index:5;margin-top:40px;
  border-radius:40px;background:var(--bg);border:1px solid var(--stroke);
  padding:72px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.gate h2{font-size:28px;font-weight:700;line-height:34px}
.gate p{font-size:16px;line-height:22px;color:var(--text-50);max-width:420px}

/* ============================================================
   AUTH MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,10,12,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{
  width:420px;max-width:100%;
  background:#141415;border:1px solid var(--stroke);border-radius:24px;
  padding:32px;position:relative;
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.25,1.2), opacity .28s ease;
}
.modal.open .modal-card{transform:none;opacity:1}
.modal-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--text-50);
  transition:background .2s,color .2s;font-size:18px;line-height:1;
}
.modal-close:hover{background:rgba(255,255,255,.08);color:#fff}
.modal h3{font-size:24px;font-weight:600;line-height:29px}
.modal .m-sub{margin-top:6px;font-size:15px;line-height:20px;color:var(--text-50)}
.m-tabs{display:flex;gap:8px;margin:20px 0 4px;padding:3px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.m-tab{flex:1;padding:9px 0;border-radius:99px;font-size:15px;font-weight:600;color:var(--text-50);transition:.2s}
.m-tab.active{color:#fff;background:rgba(255,255,255,.08)}
.m-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.m-field label{display:block;font-size:13px;color:var(--text-50);margin:0 0 6px 2px}
.m-field input{
  width:100%;background:#171717;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:12px 16px;color:#fff;font:inherit;font-size:15px;outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.m-field input:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(134,38,255,.18)}
.m-field.err input{border-color:#ff5b6e;box-shadow:0 0 0 3px rgba(255,91,110,.12)}
.m-error{min-height:18px;font-size:13px;color:#ff8b98;margin-top:2px}
.m-form .btn{width:100%;margin-top:4px;justify-content:center}
.m-note{margin-top:14px;text-align:center;font-size:13px;color:var(--text-50)}

/* ============================================================
   WOW ANIMATIONS
   ============================================================ */
/* page fade-in */
body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.16,.84,.3,1)}
.reveal-stagger.in>*{opacity:1;transform:none}

/* карточки: подъём + свечение рамки, зум арта */
.pcard[data-buy]{cursor:pointer}
.pcard-img{isolation:isolate}
.pcard-img>img{transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.pcard[data-buy]:hover .pcard-img>img{transform:scale(1.045)}
.pcard[data-buy]:hover .pcard-img{box-shadow:0 0 0 1px rgba(173,107,255,.35), 0 18px 40px -18px rgba(134,38,255,.5)}
.product,.shop{transition:border-color .3s, box-shadow .3s}
.shop:hover,.product:hover{border-color:rgba(173,107,255,.35);box-shadow:0 24px 50px -24px rgba(134,38,255,.4)}

/* кнопки: пробег блика */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-90%;width:80%;
  background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.06) 30%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.06) 70%,transparent 100%);
  transform:skewX(-20deg);transition:left 1.1s ease;
}
.btn:hover::after,
.shop:hover .btn::after{left:120%}
.btn-white::after{background:linear-gradient(105deg,transparent 0,rgba(79,0,179,.04) 30%,rgba(79,0,179,.09) 50%,rgba(79,0,179,.04) 70%,transparent 100%)}

/* пульс достигнутого уровня */
.p-track .dot.done{animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 14px rgba(162,139,255,.9)}
  50%{box-shadow:0 0 26px rgba(162,139,255,1), 0 0 44px rgba(134,38,255,.5)}
}
.p-card.current{animation:cardGlow 3.4s ease-in-out infinite}
@keyframes cardGlow{
  0%,100%{box-shadow:0 0 0 rgba(173,107,255,0)}
  50%{box-shadow:0 0 34px -8px rgba(173,107,255,.35)}
}

/* левитация декоративных свечений */
.cta1{animation:float1 14s ease-in-out infinite}
.cta2{animation:float2 17s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,14px)}}

/* монета: лёгкое покачивание в балансе */
.balance-value img,.join-card .coin-l{animation:coinBob 3.2s ease-in-out infinite}
@keyframes coinBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(6deg)}}

/* тост */
.toast{transition:opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.3)}


@media (prefers-reduced-motion:reduce){
  body,.reveal,.reveal-stagger>*,.pcard,.btn::after,.cta1,.cta2,
  .p-track .dot.done,.p-card.current,.balance-value img{animation:none!important;transition:none!important}
  .reveal,.reveal-stagger>*{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE — единая система брейкпоинтов
   ============================================================ */
#refLink{word-break:break-all}
.task-txt{min-width:0}
.modal-card{max-height:92vh;overflow-y:auto}

/* --- ≤1180: контейнер флюидный, четвёрки в тройки --- */
@media (max-width:1180px){
  .container{width:100%;max-width:none;padding:0 32px}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .footer-col{width:auto;flex:1}
}

/* --- ≤980: тройки в двойки, продукты в колонку, футер стек --- */
@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .products{flex-direction:column}
  .product{height:152px}
  .footer-grid{flex-direction:column;gap:32px}
  .footer-brand{width:auto}
  .footer-cta h2{font-size:40px;line-height:48px}
  .join-card h1{font-size:34px;line-height:42px}
  .ref-stats{flex-wrap:wrap}
  .hist-toolbar{flex-wrap:wrap;gap:16px}
  .hist-tools{flex-wrap:wrap}
  .progress-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .progress-strip::-webkit-scrollbar{display:none}
}

/* --- ≤760: меню в шапке прячем, панели плотнее --- */
@media (max-width:760px){
  .nav{display:none}
  .container{padding:0 20px}
  .h-section{font-size:30px;line-height:38px}
  .h-page{font-size:28px;line-height:34px}
  .footer-cta h2{font-size:32px;line-height:40px}
  .footer-cta p{padding:0 16px}
  .panel{border-radius:28px;padding:20px}
  .gate{border-radius:28px;padding:56px 20px}
  .subcard{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .subcard .btn{align-self:stretch;justify-content:center}
  .ref-divider{display:none}
  .ref-stats{flex-direction:column;gap:20px}
  .task{padding:14px 16px;gap:12px}
  .task-main{font-size:16px;line-height:20px}
  .task-sub{font-size:14px;line-height:17px}
  .hist-card{border-radius:24px;padding:16px}
  .tool-box input{width:100%}
  .hist-tools .tool-box[style*="flex"]{flex:1 1 100%!important}
  .balance-row{flex-direction:column;align-items:flex-start;gap:16px}
  .balance-row .btn{align-self:stretch;justify-content:center}
}

/* Main Shop: вертикальная композиция на узких экранах — айфоны целиком */
@media (max-width:720px){
  .shop{height:auto;padding:24px 20px 0;display:flex;flex-direction:column;align-items:flex-start}
  .shop .btn{margin-top:20px}
  .shop-art{position:static;order:99;width:calc(100% + 40px);max-width:none;height:auto;
    margin:20px -20px 0;object-fit:contain;object-position:center bottom;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);
    mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
}

/* --- ≤560: всё в одну колонку --- */
@media (max-width:560px){
  .container{padding:0 16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid{gap:28px}
  .stats{flex-direction:column;width:100%}
  .stat{height:auto;min-height:80px}
  .join-card{padding:40px 16px}
  .join-card h1{font-size:28px;line-height:34px}
  .join-card p{font-size:16px;line-height:22px}
  .join-actions{flex-direction:column;width:100%}
  .join-actions .btn{width:100%;justify-content:center}
  .header-right{gap:14px}
  .user-pill span{display:none}
  .user-pill{gap:6px}
  .btn-sm{padding:8px 14px}
  .ev-head{flex-direction:column;gap:8px}
  .ev-head .time-chip{align-self:flex-start}
  .modal-card{padding:24px 20px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-bottom .legal{gap:20px}
  .hist-row{gap:14px}
  .hist-amt{font-size:13px}
  .profile-user{flex-wrap:wrap}
  .footer-email{font-size:20px}
}

/* --- ≤380: микроэкраны --- */
@media (max-width:380px){
  .points b{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  body,.reveal,.reveal-stagger>*,.btn::after,.cta1,.cta2,
  .p-track .dot.done,.p-card.current,.balance-value img{animation:none!important;transition:none!important}
  .reveal,.reveal-stagger>*{opacity:1;transform:none}
}

/* ============================================================
   PRODUCT MODAL (Figma: Event Modal / Collectible Card)
   ============================================================ */
.pmodal-card{
  width:420px;max-width:100%;padding:0 0 20px;
  background:var(--bg);border:1px solid var(--stroke);border-radius:24px;
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;gap:24px;
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.25,1.2), opacity .28s ease;
  max-height:92vh;overflow-y:auto;
}
.modal.open .pmodal-card{transform:none;opacity:1}
.pmodal-img{width:100%;height:236px;flex:0 0 auto}
.pmodal-img img{width:100%;height:100%;object-fit:cover}
.pmodal-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:12px;
  background:#19191A;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:2;
}
.pmodal-close:hover{background:#242426}
.pmodal-close img{width:20px;height:20px}
.pmodal-info{padding:0 16px;display:flex;flex-direction:column;gap:4px}
.pmodal-title{font-size:18px;font-weight:700;line-height:22px}
.pmodal-desc{font-size:14px;line-height:17px;color:var(--text-50)}
.pmodal-owned{
  display:flex;align-items:center;gap:10px;padding-bottom:10px;
  font-size:14px;line-height:17px;color:var(--lilac);
}
.pmodal-owned .own-ic{
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--lilac);
  display:flex;align-items:center;justify-content:center;flex:0 0 20px;
}
.pmodal-owned .own-ic img{width:13px;height:13px}
.pmodal-meta{padding:0 16px;display:flex;flex-direction:column;gap:12px}
.pmodal-meta .count-line{font-size:16px}
.pmodal-meta .count-line img{width:20px;height:20px}
.pmodal-cta{padding:0 20px;display:flex;flex-direction:column;gap:10px}
.pmodal-status{font-size:14px;line-height:17px;color:var(--text-50);text-align:center;min-height:17px}
.pmodal-cta .btn{width:100%;justify-content:center}

/* history: рабочий фильтр типа операции */
.tool-dd{position:relative}
.dd-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:180px;z-index:50;
  background:#171717;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:6px;display:none;flex-direction:column;gap:2px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
}
.tool-dd.open .dd-menu{display:flex}
.dd-item{
  padding:9px 12px;border-radius:9px;text-align:left;
  font-size:15px;font-weight:500;color:var(--text-50);
  transition:background .15s,color .15s;
}
.dd-item:hover{background:rgba(255,255,255,.06);color:#fff}
.dd-item.active{color:#fff;background:rgba(255,255,255,.08)}
.tool-dd .caret-ic{transition:transform .2s}
.tool-dd.open .caret-ic{transform:rotate(180deg)}

/* кнопочный текст — всегда одна строка */
.btn,.cat-btn,.m-tab,.dd-item,.tool-box,.nav-btn,.user-pill{white-space:nowrap}
/* пилюли категорий: горизонтальный скролл на узких экранах вместо переноса */
.cat-pill{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-pill::-webkit-scrollbar{display:none}
.cat-pill .cat-btn{flex:0 0 auto}

/* empty state */
.empty-state{
  grid-column:1/-1;
  border-radius:20px;background:var(--surface);border:1px solid rgba(255,255,255,.08);
  padding:48px 24px;text-align:center;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.empty-state .es-title{font-size:18px;font-weight:600;line-height:22px}
.empty-state .es-hint{font-size:14px;line-height:18px;color:var(--text-50)}

/* Earn: пустое состояние списка заданий (Figma 105:2329) */
.tasks-empty{
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:70px 24px;text-align:center;
}
.tasks-empty img{width:44px;height:44px;margin-bottom:12px}
.tasks-empty .te-title{font-size:18px;font-weight:700;line-height:22px}
.tasks-empty .te-hint{margin-top:8px;font-size:16px;line-height:19px;color:var(--text-50);max-width:420px}

/* Задания: раскрывающееся описание с кнопкой выполнения */
.task{flex-wrap:wrap}
.task.expandable .task-caret{transition:transform .25s}
.task.open .task-caret{transform:rotate(180deg)}
.task-body{
  flex-basis:100%;max-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:max-height .3s ease,margin-top .3s ease;
}
.task.open .task-body{max-height:200px;margin-top:6px}
.task-desc{font-size:14px;line-height:19px;color:var(--text-50);max-width:560px}
.task-body .btn{flex:0 0 auto}
@media (max-width:560px){
  .task-body{flex-direction:column;align-items:stretch}
  .task-body .btn{justify-content:center}
}