/* ===========================================================
   PicaVerse — Mobile UI Template
   =========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --lav:#e9e7fb;
  --sheet:#f6f5ff;
  --ink:#1b1a4d;
  --ink-soft:#4a4880;
  --muted:#918fbe;
  --purple:#6f5ce8;
  --purple-d:#4536c4;
  --pink:#e8326f;
  --blue:#2f5cf2;
  --sky:#8fd3f4;
  --gold:#f7c53f;
  --panel-1:#5b57dc;
  --panel-2:#4038b6;
  --shadow:0 14px 30px -12px rgba(52,40,140,.35);
  --r-lg:30px;
  --r-md:22px;
  --r-sm:16px;

  /* token tema (dipakai ulang biar warna aplikasi bisa diganti dari halaman Akun) */
  --purple-l:#a99bff;
  --panel-1-a:rgba(124,114,250,.94);
  --panel-2-a:rgba(62,52,186,.96);
}
body.theme-blue{
  --purple:#2f6fe0;--purple-d:#1d4fb0;--purple-l:#7fb0ff;
  --panel-1:#3f7de8;--panel-2:#1d4fb0;
  --panel-1-a:rgba(63,125,232,.94);--panel-2-a:rgba(29,79,176,.96);
}
body.theme-green{
  --purple:#12b886;--purple-d:#0a8c63;--purple-l:#6fe3bd;
  --panel-1:#1bcf99;--panel-2:#0a8c63;
  --panel-1-a:rgba(27,207,153,.94);--panel-2-a:rgba(10,140,99,.96);
}
body.theme-orange{
  --purple:#f2994a;--purple-d:#c96a1e;--purple-l:#ffc98a;
  --panel-1:#f7a94f;--panel-2:#c96a1e;
  --panel-1-a:rgba(247,169,79,.94);--panel-2-a:rgba(201,106,30,.96);
}

html,body{height:100%}
body{
  font-family:Poppins,-apple-system,"Segoe UI",system-ui,sans-serif;
  background:var(--lav);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hero-art{position:relative;line-height:0}
.hero-art svg{width:100%;height:auto;display:block;overflow:visible}
.item-art svg,.chip-ic,.p-ic{display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3{line-height:1.18;letter-spacing:-.02em}

/* ---------- Frame ---------- */
.stage{min-height:100dvh;display:grid;place-items:center}
.device{
  position:relative;
  width:100%;max-width:440px;height:100dvh;
  background:var(--sheet);
  overflow:hidden;
}
@media (min-width:820px){
  .stage{padding:26px}
  .device{
    width:392px;height:min(830px,calc(100dvh - 52px));
    border-radius:46px;
    box-shadow:0 0 0 11px #fff, 0 0 0 12px rgba(120,110,225,.22),
               0 46px 90px -26px rgba(58,45,150,.5);
  }
}

/* ---------- Screens ---------- */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(26px) scale(.985);
  transition:opacity .4s ease, transform .45s cubic-bezier(.33,1,.5,1), visibility .45s;
}
.screen.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.screen.is-back{transform:translateX(-26px) scale(.985)}
.screen-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:26px}
.screen-body::-webkit-scrollbar,.thumbs::-webkit-scrollbar,.carousel::-webkit-scrollbar{display:none}
.screen-body,.thumbs,.carousel{scrollbar-width:none}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 10px;
  flex:none;position:relative;z-index:6;
}
.icon-btn{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  background:#fff;border-radius:50%;color:var(--ink);
  box-shadow:0 8px 18px -8px rgba(60,45,150,.5);
  transition:transform .18s ease;
}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:21px;height:21px}

.wallet{display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:5px;box-shadow:0 8px 18px -10px rgba(60,45,150,.5)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px 3px 4px;border-radius:999px;background:#f2f1ff;color:var(--ink)}
.chip-ic{width:16px;height:16px;flex:none}

/* ===========================================================
   1. INTRO
   =========================================================== */
.screen--intro{
  background:linear-gradient(165deg,#7d6ff0 0%,#6354e4 42%,#4a37c8 100%);
  overflow:hidden;
}
.blob{position:absolute;border-radius:50%;opacity:.4}
.blob--a{width:300px;height:300px;top:-110px;right:-90px;background:radial-gradient(circle at 30% 30%,#a99bff,transparent 68%)}
.blob--b{width:340px;height:340px;bottom:-140px;left:-120px;background:radial-gradient(circle at 60% 40%,#5b8bff,transparent 66%)}

.intro-hero{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:198px}
.intro-hero .hero-art{width:min(88%,350px);margin-left:-4%;animation:float 5.5s ease-in-out infinite}
.pera-live2d--cover{height:min(58vh,420px);width:auto;aspect-ratio:3/4;margin:0 auto}
.intro-card__in--center{text-align:center}
.cap{
  position:absolute;top:14%;left:50%;width:70px;height:42px;margin-left:36px;
  animation:capToss 5.5s ease-in-out infinite;
}
.cap::before{content:"";position:absolute;left:0;top:0;width:48px;height:42px;border-radius:44px 44px 8px 8px;background:linear-gradient(150deg,#63c2f2,#2f6fe0)}
.cap::after{content:"";position:absolute;right:0;bottom:2px;width:40px;height:14px;border-radius:0 999px 999px 0;background:#2f6fe0}

.intro-card{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 28px calc(env(safe-area-inset-bottom,0px) + 34px);
  border-radius:44px 44px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.35);
}
.intro-title{font-size:clamp(30px,8.6vw,38px);font-weight:800;color:#fff;letter-spacing:-.03em}
.intro-title--ghost{
  color:rgba(255,255,255,.22);
  -webkit-text-stroke:1.4px rgba(255,255,255,.72);
  margin-top:-2px;
}
.touch-btn{
  position:relative;margin-top:22px;
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);
  color:#fff;transition:transform .2s ease, background .2s ease;
}
.touch-btn:hover{background:rgba(255,255,255,.3)}
.touch-btn:active{transform:scale(.92)}
.touch-btn svg{width:30px;height:30px}
.touch-ring{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);animation:pulse 2.4s ease-out infinite}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes capToss{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-26px) rotate(10deg)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}

/* ===========================================================
   2. CHOOSE AVATAR
   =========================================================== */
.head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 20px 16px}
.page-title{font-size:clamp(21px,6vw,25px);font-weight:700;color:var(--ink)}

.carousel{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  padding:4px 20px 8px;
}
.carousel.is-dragging,.thumbs.is-dragging{
  scroll-snap-type:none;cursor:grabbing;scroll-behavior:auto;
}
.carousel.is-dragging .avatar-card,.thumbs.is-dragging .thumb{pointer-events:none}
.avatar-card{
  position:relative;flex:0 0 72%;scroll-snap-align:center;
  aspect-ratio:1/1.24;
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,#dfeaff,#f4f0ff);
  box-shadow:var(--shadow);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;transition:transform .3s ease;
}
.avatar-card .hero-art{width:104%;transform:translateY(2%)}
.avatar-card:active{transform:scale(.97)}
.price-pill{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  background:#fff;border-radius:999px;padding:7px 8px 7px 12px;
  font-size:13px;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 20px -10px rgba(50,40,130,.55);
}
.price-pill .p-ic{width:17px;height:17px}
.pill-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;margin-left:2px}
.pill-avatar svg{width:15px;height:15px}

.row-head{display:flex;align-items:center;justify-content:space-between;padding:26px 20px 14px}
.row-head h3{font-size:17px;font-weight:700}
.link-btn{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-soft)}
.link-btn svg{width:17px;height:17px}
.link-btn--light{color:rgba(255,255,255,.85)}

.thumbs{display:flex;gap:12px;overflow-x:auto;padding:2px 20px 6px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.thumb{flex:0 0 82px;display:flex;flex-direction:column;align-items:center;gap:7px}
.thumb-art{
  width:82px;height:96px;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,#e4ecff,#f6f1ff);
  box-shadow:0 10px 18px -12px rgba(50,40,130,.6);
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.thumb-art .hero-art{width:160%;transform:translateY(12%)}
.thumb:active .thumb-art,.thumb.is-active .thumb-art{transform:translateY(-4px);box-shadow:0 14px 22px -12px rgba(50,40,130,.75)}
.thumb-price{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink-soft)}
.thumb-price svg{width:13px;height:13px}

/* ===========================================================
   3. DRESS UP (dipakai jadi "Panel Utama" dashboard Pera)
   =========================================================== */
.page-slide{position:relative;z-index:2;flex:1;min-height:0;pointer-events:none}
.bn-page{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.33,1,.5,1),opacity .35s ease,visibility .4s;
}
.screen.is-active .bn-page.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.bn-page.is-leaving{transform:translateX(-100%)}

/* Home/Dashboard: bukan slide, tapi muncul dari titik tombol bulat bawah */
.bn-page[data-page="home"]{
  transform-origin:50% 100%;
  transform:scale(.2);
  transition:transform .45s var(--spring),opacity .35s ease,visibility .45s;
}
.screen.is-active .bn-page.is-active[data-page="home"]{transform:scale(1);pointer-events:none}
.screen.is-active .bn-page.is-active[data-page="home"] .tools,
.screen.is-active .bn-page.is-active[data-page="home"] .shop{pointer-events:auto}
.bn-page.is-leaving[data-page="home"]{transform:scale(.2)}

/* rail floating: kedip-bounce satu per satu saat halaman Home ditampilkan */
@keyframes railBounce{
  0%{transform:scale(0) translateY(10px);opacity:0}
  60%{transform:scale(1.18) translateY(-3px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.tools.is-bouncing .tool{animation:railBounce .5s var(--spring) both}
.tools.is-bouncing .tool:nth-child(1){animation-delay:.04s}
.tools.is-bouncing .tool:nth-child(2){animation-delay:.1s}
.tools.is-bouncing .tool:nth-child(3){animation-delay:.16s}
.tools.is-bouncing .tool:nth-child(4){animation-delay:.22s}
.tools.is-bouncing .tool:nth-child(5){animation-delay:.28s}
.tools.is-bouncing .tool:nth-child(6){animation-delay:.34s}
.bn-placeholder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--ink-soft);text-align:center;padding:0 30px;
}
.bn-placeholder svg{width:56px;height:56px;color:var(--purple);opacity:.8}
.bn-placeholder h3{font-size:19px;color:var(--ink);font-weight:700}
.bn-placeholder p{font-size:13px}
.dress-stage{position:relative;flex:1;min-height:0;pointer-events:none}
.halo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  width:min(76%,270px);aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(120,110,225,.22);
  background:radial-gradient(circle,rgba(160,190,255,.35),rgba(233,231,251,0) 70%);
}
.hero-art--sm{
  position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 58px);z-index:1;
  height:95%;width:auto;
  transform:translateX(-50%) translateY(12%);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 85%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 85%);
}
@keyframes floatCenter{0%,100%{transform:translateX(-50%) translateY(10%)}50%{transform:translateX(-50%) translateY(calc(10% - 7px))}}

.tools{
  position:absolute;left:14px;top:50%;transform:translateY(-54%);z-index:4;pointer-events:auto;
  display:flex;flex-direction:column;gap:4px;
  height:calc(38px*3 + 4px*2 + 16px);overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scroll-behavior:smooth;scroll-padding:8px 0;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:8px 6px;
  box-shadow:0 12px 26px -14px rgba(50,40,130,.6);
}
.tools::-webkit-scrollbar{display:none}
.tools{scrollbar-width:none}
.tool{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--ink-soft);
  transition:transform .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  scroll-snap-align:center;scroll-snap-stop:always}
.tool svg{width:21px;height:21px}
.tool.is-active{background:var(--purple);color:#fff;box-shadow:0 8px 14px -6px rgba(111,92,232,.8)}
.tool:active{transform:scale(.9)}
.tool.is-centered{animation:ratchet .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes ratchet{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}

.shop{
  flex:none;min-width:0;overflow:hidden;
  height:40dvh;display:flex;flex-direction:column;position:relative;z-index:3;
  margin:0 14px calc(env(safe-area-inset-bottom,0px) + 69px);
  background:linear-gradient(160deg,var(--panel-1),var(--panel-2));
  border-radius:34px;padding:14px 16px 18px;color:#fff;
  box-shadow:0 -6px 30px -14px rgba(50,40,130,.7);
}
.shop-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 2px 12px;margin-left:34%}
.shop-head h3{font-size:17px;font-weight:700}
.shop-body{flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden}
.shop-body::-webkit-scrollbar{display:none}
.shop-body{scrollbar-width:none}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:5px;min-width:0}
.shop-grid--4col{grid-template-columns:repeat(4,1fr);gap:8px}
.item{
  position:relative;min-width:0;border-radius:var(--r-sm);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  padding:8px 8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .2s ease, background .2s ease;
}
.item:active{transform:scale(.95)}
.item.is-worn{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.6)}
.item-art{width:100%;aspect-ratio:1/.92;display:grid;place-items:center}
.item-art svg{width:86%;height:86%}
.item-price{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff}
.item-price svg{width:13px;height:13px}

.item--featured{
  margin-top:-52px;
  background:#fff;border-color:#fff;
  box-shadow:0 18px 30px -14px rgba(30,20,90,.75);
  padding-top:12px;
}
.item--featured .item-price{color:var(--ink)}
.item--featured .item-art{aspect-ratio:1/1.3}
.item--featured.is-worn{background:#fff}

/* ---------- Toast ---------- */
.toast{
  position:absolute;left:50%;top:73px;transform:translate(-50%,-8px);
  background:#fff;color:var(--ink);font-size:11px;font-weight:600;
  padding:8px 14px;border-radius:999px;opacity:0;pointer-events:none;
  box-shadow:0 8px 18px -8px rgba(60,45,150,.5);
  transition:.3s ease;z-index:30;white-space:nowrap;
  max-width:88%;overflow:hidden;text-overflow:ellipsis;
}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

@media (max-height:700px){
  .intro-hero{padding-bottom:185px}
  .shop{border-radius:28px}
  .item--featured{margin-top:-42px}
  .hero-art--sm{width:min(74%,280px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ===========================================================
   DEPTH & GLASS — pola tombol: lapis kilau (::before),
   cincin tepi (::after), bevel bawah, angkat saat hover.
   =========================================================== */
:root{
  --gloss:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 46%);
  --gloss-soft:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 44%);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1. Panel kaca miring di layar cover ---------- */
.intro-card{
  left:-8%;right:-8%;bottom:-96px;
  padding:44px 12% 150px;
  border-radius:66px 30px 0 0;
  transform:skewY(-3.4deg);
  transform-origin:100% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.26) 40%,rgba(255,255,255,.30));
  backdrop-filter:blur(24px) saturate(1.45) brightness(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.45) brightness(1.18);
  border-top:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 -16px 46px rgba(26,14,86,.34),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -40px 60px -40px rgba(255,255,255,.22);
  overflow:hidden;
}
.intro-card__edge{
  position:absolute;left:0;right:0;top:0;height:130px;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 34%,transparent 62%);
}
.intro-card__in{transform:skewY(3.4deg);position:relative;z-index:1}

.touch-btn{
  display:grid;place-items:center;
  margin:30px auto 0;
  width:72px;height:72px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 12px 26px -10px rgba(20,10,70,.6),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -3px 8px -2px rgba(20,10,70,.35);
  transition:transform .2s var(--spring), background .2s ease, box-shadow .2s ease;
}
.touch-btn::before{
  content:'';position:absolute;inset:1px;border-radius:50%;
  background:var(--gloss);pointer-events:none;
}
.touch-btn svg{
  position:relative;z-index:1;width:32px;height:32px;display:block;
  filter:drop-shadow(0 2px 3px rgba(18,8,60,.45));
}
.touch-btn:hover{transform:translateY(-3px);box-shadow:0 18px 32px -10px rgba(20,10,70,.7),inset 0 1px 0 rgba(255,255,255,.7)}
.touch-btn:active{transform:translateY(0) scale(.95)}
.touch-ring{inset:-8px;border-color:rgba(255,255,255,.55)}

/* ---------- 2. Tombol ikon bulat ---------- */
.icon-btn{
  position:relative;
  background:linear-gradient(180deg,#ffffff,#eeecfd);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 10px 20px -10px rgba(52,38,140,.55),
    inset 0 1px 0 #fff,
    inset 0 -2px 4px -1px rgba(70,55,170,.18);
  transition:transform .2s var(--spring), box-shadow .2s ease, color .2s ease;
}
.icon-btn::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(120,105,225,.16);pointer-events:none;
}
.icon-btn svg{position:relative;z-index:1}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 14px 24px -10px rgba(52,38,140,.7),inset 0 1px 0 #fff;color:var(--purple)}
.icon-btn:active{transform:translateY(0) scale(.92)}

/* ---------- 3. Dompet ---------- */
.wallet{
  background:linear-gradient(180deg,#ffffff,#f0eeff);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 20px -10px rgba(52,38,140,.5), inset 0 1px 0 #fff;
}
.chip{
  background:linear-gradient(180deg,#f7f6ff,#eceafb);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(90,75,190,.08);
}

/* ---------- 4. Kartu avatar ---------- */
.avatar-card{
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 22px 40px -20px rgba(52,38,140,.6),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .25s var(--spring), box-shadow .25s ease;
}
.avatar-card::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(165deg,rgba(255,255,255,.55),rgba(255,255,255,0) 38%);
}
.avatar-card:hover{transform:translateY(-4px);box-shadow:0 28px 46px -20px rgba(52,38,140,.75)}
.avatar-card:active{transform:translateY(0) scale(.97)}

.price-pill{
  z-index:3;
  background:linear-gradient(180deg,#ffffff,#f1effe);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 12px 22px -10px rgba(45,32,130,.65), inset 0 1px 0 #fff;
}
.pill-avatar{
  background:linear-gradient(180deg,#8b7bf2,#5b49dd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px -4px rgba(91,73,221,.9);
}
.thumb-art{
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 20px -12px rgba(52,38,140,.7), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- 5. Rail alat (kaca) ---------- */
.tools{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 18px 34px -18px rgba(45,32,130,.7),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 6px -2px rgba(80,65,180,.18);
}
.tool{
  position:relative;
  border:1px solid transparent;
  transition:transform .2s var(--spring), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tool:hover{background:rgba(111,92,232,.12);color:var(--purple)}
.tool.is-active{
  background:linear-gradient(180deg,var(--purple-l),var(--purple-d));
  border-color:rgba(255,255,255,.55);
  box-shadow:
    0 0 0 1px rgba(111,92,232,.28),
    0 8px 18px -6px rgba(91,73,221,.85),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 4px -1px rgba(30,18,110,.4);
}
.tool svg{position:relative;z-index:1}

/* ---------- 6. Panel toko (kaca) ---------- */
.shop{
  position:relative;
  background:linear-gradient(165deg,var(--panel-1-a),var(--panel-2-a));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    0 26px 50px -24px rgba(24,14,90,.85),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(16,8,70,.28);
}
.shop::before{
  content:'';position:absolute;inset:1px;border-radius:33px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 38%);
}
.shop::after{
  content:'';position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
.shop-head,.shop-grid,.shop-body{position:relative;z-index:1}

/* ---------- 7. Kartu item (kaca) ---------- */
.item{
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.07));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    0 10px 20px -12px rgba(12,6,60,.8),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 6px -2px rgba(12,6,60,.35);
  transition:transform .2s var(--spring), background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.item::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--gloss-soft);
}
.item:hover{transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.12))}
.item:active{transform:translateY(0) scale(.95)}
.item-art,.item-price{position:relative;z-index:1}
.item-art svg{filter:drop-shadow(0 6px 10px rgba(10,5,50,.45))}

.item.is-worn{
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.16));
  border-color:rgba(255,255,255,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 14px 26px -12px rgba(10,5,60,.9),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.item.is-worn::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffffff,transparent);
}

.item--featured{
  background:linear-gradient(180deg,#ffffff,#f0edff);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 24px 38px -16px rgba(16,8,70,.85),
    inset 0 1px 0 #fff,
    inset 0 -3px 6px -2px rgba(80,65,180,.16);
}
.item--featured::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%)}
.item--featured .item-art svg{filter:drop-shadow(0 8px 12px rgba(60,45,150,.28))}
.item--featured.is-worn{
  background:linear-gradient(180deg,#ffffff,#eae5ff);
  box-shadow:0 0 0 2px rgba(111,92,232,.45), 0 24px 38px -16px rgba(16,8,70,.85), inset 0 1px 0 #fff;
}
.item--featured.is-worn::after{background:linear-gradient(90deg,transparent,var(--purple),transparent)}

/* ---------- 8. Tombol tautan ---------- */
.link-btn{
  width:30px;height:30px;border-radius:50%;
  transition:transform .2s var(--spring), background .2s ease;
}
.link-btn:hover{background:rgba(111,92,232,.12);transform:translateX(2px)}
.link-btn--light:hover{background:rgba(255,255,255,.18)}

/* ---------- 9. Halo panggung ---------- */
.halo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 30px 60px -40px rgba(52,38,140,.9);
}

/* ===========================================================
   TAMBAHAN BARU (belum ada di template asli): wadah avatar
   Live2D Pera + daftar KB Jelajah Kota. Token warna/bayangan
   dipakai ulang dari sistem di atas (var(--purple) dkk), tidak
   ada warna baru yang diperkenalkan.
   =========================================================== */
.pera-live2d{position:relative;height:100%;width:auto;aspect-ratio:3/4;margin:0 auto}
.pera-live2d canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;pointer-events:auto}
.pera-live2d .ava-loading{position:absolute;left:0;right:0;top:44%;text-align:center;color:var(--purple-d);font-weight:700;font-size:12px}
.pera-live2d .ava-fallback{position:absolute;inset:0;display:grid;place-items:end center;pointer-events:auto;cursor:pointer}
.pera-live2d .ava-fallback svg{width:min(62%,220px);filter:drop-shadow(0 10px 20px rgba(52,38,140,.35))}
.spinner{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.kb-panel{max-height:230px;overflow-y:auto}
.kb-panel::-webkit-scrollbar{display:none}
.kb-panel{scrollbar-width:none}
.kb-row{
  display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);
  padding:9px 10px;margin-bottom:8px;color:#fff;transition:transform .2s ease, background .2s ease;
}
.kb-row:active{transform:scale(.97)}
.kb-row:hover{background:rgba(255,255,255,.22)}
.kb-em{font-size:20px;flex:none}
.kb-txt b{display:block;font-size:13px}
.kb-txt small{font-size:11px;color:rgba(255,255,255,.78)}
.kb-detail{font-size:11px;color:rgba(255,255,255,.85);margin-top:5px;line-height:1.45;display:none}
.kb-row.is-open .kb-detail{display:block}
.empty-note{font-size:12.5px;color:rgba(255,255,255,.85);padding:6px 2px 2px}

/* RUMUS MUTLAK notch = posisi tombol Home: keduanya WAJIB pakai --bn-center yang
   sama (bukan dua angka "50%" kebetulan sama). Tombol Home dijamin jatuh persis
   di --bn-center HANYA selama grid-template-columns tetap simetris (N kolom 1fr
   di kiri = N kolom 1fr di kanan kolom "auto" tengah, spt repeat(2,1fr) auto
   repeat(2,1fr) sekarang: 2 kiri = 2 kanan). Kalau nanti nambah/kurang menu di
   salah satu sisi saja (jadi tak simetris lagi), --bn-center JUGA WAJIB diubah
   sesuai posisi kolom "auto" yang baru -- jangan ubah salah satu tanpa yang lain. */
.bottom-nav{
  --bn-center:50%;
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:grid;grid-template-columns:repeat(2,1fr) auto repeat(2,1fr);align-items:center;justify-items:center;
  padding:9px 6px calc(env(safe-area-inset-bottom,0px) + 9px);
}
.bottom-nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;border-radius:24px 24px 0 0;
  box-shadow:0 -8px 20px -12px rgba(60,45,150,.35);
  -webkit-mask-image:radial-gradient(circle at var(--bn-center) 21px,transparent 34px,#000 42px);
  mask-image:radial-gradient(circle at var(--bn-center) 21px,transparent 34px,#000 42px);
}
.bn-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-soft);font-size:9.5px;font-weight:700}
.bn-ic{position:relative;width:20px;height:20px;display:block;transition:color .2s ease}
.bn-ic svg{width:20px;height:20px}
.bn-lb{transition:color .2s ease}
.bn-item.is-active{color:var(--purple)}
/* garis kecil di atas ikon saat menu aktif */
.bn-item::before{
  content:'';position:absolute;top:-9px;left:50%;width:0;height:3px;border-radius:2px;
  background:var(--purple);transform:translateX(-50%);
  transition:width .25s ease;
}
.bn-item.is-active::before{width:16px}

/* tombol Home besar di tengah, mengambang di atas bar */
.bn-home{
  position:relative;top:-16px;height:36.6px;color:#fff!important;
}
.bn-home::before{display:none}
.bn-home .bn-ic{
  position:relative;overflow:hidden;
  width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(165deg,var(--purple-l) 0%,var(--purple) 42%,var(--purple-d) 100%);
  border:4px solid #fff;
  box-shadow:
    0 10px 20px -8px rgba(91,73,221,.85),
    inset 0 2px 3px rgba(255,255,255,.75),
    inset 0 -6px 10px -2px rgba(30,18,110,.55);
  transition:transform .2s var(--spring),box-shadow .2s ease;
}
.bn-home .bn-ic::before{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:var(--gloss);
  mix-blend-mode:soft-light;
}
.bn-home .bn-ic::after{
  content:'';position:absolute;top:8%;left:16%;width:34%;height:20%;border-radius:50%;
  background:rgba(255,255,255,.75);filter:blur(2px);pointer-events:none;
  transform:rotate(-25deg);
}
.bn-home .bn-ic svg{position:relative;z-index:1;width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(30,18,110,.5))}
.bn-home:active .bn-ic{transform:scale(.92)}
.bn-home.is-active .bn-ic{
  box-shadow:
    0 0 0 3px rgba(139,123,242,.35),
    0 10px 20px -8px rgba(91,73,221,.85),
    inset 0 2px 3px rgba(255,255,255,.75),
    inset 0 -6px 10px -2px rgba(30,18,110,.55);
}

.js-load{display:flex;align-items:center;font-size:12px;color:rgba(255,255,255,.85)}

/* mic aktif (mode dengar dummy): tombol jadi merah + berdenyut */
.bn-home.is-listening .bn-ic{
  background:linear-gradient(165deg,#ff8a8a 0%,#e8455a 42%,#b8202f 100%);
  box-shadow:
    0 0 0 6px rgba(232,69,90,.22),
    0 10px 20px -8px rgba(184,32,47,.85),
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -6px 10px -2px rgba(90,10,18,.55);
  animation:micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(232,69,90,.22),0 10px 20px -8px rgba(184,32,47,.85),inset 0 2px 3px rgba(255,255,255,.65),inset 0 -6px 10px -2px rgba(90,10,18,.55)}
  50%{box-shadow:0 0 0 12px rgba(232,69,90,.10),0 10px 20px -8px rgba(184,32,47,.85),inset 0 2px 3px rgba(255,255,255,.65),inset 0 -6px 10px -2px rgba(90,10,18,.55)}
}

/* panel obrolan dummy */
.chat-list{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.chat-bubble{
  align-self:flex-start;max-width:88%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  border-radius:16px 16px 16px 4px;padding:10px 14px;
  font-size:13px;line-height:1.5;color:#fff;
}
.chat-listen{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:rgba(255,255,255,.85);padding:2px 4px;
}
.chat-dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.5;animation:chatDot 1s ease-in-out infinite}
.chat-dot:nth-child(2){animation-delay:.15s}
.chat-dot:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* kartu pemilih warna aplikasi (halaman Akun) */
.theme-card{
  margin:0 24px;background:#fff;border-radius:20px;padding:16px 18px;
  box-shadow:var(--shadow);color:var(--ink);
}
.theme-card h4{font-size:14px;font-weight:700;margin-bottom:2px}
.theme-card p{font-size:11.5px;color:var(--ink-soft)}
.theme-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.theme-swatch{
  position:relative;width:30px;height:30px;border-radius:50%;margin:0 auto;
  background:var(--sw);border:3px solid #fff;
  box-shadow:0 4px 10px -4px rgba(20,10,60,.4);
  transition:transform .18s var(--spring);
}
.theme-swatch:active{transform:scale(.9)}
.theme-swatch.is-active::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--sw);
}

/* tema terang (putih/ice/silver/gold muda): ikon di atas aksen jadi gelap spy tetap kebaca */
body.theme-light .tool.is-active,
body.theme-light .bn-home,
body.theme-light .bn-item.is-active .bn-ic{color:var(--ink)!important}
body.theme-light .bn-home .bn-ic svg{filter:none}