.hero-deck {
  position: relative;
  overflow: hidden;
  contain: paint;
  transform: translateZ(0);
  width: 320px;
  height: 244px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  --w-card: 158px;
  --h-card: 208px;
  --w-deck: 320px;
  --rotate-card: 15deg;
  --insetX-card: 28px;
  --t-card: calc(var(--insetX-card) * 1.25);
}

.hero-deck .content {
  background-color: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  position: relative;
  width: calc(100% - calc(var(--pd) * 2));
  height: calc(100% - calc(var(--pd) * 2));
  border-radius: calc(var(--round) - var(--pd));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  --pd: 4px;
}
.hero-deck .content > span {

  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 190px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.22);
  pointer-events: none;
  user-select: none;
}
.hero-deck .deck-premium .content > span { font-size: 118px; letter-spacing: -6px; direction: ltr; }

.hero-deck .deck-stars .content > span {
  background: url(/assets/deck-star-mark.svg) center 54% / 236px no-repeat;
  opacity: 0.13;
  -webkit-text-stroke: 0;
}
.hero-deck .content > .deck-img {
  height: 92px;
  width: 92px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  opacity: 1;

}
.hero-deck .content > .deck-img--logo {
  width: 148px;
  height: 148px;
}
.hero-deck .content > .deck-img--star {
  width: 124px;
  height: 124px;
  margin: -10px 0 -8px;
}
.hero-deck .deck-label {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero-deck .deck-label .deck-brand {
  font-size: 1.12rem;
  letter-spacing: -0.5px;
  color: #fff;
}
.hero-deck .deck-label .deck-brand em {
  font-style: normal;
  color: var(--gold, #f6ad20);
}

.hero-deck .card {

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  animation: deck-rotating 9s cubic-bezier(0.75, 0, 0, 1.01) infinite 0s;
  border-radius: var(--round, 16px);
  background: var(--bg);
  width: var(--w-card);
  height: var(--h-card);
  left: calc((var(--w-deck) - var(--w-card)) / 2);
  top: 0;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  --dx: calc((var(--w-deck) - var(--w-card)) / 2 - var(--insetX-card));
  --p-c: translate3d(0, 0, 0) rotate(0deg);
  --p-l: translate3d(calc(var(--dx) * -1), var(--t-card), 0) rotate(calc(var(--rotate-card) * -1));
  --p-r: translate3d(var(--dx), var(--t-card), 0) rotate(calc(var(--rotate-card) * 1));
  --pd: 4px;
  --round: 18px;
}

.hero-deck .deck-logo { --sd: 0s; }
.hero-deck .deck-premium { --sd: -6s; }
.hero-deck .deck-stars { --sd: -3s; }
.hero-deck .card { animation-delay: var(--sd, 0s); }
@keyframes deck-rotating {
  0%, 99.99% {
    z-index: 2;
    transform: var(--p-c);
  }
  33.33% {
    z-index: 0;
    transform: var(--p-l);
  }
  66.66% {
    z-index: 0;
    transform: var(--p-r);
  }
}

.hero-deck .deck-logo {
  --bg: radial-gradient(circle, rgba(84, 220, 153, 1) 0%, rgba(18, 98, 79, 1) 45%, rgba(7, 43, 35, 1) 100%);
}
.hero-deck .deck-premium {
  --bg: radial-gradient(circle, rgba(241, 179, 255, 1) 0%, rgba(110, 63, 232, 1) 45%, rgba(38, 18, 88, 1) 100%);
}
.hero-deck .deck-stars {
  --bg: radial-gradient(circle at 50% 42%, #ffd35a 0%, #f59e0b 42%, #b45309 100%);
}

.hero-deck .lines {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.hero-deck .line {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-deck .line::before, .hero-deck .line::after {
  content: "";
  position: absolute;
  inset: auto;
  background: linear-gradient(
    to right,
    var(--gradient-a-line, transparent),
    var(--gradient-b-line, transparent),
    var(--gradient-c-line, transparent)
  );
  filter: var(--blur-line);
  width: var(--w-line);
  height: var(--h-line);
}
.hero-deck .line:nth-child(1)::before {
  --blur-line: blur(4px);
  --w-line: 100%;
  --h-line: 5px;
  --gradient-b-line: #f6ad20;
}
.hero-deck .line:nth-child(1)::after {
  --w-line: 100%;
  --h-line: 1px;
  --gradient-b-line: #43e59b;
}
.hero-deck .line:nth-child(2)::before {
  --blur-line: blur(4px);
  --w-line: 50%;
  --h-line: 5px;
  --gradient-b-line: #845ef7;
}
.hero-deck .line:nth-child(2)::after {
  --w-line: 50%;
  --h-line: 1px;
  --gradient-b-line: #2fb271;
}

.hero-visual {
  --deck-w: 320px;
  width: 100%;
  min-height: 244px;
  padding: 52px 0 20px;
}
:root .hero-visual .chip {
  --edge: calc(50% - var(--deck-w) / 2);
  --chip-a: #2fa77a; --chip-b: #12624f; --chip-c: #072b23;
  isolation: isolate;
  z-index: 5;
  box-sizing: border-box;
  height: 46px;
  gap: 9px;
  padding: 0 12px 0 10px;
  justify-content: center;
  border: 0;
  border-radius: 18px;
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, var(--chip-a) 0%, var(--chip-b) 55%, var(--chip-c) 100%);
  box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: none;
  will-change: auto;
}

:root .hero-visual .chip::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
}
:root .hero-visual .chip > .ico,
:root .hero-visual .chip > picture {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  fill: currentColor;
}
:root .hero-visual .chip > picture { padding: 2px; }
:root .hero-visual .chip > picture .tg-star { width: 22px; height: 22px; display: block; }

:root .hero-visual .chip-1 { --chip-a: #f7b733; --chip-b: #d97706; --chip-c: #a8470a; }
:root .hero-visual .chip-2 { --chip-a: #2fa77a; --chip-b: #12624f; --chip-c: #072b23; }
:root .hero-visual .chip-3 { --chip-a: #8b5cf6; --chip-b: #5b34c7; --chip-c: #26125a; }

:root .hero-visual .chip-1 { top: -6px; bottom: auto; left: var(--edge); right: var(--edge); }
:root .hero-visual .chip-2 { bottom: -20px; top: auto; left: auto; right: var(--edge); width: calc(var(--deck-w) / 2 - 5px); }
:root .hero-visual .chip-3 { bottom: -20px; top: auto; right: auto; left: var(--edge); width: calc(var(--deck-w) / 2 - 5px); }
@media (max-width: 420px) {
  :root .hero-visual .chip { font-size: 0.74rem; gap: 7px; padding: 0 8px; }
  :root .hero-visual .chip > .ico, :root .hero-visual .chip > picture { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-deck .card { animation: none; position: static; margin: 0 auto; }
  .hero-deck .deck-premium, .hero-deck .deck-stars { display: none; }
  .hero-deck .content > .deck-img { animation: none; opacity: 1; }
  :root .hero-visual .chip { animation: none; }
}
@media print {
  .hero-deck { display: none !important; }
}

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.site-header { flex: none; }

#main {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: none;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.pane.is-active { display: block; }

.pane-home.is-active { display: flex; flex-direction: column; }
.pane-home { padding-bottom: 0; }
.pane-home .hero { flex: 1 0 auto; padding: 14px 0 calc(96px + env(safe-area-inset-bottom, 0px)); }
.pane-home .hero-inner { gap: 6px; }
.pane-home .hero-copy h1 { font-size: clamp(21px, 5.6vw, 30px); line-height: 1.5; margin: 6px 0; }
.pane-home .hero-copy .lede { font-size: 12.5px; line-height: 1.9; margin: 4px 0; }
.pane-home .hero-copy .lede + .lede { display: none; }
.pane-home .hero-cta { margin-top: 10px; }
.pane-home .hero-visual { margin-top: -6px; }
.pane-home .hero-deck { transform: scale(.84); transform-origin: top center; margin-bottom: -34px; }
.pane-home .hero-trust { display: none; }

.pane-shop .slider__dots { margin-top: 4px; margin-bottom: 2px; }
.pane-shop #shop { padding-top: 8px; }
.pane-shop .section-head { margin-bottom: 10px; }
.pane-shop .section-head h2 { font-size: clamp(20px, 5.4vw, 26px); }
.pane-shop .section-head .sub { font-size: 12.5px; }

.track-card {
  background: var(--cream);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 20px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.track-ico-tile {
  width: 64px; height: 64px; border-radius: 22px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow: 0 12px 26px -10px rgba(217, 154, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.track-ico-tile .ico { width: 32px; height: 32px; color: #fff; }
.track-card p { margin: 0; color: var(--muted); font-size: 13px; }

.pane-support .section { padding-top: 14px; padding-bottom: 6px; }
.pane-support .section-head h2 { font-size: clamp(19px, 5.2vw, 24px); }
.contact-card {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-soft) 55%, var(--cream)), var(--cream));
  border: 1px solid color-mix(in srgb, var(--gold-deep) 35%, var(--green-line));
  border-radius: 24px;
  box-shadow: 0 20px 44px -22px rgba(217, 154, 0, 0.45), var(--shadow-sm);
  padding: 24px 20px 18px;
  margin: 14px 0 8px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
  overflow: hidden;
}
.contact-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-deep) 70%, transparent);
  pointer-events: none;
}
.contact-ico {
  width: 56px; height: 56px; border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green), #0a352b);
  box-shadow: 0 10px 22px -10px rgba(18, 98, 79, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.contact-ico .ico { width: 28px; height: 28px; color: #fff; }
.contact-card h3 { margin: 2px 0 0; font-size: 17px; font-weight: 800; }
.contact-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 2; }
.contact-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.contact-row .btn { flex: 1 1 200px; }
.guide-btn { width: 100%; }
.guide-btn .ico { width: 18px; height: 18px; }

.tabbar {
  position: fixed;
  z-index: 70;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 24px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 9px 7px;
  border-radius: 28px;
  background: color-mix(in srgb, #0a352b 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.tabbar-ink {
  position: absolute;
  top: 9px; bottom: 9px; left: 0; width: 0;
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(248, 184, 26, 0.32), rgba(248, 184, 26, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 16px -4px rgba(248, 184, 26, 0.5);
  opacity: 0;
  pointer-events: none;
}
.tabbar-ink.is-on { opacity: 1; }
.tabbar-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.tabbar-btn .ico { width: 24px; height: 24px; }
.tabbar-btn.is-active { color: #ffc93c; }
.tabbar-btn.is-active .ico { filter: drop-shadow(0 0 7px rgba(248, 184, 26, 0.6)); }
@media (prefers-reduced-motion: no-preference) {
  .tabbar-btn { transition: color .18s ease, transform .18s ease; }
  .tabbar-btn:active { transform: scale(.92); }
  .tabbar-ink { transition: transform .2s cubic-bezier(.65, 0, .35, 1), width .2s cubic-bezier(.65, 0, .35, 1), opacity .15s ease; }
  .pane.is-active { animation: pane-in .16s ease-out; }
}
@keyframes pane-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.overlay { z-index: 90; }
.drawer { z-index: 100; }
.toast { z-index: 120; }

@media (min-width: 1024px) {
  .pane-home .hero-inner { max-width: 1020px; }
  .pane-home .hero-copy h1 { font-size: 32px; }
  .pane-home .hero-deck { transform: none; margin-bottom: 0; }
  .pane-home .hero-visual { margin-top: 0; }
}
.ptile .ico { width: 22px; height: 22px; color: var(--gold-deep); }
@media (prefers-reduced-motion: no-preference) {
  .ptile { transition: transform .15s ease; }
  .ptile:active { transform: scale(.95); }
}

:root[data-theme="light"] .track-card .btn-ghost,
:root[data-theme="light"] .contact-card .btn-ghost {
  color: var(--ink);
  border-color: var(--green-line);
  background: rgba(255, 255, 255, 0.45);
}

.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--green-line);
  border-radius: 18px; padding: 13px 16px;
  font-weight: 700; box-shadow: var(--shadow);
}
.toast::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(248, 184, 26, 0.22);
}

.send-btn { overflow: hidden; }
.send-btn__icon, .send-btn__plane { display: flex; align-items: center; justify-content: center; }
.send-btn svg { display: block; width: 22px; height: 22px; transform-origin: center center; transition: transform .3s ease-in-out; }
.send-btn span:first-child { display: block; transition: transform .3s ease-in-out; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .send-btn:hover .send-btn__plane, .send-btn.takeoff .send-btn__plane { animation: fly-1 .6s ease-in-out infinite alternate; }
  .send-btn:hover svg, .send-btn.takeoff svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); }
  .send-btn:hover span:first-child, .send-btn.takeoff span:first-child { transform: translateX(1.6em); }
}
@media (prefers-reduced-motion: no-preference) {
  .send-btn.takeoff .send-btn__plane { animation: fly-1 .6s ease-in-out infinite alternate; }
  .send-btn.takeoff svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); }
  .send-btn.takeoff span:first-child { transform: translateX(1.6em); }
}
.send-btn:active .send-btn__plane { animation: fly-1 .6s ease-in-out infinite alternate; }
.send-btn:active svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); }
.send-btn:active span:first-child { transform: translateX(1.6em); }
.send-btn:active { transform: scale(.96); }
@keyframes fly-1 { from { transform: translateY(.1em); } to { transform: translateY(-.1em); } }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.site-header {
  background: linear-gradient(180deg, var(--cream), color-mix(in srgb, var(--cream) 94%, transparent));
  border-bottom: 1px solid var(--green-line);
}
.site-header::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, rgba(18, 98, 79, 0.6), rgba(248, 184, 26, 0.75) 50%, rgba(18, 98, 79, 0.6));
}
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  padding: 3px;
  background: linear-gradient(135deg, #14715a, #0a352b);
  box-shadow: 0 8px 18px -8px rgba(18, 98, 79, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand-text { font-weight: 800; letter-spacing: -0.01em; }

:root[data-theme="light"] .site-header .brand-text span,
:root[data-theme="dark"] .site-header .brand-text span {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cart-btn {
  box-shadow: 0 10px 22px -10px rgba(217, 154, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cart-count {
  background: #0a352b; color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.site-header {
  border-radius: 0 0 26px 26px;
  border-bottom-color: transparent;
  box-shadow: 0 8px 20px -14px rgba(7, 43, 35, 0.45);
  overflow: hidden;
}

.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(90deg, rgba(18, 98, 79, 0.6), rgba(248, 184, 26, 0.75) 50%, rgba(18, 98, 79, 0.6));
  pointer-events: none;
}

#main { margin-top: calc(-1 * (var(--header-h) + 1px)); }
.pane { padding-top: calc(var(--header-h) + 1px); }

.pane-home { padding-top: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; }
.pane-home .hero { padding-top: calc(14px + var(--header-h) + 1px); }
.pane-home .hero-cta a,
.pane-home .hero-cta { touch-action: manipulation; }

.pane-shop.is-active { display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; }
.pane-shop.is-active.is-detail { display: block; overflow-y: auto; overscroll-behavior: contain; }

.pane-shop:not(.is-detail) .panel { display: none !important; }
.pane-shop:not(.is-detail) .slider-section { flex: none; padding-block: 10px 4px; }
.pane-shop:not(.is-detail) .slide { min-height: clamp(114px, 18.5dvh, 164px); border-radius: 22px; }
.pane-shop:not(.is-detail) #shop { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
.pane-shop:not(.is-detail) #shop > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane-shop:not(.is-detail) .section-head { flex: none; }
.pane-shop:not(.is-detail) .shop-bar { flex: 1; min-height: 0; margin-bottom: 0; }

:root .pane-shop .shop-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 0;
}
:root .pane-shop .shop-bar .tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 11px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 2px 0;
  flex: 1;
  min-height: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
:root .pane-shop .shop-bar .tabs .tab-thumb { display: none; }

:root .pane-shop .shop-bar .tab:nth-of-type(1) { --tile: #d99a00; --tile-soft: #fff4d1; --tile-glow: rgba(248, 184, 26, 0.35); }
:root .pane-shop .shop-bar .tab:nth-of-type(2) { --tile: #7c3aed; --tile-soft: #f3e8ff; --tile-glow: rgba(124, 58, 237, 0.3); }
:root .pane-shop .shop-bar .tab:nth-of-type(3) { --tile: #0d9488; --tile-soft: #ccfbf1; --tile-glow: rgba(13, 148, 136, 0.28); }
:root .pane-shop .shop-bar .tab:nth-of-type(4) { --tile: #ea580c; --tile-soft: #ffedd5; --tile-glow: rgba(234, 88, 12, 0.28); }
:root .pane-shop .shop-bar .tab:nth-of-type(5) { --tile: #e11d48; --tile-soft: #ffe4e6; --tile-glow: rgba(225, 29, 72, 0.28); }
:root .pane-shop .shop-bar .tab:nth-of-type(6) { --tile: #0284c7; --tile-soft: #e0f2fe; --tile-glow: rgba(2, 132, 199, 0.28); }
:root .pane-shop .shop-bar .tab:nth-of-type(7) { --tile: #12624f; --tile-soft: #e5efeb; --tile-glow: rgba(18, 98, 79, 0.28); }

:root .pane-shop .shop-bar .tab {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  max-height: none;
  min-height: 112px;
  padding: 14px 15px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  text-align: start;
  white-space: normal;
  color: var(--ink);
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tile) 14%, transparent), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #fcfbf8 100%);
  border: 1px solid color-mix(in srgb, var(--tile) 24%, var(--green-line));
  box-shadow:
    0 12px 26px -16px rgba(16, 35, 29, 0.28),
    0 2px 6px rgba(16, 35, 29, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 color-mix(in srgb, var(--tile) 16%, transparent);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}

:root .pane-shop .shop-bar .tab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 5%, var(--tile) 50%, transparent 95%);
  opacity: 0.55;
  pointer-events: none;
}

:root[data-theme="dark"] .pane-shop .shop-bar .tab {
  color: #f4faf7;
  background:
    radial-gradient(125% 110% at 100% 0%, color-mix(in srgb, var(--tile) 24%, transparent), transparent 70%),
    linear-gradient(180deg, #12241e 0%, #0b1713 100%);
  border-color: color-mix(in srgb, var(--tile) 34%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 16px 32px -18px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 color-mix(in srgb, var(--tile) 28%, transparent);
}

:root .pane-shop .shop-bar .tab-pill {
  position: absolute;
  top: 13px;
  inset-inline-end: 13px;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.4;
  color: color-mix(in srgb, var(--tile) 85%, #10231d);
  background: color-mix(in srgb, var(--tile) 15%, #fff);
  border: 1px solid color-mix(in srgb, var(--tile) 32%, transparent);
  box-shadow: 0 3px 8px -2px var(--tile-glow);
  pointer-events: none;
}
:root .pane-shop .shop-bar .tab-pill--go {
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--tile) 75%, var(--muted));
  background: color-mix(in srgb, var(--tile) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--tile) 22%, transparent);
  box-shadow: none;
  transition: transform 0.2s var(--ease), background-color 0.2s ease, color 0.2s ease;
}
:root .pane-shop .shop-bar .tab-pill--go .ico {
  width: 13px;
  height: 13px;
  transform: scaleX(-1);
}
:root .pane-shop .shop-bar .tab:hover .tab-pill--go {
  transform: translateX(-2px);
  background: var(--tile);
  color: #fff;
  border-color: var(--tile);
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab-pill:not(.tab-pill--go) {
  color: #fff;
  background: color-mix(in srgb, var(--tile) 38%, #0b1713);
  border-color: color-mix(in srgb, var(--tile) 55%, rgba(255, 255, 255, 0.14));
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab-pill--go {
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab:hover .tab-pill--go {
  background: var(--tile);
  color: #fff;
}

:root .pane-shop .shop-bar .tab:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tile) 50%, var(--green-line));
  box-shadow:
    0 18px 34px -16px rgba(16, 35, 29, 0.34),
    0 4px 12px -4px var(--tile-glow),
    inset 0 1px 0 #fff;
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab:hover {
  border-color: color-mix(in srgb, var(--tile) 60%, rgba(255, 255, 255, 0.18));
  box-shadow:
    0 20px 38px -16px rgba(0, 0, 0, 0.85),
    0 4px 16px -4px var(--tile-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
:root .pane-shop .shop-bar .tab:active {
  transform: translateY(1px) scale(0.975);
}
:root .pane-shop .shop-bar .tabs > .tab:last-of-type:nth-of-type(odd) {
  grid-column: 1 / -1;
}

:root .pane-shop .shop-bar .tab > picture,
:root .pane-shop .shop-bar .tab > img.ico,
:root .pane-shop .shop-bar .tab > svg.ico {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tile) 22%, #fff), color-mix(in srgb, var(--tile) 8%, #fff));
  border: 1px solid color-mix(in srgb, var(--tile) 28%, rgba(255, 255, 255, 0.8));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 18px -8px var(--tile-glow);
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab > picture,
:root[data-theme="dark"] .pane-shop .shop-bar .tab > img.ico,
:root[data-theme="dark"] .pane-shop .shop-bar .tab > svg.ico {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tile) 32%, #132620), color-mix(in srgb, var(--tile) 14%, #0c1814));
  border-color: color-mix(in srgb, var(--tile) 42%, rgba(255, 255, 255, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 18px -6px rgba(0, 0, 0, 0.55);
}
:root .pane-shop .shop-bar .tab > picture > source { display: none; }
:root .pane-shop .shop-bar .tab > picture img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
:root .pane-shop .shop-bar .tab > img.ico {
  width: 48px;
  height: 48px;
  padding: 10px;
  object-fit: contain;
}
:root .pane-shop .shop-bar .tab > svg.ico {
  width: 48px;
  height: 48px;
  padding: 11px;
  object-fit: contain;
}

:root .pane-shop .shop-bar .tab-copy {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 2px;
  margin-top: auto;
}
:root .pane-shop .shop-bar .tab-title {
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab-title {
  color: #fff;
}
:root .pane-shop .shop-bar .tab-sub {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] .pane-shop .shop-bar .tab-sub {
  color: rgba(237, 245, 241, 0.62);
}

@media (max-width: 390px) {
  :root .pane-shop .shop-bar .tab {
    padding: 11px 12px;
    gap: 6px;
  }
  :root .pane-shop .shop-bar .tab > picture,
  :root .pane-shop .shop-bar .tab > img.ico,
  :root .pane-shop .shop-bar .tab > svg.ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  :root .pane-shop .shop-bar .tab > img.ico { padding: 8px; }
  :root .pane-shop .shop-bar .tab > svg.ico { padding: 9px; }
  :root .pane-shop .shop-bar .tab-title { font-size: 0.88rem; }
  :root .pane-shop .shop-bar .tab-sub { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: no-preference) {
  :root .pane-shop .shop-bar .tab > picture,
  :root .pane-shop .shop-bar .tab > img.ico,
  :root .pane-shop .shop-bar .tab > svg.ico { transition: transform .2s var(--ease); }
  :root .pane-shop .shop-bar .tab:hover > picture,
  :root .pane-shop .shop-bar .tab:hover > img.ico,
  :root .pane-shop .shop-bar .tab:hover > svg.ico,
  :root .pane-shop .shop-bar .tab:active > picture,
  :root .pane-shop .shop-bar .tab:active > img.ico,
  :root .pane-shop .shop-bar .tab:active > svg.ico { transform: scale(1.08) rotate(-5deg); }
}

.pane-shop:not(.is-detail) .section-head .sub,
.pane-shop:not(.is-detail) .shop-note,
.pane-shop:not(.is-detail) #tasks { display: none; }
.pane-shop:not(.is-detail) .section-head { margin-bottom: 10px; }
.pane-shop:not(.is-detail) .section-head .eyebrow { display: none; }
.pane-shop:not(.is-detail) .section-head h2 { font-size: clamp(17px, 4.8vw, 21px); line-height: 1.45; margin: 0; font-weight: 800; }
.pane-shop:not(.is-detail) #shop { padding-top: 10px; }

.pane-shop:not(.is-detail) .slide__body { padding: 14px 18px; gap: 4px; }
.pane-shop:not(.is-detail) .slide__title { font-size: 1.02rem; line-height: 1.4; }
.pane-shop:not(.is-detail) .slide__text { font-size: 0.8rem; line-height: 1.55; }
.pane-shop:not(.is-detail) .slide__cta {
  padding: 6px 15px;
  font-size: 0.8rem;
  margin-top: 2px;
  box-shadow: 0 6px 16px -4px rgba(248, 184, 26, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@media (max-height: 760px) {
  .pane-shop:not(.is-detail) .slide { min-height: 104px; }
  .pane-shop:not(.is-detail) .slider__dots { display: none; }
  :root .pane-shop .shop-bar .tabs { gap: 8px; }
  :root .pane-shop .shop-bar .tab { min-height: 64px; padding: 9px 12px; }
}

.shop-back { display: none; }
.pane-shop.is-detail .shop-back:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--green-line);
}
.pane-shop.is-detail .slider-section,
.pane-shop.is-detail .section-head,
.pane-shop.is-detail .shop-bar { display: none; }
.pane-shop.is-detail #shop { padding-top: 10px; }
.shop-back__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--green-line));
  background: linear-gradient(180deg, #ffffff, #f5f8f6);
  color: var(--green-deep);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px -6px rgba(18, 98, 79, 0.25), inset 0 1px 0 #fff;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.shop-back__btn .ico { width: 17px; height: 17px; flex: none; color: var(--green); }
.shop-back__btn:hover { border-color: var(--green); }
.shop-back__btn:active { transform: scale(.95); }
.shop-back__title { font-size: 0.98rem; font-weight: 800; color: var(--ink); min-width: 0; }
:root[data-theme="dark"] .shop-back__btn {
  background: linear-gradient(180deg, #162c24, #0f1f1a);
  border-color: rgba(79, 227, 178, 0.25);
  color: #edf5f1;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .shop-back__btn .ico { color: var(--mint, #4fe3b2); }
:root[data-theme="dark"] .shop-back__title { color: #fff; }
.pane-shop.is-detail:not(.is-tasks) #tasks { display: none; }
.pane-shop.is-tasks #shop { display: none; }
.pane-shop.is-tasks #tasks { padding-top: 6px; }
:root .pane-shop.is-detail .panel { margin-top: 0; padding-top: 0; }

:root .pane-shop .product {
  border-radius: 22px;
  box-shadow: 0 12px 28px -18px rgba(16, 35, 29, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
:root[data-theme="dark"] .pane-shop .product:not(.product--big) {
  background: linear-gradient(180deg, #11231d 0%, #0b1713 100%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

:root .pane-shop .product .add-btn {
  position: relative;
  overflow: hidden;
  height: 46px;
  margin-top: 12px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(180deg, #198268 0%, #115e4b 100%);
  border: 1px solid rgba(11, 59, 48, 0.35);
  box-shadow:
    0 8px 18px -8px rgba(18, 98, 79, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.18s var(--ease), box-shadow 0.18s ease, filter 0.18s ease;
}
:root[data-theme="dark"] .pane-shop .product .add-btn {
  color: #fff;
  background: linear-gradient(180deg, #219d7d 0%, #147159 100%);
  border-color: rgba(79, 227, 178, 0.32);
  box-shadow:
    0 10px 22px -10px rgba(31, 160, 125, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
:root .pane-shop .product .add-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 12px 22px -8px rgba(18, 98, 79, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
:root .pane-shop .product .add-btn:active {
  transform: translateY(1px) scale(0.97);
}

:root .pane-shop .product.is-popular .add-btn,
:root .pane-shop .product--big .add-btn,
:root[data-theme="dark"] .pane-shop .product.is-popular .add-btn,
:root[data-theme="dark"] .pane-shop .product--big .add-btn {
  color: #18271f;
  background: linear-gradient(180deg, #ffe07d 0%, #f8b81a 55%, #df9b00 100%);
  border: 1px solid rgba(180, 120, 0, 0.45);
  box-shadow:
    0 10px 22px -8px rgba(248, 184, 26, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(140, 90, 0, 0.25);
}
:root .pane-shop .product.is-popular .add-btn:hover,
:root .pane-shop .product--big .add-btn:hover {
  color: #10231d;
  filter: brightness(1.04);
  box-shadow:
    0 14px 26px -8px rgba(248, 184, 26, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(140, 90, 0, 0.25);
}

:root .pane-shop .star-calc {
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--gold-deep) 38%, var(--green-line));
  padding: 14px 16px;
  box-shadow: 0 12px 26px -18px rgba(217, 154, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
:root[data-theme="dark"] .pane-shop .star-calc {
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root .pane-shop #star-add:active {
  transform: scale(0.97);
}

:root .pane-shop .gift,
:root .pane-shop .plan,
:root .pane-shop .choice,
:root .pane-shop .dur {
  border-radius: 18px;
  border: 1.5px solid var(--green-line);
  background: linear-gradient(180deg, #ffffff 0%, #f9f8f4 100%);
  box-shadow: 0 6px 16px -10px rgba(16, 35, 29, 0.16), inset 0 1px 0 #fff;
  transition: transform 0.16s var(--ease), border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
:root[data-theme="dark"] .pane-shop .gift,
:root[data-theme="dark"] .pane-shop .plan,
:root[data-theme="dark"] .pane-shop .choice,
:root[data-theme="dark"] .pane-shop .dur {
  background: linear-gradient(180deg, #13251f 0%, #0d1a16 100%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root .pane-shop .gift:active,
:root .pane-shop .plan:active,
:root .pane-shop .choice:active,
:root .pane-shop .dur:active {
  transform: scale(0.975);
}
:root .pane-shop .gift.is-selected,
:root .pane-shop .plan.is-selected,
:root .pane-shop .choice.is-selected,
:root .pane-shop .dur.is-selected {
  border-color: var(--gold-deep);
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(248, 184, 26, 0.18), transparent 70%),
    linear-gradient(180deg, #fffdf6 0%, #fff6da 100%);
  box-shadow: 0 10px 22px -12px rgba(217, 154, 0, 0.5), inset 0 0 0 1px rgba(248, 184, 26, 0.35);
}
:root[data-theme="dark"] .pane-shop .gift.is-selected,
:root[data-theme="dark"] .pane-shop .plan.is-selected,
:root[data-theme="dark"] .pane-shop .choice.is-selected,
:root[data-theme="dark"] .pane-shop .dur.is-selected {
  border-color: var(--gold);
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(248, 184, 26, 0.22), transparent 70%),
    linear-gradient(180deg, #1a2d23 0%, #111f19 100%);
  box-shadow: 0 12px 26px -12px rgba(248, 184, 26, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

:root .pane-shop .cfg-foot .btn-primary {
  min-height: 47px;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 800;
  background: linear-gradient(180deg, #1a8a6e 0%, #115e4b 100%);
  border: 1px solid rgba(11, 59, 48, 0.35);
  box-shadow:
    0 10px 22px -8px rgba(18, 98, 79, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .pane-shop .shop-bar .tabs { animation: tiles-in .3s ease both; }
}
@keyframes tiles-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

#promo-banner { align-self: center; margin: 2px auto 12px; padding: 6px 12px; font-size: 0.75rem; border-radius: 14px; box-shadow: none; }

.p-section {
  padding-top: 16px;
  padding-bottom: 18px;
}
.p-section > .wrap {
  display: grid;
  gap: 14px;
}

.p-section > .wrap > * {
  min-width: 0;
}
.p-avatar-status .ico {
  width: 12px;
  height: 12px;
}
.p-tier-badge .ico {
  width: 13px;
  height: 13px;
}
.p-wallet__eyebrow .ico {
  width: 15px;
  height: 15px;
}
.p-wallet__btn .ico {
  width: 15px;
  height: 15px;
}
@media (min-width: 680px) {
  .p-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.p-stat-card__ico .ico {
  width: 20px;
  height: 20px;
}
.p-dest-ico .ico {
  width: 19px;
  height: 19px;
}
.p-icon-action .ico {
  width: 17px;
  height: 17px;
}
.p-referral__ico .ico {
  width: 22px;
  height: 22px;
}
.p-referral__copy .ico {
  width: 15px;
  height: 15px;
}
.p-pref-ico .ico {
  width: 18px;
  height: 18px;
}
.p-seg__btn.is-on {
  background: var(--white);
  color: var(--green);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] .p-seg__btn.is-on {
  background: var(--green);
  color: #fff;
}
.p-toggle.is-on {
  background: var(--green);
  border-color: var(--green);
}
.p-toggle.is-on .p-toggle__thumb {
  transform: translateX(-20px);
}
@media (min-width: 520px) {
  .p-referral__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  .p-stats-grid { grid-template-columns: 1fr; }
  .p-stat-card { padding: 11px 13px; }
  .p-stat-card__body strong { font-size: 0.95rem; }
}

@media (max-width: 759px) {
  :root .pane-shop #products-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  :root .pane-shop #products-premium .product--premium.product--year {
    grid-column: 1 / -1;
  }

  :root .pane-shop #products-premium .product--premium {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 15px 12px 12px;
    border-radius: 20px;
    border: 1px solid var(--green-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    box-shadow:
      0 10px 24px -18px rgba(16, 35, 29, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  :root .pane-shop #products-premium .product--premium.product--year {
    display: flex;
    grid-template-columns: none;
    grid-template-areas: none;
    column-gap: 0;
    align-items: stretch;
  }
  :root[data-theme="dark"] .pane-shop #products-premium .product--premium {
    background: linear-gradient(180deg, #12241e 0%, #0b1713 100%);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow:
      0 14px 28px -18px rgba(0, 0, 0, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  :root .pane-shop #products-premium .product--premium .product-badge,
  :root .pane-shop #products-premium .product--premium.product--year .product-badge {
    position: static;
    align-self: center;
    margin: 0 0 8px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 4px 10px -4px rgba(248, 184, 26, 0.85);
  }

  :root .pane-shop #products-premium .product--premium .product-top,
  :root .pane-shop #products-premium .product--premium.product--year .product-top {
    grid-area: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    margin: 0 0 8px;
  }
  :root .pane-shop #products-premium .product--premium .product-chip { display: none; }
  :root .pane-shop #products-premium .product--premium .product-icon,
  :root .pane-shop #products-premium .product--premium.product--year .product-icon {
    grid-area: auto;
    width: 58px;
    height: 58px;
    margin: 0;
    border-radius: 18px;
  }
  :root .pane-shop #products-premium .product--premium .premium-art,
  :root .pane-shop #products-premium .product--premium.product--year .premium-art {
    width: 48px;
    height: 48px;
  }

  :root .pane-shop #products-premium .product--premium h3,
  :root .pane-shop #products-premium .product--premium.product--year h3 {
    grid-area: auto;
    align-self: center;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
  }
  :root .pane-shop #products-premium .product--premium h3::after { content: none; }
  :root .pane-shop #products-premium .product--premium .sub,
  :root .pane-shop #products-premium .product--premium.product--year .sub {
    grid-area: auto;
    align-self: center;
    margin: 2px 0 10px;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  :root .pane-shop #products-premium .product--premium .price-row,
  :root .pane-shop #products-premium .product--premium.product--year .price-row {
    grid-area: auto;
    margin: auto 0 0;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid var(--green-line);
    justify-content: center;
    align-self: stretch;
  }
  :root .pane-shop #products-premium .product--premium .price-block,
  :root .pane-shop #products-premium .product--premium.product--year .price-block {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
  }
  :root .pane-shop #products-premium .product--premium .price,
  :root .pane-shop #products-premium .product--premium.product--year .price {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
  }
  :root .pane-shop #products-premium .product--premium .price-cur {
    font-size: 0.66rem;
    margin-top: 0;
  }
  :root .pane-shop #products-premium .product--premium .price-note,
  :root .pane-shop #products-premium .product--premium.product--year .price-note {
    grid-area: auto;
    margin: 3px 0 0;
    font-size: 0.67rem;
    text-align: center;
    align-self: center;
  }

  :root .pane-shop #products-premium .product--premium .add-btn,
  :root .pane-shop #products-premium .product--premium.product--year .add-btn {
    grid-area: auto;
    align-self: stretch;
    margin-top: 10px;
    height: 42px;
    padding: 0 8px;
    gap: 5px;
    font-size: 0.8rem;
    border-radius: 13px;
  }
  :root .pane-shop #products-premium .product--premium .add-btn .ico {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 359px) {
  :root .pane-shop #products-premium { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .tabbar-ink {
    transition:
      transform 340ms cubic-bezier(0.3, 1.25, 0.4, 1),
      width 340ms cubic-bezier(0.3, 1.25, 0.4, 1),
      opacity 180ms ease;
    will-change: transform;
  }
  .tabbar-btn .ico {
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 260ms ease;
  }
  .tabbar-btn.is-active .ico { animation: tabpop 340ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .tabbar-btn.is-active { animation: tabpress 260ms ease-out; }
  .pane.is-active { animation: pane-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes tabpop {
  0%   { transform: scale(0.82); }
  55%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes tabpress {
  0%   { transform: scale(0.94); }
  100% { transform: scale(1); }
}
:root[data-motion="reduced"] .tabbar-btn,
:root[data-motion="reduced"] .tabbar-ink,
:root[data-motion="reduced"] .pane.is-active { animation: none; transition: none; }

:root .pane-shop .buy-split .btn,
:root .pane-shop .buy-split .btn-sm,
:root .pane-shop .cfg-foot .btn {
  min-height: 47px;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: normal;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), box-shadow 0.18s ease,
    background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
:root .pane-shop .buy-split .btn-gold {
  color: #18271f;
  background: linear-gradient(180deg, #ffe07d 0%, #f8b81a 55%, #df9b00 100%);
  border: 1px solid rgba(180, 120, 0, 0.4);
  box-shadow:
    0 8px 20px -8px rgba(248, 184, 26, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(140, 90, 0, 0.22);
}
:root .pane-shop .buy-split .btn-gold:hover {
  color: #18271f;
  background: linear-gradient(180deg, #ffe89b 0%, #ffc434 55%, #e7a300 100%);
}
:root .pane-shop .buy-split .btn-outline {
  color: var(--green-800);
  background: linear-gradient(180deg, #ffffff 0%, #f9f8f4 100%);
  border: 1.5px solid var(--green-line);
  box-shadow: 0 6px 16px -10px rgba(16, 35, 29, 0.18), inset 0 1px 0 #fff;
}
:root .pane-shop .buy-split .btn-outline:hover {
  color: var(--green-800);
  background: linear-gradient(180deg, #ffffff 0%, #f2f4ee 100%);
  border-color: color-mix(in srgb, var(--green) 45%, var(--green-line));
}
:root .pane-shop .buy-split .btn:active { transform: scale(0.975); }

:root[data-theme="dark"] .pane-shop .buy-split .btn-gold {
  color: #2b1f00;
  border-color: rgba(255, 214, 120, 0.35);
}
:root[data-theme="dark"] .pane-shop .buy-split .btn-outline {
  color: #dff3ea;
  background: linear-gradient(180deg, #16281f 0%, #101f19 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .pane-shop .buy-split .btn-outline:hover {
  color: #eaf5ef;
  background: linear-gradient(180deg, #1a2d24 0%, #13251e 100%);
  border-color: rgba(248, 184, 26, 0.4);
}

:root .pane-shop .cfg-foot {
  flex-wrap: nowrap;
  align-items: stretch;
}
:root .pane-shop .cfg-foot .cfg-price { align-self: center; }
:root .pane-shop .cfg-foot .buy-split {
  flex: 1 1 186px;
  width: auto;
  min-width: 0;
  gap: 8px;
  flex-direction: column;
}
:root .pane-shop .cfg-foot .buy-split .btn {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  font-size: 0.88rem;
  min-width: 0;
}
@media (max-width: 359px) {
  :root .pane-shop .cfg-foot { flex-wrap: wrap; }
  :root .pane-shop .cfg-foot .buy-split { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  :root .pane-shop .cfg-foot .buy-split { flex-direction: row; gap: 6px; }
  :root .pane-shop .cfg-foot .buy-split .btn { width: auto; flex: 1 1 0; }
}

.theme-switch {
  --toggle-size: 10px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3d7eae;
  --container-night-bg: #1d1f2c;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ecca2f;
  --moon-bg: #c4c9d1;
  --spot-color: #959db1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #f3fdff;
  --back-clouds-color: #aacadf;
  --transition: .22s ease-out;
  --circle-transition: .2s ease-out;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: none;
}

.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0em -0.062em 0.062em rgba(0, 0, 0, 0.25),
    0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow:
    0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset,
    0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}

.theme-switch__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 3px solid var(--gold, #f8b81a);
  outline-offset: 3px;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow:
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    0 0 0 0.625em rgba(255, 255, 255, 0.1),
    0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #a1872a inset,
    0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: var(--transition);
}

.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow:
    0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset,
    0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow:
    0.937em 0.312em var(--clouds-color),
    -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),
    0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),
    1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),
    2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),
    2.625em 0em var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),
    3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),
    4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.22s ease-out;
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: 50%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transform: translateY(-2.6em);
  transition: var(--transition);
}

.theme-switch__stars-container svg {
  display: block;
  width: 100%;
  height: auto;
}

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  transform: translateX(3.125em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  transform: translateX(2.938em);
}

.theme-switch__circle-container:hover {
  transform: translateX(0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  transform: translateY(3.437em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  transform: translateY(-50%);
}

html.theme-instant *:not(.theme-switch):not(.theme-switch *),
html.theme-instant *:not(.theme-switch)::before,
html.theme-instant *:not(.theme-switch)::after {
  transition: none !important;
}

.site-header .header-actions {
  align-items: center;
}
.site-header .theme-switch {
  --toggle-size: 10px;
}
@media (max-width: 420px) {
  .site-header .theme-switch {
    --toggle-size: 9px;
  }
}

.site-header .theme-switch,
.site-header .theme-switch__container {
  border: 0;
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch,
  .theme-switch *,
  .theme-switch *::before,
  .theme-switch *::after {
    transition-duration: 0.01ms !important;
  }
}

:root {
  --theme-reveal-x: 50vw;
  --theme-reveal-y: 50vh;
}

@keyframes theme-radial-reveal {
  from { clip-path: circle(0 at var(--theme-reveal-x) var(--theme-reveal-y)); }
  to { clip-path: circle(150vmax at var(--theme-reveal-x) var(--theme-reveal-y)); }
}

@keyframes theme-old-fade {
  from { opacity: 1; }
  to { opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms !important; }
}

.sz-u {
  position: relative;
}

.sz-u > label:not(.sz-u__label),
.sz-u-host > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sz-u.cfg-input,
.sz-u.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--green-line);
  border-radius: 14px;
  background: #fff;
  padding: 0 14px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sz-u.cfg-input:focus-within,
.sz-u.input-wrap:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(18, 98, 79, 0.12);
}

.sz-u.cfg-input input,
.sz-u.input-wrap input {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  padding: 15px 0;
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.sz-u.cfg-input input:focus,
.sz-u.input-wrap input:focus {
  outline: none;
  border: 0;
}

.sz-u.field {
  position: relative;
}

.sz-u.field > input {
  width: 100%;
  border: 1.5px solid var(--green-line);
  border-radius: 14px;
  background: #fff;
  padding: 15px 14px;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sz-u.field > input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(18, 98, 79, 0.12);
}

.sz-u.field > input[aria-invalid="true"],
.sz-u > input[aria-invalid="true"] {
  border-color: #c0492f;
  box-shadow: 0 0 0 3px rgba(192, 73, 47, 0.12) !important;
}

.sz-u__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  display: block;
  padding: 0 6px;
  pointer-events: none;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
  background: #fff;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 28px);
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.sz-u.is-float .sz-u__label {
  top: 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--green);
  overflow: visible;
}

.sz-u__label.is-left {
  left: 8px;
  right: auto;
}

.sz-u__label.is-left.has-prefix {
  left: 28px;
}

.sz-u__label span {
  display: inline-block;
}

.sz-u.cfg-input .unit,
.sz-u.input-wrap > span[aria-hidden]:not(.sz-u__label) {
  flex: none;
  font-size: 0.85rem;
  color: var(--muted);
  align-self: center;
}

:root[data-theme="dark"] .sz-u.cfg-input,
:root[data-theme="dark"] .sz-u.input-wrap,
:root[data-theme="dark"] .sz-u.field > input {
  background: #0c1915;
  border-color: rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .sz-u.cfg-input:focus-within,
:root[data-theme="dark"] .sz-u.input-wrap:focus-within,
:root[data-theme="dark"] .sz-u.field > input:focus {
  border-color: var(--mint, #4fe3b2);
  box-shadow: 0 0 0 3px rgba(79, 227, 178, 0.14);
}

:root[data-theme="dark"] .sz-u__label {
  background: #0c1915;
}

:root[data-theme="dark"] .sz-u.is-float .sz-u__label {
  color: var(--mint, #4fe3b2);
}

@media (prefers-reduced-motion: reduce) {
  .sz-u__label,
  .sz-u.cfg-input,
  .sz-u.input-wrap,
  .sz-u.field > input {
    transition-duration: 0.01ms !important;
  }
}

.task-orb {
  display: none;
  position: fixed;
  z-index: 66;
  left: 16px;
  bottom: calc(114px + env(safe-area-inset-bottom, 0px));
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(176, 118, 0, 0.5);
  background:
    radial-gradient(120% 120% at 32% 22%, #ffe9a3 0%, #ffd24d 34%, var(--gold, #f8b81a) 62%, #e0a000 100%);
  color: #14291f;
  font: inherit;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 14px 28px -10px rgba(216, 152, 0, 0.85),
    0 2px 6px rgba(120, 80, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 0 rgba(150, 96, 0, 0.28);
}
.task-orb__q { transform: translateY(-1px); }

#pane-shop.is-active ~ .task-orb:not([hidden]) { display: grid; }

.task-orb.is-drop {
  animation: orb-drop 3.2s cubic-bezier(0.42, 0.02, 0.35, 1) both;
}
@keyframes orb-drop {
  0%   { transform: translateY(calc(-1 * (100vh + 80px))) scale(0.9); opacity: 0; }
  10%  { opacity: 1; }
  84%  { transform: translateY(6px) scale(1); opacity: 1; }
  91%  { transform: translateY(-3px) scale(1); }
  96%  { transform: translateY(1px) scale(1); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.task-orb::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(248, 184, 26, 0.6);
  opacity: 0;
  pointer-events: none;
}
.task-orb.is-drop::after { animation: orb-ring 2.4s ease-out 3.1s infinite; }
@keyframes orb-ring {
  0%   { transform: scale(0.84); opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: scale(1.24); opacity: 0; }
}
.task-orb:active { transform: scale(0.93); }
.task-orb:focus-visible { outline: 3px solid #14291f; outline-offset: 3px; }

html:has(body.no-scroll) { overflow: hidden; }

.task-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.task-pop[hidden] { display: none; }

.task-pop__veil {
  position: absolute;
  inset: 0;
  background: rgba(7, 43, 35, 0.52);
  backdrop-filter: blur(1.5px);
}
.task-pop:not([hidden]) .task-pop__veil { animation: veil-in 0.24s ease-out; }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }

.task-pop__sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fffdf6 0%, #fbfaf5 46%, #ffffff 100%);
  border: 1px solid var(--green-line, #e3e9e5);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -22px 60px -24px rgba(7, 43, 35, 0.55);
  text-align: center;
}
.task-pop:not([hidden]) .task-pop__sheet {
  animation: sheet-spring 0.46s cubic-bezier(0.16, 1.18, 0.32, 1) both;
  transform-origin: 50% 100%;
}
@keyframes sheet-spring {
  0%   { transform: translateY(72px) scale(0.96); opacity: 0; }
  45%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.task-pop__grab {
  width: 46px;
  height: 5px;
  border-radius: 99px;
  background: rgba(16, 35, 29, 0.22);
  margin: 2px auto 4px;
}
.task-pop__close-x {
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 35, 29, 0.28);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink, #10231d);
  box-shadow: 0 3px 10px rgba(16, 35, 29, 0.16);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.task-pop__close-x:hover { background: rgba(16, 35, 29, 0.12); }

.task-pop:not([hidden]) .task-stage { animation: stage-in 0.5s cubic-bezier(0.18, 1.1, 0.32, 1) 0.12s both; }
@keyframes stage-in {
  0%   { opacity: 0; transform: scale(0.9) translateY(10px); }
  100% { opacity: 1; transform: none; }
}
.task-pop:not([hidden]) .task-pop__sheet h3 { animation: content-up 0.4s ease-out 0.26s both; }
.task-pop:not([hidden]) .task-pop__lede { animation: content-up 0.4s ease-out 0.32s both; }
.task-pop:not([hidden]) .task-pop__spent:not([hidden]),
.task-pop:not([hidden]) .task-pop__list { animation: content-up 0.4s ease-out 0.38s both; }
.task-pop:not([hidden]) .task-pop__close { animation: content-up 0.4s ease-out 0.44s both; }
@keyframes content-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.task-stage {
  --rise: -78px;
  position: relative;
  margin: 8px 0 2px;
  border-radius: 22px;
  background:
    radial-gradient(125% 95% at 50% 0%, #f4fcff 0%, #ddeffb 46%, #cbe4f6 100%);
  border: 1px solid rgba(24, 78, 110, 0.12);
  overflow: hidden;
  padding: 12px 0 16px;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
}
.task-stage::after {

  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: min(320px, 86%);
  height: 3px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--ink, #10231d) 14%, transparent);
  border-radius: 3px;
}
.task-stage__ground {
  display: flex;
  align-items: flex-end;
  gap: 0;
  position: relative;
  z-index: 2;
}
.task-brick {
  width: 44px;
  height: 44px;
  display: block;
  image-rendering: pixelated;
}
.task-block {
  position: relative;
  width: 88px;
  height: 88px;
  padding: 0;
  margin: 0 -1px;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.task-block__face {
  width: 88px;
  height: 88px;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(60, 30, 0, 0.18));
}
.task-block.is-bumped .task-block__face { animation: block-bump 0.34s ease-out; }
.task-spark {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 7px;
  height: 7px;
  background: #ffd24d;
  box-shadow: 0 0 0 1px rgba(120, 70, 0, 0.25);
  pointer-events: none;
  z-index: 4;
  animation: spark-fly 0.62s cubic-bezier(0.15, 0.7, 0.35, 1) forwards;
}
.task-spark.is-alt { background: #fff6c9; }
@keyframes spark-fly {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(0.9) rotate(var(--rot)); }
}
@keyframes block-bump {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}
.task-block__mush {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 62px;
  height: 62px;
  display: block;
  image-rendering: pixelated;
  transform: translate(-50%, 6px) scale(0.55);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(60, 30, 0, 0.2));
}
.task-stage.go .task-block__mush {
  opacity: 1;
  animation: mush-pop 0.62s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}
@keyframes mush-pop {
  0%   { transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  65%  { transform: translate(-50%, calc(var(--rise) - 6px)) scale(1.06); opacity: 1; }
  82%  { transform: translate(-50%, calc(var(--rise) + 4px)) scale(1); }
  100% { transform: translate(-50%, var(--rise)) scale(1); opacity: 1; }
}

.task-stage.go.settled .task-block__mush {
  animation: mush-bob 2.6s ease-in-out 0.1s infinite;
}
@keyframes mush-bob {
  0%, 100% { transform: translate(-50%, var(--rise)) scale(1); }
  50%      { transform: translate(-50%, calc(var(--rise) - 6px)) scale(1); }
}

.task-tip {
  position: relative;
  margin: 0 auto calc(2px - var(--rise));
  width: max-content;
  max-width: 92%;
  padding: 10px 16px;
  border: 2.5px solid #1b2a23;
  background: #fffdf1;
  color: #1b2a23;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.85;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: 4px 4px 0 rgba(27, 42, 35, 0.18);
  flex: none;
}
.task-tip::before,
.task-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-style: solid;
  border-color: transparent;
}
.task-tip::before {
  bottom: -13px;
  border-width: 13px 10px 0 10px;
  border-top-color: #1b2a23;
}
.task-tip::after {
  bottom: -9.5px;
  border-width: 10px 7.5px 0 7.5px;
  border-top-color: #fffdf1;
}
.task-stage.show-tip .task-tip {
  animation: tip-in 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
@keyframes tip-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.task-pop__sheet h3 {
  margin: 2px 0 0;
  font-size: 1.12rem;
  font-weight: 850;
  color: var(--ink, #10231d);
  letter-spacing: -0.01em;
}
.task-pop__lede {
  margin: 6px auto 0;
  max-width: 42ch;
  font-size: 0.82rem;
  line-height: 1.95;
  color: var(--muted, #5b6b65);
}

.task-pop__spent {
  text-align: center;
  color: var(--muted, #5b6b65);
  font-size: 0.82rem;
  margin: 14px 0 4px;
}

.task-pop__list {
  display: grid;
  gap: 10px;
  text-align: start;
  margin-top: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.task-pop__empty {
  margin: 0;
  padding: 18px 4px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted, #5b6b65);
}
.task-pop__close {
  margin-top: 14px;
  width: 100%;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--ink, #10231d) 18%, transparent);
  color: var(--ink, #10231d);
}
:root[data-theme="dark"] .task-pop__close {
  background: #16291f;
  border-color: rgba(255, 255, 255, 0.22);
  color: #eef6f1;
}

:root[data-theme="dark"] .task-pop__sheet {
  background: linear-gradient(180deg, #0f211b 0%, #0b1713 60%, #0a1511 100%);
  border-color: rgba(255, 255, 255, 0.09);
}
:root[data-theme="dark"] .task-pop__close-x {
  background: #16291f;
  border-color: rgba(255, 255, 255, 0.18);
  color: #eaf3ee;
}
:root[data-theme="dark"] .task-stage {
  background: radial-gradient(125% 95% at 50% 0%, #172c38 0%, #10212b 55%, #0b1820 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .task-pop__grab { background: rgba(255, 255, 255, 0.28); }
:root[data-theme="dark"] .task-pop__sheet h3 { color: #f2f7f4; }
:root[data-theme="dark"] .task-pop__lede { color: #a9bdb4; }
:root[data-theme="dark"] .task-pop__grab { background: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .task-tip {
  background: #12251e;
  border-color: #d9e6df;
  color: #f2f7f4;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .task-tip::before { border-top-color: #d9e6df; }
:root[data-theme="dark"] .task-tip::after { border-top-color: #12251e; }
:root[data-theme="dark"] .task-stage::after { background: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .task-orb {
  color: #0d1f19;
  box-shadow:
    0 14px 30px -12px rgba(0, 0, 0, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(120, 76, 0, 0.4);
}

:root[data-theme="dark"] .task-pop__list .task-card {
  background: #12251e;
  border-color: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .task-pop__list .task-card h3 { color: #f2f7f4; }
:root[data-theme="dark"] .task-pop__list .task-card .desc,
:root[data-theme="dark"] .task-pop__list .task-meta span,
:root[data-theme="dark"] .task-pop__list .task-state { color: #a8bdb4; }
:root[data-theme="dark"] .task-pop__list .task-meta b { color: #f2f7f4; }
:root[data-theme="dark"] .task-pop__list .task-bar { background: rgba(255, 255, 255, 0.12); }

@media (max-height: 800px) {
  .task-stage { --rise: -64px; padding-bottom: 12px; }
  .task-brick { width: 40px; height: 40px; }
  .task-block, .task-block__face { width: 80px; height: 80px; }
  .task-block__mush { width: 56px; height: 56px; }
}
@media (max-height: 730px) {
  .task-pop__lede { display: none; }
  .task-pop__sheet h3 { font-size: 1.04rem; }
  .task-pop__list { margin-top: 12px; }
  .task-pop__close { margin-top: 10px; }
}
@media (max-height: 670px) {
  .task-stage { --rise: -54px; padding-bottom: 12px; }
  .task-tip { font-size: 0.72rem; padding: 7px 11px; }
  .task-brick { width: 34px; height: 34px; }
  .task-block, .task-block__face { width: 68px; height: 68px; }
  .task-block__mush { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .task-orb.is-drop { animation: none; }
  .task-orb::after,
  .task-orb.is-drop::after { animation: none; opacity: 0; }
  .task-pop:not([hidden]) .task-pop__veil,
  .task-pop:not([hidden]) .task-pop__sheet,
  .task-block.is-bumped .task-block__face { animation: none; }
  .task-stage.go .task-block__mush,
  .task-stage.go.settled .task-block__mush {
    animation: none;
    opacity: 1;
    transform: translate(-50%, var(--rise)) scale(1);
  }
  .task-stage.show-tip .task-tip,
  .task-tip { animation: none; opacity: 1; transform: none; }
}

.task-orb.is-detail-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

@media (prefers-reduced-motion: no-preference) {

  #pane-shop.is-active { animation: shop-fade 0.28s ease-out both; }

  #pane-shop .shop-bar .tabs { animation: none; }

  #pane-shop.is-active .section-head > * {
    animation: shop-head 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  #pane-shop.is-active .section-head > *:nth-child(1) { animation-delay: 0.04s; }
  #pane-shop.is-active .section-head > *:nth-child(2) { animation-delay: 0.10s; }
  #pane-shop.is-active .section-head > *:nth-child(3) { animation-delay: 0.16s; }

  #pane-shop.is-active .tabs .tab {
    animation: shop-card 0.56s cubic-bezier(0.2, 0.85, 0.3, 1) both;
  }
  #pane-shop.is-active .tabs .tab:nth-of-type(1) { animation-delay: 0.12s; }
  #pane-shop.is-active .tabs .tab:nth-of-type(2) { animation-delay: 0.175s; }
  #pane-shop.is-active .tabs .tab:nth-of-type(3) { animation-delay: 0.23s; }
  #pane-shop.is-active .tabs .tab:nth-of-type(4) { animation-delay: 0.285s; }
  #pane-shop.is-active .tabs .tab:nth-of-type(5) { animation-delay: 0.34s; }
  #pane-shop.is-active .tabs .tab:nth-of-type(6) { animation-delay: 0.395s; }
  #pane-shop.is-active .tabs .tab:nth-of-type(n + 7) { animation-delay: 0.45s; }

  #pane-shop.is-active .panel:not([hidden]),
  #pane-shop.is-active #promo-banner:not([hidden]),
  #pane-shop.is-active .shop-note {
    animation: shop-rise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 0.52s both;
  }
}

@keyframes shop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shop-head {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shop-card {
  0%   { opacity: 0; transform: translateY(26px) scale(0.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes shop-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

:root .drawer {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(248, 184, 26, 0.09), transparent 60%),
    radial-gradient(90% 50% at 0% 0%, var(--ring-green-c), transparent 65%),
    var(--cream);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
:root[data-theme="dark"] .drawer {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(248, 184, 26, 0.07), transparent 60%),
    radial-gradient(90% 50% at 0% 0%, rgba(31, 160, 125, 0.16), transparent 65%),
    #070f0c;
}
@media (max-width: 480px) { :root .drawer { border-radius: 0; } }

:root .drawer-head {
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 14px;
  border-bottom: 0;
  position: relative;
}
:root .drawer-head::after {
  content: "";
  position: absolute; inset: auto 16px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-line) 20%, var(--green-line) 80%, transparent);
}
.drawer-titles { min-width: 0; }
:root .drawer-head h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 800; line-height: 1.3;
}
.drawer-title__badge {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--gold), var(--gold-deep));
  box-shadow: var(--glow-gold);
}
:root .drawer-title__badge .drawer-title__ico { width: 20px; height: 20px; color: var(--green-dark); fill: var(--green-dark); }
.drawer-sub {
  margin: 2px 48px 0 0;
  font-size: 0.74rem; color: var(--muted); min-height: 1.2em;
}
[dir="rtl"] .drawer-sub { margin: 2px 48px 0 0; }
.drawer-sub:empty { display: none; }

:root .icon-btn { width: 40px; height: 40px; border-radius: 14px; }

:root .drawer-body { padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }

:root .cart-empty { gap: 10px; padding: 56px 16px; }

.cart-empty__orb {
  position: relative;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  margin-bottom: 12px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 58%),
    linear-gradient(150deg, var(--green-soft) 0%, var(--gold-soft) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--green) 14%, transparent),
    0 0 0 9px color-mix(in srgb, var(--green) 5%, transparent),
    0 12px 26px -14px rgba(16, 35, 29, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  animation: cart-float 4s ease-in-out infinite;
}
.cart-empty__orb::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    rgba(248, 184, 26, 0.55),
    rgba(26, 138, 110, 0.35) 42%,
    rgba(248, 184, 26, 0.18) 68%,
    rgba(248, 184, 26, 0.55)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.6px));
  opacity: 0.85;
  pointer-events: none;
}
:root[data-theme="dark"] .cart-empty__orb {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 58%),
    linear-gradient(150deg, #16302a 0%, #23301a 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 9px rgba(248, 184, 26, 0.07),
    0 12px 26px -14px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .cart-empty .cart-empty__orb .ico { color: var(--gold); fill: var(--gold); }
:root .cart-empty .cart-empty__orb .ico { width: 40px; height: 40px; color: var(--green-800, var(--green)); fill: currentColor; }
:root .cart-empty p { font-size: 1rem; font-weight: 700; color: var(--ink); }
.cart-empty small { font-size: 0.8rem; color: var(--muted); max-width: 22em; line-height: 1.7; }
:root .cart-empty .btn { margin-top: 10px; min-height: 44px; padding-inline: 22px; }
@keyframes cart-float { 50% { transform: translateY(-6px); } }

:root .cart-items { gap: 10px; margin-bottom: 16px; }
:root .cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas:
    "ico main price"
    "qty qty qty";
  align-items: start;
  gap: 4px 12px;
  padding: 14px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--green-line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

:root .cart-item::before {
  content: "";
  position: absolute; inset-block: 14px; inset-inline-start: 0;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--kind, var(--green));
}
[dir="rtl"] .cart-item::before { border-radius: 3px 0 0 3px; }
.cart-item[data-kind="stars"],
.cart-item[data-kind="custom"],
.cart-item[data-kind="reaction"] { --kind: var(--gold); }
.cart-item[data-kind="premium"] { --kind: #8c5aff; }
.cart-item[data-kind="boost"] { --kind: #ff7a45; }
.cart-item[data-kind="ton"] { --kind: #2aa3ef; }
.cart-item[data-kind="trx"] { --kind: #ef4455; }
.cart-item[data-kind="gift"] { --kind: #ec5fa5; }
.cart-item[data-kind="giveaway"] { --kind: #a06bff; }

.cart-item-ico {
  grid-area: ico;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--kind, var(--green)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--kind, var(--green)) 28%, transparent);
}
.cart-item-ico .ico { width: 24px; height: 24px; color: var(--kind, var(--green)); }
.cart-item-ico img { width: 26px; height: 26px; object-fit: contain; image-rendering: auto; display: block; }
.cart-item-ico picture.media { display: block; }
.cart-item-ico picture.media img { width: 26px; height: 26px; }

.cart-item-ico:has(img) {
  background: color-mix(in srgb, var(--kind, var(--green)) 12%, #fff);
  border-color: color-mix(in srgb, var(--kind, var(--green)) 24%, transparent);
}
:root[data-theme="dark"] .cart-item-ico:has(img) {
  background: color-mix(in srgb, var(--kind, var(--green)) 20%, #0d1d18);
}
.cart-item-main { grid-area: main; min-width: 0; display: grid; gap: 2px; padding-top: 1px; }
:root .cart-item-name { font-size: 0.92rem; font-weight: 750; line-height: 1.55; color: var(--ink); }
:root .cart-item-meta { font-size: 0.76rem; line-height: 1.65; color: var(--muted); }
:root .cart-item-price {
  grid-area: price;
  padding-top: 2px;
  font-size: 0.9rem; font-weight: 800; white-space: nowrap;
  text-align: end;
  color: var(--ink);
}

:root .cart-item .qty {
  min-height: 59px;
  grid-area: qty;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--green-line);
  display: flex; align-items: center; justify-content: space-between;
}
.qty-note { font-size: 0.72rem; color: var(--muted); }
:root .cart-item--locked .qty { justify-content: space-between; }

:root .qty-controls {
  gap: 4px; padding: 3px;
  background: var(--paper);
  border: 1px solid var(--green-line);
  border-radius: 999px;
}
:root .qty-controls button {
  width: 32px; height: 32px;
  font-size: 1.15rem; font-weight: 700;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
:root .qty-controls button:active { transform: scale(0.92); }
:root .qty-controls span { min-width: 30px; font-weight: 800; }

:root .remove-btn {
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(192, 57, 43, 0.22);
  background: rgba(192, 57, 43, 0.06);
  color: #c0392b;
}
:root .remove-btn .ico { width: 17px; height: 17px; fill: none; }
:root .remove-btn:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
:root[data-theme="dark"] .remove-btn { color: #ff8f80; }
:root[data-theme="dark"] .remove-btn:hover { color: #fff; }

:root .promo-row {
  gap: 6px; padding: 6px;
  background: var(--white);
  border: 1px dashed var(--green-line);
  border-radius: 16px;
  margin-bottom: 4px;
}
:root .promo-row input {
  min-height: 42px; border: 0; background: transparent;
  box-shadow: none; padding-inline: 10px;
}
:root .promo-row input:focus { outline: none; }
:root .promo-row:focus-within { border-style: solid; border-color: var(--green); box-shadow: 0 0 0 4px var(--ring-green-c); }
:root .promo-row .btn { min-height: 42px; border-radius: 12px; padding-inline: 18px; }
:root .promo-msg { padding-inline: 6px; margin-bottom: 8px; }

:root .totals {
  gap: 10px; margin: 12px 0 18px; padding: 16px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(248, 184, 26, 0.10), transparent 60%),
    var(--white);
  border: 1px solid var(--green-line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
:root .totals > div { align-items: baseline; font-size: 0.85rem; }
:root .totals .grand {
  margin-top: 4px; padding-top: 14px;
  border-top: 1px dashed var(--green-line);
  align-items: center;
}
:root .totals dt, :root .totals dd { line-height: 1.5; white-space: nowrap; }
:root .totals .grand dt { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
:root .totals .grand dd {
  font-size: 1.15rem; font-weight: 900;
  color: var(--green);
}
:root[data-theme="dark"] .totals .grand dd { color: var(--gold-text); }

:root .form-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; letter-spacing: 0; text-transform: none; font-weight: 800;
  color: var(--ink); margin: 24px 0 14px;
}
:root .form-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--green-line), transparent);
}
[dir="rtl"] .form-title::after { background: linear-gradient(270deg, var(--green-line), transparent); }

:root .field > label, :root .field > legend { font-weight: 700; margin-bottom: 7px; }
:root .field input[type="text"],
:root .field input[type="email"],
:root .input-wrap {
  min-height: 48px; border-radius: 14px;
}
:root .field input[type="text"]:focus,
:root .field input[type="email"]:focus,
:root .input-wrap:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--ring-green-c);
}

:root .pay-options { gap: 10px; }

:root .pay-opt span {
  position: relative;
  transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease,
              box-shadow 0.24s ease, transform 0.24s cubic-bezier(0.2, 1.1, 0.3, 1);
}

:root .pay-opt span::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 36%, transparent);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: border-color 0.22s ease, background-color 0.22s ease;
}

:root .pay-opt span::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(14px + 5px);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a3 0%, var(--gold) 60%, #d99300 100%);
  transform: scale(0);
  opacity: 0;
}
:root .pay-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }

:root .pay-opt input:checked + span {
  background: linear-gradient(145deg, var(--green), var(--green-deep, var(--green)));
  border-color: var(--green);
  color: #fff;
  box-shadow: var(--glow-green);
  animation: pay-card-in 0.34s cubic-bezier(0.2, 1.15, 0.3, 1);
}
:root .pay-opt input:checked + span::before {
  border-color: var(--gold);
  background: color-mix(in srgb, #000 16%, transparent);
}
:root .pay-opt input:checked + span::after {
  animation: pay-bead-in 0.42s cubic-bezier(0.2, 1.4, 0.35, 1) forwards;
}
:root .pay-opt:active span { transform: scale(0.985); }

@keyframes pay-card-in {
  0%   { transform: scale(0.975); }
  55%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
@keyframes pay-bead-in {
  0%   { transform: scale(0); opacity: 0; box-shadow: 0 0 0 0 rgba(248, 184, 26, 0.55); }
  35%  { transform: scale(1.25); opacity: 1; }
  70%  { transform: scale(0.95); box-shadow: 0 0 0 7px rgba(248, 184, 26, 0.16); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 11px rgba(248, 184, 26, 0); }
}

:root .check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  border-radius: 7px;
  border: 2px solid color-mix(in srgb, var(--ink) 24%, transparent);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.16s ease;
}
:root .check input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.6px solid #1a2a1f;
  border-bottom: 2.6px solid #1a2a1f;
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.35, 1), opacity 0.16s ease;
  margin-top: -2px;
}
:root .check input[type="checkbox"]:checked {
  background: linear-gradient(160deg, var(--gold) 0%, #e0a000 100%);
  border-color: #d99300;
  animation: check-pop 0.28s cubic-bezier(0.2, 1.3, 0.35, 1);
}
:root .check input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; }
:root .check input[type="checkbox"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@keyframes check-pop {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

:root[data-theme="dark"] .pay-opt span::before {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .pay-opt input:checked + span::before {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.2);
}
:root[data-theme="dark"] .check input[type="checkbox"] {
  background: #0d1d18;
  border-color: rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  :root .pay-opt input:checked + span,
  :root .pay-opt input:checked + span::after,
  :root .check input[type="checkbox"]:checked { animation: none; }
  :root .pay-opt input:checked + span::after { transform: scale(1); opacity: 1; }
}
:root .pay-opt span {
  position: relative;
  min-height: 52px; display: grid; place-items: center;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.88rem; font-weight: 750;
  border: 1.5px solid var(--green-line);
}

:root .check { align-items: center; padding: 12px 14px; background: var(--paper); border-radius: 14px; margin: 6px 0 14px; }
:root .check input { width: 18px; height: 18px; }

:root #pay-btn {
  min-height: 54px; border-radius: 18px;
  font-size: 1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
:root #pay-btn .arrow { transition: transform 0.25s var(--ease); }
[dir="rtl"] #pay-btn .arrow { transform: scaleX(-1); }
:root #pay-btn:hover .arrow { transform: translateX(-4px); }
[dir="rtl"] #pay-btn:hover .arrow { transform: scaleX(-1) translateX(4px); }
:root .secure-note { margin-top: 14px; }

:root .success-ico {
  width: 84px; height: 84px;
  box-shadow: 0 0 0 10px var(--ring-green-c);
  animation: cart-pop 0.5s var(--ease);
}
@keyframes cart-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
:root .success-actions { display: grid; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cart-empty__orb, :root .success-ico { animation: none; }
}

:root[data-theme="dark"] .drawer-head h2 { color: #f2f7f4; }
:root[data-theme="dark"] .drawer-sub { color: #9fb3aa; }
:root[data-theme="dark"] #drawer-close { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: #eaf3ee; }

:root[data-theme="dark"] .cart-item {
  background: #101f1a;
  color: #e8f1ec;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
:root[data-theme="dark"] .cart-item-name,
:root[data-theme="dark"] .cart-item-price { color: #f2f7f4; }
:root[data-theme="dark"] .cart-item-meta { color: #a3b8ae; }
:root[data-theme="dark"] .cart-item .qty { border-top-color: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .qty-controls {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #eaf3ee;
}
:root[data-theme="dark"] .qty-controls span { color: #eaf3ee; }
:root[data-theme="dark"] .qty-note { color: #9fb3aa; }
:root[data-theme="dark"] .qty-controls button {
  background: #17302a;
  color: #eaf3ee;
  box-shadow: none;
}
:root[data-theme="dark"] .remove-btn {
  background: rgba(226, 92, 70, 0.14);
  border-color: rgba(226, 92, 70, 0.32);
  color: #ff9c8a;
}
:root[data-theme="dark"] .cart-item-ico { background: color-mix(in srgb, var(--kind, var(--green)) 22%, #0d1b16); }

:root[data-theme="dark"] .promo-row {
  background: #101f1a;
  border-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .promo-row input { color: #eaf3ee; }
:root[data-theme="dark"] .promo-row input::placeholder { color: #8ba39a; }

:root[data-theme="dark"] .totals {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(248, 184, 26, 0.08), transparent 60%),
    #101f1a;
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .totals > div { color: #a3b8ae; }
:root[data-theme="dark"] .totals dd { color: #f2f7f4; }
:root[data-theme="dark"] .totals .grand { border-top-color: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .totals .grand dt { color: #dbe9e1; }

:root[data-theme="dark"] .form-title { color: #9fb3aa; }
:root[data-theme="dark"] .field {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .field > label,
:root[data-theme="dark"] .field > legend { color: #e8f1ec; }
:root[data-theme="dark"] .field input[type="text"],
:root[data-theme="dark"] .field input[type="email"],
:root[data-theme="dark"] .input-wrap {
  background: #0c1915;
  border-color: rgba(255, 255, 255, 0.16);
  color: #eaf3ee;
}
:root[data-theme="dark"] .field input::placeholder { color: #7f978e; }
:root[data-theme="dark"] .field small { color: #92a89f; }

:root[data-theme="dark"] .pay-opt span {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #dfeae4;
}
:root[data-theme="dark"] .pay-opt input:checked + span { color: #fff; }

:root[data-theme="dark"] .check {
  background: rgba(255, 255, 255, 0.04);
  color: #a3b8ae;
}
:root[data-theme="dark"] .check a { color: #9fe6c9; }

:root[data-theme="dark"] .cart-empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .cart-empty .ico { color: var(--gold, #f8b81a); }

:root .pfx-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}

:root .pfx-hero {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid var(--green-line);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(248, 184, 26, 0.14), transparent 58%),
    linear-gradient(160deg, #ffffff, #fbfdfc);
  box-shadow: 0 10px 26px rgba(16, 35, 29, 0.07);
}
:root .pfx-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 18px rgba(11, 59, 48, 0.25);
}
:root .pfx-hero__id { min-width: 0; }
:root .pfx-hero h2 {
  margin: 0 0 2px;
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
:root .pfx-handle {
  margin: 0 0 9px;
  font-size: 0.84rem;
  color: var(--muted);
  text-align: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root .pfx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
:root .pfx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(16, 35, 29, 0.05);
  border: 1px solid rgba(16, 35, 29, 0.07);
  white-space: nowrap;
}
:root .pfx-chip--ok {
  color: #0d5a45;
  background: rgba(18, 98, 79, 0.09);
  border-color: rgba(18, 98, 79, 0.2);
}
:root .pfx-chip--gold {
  color: #7a5300;
  background: linear-gradient(150deg, #fff4d0, #ffe7a3);
  border-color: rgba(217, 154, 0, 0.3);
}
:root .pfx-since {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 12px 0 0 74px;
  border-top: 1px dashed rgba(16, 35, 29, 0.1);
  font-size: 0.76rem;
  color: var(--muted);
}
:root .pfx-since b { color: var(--ink); font-weight: 700; }

:root .pfx-wallet {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 22px;
  color: #eaf6f0;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(248, 184, 26, 0.22), transparent 55%),
    linear-gradient(155deg, #155b49 0%, #0b3b30 62%, #082a22 100%);
  box-shadow: 0 16px 30px rgba(8, 42, 34, 0.28);
}
:root .pfx-wallet::after {
  content: "";
  position: absolute;
  inset-inline-start: -40px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 184, 26, 0.2), transparent 70%);
  pointer-events: none;
}
:root .pfx-wallet__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(234, 246, 240, 0.72);
}
:root .pfx-wallet__main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 6px 0 14px;
}
:root .pfx-wallet__main strong {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
:root .pfx-wallet__main small { font-size: 0.82rem; color: rgba(234, 246, 240, 0.7); }
:root .pfx-wallet__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
:root .pfx-wallet__grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  min-width: 0;
}
:root .pfx-wallet__grid > div + div { border-top: 1px solid rgba(255, 255, 255, 0.16); }
:root .pfx-wallet__grid span {
  font-size: 0.73rem;
  color: rgba(234, 246, 240, 0.7);
  white-space: nowrap;
}
:root .pfx-wallet__grid b {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: end;
  min-width: 0;
}
:root .pfx-wallet__unit {
  font-style: normal;
  font-size: 0.7rem;
  color: rgba(234, 246, 240, 0.55);
}

:root .pfx-card {
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid var(--green-line);
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 35, 29, 0.05);
}
:root .pfx-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
:root .pfx-card__head h3 {
  margin: 0 0 2px;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--ink);
}
:root .pfx-card__head p {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}
:root .pfx-pill {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(18, 98, 79, 0.08);
}

:root .pfx-orders { display: flex; flex-direction: column; gap: 9px; }
:root .pfx-order {
  position: relative;
  padding: 12px 12px 11px;
  border-radius: 15px;
  border: 1px solid rgba(16, 35, 29, 0.08);
  background: linear-gradient(180deg, #fdfefd, #fafcfb);
}
:root .pfx-order__title {
  margin: 0 0 4px;
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
:root .pfx-badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
:root .pfx-badge--done { color: #0d5a45; background: rgba(18, 98, 79, 0.1); }
:root .pfx-badge--wait { color: #8a6100; background: rgba(217, 154, 0, 0.14); }
:root .pfx-badge--info { color: #1c5f8a; background: rgba(28, 95, 138, 0.1); }
:root .pfx-badge--fail { color: #9c3427; background: rgba(196, 74, 56, 0.12); }
:root .pfx-order__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.755rem;
  color: var(--muted);
}
:root .pfx-order__meta b { color: var(--ink); font-weight: 700; }
:root .pfx-order__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}
:root .pfx-order__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(16, 35, 29, 0.1);
}
:root .pfx-order__amount {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
:root .pfx-order__amount small { font-size: 0.7rem; font-weight: 600; color: var(--muted); }
:root .pfx-order__to {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
  text-align: end;
}

:root .pfx-coupons, :root .pfx-cards { display: flex; flex-direction: column; gap: 8px; }
:root .pfx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(16, 35, 29, 0.08);
  background: #fcfdfc;
}
:root .pfx-row__ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(248, 184, 26, 0.16);
  color: #8a6100;
}
:root .pfx-row__ico .ico { width: 17px; height: 17px; }
:root .pfx-row__body { min-width: 0; flex: 1; }
:root .pfx-row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink);
}
:root .pfx-row__title code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.6px;
  color: var(--green);
}
:root .pfx-row__sub {
  margin-top: 2px;
  font-size: 0.755rem;
  color: var(--muted);
}
:root .pfx-row__end {
  flex: none;
  text-align: end;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
:root .pfx-row__end small { display: block; font-size: 0.66rem; font-weight: 600; color: var(--muted); }

:root .pfx-ref {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(217, 154, 0, 0.28);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(248, 184, 26, 0.16), transparent 60%),
    #fffdf6;
}
:root .pfx-ref__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
:root .pfx-ref__ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #7a5300;
  background: linear-gradient(150deg, var(--gold), var(--gold-deep));
  box-shadow: 0 6px 14px rgba(217, 154, 0, 0.3);
}
:root .pfx-ref__ico .ico { width: 19px; height: 19px; color: #4a3200; }
:root .pfx-ref__head h3 { margin: 0 0 2px; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
:root .pfx-ref__head p { margin: 0; font-size: 0.73rem; color: var(--muted); }
:root .pfx-ref__code {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
:root .pfx-ref__code code {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(217, 154, 0, 0.5);
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #7a5300;
  text-align: center;
}
:root .pfx-ref__code .btn { flex: none; gap: 6px; }
:root .pfx-ref__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(217, 154, 0, 0.16);
  overflow: hidden;
}
:root .pfx-ref__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  min-width: 0;
}
:root .pfx-ref__row + .pfx-ref__row { border-top: 1px solid rgba(217, 154, 0, 0.14); }
:root .pfx-ref__row span { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
:root .pfx-ref__row b {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:root .pfx-foot__ico .ico { width: 16px; height: 16px; }
:root .pfx-seg__btn.is-on {
  color: #fff;
  background: linear-gradient(150deg, var(--green), var(--green-deep));
  box-shadow: 0 3px 8px rgba(11, 59, 48, 0.25);
}

:root .pfx-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-radius: 13px;
  border: 1px dashed rgba(16, 35, 29, 0.16);
  background: #fbfcfb;
  font-size: 0.78rem;
  color: var(--muted);
}

:root[data-theme="dark"] .pfx-hero {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(248, 184, 26, 0.12), transparent 58%),
    linear-gradient(160deg, #12211c, #0e1a16);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
:root[data-theme="dark"] .pfx-hero h2 { color: #f2f7f4; }
:root[data-theme="dark"] .pfx-handle { color: #9fb3aa; }
:root[data-theme="dark"] .pfx-chip {
  color: #a9bdb4;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .pfx-chip--ok { color: #7fe0bd; background: rgba(18, 98, 79, 0.28); border-color: rgba(127, 224, 189, 0.3); }
:root[data-theme="dark"] .pfx-chip--gold { color: #ffd977; background: rgba(248, 184, 26, 0.16); border-color: rgba(248, 184, 26, 0.3); }
:root[data-theme="dark"] .pfx-since { color: #9fb3aa; border-top-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .pfx-since b { color: #eaf3ee; }
:root[data-theme="dark"] .pfx-card {
  background: #101f1a;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
:root[data-theme="dark"] .pfx-card__head h3 { color: #f2f7f4; }
:root[data-theme="dark"] .pfx-card__head p { color: #9fb3aa; }
:root[data-theme="dark"] .pfx-pill { color: #7fe0bd; background: rgba(18, 98, 79, 0.24); }
:root[data-theme="dark"] .pfx-order { background: #0c1915; border-color: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .pfx-order__title,
:root[data-theme="dark"] .pfx-order__amount { color: #f2f7f4; }
:root[data-theme="dark"] .pfx-order__meta { color: #9fb3aa; }
:root[data-theme="dark"] .pfx-order__meta b { color: #dfeae4; }
:root[data-theme="dark"] .pfx-order__foot { border-top-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .pfx-badge--done { color: #7fe0bd; background: rgba(31, 160, 125, 0.22); }
:root[data-theme="dark"] .pfx-badge--wait { color: #ffd977; background: rgba(217, 154, 0, 0.22); }
:root[data-theme="dark"] .pfx-badge--info { color: #9ecdf0; background: rgba(28, 95, 138, 0.28); }
:root[data-theme="dark"] .pfx-badge--fail { color: #ff9c8a; background: rgba(196, 74, 56, 0.24); }
:root[data-theme="dark"] .pfx-row { background: #0c1915; border-color: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .pfx-row__title { color: #eaf3ee; }
:root[data-theme="dark"] .pfx-row__title code { color: #7fe0bd; }
:root[data-theme="dark"] .pfx-row__sub { color: #9fb3aa; }
:root[data-theme="dark"] .pfx-row__end { color: #f2f7f4; }
:root[data-theme="dark"] .pfx-row__ico { background: rgba(248, 184, 26, 0.14); color: #ffd977; }
:root[data-theme="dark"] .pfx-ref {
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(248, 184, 26, 0.12), transparent 60%),
    #121a14;
  border-color: rgba(248, 184, 26, 0.24);
}
:root[data-theme="dark"] .pfx-ref__head h3 { color: #f2f7f4; }
:root[data-theme="dark"] .pfx-ref__head p { color: #9fb3aa; }
:root[data-theme="dark"] .pfx-ref__code code {
  background: #0c1915;
  border-color: rgba(248, 184, 26, 0.5);
  color: #ffd977;
}
:root[data-theme="dark"] .pfx-ref__stats {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(248, 184, 26, 0.3);
}
:root[data-theme="dark"] .pfx-ref__row + .pfx-ref__row { border-top-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .pfx-ref__row span { color: #a9c0b6; }
:root[data-theme="dark"] .pfx-ref__row b { color: #f2f7f4; }
:root[data-theme="dark"] .pfx-empty { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.14); color: #9fb3aa; }

@media (max-width: 380px) {
  :root .pfx-hero { grid-template-columns: 54px minmax(0, 1fr); padding: 15px; }
  :root .pfx-avatar { width: 54px; height: 54px; border-radius: 17px; font-size: 1.25rem; }
  :root .pfx-wallet__main strong { font-size: 1.6rem; }
  :root .pfx-ref__stats { grid-template-columns: 1fr; }
}

:root .pfx-order {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
:root .pfx-order__ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(16, 35, 29, 0.05);
  overflow: hidden;
}
:root .pfx-order__ico img { width: 22px; height: 22px; object-fit: contain; }
:root .pfx-order__ico .ico { width: 19px; height: 19px; color: var(--green); }
:root .pfx-order__body { min-width: 0; }
:root .pfx-order__foot .pfx-badge { margin-inline-start: auto; }
:root .pfx-order__to { max-width: none; }
:root .pfx-order__disc {
  display: inline-block;
  margin: 6px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a6100;
  background: rgba(248, 184, 26, 0.16);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
:root .pfx-row__btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(18, 98, 79, 0.16);
  background: rgba(18, 98, 79, 0.09);
  color: var(--green);
  cursor: pointer;
}
:root .pfx-row__btn:hover { background: rgba(18, 98, 79, 0.16); }
:root .pfx-row__btn .ico { width: 15px; height: 15px; }
:root .pfx-row__ico--card { background: rgba(18, 98, 79, 0.1); color: var(--green); }
:root .pfx-row.is-spent { opacity: 0.62; }
:root .pfx-row.is-spent .pfx-row__title code { text-decoration: line-through; }
:root[data-theme="dark"] .pfx-order__ico { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .pfx-order__ico .ico { color: #7fe0bd; }
:root[data-theme="dark"] .pfx-row__btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #c9e6d8; }
:root[data-theme="dark"] .pfx-order__disc { color: #ffd977; background: rgba(248, 184, 26, 0.16); }

:root .pfx-hero {
  border-color: rgba(217, 154, 0, 0.28);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(248, 184, 26, 0.22), transparent 60%),
    linear-gradient(160deg, #fffdf6, #fdf8ea);
}
:root .pfx-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, #ffe08a 50%, var(--gold) 78%, transparent);
}
:root .pfx-avatar {
  background: linear-gradient(150deg, #1a6b56 0%, #0b3b30 70%);
  box-shadow: 0 0 0 2px #fffdf6, 0 0 0 4px rgba(248, 184, 26, 0.75), 0 10px 20px rgba(11, 59, 48, 0.22);
}
:root .pfx-since {
  color: #7c6a3f;
  border-top-color: rgba(217, 154, 0, 0.24);
}
:root .pfx-since b { color: #6b5312; }
:root .pfx-since::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}

:root .pfx-wallet__eyebrow {
  color: #ffe9a3;
  font-weight: 600;
}
:root .pfx-wallet__eyebrow .pfx-wallet__unit { color: rgba(255, 233, 163, 0.62); }
:root .pfx-wallet__main strong {
  background: linear-gradient(180deg, #fff8e2 0%, #ffdf8f 55%, #f8b81a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
:root .pfx-wallet__main small { color: #ffdf8f; font-weight: 600; }
:root .pfx-wallet__grid > div + div { border-top-color: rgba(248, 184, 26, 0.22); }
:root .pfx-wallet__grid b { color: #ffe9a3; }

:root .pfx-pill {
  color: #8a6100;
  background: linear-gradient(150deg, #fff4d0, #ffe7a3);
  border: 1px solid rgba(217, 154, 0, 0.3);
}
:root .pfx-card__head h3 {
  position: relative;
  padding-inline-start: 11px;
}
:root .pfx-card__head h3::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.42em;
  width: 3px;
  height: 0.78em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}
:root .pfx-order__amount { color: #7a5600; }
:root .pfx-order__ico { background: rgba(248, 184, 26, 0.14); }

:root .pfx-ref {
  border-color: rgba(217, 154, 0, 0.42);
  box-shadow: 0 10px 24px rgba(217, 154, 0, 0.1);
}
:root .pfx-ref__stats { background: #fffdf6; border-color: rgba(217, 154, 0, 0.28); }
:root .pfx-ref__row b { color: #7a5600; }
:root .pfx-ref__row + .pfx-ref__row { border-top-color: rgba(217, 154, 0, 0.18); }

:root .pfx-seg__btn.is-on {
  color: #3d2c00;
  background: linear-gradient(150deg, #ffd76a, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 4px 12px rgba(217, 154, 0, 0.35);
}
:root .pfx-row__btn {
  color: #7a5600;
  border-color: rgba(217, 154, 0, 0.3);
  background: linear-gradient(150deg, #fff8e4, #ffefc4);
}
:root .pfx-row__btn:hover { background: linear-gradient(150deg, #fff2cf, #ffe6a6); }
:root .pfx-empty { border-color: rgba(217, 154, 0, 0.35); background: #fffdf6; }
:root .pfx-empty .ico { color: #b8860b; }

:root[data-theme="dark"] .pfx-hero {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(248, 184, 26, 0.18), transparent 60%),
    linear-gradient(160deg, #1a2118, #12180f);
  border-color: rgba(248, 184, 26, 0.24);
}
:root[data-theme="dark"] .pfx-avatar {
  box-shadow: 0 0 0 2px #0d1a16, 0 0 0 4px rgba(248, 184, 26, 0.6), 0 10px 20px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .pfx-since { color: #c2b48c; border-top-color: rgba(248, 184, 26, 0.24); }
:root[data-theme="dark"] .pfx-since b { color: #ffe9a3; }
:root[data-theme="dark"] .pfx-wallet__main strong {
  background: linear-gradient(180deg, #fff8e2 0%, #ffe08a 55%, #f8b81a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="dark"] .pfx-pill {
  color: #ffd977;
  background: rgba(248, 184, 26, 0.16);
  border-color: rgba(248, 184, 26, 0.3);
}
:root[data-theme="dark"] .pfx-order__amount { color: #ffd977; }
:root[data-theme="dark"] .pfx-order__ico { background: rgba(248, 184, 26, 0.12); }
:root[data-theme="dark"] .pfx-ref { border-color: rgba(248, 184, 26, 0.34); box-shadow: none; }
:root[data-theme="dark"] .pfx-ref__stats {
  background: rgba(248, 184, 26, 0.06);
  border-color: rgba(248, 184, 26, 0.28);
}
:root[data-theme="dark"] .pfx-ref__row b { color: #ffe9a3; }
:root[data-theme="dark"] .pfx-row__btn {
  color: #ffd977;
  border-color: rgba(248, 184, 26, 0.3);
  background: rgba(248, 184, 26, 0.12);
}
:root[data-theme="dark"] .pfx-row__btn:hover { background: rgba(248, 184, 26, 0.2); }
:root[data-theme="dark"] .pfx-empty { background: rgba(248, 184, 26, 0.05); border-color: rgba(248, 184, 26, 0.3); }
:root[data-theme="dark"] .pfx-empty .ico { color: #ffd977; }
:root[data-theme="dark"] .pfx-seg__btn.is-on { color: #2b1f00; }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  :root .pfx-wallet__main strong { color: #fff8e2; background: none; }
}