html { scroll-padding-top: 150px; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--brand-soft);
  color: #0C1626;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-text); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: none; }
input { font-family: inherit; font-weight: 500; }
input::placeholder { color: rgba(30, 50, 80, .7); }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
::selection { background: rgba(var(--brand-rgb), .25); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(13, 38, 90, .18); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }
button { font-family: inherit; font-weight: inherit; }

:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --rail-h: 631px;
}

@keyframes adPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes adFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes badgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes popDown { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popUp { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important;
  }
}
@media (forced-colors: active) {
  a, button { forced-color-adjust: auto; }
  .pdp-stars { forced-color-adjust: none; }
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.page { min-width: var(--storefront-content-width); background: var(--brand-soft); }
.m-shell { display: none; }
.container { box-sizing: content-box; max-width: var(--storefront-content-width); margin-inline: auto; padding-inline: var(--storefront-gutter); }

.page:not([data-view="home"]) .home-only      { display: none; }
.banner-link[hidden], .promo-card[hidden], .home-only[hidden], .sidebar[hidden],
.hot[hidden], .reviews-band[hidden], .pays-row[hidden] { display: none !important; }
.pm-logo[hidden], .pmini-logo[hidden], .topbar-announcement-icon[hidden], .topbar-text[hidden] { display: none !important; }
.page:not([data-view="cat"])  .cat-view       { display: none; }
.page:not([data-view="offers"]) .offers-view  { display: none; }
.page:not([data-view="pdp"])  .pdp-view       { display: none; }
.page:not([data-view="checkout"]) .checkout-view { display: none; }
.page:not([data-view="partners"]) .partners-view { display: none; }
.page:not([data-view="info"]) .info-view      { display: none; }
.page:not([data-view="faq"])  .faq-view       { display: none; }
.page:not([data-view="search"]) .search-view  { display: none; }
.page[data-view="pdp"] .hide-on-pdp           { display: none; }
.page[data-view="account"] .hide-on-account   { display: none; }
.page:not([data-view="home"]):not([data-view="cat"]) .home-cat-only { display: none; }
.page[data-view="offers"] .hide-on-offers     { display: none; }
.page[data-view="partners"] .hide-on-partners  { display: none; }
.page[data-view="info"] .hide-on-info,
.page[data-view="faq"] .hide-on-info,
.page[data-view="guides"] .hide-on-info,
.page[data-view="guide"] .hide-on-info        { display: none; }
.page[data-view="search"] .hide-on-search     { display: none; }
.page:not([data-view="game"])    .game-view    { display: none; }
.page:not([data-view="seller"])  .seller-view  { display: none; }
.page:not([data-view="apply"])   .apply-view   { display: none; }
.page:not([data-view="invite"])  .invite-view  { display: none; }
.page:not([data-view="affiliate"]) .aff-view   { display: none; }
.page:not([data-view="affapply"]) .aff-apply-view { display: none; }
.page:not([data-view="shop"])    .shop-view    { display: none; }
.page:not([data-view="guides"])  .guides-view  { display: none; }
.page:not([data-view="guide"])   .guide-view   { display: none; }
.page:not([data-view="cart"])    .cart-view    { display: none; }
.page:not([data-view="orders"])  .orders-view  { display: none; }
.page:not([data-view="messages"]) .messages-view { display: none; }
.page:not([data-view="account"]) .account-view { display: none; }
.page:not([data-view="topup"])  .topup-view     { display: none; }
.page:not([data-view="pay"])     .pay-view     { display: none; }
.page:not([data-view="done"])    .done-view    { display: none; }
.page[data-view="game"] .hide-on-solo,
.page[data-view="seller"] .hide-on-solo,
.page[data-view="apply"] .hide-on-solo,
.page[data-view="invite"] .hide-on-solo,
.page[data-view="affiliate"] .hide-on-solo,
.page[data-view="affapply"] .hide-on-solo,
.page[data-view="shop"] .hide-on-solo,
.page[data-view="cart"] .hide-on-solo,
.page[data-view="orders"] .hide-on-solo,
.page[data-view="messages"] .hide-on-solo,
.page[data-view="account"] .hide-on-solo,
.page[data-view="topup"] .hide-on-solo,
.page[data-view="done"] .hide-on-solo { display: none; }
.page[data-view="messages"] .hide-on-messages { display: none; }
.page[data-view="shop"] .hide-on-shop { display: none; }
.page[data-view="checkout"] .hide-on-checkout,
.page[data-view="pay"] .hide-on-checkout      { display: none; }
.page[data-view="checkout"] .main-wrap,
.page[data-view="pay"] .main-wrap             { padding-top: 24px; }
[tabindex="-1"]:focus { outline: none; }
.sel-caret {
  position: absolute; top: 50%; margin-top: -3px; right: 12px;
  display: block; pointer-events: none; color: rgba(30, 50, 80, .45);
}

:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/visa"]            { --pk: 1.754; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/sepa"]            { --pk: 1.906; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/googlepay"]       { --pk: 1.581; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/mastercard"]      { --pk: 1.265; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/applepay"]        { --pk: 1.249; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/wechat"]          { --pk: 1.106; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/paypal"]          { --pk: 1.084; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/tether"]          { --pk: 1.069; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/payoneer"]        { --pk: 1.040; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/wise"]            { --pk: 1.026; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/alipay"]          { --pk: 1.004; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/americanexpress"] { --pk: 1; }
:is(.pay-item, .co-pay-logo, .sl-payout-item) img[src*="/bitcoin"]         { --pk: 1; }

.topbar { height: 38px; background: #0D1B2A; }
.topbar-inner { height: 38px; display: flex; align-items: center; gap: 9px; }
.topbar-announcement-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; color: #ffffff; flex: none;
}
.topbar-text { color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 17px; }
.topbar-links { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.topbar-links a { color: rgba(255, 255, 255, .9); font-size: 13px; line-height: 17px; }
.topbar-links a:hover { color: #ffffff; }
.topbar a:focus-visible, .topbar button:focus-visible { outline-color: #6FB0FF; }
.topbar-pick { z-index: 70; }
.topbar-pick-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0; border: none; background: transparent;
  color: rgba(255, 255, 255, .9); font-size: 13px; line-height: 17px;
  transition: color .2s ease;
}
.topbar-pick-btn:hover { color: #ffffff; }
.head-pref-value { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.head-pref-mark {
  width: 19px; min-width: 19px; text-align: center;
  color: currentColor; font-size: 14px; line-height: 1; font-weight: 700;
}
.head-pref-divider { color: rgba(255, 255, 255, .32); }

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid #e8edf3;
}
.head-row {
  position: relative; height: 64px;
  display: grid; grid-template-columns: 1fr auto minmax(max-content, 1fr);
  align-items: center; gap: 24px;
}
.brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 12px; }
.brand-mark { height: 48px; width: auto; display: block; }
.brand-word { height: 30px; width: auto; display: block; }

.search {
  grid-column: 2; position: relative; z-index: 10;
  width: 560px; height: 44px; box-sizing: border-box;
  background: rgba(13, 38, 90, .05);
  border: 1px solid rgba(13, 38, 90, .1);
  border-radius: 12px; padding: 0 14px;
  display: flex; align-items: center; gap: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.search:focus-within {
  border-color: rgba(var(--brand-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084);
  background: #ffffff;
}
.search svg { flex: none; }
.search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; line-height: 18px; color: #0C1626;
}
.search-kbd {
  flex: none; height: 22px; padding: 0 8px; border-radius: 6px;
  border: 1px solid rgba(13, 38, 90, .14);
  color: rgba(30, 50, 80, .45); font-size: 11px;
  display: flex; align-items: center; letter-spacing: .06em;
}
.search-clear {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: none; background: rgba(13, 38, 90, .08); color: rgba(30, 50, 80, .6);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.search-clear:hover { background: rgba(13, 38, 90, .14); color: #0C1626; }
.search-clear:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.search-clear[hidden] { display: none; }

.sg-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5;
  box-sizing: border-box; max-height: 464px; overflow-y: auto; padding: 6px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1);
  border-radius: 14px; box-shadow: 0 22px 46px rgba(13, 38, 90, .16);
  transform-origin: top center;
  animation: popDown .15s var(--ease-out);
}
.sg-sec + .sg-sec { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(13, 38, 90, .07); }
.sg-label {
  display: block; padding: 5px 10px 3px;
  font-size: 12px; letter-spacing: .06em; color: rgba(30, 50, 80, .7);
}
.sg-row {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 10px; border-radius: 10px;
}
.sg-row:hover, .sg-row.is-on { background: rgba(var(--brand-rgb), .08); }
.sg-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.sg-ico img { width: 18px; height: 18px; object-fit: contain; display: block; }
.sg-letter { font-size: 13px; font-weight: 700; color: var(--brand-text); }
.sg-ico-cat { background: rgba(var(--brand-rgb), .1); }
.sg-ico-cat svg { fill: var(--brand-text); display: block; }
.sg-name {
  flex: 1; min-width: 0; font-size: 14px; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-hit { font-style: normal; font-weight: 700; color: var(--brand-text); }
.sg-cat { flex: none; font-size: 12px; color: rgba(30, 50, 80, .7); }
.sg-price { flex: none; font-size: 14px; font-weight: 700; color: #0C1626; }
.sg-all {
  position: sticky; bottom: -6px; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border-radius: 10px; font-size: 13px; color: var(--brand-text);
  background: #ffffff; box-shadow: 0 -6px 8px -6px rgba(13, 38, 90, .1);
}
.sg-all:hover, .sg-all.is-on { background: var(--brand-soft); }
.sg-empty { padding: 26px 0; text-align: center; font-size: 14px; color: rgba(30, 50, 80, .7); }

.head-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.head-btn {
  height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid rgba(13, 38, 90, .14);
  color: #23324A; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  transition: border-color .2s ease, color .2s ease;
}
.head-btn:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); }
.head-btn svg { flex: none; display: block; }
.head-btn-icon { width: 36px; padding: 0; justify-content: center; }
.head-btn-promo {
  padding: 0 14px;
  background: rgba(var(--brand-rgb), .09);
  border-color: rgba(var(--brand-rgb), .35);
  color: var(--brand-text); font-weight: 700; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.head-btn-promo:hover { background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .6); color: var(--brand-text); }
.head-btn-auth { padding: 0 14px; white-space: nowrap; font-weight: 600; }
.head-btn-auth[hidden] { display: none; }
.head-bal { padding: 0 10px; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.head-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 4px 14px rgba(var(--brand-rgb), 0.21);
  color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none;
}
.head-avatar:hover { color: #ffffff; }
.head-avatar[hidden] { display: none; }

.nav-row { position: relative; height: 43px; display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
.nav-ind {
  position: absolute; left: 0; bottom: 0; z-index: 2; pointer-events: none;
  width: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--brand-gradient);
  transition: transform .22s var(--ease-in-out), width .22s var(--ease-in-out),
    opacity .2s ease;
}
.nav-ind.no-anim { transition: none; }
.nav-ind.is-off { opacity: 0; }
.nav-home {
  position: relative; z-index: 1;
  align-self: flex-end;
  /* Align the visible Lucide stroke with the logo's 6.5px artwork inset. */
  height: 37px; padding: 0 10px 0 13.5px; margin: 0 -10px;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  color: rgba(30, 50, 80, .8); font-size: 14px; font-weight: 400;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left;
  flex: none;
  transition: background-color .2s ease, color .2s ease;
}
.nav-home:hover, .nav-home[aria-expanded="true"] { color: var(--brand-text); }
.nav-category-icon { display: block; width: 22px; height: 22px; flex: none; }
.nav-tab.is-on, .nav-tab.is-on:hover { color: var(--brand-primary); font-weight: 500; }
.nav-home:focus-visible, .nav-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -4px; }
.nav-tabs {
  min-width: 0; height: 43px; align-self: flex-end; display: flex; align-items: flex-end; justify-content: flex-start; gap: 8px;
  /* Real control padding supplies the hover area while preserving label positions. */
  margin-inline: -10px;
  overflow-x: auto; scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-skeleton { height: 40px; display: flex; align-items: center; gap: 10px; padding-inline: 13px; }
.nav-skeleton i {
  display: block; flex: none; width: 88px; height: 12px; border-radius: 999px;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .06) 20%, rgba(var(--brand-rgb), .14) 38%, rgba(var(--brand-rgb), .06) 56%);
  background-size: 240% 100%; animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.nav-skeleton i:nth-child(3n) { width: 72px; }
.nav-tab {
  position: relative; z-index: 1;
  height: 37px; padding: 0 10px; flex: none;
  color: rgba(30, 50, 80, .8); font-size: 14px; font-weight: 400;
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.nav-tab:hover { color: var(--brand-text); }
/* The full hit area and hover surface meet the content edge below the header. */
.nav-home, .nav-tab { border-radius: 8px 8px 0 0; background: transparent; }
@media (hover: hover) {
  .nav-home:hover, .nav-tab:hover { background: #f5f6f8; }
}
.nav-home:focus-visible, .nav-tab:focus-visible { background: #f5f6f8; }
.nav-hot {
  padding: 1px 5px; border-radius: 5px;
  background: #FF3B3B; color: #ffffff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}

/* Shared category disclosure, anchored to the navigation's lower edge. */
.category-mega, .category-mega * { box-sizing: border-box; }
.category-mega {
  position: absolute; top: 100%; left: var(--storefront-gutter); right: var(--storefront-gutter); z-index: 5;
  padding: 0; border: 1px solid #e8edf3; border-radius: 14px;
  background: #fff; color: #1e3250;
  overflow: visible;
  box-shadow: 0 14px 32px rgba(25, 42, 70, .12), 0 3px 8px rgba(25, 42, 70, .04);
}
/* The pointer sits beneath the entrance label, clear of the rounded corner. */
.category-mega::before, .category-mega::after {
  content: ""; position: absolute; left: 40px; transform: translateX(-50%);
  width: 0; height: 0; pointer-events: none;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.category-mega::before { top: -8px; border-bottom: 8px solid #e8edf3; }
.category-mega::after { top: -7px; border-bottom: 8px solid #fff; }
.category-mega[hidden] { display: none; }
.category-mega-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 24px; align-items: start;
  padding: 22px 24px 26px; border-radius: inherit;
  max-height: calc(100dvh - 162px); overflow-y: auto; overscroll-behavior: contain;
}
.category-mega-group { min-width: 0; }
.category-mega-heading {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #e8edf3;
  color: #26364d; font-size: 14px; font-weight: 500; line-height: 22px;
}
.category-mega-heading :is(img, svg) { display: block; flex: none; width: 18px; height: 18px; object-fit: contain; color: var(--brand-text); }
.category-mega a { text-decoration: none; overflow-wrap: anywhere; }
.category-mega-heading:hover { color: var(--brand-text); }
.category-mega-links { list-style: none; margin: 0; padding: 0; }
.category-mega-link {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px; color: #4d5e76;
  font-size: 13px; font-weight: 400; line-height: 20px;
  transition: color .15s ease, background-color .15s ease;
}
.category-mega-link > :is(img, svg) { display: block; flex: none; width: 16px; height: 16px; object-fit: contain; color: var(--brand-text); }
.category-mega-link > span { min-width: 0; }
.category-mega-link:hover { color: var(--brand-text); background: var(--brand-soft); }
.category-mega-links .category-mega-links { margin-left: 12px; border-left: 1px solid #edf0f5; padding-left: 4px; }
.category-mega-empty { grid-column: 1 / -1; margin: 10px 0; color: #61728e; font-size: 14px; }
.category-mega a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
@media (max-width: 1100px) { .category-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .category-mega-grid { padding: 16px; max-height: calc(100dvh - 147px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

.main-wrap { padding-top: 20px; }
.layout { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; }
.page:not([data-view="home"]):not([data-view="cat"]) .layout { margin-top: 0; }
/* Without a banner, keep one 20px gap from the header to the content. */
.page:is([data-view="home"], [data-view="cat"]) .main-wrap:has(> .banner-link:not([hidden])) { padding-top: 22px; }
.page:is([data-view="home"], [data-view="cat"]) .main-wrap:not(:has(> .banner-link:not([hidden]))) > .layout { margin-top: 0; }
.content { flex: 1; min-width: 0; }
.tail-spacer { height: 76px; }

.content > :is(
  .cat-view, .search-view, .offers-view, .game-view, .pdp-view, .checkout-view,
  .partners-view, .info-view, .faq-view, .guides-view, .guide-view, .seller-view,
  .apply-view, .invite-view, .aff-view, .aff-apply-view, .shop-view, .cart-view,
  .orders-view, .messages-view, .account-view, .topup-view, .pay-view, .done-view
):empty {
  min-height: 520px; box-sizing: border-box; border-radius: 18px;
  border: 1px solid rgba(13, 38, 90, .08); background-color: #ffffff;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  background-image:
    linear-gradient(100deg, rgba(var(--brand-rgb), .05) 20%, rgba(var(--brand-rgb), .11) 38%, rgba(var(--brand-rgb), .05) 56%),
    linear-gradient(rgba(13, 38, 90, .07), rgba(13, 38, 90, .07)),
    linear-gradient(rgba(13, 38, 90, .055), rgba(13, 38, 90, .055)),
    linear-gradient(rgba(13, 38, 90, .055), rgba(13, 38, 90, .055)),
    linear-gradient(rgba(13, 38, 90, .045), rgba(13, 38, 90, .045));
  background-size: 240% 100%, 28% 24px, 58% 14px, calc(100% - 64px) 1px, calc(100% - 64px) 300px;
  background-position: 0 0, 32px 32px, 32px 72px, 32px 112px, 32px 144px;
  background-repeat: no-repeat;
  animation: viewSkeleton 1.25s ease-in-out infinite;
}
@keyframes viewSkeleton { to { background-position: -240% 0, 32px 32px, 32px 72px, 32px 112px, 32px 144px; } }

.banner-link {
  display: block; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(13, 38, 90, .1);
  transition: transform .15s var(--ease-out), box-shadow .15s ease;
}
.banner-link:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(13, 38, 90, .18); }
.banner-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.ad-banner {
  position: relative; height: 72px; box-sizing: border-box;
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  background:
    radial-gradient(620px 220px at 10% -20%, rgba(var(--brand-rgb), .5), transparent 62%),
    radial-gradient(520px 200px at 88% 120%, rgba(139, 60, 255, .42), transparent 60%),
    linear-gradient(120deg, #151233, #0B0F24 55%, #0A0E1E);
}
.ad-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(700px 160px at 50% 0%, rgba(0, 0, 0, .8), transparent 80%);
  -webkit-mask-image: radial-gradient(700px 160px at 50% 0%, rgba(0, 0, 0, .8), transparent 80%);
}
.ad-banner > * { position: relative; }
.ad-banner-badge {
  flex: none; height: 22px; padding: 0 11px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB020, #F0700C);
  color: #2A1600; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  display: flex; align-items: center;
}
.ad-banner-title { font-size: 18px; font-weight: 700; color: #ffffff; white-space: nowrap; }
.ad-banner-sub {
  font-size: 14px; color: rgba(200, 215, 240, .65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sidebar {
  flex: none; width: 248px; height: var(--rail-h); box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  border-radius: 18px; padding: 10px;
  position: sticky; top: 146px;
  max-height: calc(100vh - 162px); overflow-y: auto;
}
.sidebar-head { display: flex; align-items: center; gap: 9px; padding: 8px 10px 14px; }
.sidebar-bar {
  width: 14px; height: 4px; border-radius: 2px;
  background: linear-gradient(120deg, var(--brand-primary), #0E9FD8); flex: none;
}
.sidebar-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: rgba(20, 35, 60, .55); }
.sidebar-count { margin-left: auto; font-size: 12px; color: rgba(30, 50, 80, .35); }
.sidebar-list { display: flex; flex-direction: column; gap: 3px; }

.sidebar-skeleton { display: contents; }
.sidebar-skeleton-row {
  flex: none; height: 48px; padding: 0 12px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
}
.sidebar-skeleton-row > * {
  display: block; margin: 0; border-radius: 999px;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .07) 20%, rgba(var(--brand-rgb), .14) 38%, rgba(var(--brand-rgb), .07) 56%);
  background-size: 240% 100%;
  animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.sidebar-skeleton-row i { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.sidebar-skeleton-row b { width: 72px; height: 12px; }
.sidebar-skeleton-row em { margin-left: auto; width: 22px; height: 10px; }
.sidebar-skeleton-row:nth-child(3n + 2) b { width: 86px; }
.sidebar-skeleton-row:nth-child(3n) b { width: 62px; }
@keyframes surfaceSkeleton { to { background-position: -240% 0; } }

.cat-item {
  height: 48px; padding: 0 12px; border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  transition: background-color .2s ease, transform .2s var(--ease-out);
}
.cat-item:hover { background: rgba(var(--brand-rgb), .06); transform: translateX(2px); }
.cat-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--brand-rgb), .12); color: var(--brand-text);
}
.cat-ico svg { display: block; fill: currentColor; }
.cat-ico img { display: block; width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.cat-label {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #23324A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-num { font-size: 12px; color: rgba(30, 50, 80, .7); flex: none; }
.cat-arrow { flex: none; }

.cat-item.is-active {
  background: var(--brand-gradient);
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), 0.192), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cat-item.is-active:hover { transform: none; }
.cat-item.is-active .cat-ico { background: rgba(255, 255, 255, .22); color: #ffffff; }
.cat-item.is-active .cat-label { font-weight: 700; color: #ffffff; }
.cat-item.is-active .cat-num { color: rgba(255, 255, 255, .7); }

.promo-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.promo-grid.is-without-primary { grid-template-columns: 1fr; }
.promo-side { display: grid; align-self: stretch; align-content: space-between; gap: 0; }
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }

.promo-card {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  background: #ffffff; box-shadow: 0 8px 24px rgba(13, 38, 90, .07);
  transition: transform .15s var(--ease-out), box-shadow .15s ease;
}
.promo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(13, 38, 90, .18); }
.promo-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

.promo-main {
  aspect-ratio: 900 / 350; box-sizing: border-box;
  background:
    radial-gradient(460px 320px at 88% 14%, rgba(139, 92, 255, .55), transparent 66%),
    linear-gradient(125deg, var(--brand-action), var(--brand-primary) 46%, var(--brand-accent));
}
.pm-ring {
  position: absolute; right: -70px; bottom: -110px;
  width: 320px; height: 320px; border-radius: 50%;
  border: 44px solid rgba(255, 255, 255, .08);
}
.pm-logo {
  position: absolute; right: 38px; top: 56px;
  width: 168px; height: 168px; opacity: .2; display: block;
  filter: invert(1);
}
.pm-body {
  position: relative; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 38px 36px;
}
.pm-kicker {
  height: 24px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .92); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  display: flex; align-items: center;
}
.pm-title {
  margin-top: 22px; font-size: 37px; line-height: 45px; font-weight: 700; color: #ffffff;
  white-space: pre-line;
  text-shadow: 0 2px 14px rgba(9, 22, 60, .35);
}
.pm-sub { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.pm-foot { margin-top: auto; display: flex; align-items: center; gap: 18px; }
.pm-price { display: flex; align-items: baseline; gap: 3px; color: #ffffff; font-weight: 700; }
.pm-price i { font-style: normal; font-size: 16px; }
.pm-price { font-size: 33px; line-height: 37px; }
.pm-price u { text-decoration: none; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .75); }
.pm-cta {
  height: 36px; padding: 0 20px; border-radius: 18px;
  background: #ffffff; color: var(--brand-text); font-size: 14px; font-weight: 700;
  display: flex; align-items: center;
  box-shadow: 0 10px 24px rgba(9, 22, 60, .3);
}

.promo-mini {
  aspect-ratio: 450 / 170; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
}
.promo-side .promo-mini { height: auto; }
.promo-mini::before {
  content: ""; position: absolute; right: -26px; top: -28px;
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.pmini-body { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pmini-kicker { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .3); white-space: nowrap; }
.pmini-title { font-size: 20px; line-height: 25px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); white-space: nowrap; }
.pmini-price { display: flex; align-items: baseline; gap: 2px; color: #ffffff; font-size: 25px; line-height: 29px; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
.pmini-price i { font-style: normal; font-size: 14px; }
.pmini-price u { text-decoration: none; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); margin-left: 2px; }
.pmini-logo {
  position: relative; margin-left: auto; flex: none;
  width: 30px; height: 30px; object-fit: contain; display: block;
  background: #ffffff; padding: 13px; border-radius: 15px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}
.pmini-logo-svg { box-sizing: content-box; }
.promotion-artwork,.ad-banner>.promotion-artwork {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
.banner-link.has-artwork .ad-banner > :not(.promotion-artwork),
.promo-card.has-artwork > :not(.promotion-artwork) { visibility: hidden; }

.promo-netflix { background: linear-gradient(125deg, #3D060B, #8A0007 58%, #C00711); }
.promo-spotify { background: linear-gradient(125deg, #04340F, #07702F 58%, #12A544); }
.promo-itunes { background: linear-gradient(125deg, #0E2A5C, #21509E 58%, #3B7DD8); }
.promo-telegram { background: linear-gradient(125deg, #0A3A52, #1A82D4 58%, #2FBBEA); }
.promo-sim { background: linear-gradient(125deg, #45125E, #8B44F7 55%, #C43A24); }

.cat-head-sub { font-size: 14px; line-height: 19px; color: rgba(30, 50, 80, .7); }
.cat-head-sub b { font-weight: 700; color: #23324A; }

.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.prod-grid-fill { grid-auto-rows: calc((var(--rail-h) - 2 * 16px) / 3); }
.prod-grid-fill .fcard-top { flex: 1; }

.prod-grid-fill-more { grid-auto-rows: calc((var(--rail-h) - 54px - 2 * 16px) / 3); }

.sr-head { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px 18px; }
.sr-head h1 { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.sr-count { font-size: 14px; color: rgba(30, 50, 80, .7); }
.sr-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 18px; }
.sr-cat {
  height: 32px; padding: 0 13px; box-sizing: border-box;
  border-radius: 9px; border: 1px solid rgba(13, 38, 90, .12);
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; color: #23324A;
  transition: border-color .2s ease, color .2s ease;
}
.sr-cat:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); }
.sr-cat svg { flex: none; fill: currentColor; display: block; }
.sr-cat i { font-style: normal; font-size: 12px; color: rgba(30, 50, 80, .7); }
.sr-empty { padding: 56px 0 40px; text-align: center; }
.sr-empty p { margin: 0 0 7px; font-size: 17px; line-height: 22px; font-weight: 700; color: #0C1626; }
.sr-empty span { font-size: 14px; color: rgba(30, 50, 80, .7); }
.sr-empty .sr-cats { justify-content: center; padding: 22px 0 0; }

.more-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; margin-top: 16px;
  padding: 9px 0; border-radius: 11px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .07);
  box-shadow: 0 6px 18px rgba(13, 38, 90, .06);
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: rgba(30, 50, 80, .7); cursor: pointer;
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.more-btn:hover {
  color: var(--brand-text); border-color: rgba(var(--brand-rgb), .45);
  box-shadow: 0 18px 40px rgba(13, 38, 90, .13);
}
.more-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.prod-frame { flex: none; padding: 2px; border-radius: 17px; }
.prod-ico {
  width: 56px; height: 56px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
}
.prod-ico img { width: 32px; height: 32px; object-fit: contain; display: block; }
.prod-letter { font-size: 17px; font-weight: 700; color: var(--brand-text); }
.prod-tag {
  align-self: flex-start; max-width: 100%; box-sizing: border-box;
  border-radius: 5px; padding: 2px 7px;
  background: rgba(13, 38, 90, .05); border: 1px solid rgba(13, 38, 90, .06);
  color: rgba(30, 50, 80, .7); font-size: 12px; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.prod-seller { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prod-avatar {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 12px; font-weight: 700;
}
.prod-seller-name {
  min-width: 0; font-size: 13px; line-height: 17px; font-weight: 500;
  color: rgba(30, 50, 80, .7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-verify { flex: none; display: block; }

.prod-flag {
  box-sizing: border-box; border-radius: 5px; padding: 2px 7px;
  font-size: 12px; line-height: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.prod-flag svg { flex: none; display: block; }
.prod-flag-auto   { background: rgba(14, 125, 69, .09); border: 1px solid rgba(14, 125, 69, .18); color: #0E7D45; }
.prod-flag-manual { background: rgba(13, 38, 90, .05); border: 1px solid rgba(13, 38, 90, .06); color: rgba(30, 50, 80, .7); }
.price { display: flex; align-items: baseline; gap: 2px; }
.price-cur { font-size: 16px; font-weight: 700; color: var(--brand-ink); }
.price-num { font-size: 22px; line-height: 25px; font-weight: 700; color: #0C1626; }
.price-from { font-size: 13px; color: rgba(30, 50, 80, .7); margin-left: 2px; }
.page[data-view="partners"] {
  background:
    radial-gradient(1120px 560px at 50% 120px, rgba(var(--brand-rgb), .07), transparent 62%),
    var(--brand-soft);
}
.pa-ads { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 14px; align-items: stretch; }
.pa-col { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.pa-main { height: 208px; }

.pa-card {
  box-sizing: border-box; padding: 0 26px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
}
.pa-main::after {
  content: ''; position: absolute; right: -56px; bottom: -84px; z-index: 0;
  width: 200px; height: 200px; border-radius: 50%;
  border: 30px solid rgba(255, 255, 255, .08); pointer-events: none;
}
.pa-card .pm-kicker { position: relative; z-index: 1; }
.pad-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
.pad-title {
  position: relative; z-index: 1; font-size: 27px; line-height: 33px; font-weight: 700; color: #ffffff;
  text-shadow: 0 2px 14px rgba(9, 22, 60, .35);
}
.pad-sub { position: relative; z-index: 1; font-size: 14px; line-height: 18px; color: rgba(255, 255, 255, .78); }
.pad-cta {
  position: relative; z-index: 1; margin-top: 4px;
  height: 34px; padding: 0 15px; border-radius: 999px; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34);
  color: #ffffff; font-size: 14px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}
.pa-card:hover .pad-cta { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .5); }
.pa-sm { padding: 0 20px; gap: 7px; }
.pa-sm .pad-title { font-size: 18px; line-height: 23px; }
.pa-sm .pad-sub { font-size: 13px; line-height: 17px; }

.pa-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-top: 40px;
}
.pa-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.pa-sub { margin: 10px 0 0; font-size: 14px; color: rgba(30, 50, 80, .7); }
.pa-more {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--brand-text);
}
.pa-more:hover { color: var(--brand-hover); }

.pa-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 0; }
.pa-tab {
  height: 34px; padding: 0 16px; border-radius: 999px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1);
  color: #23324A; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center;
  transition: border-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.pa-tab:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); transform: translateY(-1px); }
.pa-tab.is-active {
  background: var(--brand-gradient); border-color: transparent;
  color: #ffffff; font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), 0.192), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.pa-tab.is-active:hover { transform: none; }


.pa-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pa-item {
  position: relative; overflow: hidden;
  box-sizing: border-box; min-height: 116px; padding: 20px 22px; border-radius: 16px;
  display: flex; align-items: center; gap: 16px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .07);
  box-shadow: 0 8px 24px rgba(13, 38, 90, .07);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.pa-item::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.pa-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-name { font-size: 16px; line-height: 20px; font-weight: 700; color: #0C1626; }
.pa-desc {
  font-size: 14px; line-height: 20px; max-height: 60px; overflow: hidden;
  color: rgba(30, 50, 80, .7); text-wrap: pretty;
}
.pa-logo {
  flex: none; width: 56px; height: 56px; border-radius: 15px; box-sizing: border-box;
  background: rgba(13, 38, 90, .04); border: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; justify-content: center;
}
.pa-logo img { width: 28px; height: 28px; object-fit: contain; display: block; }

.info-view .crumb,
.faq-view .crumb,
.guides-view .crumb,
.guide-view .crumb,
.info-lead,
.info-panel { margin-inline: auto; }
.info-view .crumb span,
.faq-view .crumb span,
.guide-view .crumb span { font-size: 14px; color: rgba(30, 50, 80, .7); }
.info-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.info-lead {
  margin-top: 12px; margin-bottom: 0;
  font-size: 15px; line-height: 1.75; color: rgba(20, 35, 60, .7); text-wrap: pretty;
}
.info-panel {
  margin-top: 18px; box-sizing: border-box; padding: 30px 34px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05); border-radius: 18px;
}
.info-sec + .info-sec { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(13, 38, 90, .07); }
.info-h { margin: 0 0 12px; font-size: 17px; line-height: 22px; font-weight: 700; color: #0C1626; }
.info-panel p, .info-panel li {
  font-size: 14px; line-height: 1.9; color: rgba(20, 35, 60, .8);
  text-wrap: pretty;
}
.info-panel p { margin: 0 0 14px; }
.info-panel ul { margin: 0; padding-left: 20px; }
.info-panel ol { margin: 0; padding-left: 22px; }
.info-panel ol li::marker { font-weight: 700; color: var(--brand-text); }
.info-panel li { margin-bottom: 4px; }
.info-panel li::marker { color: rgba(var(--brand-rgb), .45); }
.info-sec > :last-child { margin-bottom: 0; }

.info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-card {
  box-sizing: border-box; padding: 16px 18px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(13, 38, 90, .025); border: 1px solid rgba(13, 38, 90, .08);
}
.info-cards.is-solo { grid-template-columns: 1fr; }
.info-cards.is-solo .info-card { position: relative; padding-right: 88px; }
.info-cards.is-solo .info-card-go {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%); margin-top: 0;
}
.info-card.is-link { transition: transform .15s var(--ease-out), box-shadow .15s ease, border-color .2s ease; }
.info-card.is-link:hover {
  transform: translateY(-3px); border-color: rgba(var(--brand-rgb), .45);
  box-shadow: 0 16px 36px rgba(13, 38, 90, .1); background: #ffffff;
}
.info-card-name { font-size: 15px; line-height: 20px; font-weight: 700; color: #0C1626; }
.info-card-val { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--brand-text); word-break: break-all; }
.info-card-sub { font-size: 14px; line-height: 20px; color: rgba(30, 50, 80, .7); text-wrap: pretty; }
.info-card-go {
  margin-top: 3px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--brand-text);
}
.info-card-go svg { display: block; transition: transform .2s var(--ease-out); }
.info-card.is-link:hover .info-card-go svg { transform: translateX(3px); }

.info-qa { border-bottom: 1px solid rgba(13, 38, 90, .07); }
.info-qa:last-child { border-bottom: none; }
.info-q {
  padding: 13px 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626;
  transition: color .2s ease;
}
.info-q::-webkit-details-marker { display: none; }
.info-q:hover { color: var(--brand-text); }
.info-caret { margin-left: auto; flex: none; display: block; transition: transform .2s var(--ease-out); }
.info-qa[open] .info-caret { transform: rotate(180deg); }
.info-a { margin: 0 0 15px; padding-right: 24px; }
.info-qa::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .2s var(--ease-out), content-visibility .2s allow-discrete;
}
.info-qa[open]::details-content { block-size: calc-size(auto, size); }
@media (prefers-reduced-motion: reduce) {
  .info-qa::details-content { transition: none; }
}

.offers-view .crumb { padding-bottom: 4px; }
.off-head { display: flex; align-items: center; gap: 16px; padding: 6px 0 18px; }
.off-head h2 { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.off-head-meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.off-head .prod-letter { font-size: 22px; letter-spacing: .01em; }

.off-chips {
  margin: 16px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.off-chips[hidden] { display: none; }
.off-chips-label {
  font-size: 13px; font-weight: 700; color: rgba(30, 50, 80, .7);
}
.off-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(var(--brand-rgb), .08); border: 1px solid rgba(var(--brand-rgb), .25);
  color: var(--brand-text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.off-chip:hover { background: rgba(var(--brand-rgb), .14); border-color: rgba(var(--brand-rgb), .5); }
.off-chip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.off-chip svg { flex: none; display: block; opacity: .7; }
.off-chip-clear {
  height: 28px; padding: 0 4px; border: none; background: transparent;
  color: rgba(30, 50, 80, .7); font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.off-chip-clear:hover { color: var(--brand-text); }
.off-chip-clear:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.off-main { display: flex; gap: 16px; align-items: flex-start; }
.off-rail {
  flex: none; width: 248px; box-sizing: border-box;
  padding: 0 16px 0 0;
}
.off-sec + .off-sec { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(13, 38, 90, .07); }
.off-label {
  display: block; font-size: 14px; line-height: 20px; font-weight: 600;
  color: #0C1626;
}
.off-head-btn {
  width: 100%; padding: 0; border: none; background: transparent; cursor: pointer;
  font-family: inherit; display: flex; align-items: center; gap: 8px;
  color: #0C1626;
}
.off-head-btn:hover { color: var(--brand-text); }
.off-head-btn:hover .off-label { color: inherit; }
.off-caret { margin-left: auto; flex: none; display: block; transition: transform .2s var(--ease-out); }
.off-sec.is-shut .off-caret { transform: rotate(-90deg); }
.off-sec.is-shut .off-rows { grid-template-rows: 0fr; margin-top: 0; }
.off-sec.is-shut .off-rows-in { visibility: hidden; transition: visibility 0s .2s; }
.off-field {
  margin-top: 10px; height: 42px; box-sizing: border-box;
  background: rgba(13, 38, 90, .05);
  border: 1px solid rgba(13, 38, 90, .1);
  border-radius: 10px; padding: 0 11px;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.off-field:focus-within {
  border-color: rgba(var(--brand-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084);
  background: #ffffff;
}
.off-field svg { flex: none; display: block; }
.off-field input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14px; line-height: 18px; color: #0C1626;
}
.off-range { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.off-range .off-field { margin-top: 0; flex: 1; min-width: 0; padding: 0 10px; }
.off-range i { flex: none; font-style: normal; font-size: 13px; color: rgba(30, 50, 80, .35); }

.off-rows {
  margin-top: 8px; display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .2s var(--ease-out), margin-top .2s var(--ease-out);
}
.off-rows-in {
  min-height: 0; overflow: hidden; visibility: visible;
  padding: 6px; margin: -6px;
  display: flex; flex-direction: column; gap: 1px;
}
.off-row {
  width: calc(100% + 12px); margin: 0 -6px; height: 32px; padding: 0 6px;
  box-sizing: border-box;
  border: none; border-radius: 8px; background: transparent; font-family: inherit;
  color: #23324A; font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background-color .2s ease;
}
.off-row:hover { background: rgba(var(--brand-rgb), .06); }
.off-row .co-check { pointer-events: none; }
.off-row-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.off-row i { margin-left: auto; font-style: normal; font-size: 13px; color: rgba(30, 50, 80, .7); }
.off-reset {
  margin-top: 18px; width: 100%; height: 40px; box-sizing: border-box;
  border: 1px solid rgba(13, 38, 90, .14); border-radius: 10px; background: #ffffff;
  font-family: inherit; color: #23324A; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.off-reset:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); }

.off-list-wrap { flex: 1; min-width: 0; }
.off-toolbar {
  margin-left: auto; align-self: flex-start; margin-top: 2px;
  flex: none; display: flex; align-items: center; gap: 12px;
}
.off-count { font-size: 14px; color: rgba(30, 50, 80, .7); text-align: right; }
.off-sort { position: relative; flex: none; display: flex; align-items: center; }
.off-sort select {
  appearance: none; -webkit-appearance: none;
  height: 34px; padding: 0 30px 0 12px; border-radius: 10px; box-sizing: border-box;
  border: 1px solid rgba(13, 38, 90, .14); background: #ffffff;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #23324A; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.off-sort select:hover { border-color: rgba(var(--brand-rgb), .55); }
.off-sort select:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.off-sort .sel-caret { right: 11px; }

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer-card {
  display: flex; flex-direction: column; box-sizing: border-box; padding: 18px;
  border-radius: 16px; background: #ffffff;
  border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  transition: transform .15s var(--ease-out), border-color .15s ease, box-shadow .15s ease;
}
.offer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--brand-rgb), .45);
  box-shadow: 0 18px 40px rgba(13, 38, 90, .13);
}
.offer-card-main { flex: 1; display: flex; flex-direction: column; color: inherit; }
.offer-card-main:hover { color: inherit; }
.offer-card-main:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.offer-add { width: 100%; margin-top: 12px; justify-content: center; }
.offer-head { display: flex; align-items: flex-start; gap: 12px; }
.offer-head-txt { flex: 1; min-width: 0; }
.offer-thumb {
  flex: none; width: 62px; height: 62px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
}
.offer-thumb img { width: 34px; height: 34px; object-fit: contain; display: block; }
.offer-letter { font-size: 18px; font-weight: 700; color: var(--brand-text); }
.offer-spec {
  display: block; font-size: 14px; line-height: 19px; font-weight: 700; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.offer-title {
  display: -webkit-box; margin-top: 5px; min-height: 36px;
  font-size: 13px; line-height: 18px; font-weight: 500; color: rgba(30, 50, 80, .7);
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: pretty;
}
.offer-seller { margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.offer-like {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--brand-text); white-space: nowrap;
}
.offer-like svg { flex: none; display: block; }
.offer-like i { font-style: normal; font-weight: 500; color: rgba(30, 50, 80, .7); }
.offer-like-new { color: rgba(30, 50, 80, .7); font-weight: 600; }
.offer-meta {
  margin-left: auto;
  font-size: 12px; line-height: 15px; color: rgba(30, 50, 80, .7); white-space: nowrap;
}
.offer-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center;
}
.off-empty { grid-column: 1 / -1; padding: 56px 0; text-align: center; font-size: 14px; color: rgba(30, 50, 80, .7); }
.off-empty button {
  border: none; background: none; padding: 0; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--brand-text); cursor: pointer;
}
.off-empty button:hover { color: var(--brand-hover); }

.hot {
  position: relative; margin-top: 76px; overflow: hidden;
  border-radius: 24px;
  box-shadow:
    0 0 64px rgba(24, 22, 62, .22),
    0 28px 64px -16px rgba(24, 22, 62, .42),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  background:
    radial-gradient(1000px 560px at 10% -10%, rgba(var(--brand-rgb), .38), transparent 60%),
    radial-gradient(820px 520px at 92% 8%, rgba(139, 60, 255, .32), transparent 58%),
    radial-gradient(900px 600px at 82% 105%, rgba(244, 63, 94, .28), transparent 60%),
    radial-gradient(700px 460px at 6% 100%, rgba(14, 159, 216, .22), transparent 58%),
    linear-gradient(165deg, #151233 0%, #0B0F24 48%, #0A0E1E 100%);
}
.hot-grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 500px at 50% 0%, rgba(0, 0, 0, .85), transparent 78%);
  -webkit-mask-image: radial-gradient(900px 500px at 50% 0%, rgba(0, 0, 0, .85), transparent 78%);
}
.hot-orb { position: absolute; border-radius: 50%; filter: blur(10px); }
.hot-orb-blue {
  left: -120px; top: -160px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(90, 120, 255, .35), transparent 70%);
}
.hot-orb-red {
  right: -140px; bottom: -180px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(244, 63, 94, .28), transparent 70%);
}
.hot-inner { position: relative; padding: 56px 36px 62px; }
.hot-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.hot-title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: #ffffff; }
.hot-sub { margin-top: 9px; font-size: 14px; color: rgba(200, 215, 240, .58); }
.hot-tabs { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hot-tabs-skeleton { display: flex; align-items: center; gap: 7px; }
.hot-tabs-skeleton i {
  display: block; width: 82px; height: 32px; border-radius: 999px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .07) 20%, rgba(255, 255, 255, .16) 38%, rgba(255, 255, 255, .07) 56%);
  background-size: 240% 100%; animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.hot-tab {
  height: 32px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(206, 222, 248, .78); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.hot-tab:hover { border-color: rgba(255, 255, 255, .45); color: #ffffff; background: rgba(255, 255, 255, .12); }
.hot-tab.is-active {
  background: #ffffff; border: none; color: #0B0F1A; font-weight: 700;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.hot-tab.is-active:hover { color: #0B0F1A; }
.hot a:focus-visible { outline-color: var(--brand-primary); outline-offset: 3px; }

.hot-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; min-height: 384px; }
.hot-cards-skeleton { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hot-cards-skeleton i {
  display: block; height: 184px; border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .07) 20%, rgba(255, 255, 255, .17) 38%, rgba(255, 255, 255, .07) 56%);
  background-size: 240% 100%; animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.hot-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #ffffff; box-shadow: 0 16px 36px rgba(10, 8, 40, .42);
  transition: transform .15s var(--ease-out), box-shadow .15s ease;
}
.hot-card:hover { transform: translateY(-3px); box-shadow: 0 26px 54px rgba(10, 8, 40, .58); }
.hcard-top {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 20px 18px; min-height: 134px; box-sizing: border-box;
}
.hcard-top::before {
  content: ""; position: absolute; right: -22px; top: -24px;
  width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.hcard-rank {
  position: absolute; right: 14px; top: 14px; height: 20px; padding: 0 8px;
  border-radius: 999px; background: rgba(0, 0, 0, .28);
  color: rgba(255, 255, 255, .92); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  display: flex; align-items: center;
}
.hcard-ico {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
}
.hcard-ico img { width: 34px; height: 34px; object-fit: contain; display: block; }
.hcard-letter { font-size: 17px; font-weight: 700; color: var(--brand-text); }
.hcard-meta { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hcard-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 16px; line-height: 20px; max-height: 40px; overflow: hidden;
  font-weight: 700; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); text-wrap: pretty;
}
.hcard-tag {
  align-self: flex-start; max-width: 100%; box-sizing: border-box;
  border-radius: 5px; padding: 2px 8px;
  background: rgba(0, 0, 0, .26); color: rgba(255, 255, 255, .9);
  font-size: 12px; line-height: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hcard-foot { padding: 13px 18px; display: flex; align-items: center; background: #ffffff; }
.hcard-foot .prod-flag { margin-left: 10px; }
.hcard-sold { margin-left: auto; font-size: 12px; color: rgba(30, 50, 80, .7); white-space: nowrap; }

.feat-sec { padding-top: 76px; }
.feat-head { display: flex; align-items: baseline; gap: 16px; }
.feat-title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: #0C1626; }
.feat-n { font-size: 14px; color: rgba(30, 50, 80, .7); }
.feat-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--brand-text);
}
.feat-more:hover { color: var(--brand-hover); }
.feat-rule {
  height: 1px; margin-top: 18px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb), .3), rgba(13, 38, 90, .06) 40%, transparent);
}
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.featured-skeleton section { padding-top: 76px; }
.featured-skeleton-head { height: 36px; display: flex; align-items: center; justify-content: space-between; }
.featured-skeleton-head i,
.featured-skeleton-head b,
.featured-skeleton > section > em,
.featured-skeleton-grid i {
  display: block; margin: 0;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .055) 20%, rgba(var(--brand-rgb), .13) 38%, rgba(var(--brand-rgb), .055) 56%);
  background-size: 240% 100%; animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.featured-skeleton-head i { width: 132px; height: 26px; border-radius: 999px; }
.featured-skeleton-head b { width: 86px; height: 13px; border-radius: 999px; }
.featured-skeleton > section > em { height: 1px; margin-top: 18px; }
.featured-skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.featured-skeleton-grid i { height: 163px; border-radius: 14px; }
.feat-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .07);
  box-shadow: 0 8px 24px rgba(13, 38, 90, .07);
  transition: transform .15s var(--ease-out), box-shadow .15s ease;
}
.feat-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(13, 38, 90, .16); }
.feat-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.fcard-top {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 20px 18px; min-height: 112px; box-sizing: border-box;
}
.fcard-top::before {
  content: ""; position: absolute; right: -22px; top: -24px;
  width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.fcard-ico {
  position: relative; flex: none; width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
.fcard-ico img { width: 33px; height: 33px; object-fit: contain; display: block; }
.fcard-letter { font-size: 17px; font-weight: 700; color: var(--brand-text); }
.fcard-meta { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.fcard-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 16px; line-height: 20px; max-height: 40px; overflow: hidden;
  font-weight: 700; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, .32); text-wrap: pretty;
}
.fcard-tag {
  align-self: flex-start; max-width: 100%; box-sizing: border-box;
  border-radius: 5px; padding: 2px 8px;
  background: rgba(0, 0, 0, .26); color: rgba(255, 255, 255, .9);
  font-size: 11px; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fcard-foot { padding: 12px 18px; display: flex; align-items: center; background: #ffffff; }
.fcard-foot .prod-flag { margin-left: auto; }

.crumb { display: flex; align-items: baseline; gap: 8px; padding: 0 0 12px; }
.crumb + .sl-hero,
.crumb + .info-lead,
.crumb + .solo-empty,
.crumb + .sl-sec { margin-top: 0; }
.crumb + .slw-wrap > .slw-head { margin-top: 0; }
.crumb a { font-size: 14px; color: rgba(30, 50, 80, .7); transition: color .2s ease; }
.crumb a:hover { color: var(--brand-text); }
.crumb i { font-style: normal; font-size: 14px; color: rgba(30, 50, 80, .35); }
.crumb b { font-size: 14px; font-weight: 500; color: #23324A; }
.product-crumb { min-width: 0; align-items: center; }
.product-crumb > a, .product-crumb > i, .product-crumb > b { font-size: 12px; }
.product-crumb > a, .product-crumb > i { flex: 0 0 auto; white-space: nowrap; }
.product-crumb > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #61728e; font-weight: 400; }
.product-crumb > a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 2px; }
.crumb .crumb-name {
  display: inline-block; max-width: 260px; vertical-align: bottom;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumb-back {
  margin: -4px 0 -4px auto; align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(var(--brand-rgb), .09); color: var(--brand-text);
  font-size: 13px; font-weight: 600;
  transition: background-color .2s var(--ease-out);
}
.crumb-back svg { transform: scaleX(-1); }
.crumb-back:hover { background: rgba(var(--brand-rgb), .17); color: var(--brand-text); }
.pdp-context-back {
  display: inline-flex; align-items: center; margin: 0 0 12px; padding: 7px 11px;
  border: 1px solid rgba(var(--brand-rgb), .28); border-radius: 9px;
  background: rgba(var(--brand-rgb), .08); color: var(--brand-text);
  font-size: 13px; line-height: 18px; font-weight: 700; text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.pdp-context-back:hover { background: rgba(var(--brand-rgb), .15); border-color: rgba(var(--brand-rgb), .45); }

.pdp-main { display: flex; gap: 16px; align-items: flex-start; }
.pdp-left { flex: 1; min-width: 0; }
.pdp-rail { flex: none; width: 380px; position: sticky; top: 146px; }

.pdp-hero {
  position: relative; overflow: hidden; box-sizing: border-box;
  min-height: 240px; border-radius: 18px; padding: 34px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: 0 10px 28px rgba(13, 38, 90, .1);
}
.pdp-hero::before {
  content: ""; position: absolute; right: -60px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}
.pdp-hero > * { position: relative; }
.pdp-ico {
  flex: none; width: 96px; height: 96px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}
.pdp-ico img { width: 51px; height: 51px; object-fit: contain; display: block; }
.pdp-letter { font-size: 26px; font-weight: 700; color: var(--brand-text); }

.pdp-id { min-width: 0; display: flex; flex-direction: column; }
.pdp-title {
  margin: 0; font-size: 28px; line-height: 34px; max-height: 68px; overflow: hidden;
  font-weight: 700; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); text-wrap: pretty;
}
.pdp-flags { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdp-badge {
  flex: none; height: 24px; padding: 0 12px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB020, #F0700C);
  color: #2A1600; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  display: flex; align-items: center;
}
.pdp-flag {
  flex: none; max-width: 100%; box-sizing: border-box;
  height: 24px; padding: 0 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .9); font-size: 12px; line-height: 17px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pdp-stats { margin-top: 14px; display: flex; align-items: center; gap: 18px; }
.pdp-stat { font-size: 13px; color: rgba(30, 50, 80, .7); white-space: nowrap; }
.pdp-stat b { font-size: 14px; font-weight: 700; color: #23324A; }

.pdp-seller {
  margin-top: 14px; box-sizing: border-box; min-height: 76px; padding: 18px 20px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05); border-radius: 16px;
  display: flex; align-items: center; gap: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pdp-seller:hover { border-color: rgba(var(--brand-rgb), .35); box-shadow: 0 16px 36px rgba(13, 38, 90, .1); }
.pdp-shop { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pdp-shop-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #0C1626; }
.pdp-shop-name svg { flex: none; display: block; }
.pdp-shop-sub { font-size: 13px; color: rgba(30, 50, 80, .7); white-space: nowrap; }
.pdp-seller .pdp-rate { margin-left: auto; }
.pdp-seller .head-btn { flex: none; }

.pdp-aff {
  margin-top: 14px; box-sizing: border-box; padding: 16px 20px;
  background: var(--brand-soft); border: 1px solid rgba(var(--brand-rgb), .22); border-radius: 16px;
}
.pdp-aff-head { display: flex; align-items: center; gap: 10px; }
.pdp-aff-eye {
  flex: none; padding: 3px 8px; border-radius: 7px;
  background: rgba(var(--brand-rgb), .12); color: var(--brand-text);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.pdp-aff-head b {
  min-width: 0; font-size: 14px; font-weight: 700; color: #0C1626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-aff-more { flex: none; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--brand-text); }
.pdp-aff-link { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.pdp-aff-link input {
  flex: 1; min-width: 0; box-sizing: border-box; height: 40px; padding: 0 12px;
  background: #ffffff; border: 1px solid rgba(var(--brand-rgb), .22); border-radius: 10px;
  font-family: inherit; font-size: 12px; color: rgba(30, 50, 80, .8); text-overflow: ellipsis;
}
.pdp-aff-link input:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.pdp-aff-copy {
  flex: none; height: 40px; padding: 0 16px; cursor: pointer; white-space: nowrap;
  background: var(--brand-gradient); border: 1px solid var(--brand-primary); border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #ffffff;
  transition: background .2s ease, border-color .2s ease;
}
.pdp-aff-copy:hover { background: var(--brand-gradient-hover); border-color: var(--brand-hover); }

.pdp-rate { display: inline-flex; align-items: center; gap: 7px; }
.pdp-stars { position: relative; flex: none; display: inline-flex; gap: 3px; }
.pdp-stars svg { flex: none; display: block; }
.pdp-stars-on {
  position: absolute; left: 0; top: 0; overflow: hidden;
  display: flex; gap: 3px; white-space: nowrap;
}
.pdp-rate b { font-size: 14px; font-weight: 700; color: #0C1626; }

.tp-faces { margin-top: 26px; }
.tp-head { display: flex; align-items: baseline; gap: 12px; }
.tp-title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: #0C1626; }
.tp-sub { font-size: 13px; color: rgba(30, 50, 80, .7); }

.tp-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tp-card {
  position: relative; box-sizing: border-box; padding: 10px 10px 12px; cursor: pointer;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
}
.tp-card:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb), .4); box-shadow: 0 14px 30px rgba(13, 38, 90, .1); }
.tp-card.is-active { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary), 0 14px 30px rgba(var(--brand-rgb), 0.096); }
.tp-off {
  position: absolute; top: 0; left: 0; z-index: 1;
  padding: 3px 8px; border-radius: 16px 0 10px 0;
  background: #0E7D45; color: #ffffff; font-size: 12px; line-height: 16px; font-weight: 700;
}
.tp-cover {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 11px; margin-bottom: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.tp-cover-kind { font-size: 9px; font-weight: 700; letter-spacing: .18em; opacity: .8; }
.tp-cover-num { font-size: 26px; line-height: 30px; font-weight: 700; }
.tp-cover-unit { font-size: 10px; font-weight: 600; opacity: .85; }
.tp-card.is-custom .tp-cover-num {
  font-size: 17px; line-height: 22px; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; max-height: 44px; padding: 0 6px;
}
.tp-card.is-custom .tp-price { margin-top: 20px; }
.tp-name { font-size: 13px; line-height: 18px; color: rgba(30, 50, 80, .7); }
.tp-price { font-size: 17px; line-height: 22px; font-weight: 700; color: #E2342E; }
.tp-was { font-size: 12px; color: rgba(30, 50, 80, .7); text-decoration: line-through; }


.tp-uid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; margin-bottom: 0; }
.tp-uid-in {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14); border-radius: 10px;
  font-size: 14px; color: #0C1626; outline: none;
}
.tp-uid-in:focus { border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084); }
.tp-uid-in.is-bad { border-color: rgba(192, 38, 31, .7); box-shadow: 0 0 0 3px rgba(192, 38, 31, .12); }
.buy-was { font-size: 14px; color: rgba(30, 50, 80, .7); text-decoration: line-through; margin-left: 8px; }

.pdp-tabs { margin-top: 24px; display: flex; align-items: center; gap: 6px; }
.pdp-tab {
  height: 38px; padding: 0 16px; border-radius: 10px; box-sizing: border-box;
  background: transparent; border: 1px solid transparent; font-family: inherit;
  color: rgba(30, 50, 80, .75); font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pdp-tab:hover { background: rgba(13, 38, 90, .06); color: #0C1626; }
.pdp-tab.is-active {
  background: rgba(var(--brand-rgb), .09); border-color: rgba(var(--brand-rgb), .35);
  color: var(--brand-text); font-weight: 700;
}
.pdp-tab.is-active:hover { background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .6); }

.pdp-panel {
  margin-top: 14px; box-sizing: border-box; padding: 28px 30px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05); border-radius: 18px;
}
.pdp-panel h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #0C1626; }
.pdp-panel p, .pdp-panel li {
  font-size: 14px; line-height: 1.85; color: rgba(20, 35, 60, .8);
  text-wrap: pretty; max-width: 760px;
}
.pdp-panel p { margin: 0 0 16px; }
.pdp-panel ul, .pdp-panel ol { margin: 0; padding-left: 20px; }
.pdp-panel > :last-child { margin-bottom: 0; }
.pdp-panel section + section { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(13, 38, 90, .07); }

.pdp-detail { position: relative; }
.pdp-detail.is-clip:not(.is-open) .pdp-detail-in { max-height: 340px; overflow: hidden; }
.pdp-detail.is-clip:not(.is-open)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 34px; height: 54px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}
.pdp-detail-more {
  display: inline-flex; align-items: center; margin: 6px 0 16px; padding: 6px 12px;
  border: 1px solid rgba(var(--brand-rgb), .28); border-radius: 9px;
  background: rgba(var(--brand-rgb), .07); color: var(--brand-text);
  font-size: 13px; font-weight: 600; line-height: 18px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pdp-detail-more:hover { background: rgba(var(--brand-rgb), .12); border-color: rgba(var(--brand-rgb), .4); }
.pdp-detail-more[hidden] { display: none; }

.tp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; max-width: 760px; }
.tp-fact h4 {
  margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #0C1626;
}
.tp-fact ul { padding-left: 18px; }
.tp-fact li { font-size: 14px; line-height: 1.7; }

.pdp-terms {
  margin-top: 14px; box-sizing: border-box; padding: 20px 30px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
}
.pdp-terms h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #0C1626; }
.pdp-terms p {
  margin: 0; font-size: 14px; line-height: 1.85; color: rgba(20, 35, 60, .75);
  text-wrap: pretty; max-width: 760px;
}
.pdp-terms a { color: var(--brand-text); font-weight: 600; }
.pdp-terms a:hover { text-decoration: underline; }

.pdp-buy {
  box-sizing: border-box; padding: 20px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 8px 24px rgba(13, 38, 90, .07); border-radius: 18px;
}
.buy-head { display: flex; align-items: center; gap: 12px; }
.buy-kind { font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }

.buy-price { margin-top: 10px; }
.buy-price .price-cur { font-size: 26px; }
.buy-price .price-num { font-size: 36px; line-height: 40px; }
.buy-unit { font-size: 14px; font-weight: 500; color: rgba(30, 50, 80, .7); margin-left: 3px; }

.buy-meta { margin-top: 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.buy-meta .prod-tag b { font-weight: 700; color: #23324A; }
.buy-rule { height: 1px; margin: 14px 0; background: rgba(13, 38, 90, .07); }

.buy-group + .buy-group { margin-top: 16px; }
.buy-label { font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }
.buy-opts { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.buy-opt {
  height: 32px; padding: 0 12px; border-radius: 10px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14); font-family: inherit;
  color: #23324A; font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.buy-opt:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); }
.buy-opt.is-active {
  background: rgba(var(--brand-rgb), .09); border-color: rgba(var(--brand-rgb), .35);
  color: var(--brand-text); font-weight: 700;
}
.buy-opt.is-active:hover { background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .6); }
.buy-opt[data-soft] { color: rgba(30, 50, 80, .7); border-color: rgba(13, 38, 90, .07); }
.buy-opt-warr { gap: 5px; }
.buy-opt-warr i { font-style: normal; font-size: 12px; opacity: .62; }
.buy-opt-warr.is-active i { opacity: .78; font-weight: 500; }

.buy-qty { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; }
.buy-range { flex-basis: 100%; margin-top: 5px; font-size: 13px; color: rgba(30, 50, 80, .7); }
.buy-stepper {
  margin-left: auto; flex: none; height: 38px; box-sizing: border-box; overflow: hidden;
  border: 1px solid rgba(13, 38, 90, .14); border-radius: 10px;
  display: flex; align-items: center;
}
.buy-step {
  flex: none; width: 36px; height: 36px; padding: 0; font-family: inherit;
  background: transparent; border: none; cursor: pointer;
  color: #23324A; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.buy-step:hover { background: rgba(var(--brand-rgb), .06); color: var(--brand-text); }
.buy-step[disabled], .buy-step[disabled]:hover { background: transparent; color: rgba(30, 50, 80, .55); cursor: not-allowed; }
.buy-num {
  flex: none; width: 66px; height: 36px; box-sizing: border-box;
  border-inline: 1px solid rgba(13, 38, 90, .1);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #0C1626;
}

.buy-total {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: baseline;
}
.buy-total-label { font-size: 14px; color: rgba(30, 50, 80, .7); }
.buy-total .price { margin-left: auto; }

.buy-cta {
  width: 100%; height: 50px; box-sizing: border-box; padding: 0;
  border: none; border-radius: 12px; font-family: inherit;
  background: var(--brand-gradient);
  color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.156), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.buy-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--brand-rgb), 0.204), inset 0 1px 0 rgba(255, 255, 255, .25); }
.buy-cta svg { flex: none; display: block; }

.pdp-rev {
  box-sizing: border-box; margin-top: 14px; padding: 18px 22px 20px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 8px 24px rgba(13, 38, 90, .07); border-radius: 18px;
}
.pdp-rev-head { display: flex; align-items: baseline; gap: 8px; }
.pdp-rev-head .pdp-stars { margin-left: auto; align-self: center; }
.pdp-rev-score { font-size: 15px; font-weight: 700; color: var(--brand-text); }
.pdp-rev-count { font-size: 13px; color: rgba(30, 50, 80, .7); }
.pdp-rev-none { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: rgba(30, 50, 80, .7); }
.pdp-rev-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(13, 38, 90, .07); }
.pdp-rev-top { display: flex; align-items: center; gap: 9px; }
.pdp-rev-top .review-avatar { width: 26px; height: 26px; font-size: 12px; }
.pdp-rev-name {
  min-width: 0; font-size: 13px; font-weight: 700; color: #0C1626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-rev-text {
  margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: rgba(20, 35, 60, .72);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.page[data-view="checkout"],
.page[data-view="pay"] {
  background:
    radial-gradient(920px 540px at 50% 130px, rgba(var(--brand-rgb), .07), transparent 62%),
    var(--brand-soft);
}

.co-wrap { width: 100%; margin-inline: auto; }
.co-cols { display: flex; gap: 16px; align-items: flex-start; }
.co-main { flex: 1; min-width: 0; }
.co-side { width: 380px; flex: none; position: sticky; top: 146px; }
.page[data-view="checkout"] .co-side { top: 92px; }

.co-head { display: flex; align-items: baseline; gap: 16px; padding: 0 0 24px; }
.co-head h1 { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.co-back { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--brand-text); }
.co-back:hover { color: var(--brand-hover); }

.co-panel {
  box-sizing: border-box; padding: 28px 30px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05); border-radius: 18px;
}
.co-sec + .co-sec {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid rgba(13, 38, 90, .07);
}

.tu-card + .tu-card { margin-top: 16px; }
.tu-head { padding-block: 22px; }
.tu-title { margin: 0 0 4px; font-size: 24px; line-height: 32px; font-weight: 700; color: #0C1626; }
.tu-amts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tu-amt {
  height: 52px; box-sizing: border-box; padding: 0 6px; cursor: pointer;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14); border-radius: 12px;
  font-size: 16px; font-weight: 700; color: #23324A;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.tu-amt:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); transform: translateY(-2px); }
.tu-amt.is-active {
  background: rgba(var(--brand-rgb), .09); border-color: var(--brand-primary); color: var(--brand-text);
}
.tu-custom { display: block; margin-top: 16px; }
.tu-custom-lab {
  display: block; margin-bottom: 8px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626;
}
.tu-min { margin-left: 8px; font-size: 13px; font-weight: 500; font-style: normal; color: rgba(30, 50, 80, .6); }
.tu-min.is-bad { font-weight: 600; color: #C0261F; }
.co-pay.is-bal, [data-paygrp="topup"] .co-pay {
  height: auto; padding: 6px 12px;
  flex-wrap: wrap; align-content: center; row-gap: 2px;
}
.co-pay-fee, .co-pay-bal {
  flex-basis: 100%; margin-left: 42px;
  font-size: 12px; line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.co-pay-fee { color: rgba(30, 50, 80, .68); }
.tu-fee-note { margin: 6px 0 0; }
.tu-field { gap: 6px; }
.tu-cur { flex: none; font-size: 14px; font-weight: 700; font-style: normal; color: rgba(30, 50, 80, .6); }
.tu-field input { font-variant-numeric: tabular-nums; }
.tu-echo {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: rgba(var(--brand-rgb), .07); border: 1px solid rgba(var(--brand-rgb), .18);
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 20px; color: rgba(30, 50, 80, .7);
  opacity: .55; transition: opacity .2s ease;
}
.tu-echo.is-on { opacity: 1; }
.tu-echo svg { flex: none; display: block; color: var(--brand-text); }
.tu-echo b { font-size: 16px; font-weight: 700; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.co-pay-bal { font-weight: 600; color: rgba(30, 50, 80, .72); }
.co-label {
  display: block; font-size: 14px; line-height: 20px; font-weight: 600;
  color: #0C1626;
}
.co-body { margin-top: 9px; }
.co-meta { font-size: 13px; line-height: 17px; color: rgba(30, 50, 80, .7); }
.ord-warr { font-weight: 600; color: #23324A; }

.co-item {
  padding: 16px; border-radius: 12px;
  background: rgba(13, 38, 90, .05);
  display: flex; align-items: center; gap: 16px;
}
.co-item .prod-frame { flex: none; }
.co-item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.co-item-name {
  font-size: 16px; font-weight: 700; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-item-qty { flex: none; font-size: 14px; font-weight: 700; color: rgba(30, 50, 80, .6); }

.co-item-flags { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.co-item-flags .prod-flag { flex: none; }
.prod-flag-shop { background: rgba(var(--brand-rgb), .08); border: 1px solid rgba(var(--brand-rgb), .16); color: var(--brand-text); }
.prod-flag-shop .prod-verify { margin-left: 1px; }

.co-field {
  width: 100%; height: 44px; box-sizing: border-box;
  background: rgba(13, 38, 90, .05);
  border: 1px solid rgba(13, 38, 90, .1);
  border-radius: 12px; padding: 0 14px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.co-field:focus-within {
  border-color: rgba(var(--brand-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084);
  background: #ffffff;
}
.co-field svg { flex: none; display: block; }
.co-field input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14px; line-height: 18px; color: #0C1626;
}
.co-hint { margin-top: 5px; }
.co-uid + .co-uid { margin-top: 14px; }
.co-uid-for {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: rgba(20, 35, 60, .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.co-pays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-rows: 1fr; }
.co-pay {
  min-height: 44px; padding: 0 12px; border-radius: 12px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14);
  color: #23324A; font-size: 14px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.co-pay:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); }
.co-pays .co-pay:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.co-pay.is-active {
  background: rgba(var(--brand-rgb), .09); border-color: rgba(var(--brand-rgb), .35);
  color: var(--brand-text); font-weight: 700;
}
.co-pay.is-active:hover { background: rgba(var(--brand-rgb), .16); border-color: rgba(var(--brand-rgb), .6); }
.co-pay-logo {
  flex: none; width: 30px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.co-pay-logo img {
  --po: 15.5px;
  max-width: 30px; width: auto; height: calc(var(--po) * var(--pk, 1));
  object-fit: contain; display: block; opacity: .85;
  transition: opacity .2s ease;
}
.co-pay-logo svg { display: block; opacity: .75; transition: opacity .2s ease; }
.co-pay:hover .co-pay-logo img, .co-pay.is-active .co-pay-logo img,
.co-pay:hover .co-pay-logo svg, .co-pay.is-active .co-pay-logo svg { opacity: 1; }
.pay-chosen .co-pay-logo svg { opacity: 1; }
.co-pay-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pay-chosen { display: flex; align-items: center; gap: 12px; }
.pay-chosen b { font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }
.pay-chosen .co-pay-logo img { opacity: 1; }
.pay-chosen-bal {
  font-size: 13px; line-height: 17px; color: rgba(30, 50, 80, .7);
  font-variant-numeric: tabular-nums;
}

.co-agree { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.co-check {
  flex: none; width: 18px; height: 18px; padding: 0; box-sizing: border-box;
  border: 1px solid rgba(13, 38, 90, .24); border-radius: 5px;
  background: #ffffff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.co-check:hover { border-color: rgba(var(--brand-rgb), .55); }
.co-check svg {
  display: block; opacity: 0; transform: scale(.6);
  transition: opacity .14s var(--ease-out), transform .14s var(--ease-out);
}
.co-check.is-on {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-action)); border-color: transparent;
}
.co-check.is-on svg { opacity: 1; transform: none; }
.co-agree .co-meta { min-width: 0; }
.co-agree a { font-weight: 600; }

.co-sum {
  box-sizing: border-box; padding: 22px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 8px 24px rgba(13, 38, 90, .07); border-radius: 18px;
}
.co-sum-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.co-sum-row { display: flex; align-items: baseline; gap: 12px; font-size: 14px; line-height: 19px; }
.co-sum-row[hidden] { display: none; }
.co-sum-row span { color: rgba(30, 50, 80, .6); }
.co-sum-row b { margin-left: auto; font-weight: 600; color: #23324A; }
.co-sum-row b.is-free { color: #0E7D45; }

.co-sum-total {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: baseline; gap: 12px;
}
.co-sum-total .price { margin-left: auto; }
.co-sum-total .price-cur { font-size: 24px; }
.co-sum-total .price-num { font-size: 34px; line-height: 38px; }

.co-todo {
  margin-top: 10px; font-size: 13px; line-height: 17px;
  color: #C2410C; text-align: center;
}
.co-safe {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; flex-direction: column; gap: 8px;
}
.co-safe span {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; line-height: 17px; color: rgba(30, 50, 80, .7);
}
.co-safe svg { flex: none; display: block; }

.co-cta {
  margin-top: 16px; width: 100%; height: 50px; box-sizing: border-box;
  border: none; border-radius: 12px;
  background: var(--brand-gradient);
  color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 12px 30px rgba(var(--brand-rgb), 0.24), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s var(--ease-out), box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.co-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(var(--brand-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.co-cta svg { flex: none; display: block; }
.co-cta[disabled] {
  background: rgba(13, 38, 90, .06); color: rgba(30, 50, 80, .55);
  box-shadow: none; cursor: not-allowed;
}
.co-cta[disabled]:hover { transform: none; box-shadow: none; }
.co-cta[disabled] svg { display: none; }

.pay-wrap { width: 100%; margin-inline: auto; }
.pay-due { display: flex; align-items: baseline; gap: 12px; }
.pay-due .price-cur { font-size: 29px; }
.pay-due .price-num { font-size: 40px; line-height: 44px; }
.pay-left {
  margin-left: auto; flex: none; padding: 4px 10px; border-radius: 7px;
  background: rgba(194, 65, 12, .08); color: #C2410C;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pay-no {
  margin-top: 12px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 17px; color: rgba(30, 50, 80, .7);
}
.pay-no b { font-weight: 700; color: #0C1626; letter-spacing: .04em; }
.co-back-btn {
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; line-height: 20px;
}

.reviews-band {
  position: relative; overflow: hidden;
  background: radial-gradient(760px 420px at 50% 0%, rgba(139, 92, 255, .07), transparent 65%);
}
.reviews-band .container { padding-top: 76px; padding-bottom: 76px; }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; }
.band-title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: #0C1626; }
.reviews-sub { margin: 10px 0 0; font-size: 14px; color: rgba(30, 50, 80, .7); }
.reviews-marquee {
  --rv-w: 380px; --rv-gap: 16px;
  overflow: hidden;
  padding-block: 12px; margin: 20px 0 -12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.reviews-skeleton { display: flex; align-items: stretch; gap: var(--rv-gap); width: max-content; }
.reviews-skeleton i {
  display: block; width: var(--rv-w); height: 256px; border-radius: 18px;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .05) 20%, rgba(var(--brand-rgb), .12) 38%, rgba(var(--brand-rgb), .05) 56%);
  background-size: 240% 100%; animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.reviews-track {
  display: flex; align-items: stretch; gap: var(--rv-gap); width: max-content;
  animation: rvScroll calc(var(--rv-n) * 6.6s) linear infinite;
}
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
@keyframes rvScroll {
  to { transform: translateX(calc(var(--rv-n) * (var(--rv-w) + var(--rv-gap)) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee { overflow-x: auto; }
  .reviews-track { animation: none; }
  .review-card[aria-hidden="true"] { display: none; }
}
.review-card {
  box-sizing: border-box; flex: none; width: var(--rv-w);
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s var(--ease-out), box-shadow .15s ease;
}
.review-card:hover {
  border-color: rgba(var(--brand-rgb), .35);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(13, 38, 90, .1);
}
.review-quote {
  font-size: 52px; line-height: .6; font-weight: 700;
  color: rgba(var(--brand-rgb), .3); font-family: Georgia, serif;
}
.review-text {
  margin: 14px 0 0; font-size: 14px; line-height: 1.85;
  color: rgba(20, 35, 60, .8); text-wrap: pretty; flex: 1;
}
.review-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; gap: 11px;
}
.review-avatar {
  position: relative; overflow: hidden;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 14px; font-weight: 700;
}
.review-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-who { min-width: 0; }
.review-name { display: block; font-size: 14px; font-weight: 700; color: #0C1626; }
.review-date { display: block; margin-top: 2px; font-size: 13px; color: rgba(30, 50, 80, .7); }
.review-stars { margin-left: auto; display: flex; gap: 3px; }

.trust-band {
  background: linear-gradient(180deg, var(--brand-soft), #EAF0F9);
  border-top: 1px solid rgba(13, 38, 90, .06);
}
.trust-band .container { padding-block: 40px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(150deg, rgba(var(--brand-rgb), .13), rgba(139, 92, 255, .09));
  display: flex; align-items: center; justify-content: center;
}
.trust-text { min-width: 0; }
.trust-title { display: block; font-size: 14px; line-height: 19px; font-weight: 700; color: #0C1626; }
.trust-sub { display: block; margin-top: 3px; font-size: 13px; line-height: 18px; color: rgba(30, 50, 80, .7); }

.pays-row {
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center;
}
.pays-skeleton { display: contents; }
.pays-skeleton i {
  display: block; width: 82px; height: 18px; border-radius: 999px;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .05) 20%, rgba(var(--brand-rgb), .13) 38%, rgba(var(--brand-rgb), .05) 56%);
  background-size: 240% 100%; animation: surfaceSkeleton 1.25s ease-in-out infinite;
}
.pays-skeleton i:nth-child(3n) { width: 62px; }
.page[data-view="offers"] .pays-row,
.page[data-view="pdp"] .pays-row,
.page[data-view="account"] .pays-row { margin-top: 0; padding-top: 0; border-top: none; }
.pay-item {
  display: flex; align-items: center; opacity: .92;
  transition: opacity .25s ease, transform .2s var(--ease-out);
}
.pay-item:hover { opacity: 1; transform: translateY(-2px); }
.pay-item img {
  --po: 17.5px;
  height: calc(var(--po) * var(--pk, 1)); width: auto; display: block; object-fit: contain;
}
.pay-item span { font-size: 14px; font-weight: 700; color: #23324A; white-space: nowrap; }

.footer { position: relative; overflow: hidden; background: #0A1220; }
.footer::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 320px at 8% 0%, rgba(var(--brand-rgb), .12), transparent 62%);
}
.footer-grid {
  position: relative; padding-block: 60px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-mark { height: 32px; width: auto; display: block; }
.footer-word { height: 20px; width: auto; display: block; }
.footer-desc {
  margin: 20px 0 0; font-size: 14px; line-height: 1.8;
  color: rgba(255, 255, 255, .5); max-width: 300px;
}
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--brand-gradient); border-color: transparent; }
.footer-social a:focus-visible { outline-color: #6FB0FF; }
.footer-social img { width: 18px; height: 18px; display: block; opacity: .9; }
.footer-social .social-x img { width: 15px; height: 15px; }
.footer-note { font-size: 13px; color: rgba(255, 255, 255, .5); margin-top: 20px; }
.footer-col-title { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .92); }
.footer-links { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, .55); }
.footer-links a:hover { color: #ffffff; }
.footer-links a:focus-visible { outline-color: #6FB0FF; }
.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: rgba(255, 255, 255, .5);
}
.footer-domain { letter-spacing: .08em; }

.ad-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(13, 27, 42, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto; padding: 32px;
  animation: adFade .2s ease-out;
}
.ad-modal[hidden] { display: none; }
.ad-modal-box {
  margin: auto; flex: none; position: relative;
  display: flex; flex-direction: column; align-items: center;
  animation: adPop .28s cubic-bezier(.2, .8, .3, 1);
}
.ad-poster {
  position: relative; overflow: hidden; box-sizing: border-box;
  width: min(420px, 74vw);
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 38px 36px;
  border-radius: 22px;
  background:
    linear-gradient(rgba(8, 14, 30, .58), rgba(8, 14, 30, .68)),
    url("../assets/promo/popup-bg.jpg") center / cover,
    radial-gradient(460px 320px at 88% 14%, rgba(139, 92, 255, .55), transparent 66%),
    linear-gradient(125deg, #1B5FE8, #2E7CFF 46%, #8B5CFF);
  box-shadow: 0 30px 80px rgba(6, 16, 40, .5);
}
.ad-poster > span, .ad-poster > a { position: relative; }
.ad-poster-badge {
  height: 24px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .92); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  display: flex; align-items: center;
}
.ad-poster-title {
  margin-top: 22px; font-size: 37px; line-height: 45px; font-weight: 700; color: #ffffff;
  text-shadow: 0 2px 14px rgba(9, 22, 60, .35);
}
.ad-poster-title i { font-style: normal; font-size: .72em; }
.ad-poster-sub { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.ad-poster-note {
  margin-top: 24px; align-self: stretch;
  background: rgba(9, 22, 60, .28); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 0 16px; min-height: 52px; box-sizing: border-box;
  color: rgba(255, 255, 255, .85); font-size: 13px; line-height: 19px; font-weight: 600;
  display: flex; align-items: center;
}
.ad-modal-cta {
  margin-top: 14px; align-self: stretch;
  height: 50px; border-radius: 12px;
  background: #ffffff; color: var(--brand-text); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(9, 22, 60, .3);
  transition: transform .2s var(--ease-out);
}
.ad-modal-cta:hover { transform: translateY(-2px); color: var(--brand-text); }
.ad-modal-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.ad-modal-close {
  position: absolute; top: -14px; right: -14px; z-index: 1;
  background: #0D1B2A; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 8px 24px rgba(6, 16, 40, .5);
  transition: border-color .2s ease;
}
.ad-modal-close:hover { border-color: #ffffff; }
.ad-modal-close:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast-host {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 340px; padding: 11px 16px; border-radius: 12px;
  background: rgba(13, 27, 42, .94); color: #ffffff;
  font-size: 14px; line-height: 20px; font-weight: 600;
  box-shadow: 0 14px 34px rgba(6, 16, 40, .34);
  animation: toastIn .2s var(--ease-out); transition: opacity .2s ease, transform .2s var(--ease-out);
}
.toast.is-out { opacity: 0; transform: translateY(10px); }

@keyframes rlSpin { to { transform: rotate(360deg); } }
@keyframes rlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.route-load {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--brand-soft);
}
.route-load.is-on { display: flex; }
.route-load.is-out { opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.rl-badge { position: relative; display: grid; place-items: center; width: 68px; height: 68px; }
.rl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(var(--brand-rgb), .14); border-top-color: var(--brand-primary);
  animation: rlSpin .72s linear infinite;
}
.rl-mark { width: 34px; height: 34px; object-fit: contain; }
.rl-text {
  margin: 0; font-size: 14px; line-height: 20px; font-weight: 600;
  color: rgba(30, 50, 80, .55); animation: rlPulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rl-ring { border-color: rgba(var(--brand-rgb), .45); }
}

.head-pick { position: relative; flex: none; }
.head-pick-btn { cursor: pointer; }
.head-pop {
  position: fixed; inset: 0; z-index: 100;
  box-sizing: border-box; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 27, 42, .58);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: adFade .16s var(--ease-out);
}
.head-pop[hidden] { display: none; }
.head-pop-box {
  width: min(500px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  overflow: auto; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 20px;
  box-shadow: 0 28px 80px rgba(6, 16, 40, .32);
  animation: adPop .2s cubic-bezier(.2, .8, .3, 1);
}
.head-pop-head {
  height: 64px; padding: 0 20px 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(13, 38, 90, .08);
}
.head-pop-title { font-size: 18px; line-height: 24px; font-weight: 700; color: #0C1626; }
.head-pop-close {
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(13, 38, 90, .05); color: rgba(30, 50, 80, .68); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.head-pop-close:hover { background: rgba(13, 38, 90, .1); color: #0C1626; }
.head-pop-content {
  padding: 22px 24px 24px;
}
.head-pop-field { display: block; }
.head-pop-field + .head-pop-field { margin-top: 20px; }
.head-pop-label {
  display: block; padding: 0 2px 9px;
  font-size: 14px; font-weight: 700; color: #0C1626;
}
.head-pop-select-wrap { position: relative; }
.head-pop-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; pointer-events: none;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid #526174; border-bottom: 1.5px solid #526174;
  transform: rotate(45deg);
}
.head-pop-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 50px; box-sizing: border-box; padding: 0 44px 0 14px;
  border: 1px solid rgba(13, 38, 90, .13); border-radius: 11px; outline: none;
  background: #ffffff; color: #0C1626; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.head-pop-select:hover { border-color: rgba(var(--brand-rgb), .38); }
.head-pop-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.06); }
.head-pop-foot {
  padding: 22px 24px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border-top: 1px solid rgba(13, 38, 90, .08);
}
.head-pop-cancel, .head-pop-confirm {
  height: 46px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.head-pop-cancel {
  border: 1px solid rgba(13, 38, 90, .14); background: #ffffff; color: #0C1626;
}
.head-pop-cancel:hover { background: rgba(13, 38, 90, .035); border-color: rgba(13, 38, 90, .24); }
.head-pop-confirm {
  border: none;
  background: var(--brand-gradient); color: #ffffff; cursor: pointer;
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), 0.12);
}
.head-pop-confirm:hover { background: var(--brand-gradient-hover); transform: translateY(-1px); }
@media (max-width: 620px) {
  .head-pop { padding: 16px; }
  .head-pop-box { max-height: calc(100vh - 32px); border-radius: 16px; }
  .head-pop-content { padding-inline: 18px; }
  .head-pop-foot { padding-inline: 18px; }
}
.head-cart { position: relative; }
.head-cart-num {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 4px;
  border-radius: 9px; background: #FF3B3B; color: #ffffff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 2px 6px rgba(255, 59, 59, .45);
}
.head-cart-num.is-bump { animation: badgeBump .28s var(--ease-out); }

.solo-empty {
  margin-top: 18px; padding: 54px 30px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.solo-empty-lg { margin-top: 30px; padding: 80px 30px; }
.solo-empty p { margin: 0; font-size: 18px; font-weight: 700; color: #0C1626; }
.solo-empty span { font-size: 14px; line-height: 21px; color: rgba(30, 50, 80, .7); max-width: 460px; }
.solo-cta {
  margin-top: 10px; height: 44px; padding: 0 22px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--brand-gradient);
  color: #ffffff; font-size: 14px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), 0.168);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.solo-cta:hover { transform: translateY(-2px); color: #ffffff; box-shadow: 0 16px 34px rgba(var(--brand-rgb), 0.216); }
.solo-cta svg { flex: none; display: block; stroke: currentColor; transition: transform .2s var(--ease-out); }
.solo-cta:hover svg { transform: translateX(3px); }
.solo-cta-ghost {
  background: #ffffff; color: var(--brand-text);
  border: 1px solid rgba(var(--brand-rgb), .4); box-shadow: none;
}
.solo-cta-ghost:hover { background: rgba(var(--brand-rgb), .07); color: var(--brand-text); box-shadow: none; }

.cart-cols { margin-top: 16px; display: flex; gap: 16px; align-items: flex-start; }
.cart-list {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 6px 22px 12px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.cart-head, .cart-row {
  display: grid; grid-template-columns: 28px 64px 1fr 108px 116px 124px 34px;
  align-items: center; gap: 14px;
}
.cart-head {
  position: sticky; top: 146px; z-index: 1; background: #ffffff;
  height: 42px; border-bottom: 1px solid rgba(13, 38, 90, .07);
  font-size: 13px; font-weight: 700; color: rgba(30, 50, 80, .7); letter-spacing: .04em;
}
.cart-head-name {
  grid-column: 2 / 4; display: flex; align-items: center; gap: 12px;
}
.cart-pick { justify-self: center; }
.cart-bulk {
  padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; line-height: 17px; font-weight: 600; letter-spacing: 0;
  color: rgba(30, 50, 80, .7);
  transition: color .2s ease, opacity .2s ease;
}
.cart-bulk:hover { color: #C0261F; }
.cart-bulk i { font-style: normal; font-variant-numeric: tabular-nums; }
.cart-bulk[disabled] { cursor: default; color: rgba(30, 50, 80, .55); }
.cart-row { padding: 16px 0; border-bottom: 1px solid rgba(13, 38, 90, .06); }
.cart-row:last-child { border-bottom: none; }
.cart-thumb {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease-out);
}
.cart-thumb:hover { transform: translateY(-2px); }
.cart-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-name {
  font-size: 15px; font-weight: 700; color: #0C1626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-name:hover { color: var(--brand-text); }
.cart-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cart-uid { margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.cart-uid > span {
  flex: none; font-size: 12px; font-weight: 600; color: rgba(30, 50, 80, .7);
}
.cart-uid input {
  flex: 1; min-width: 0; max-width: 240px; height: 34px; box-sizing: border-box;
  padding: 0 10px; border-radius: 10px;
  background: rgba(13, 38, 90, .05); border: 1px solid rgba(13, 38, 90, .1);
  outline: none; font-size: 13px; line-height: 17px; color: #0C1626;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cart-uid input:focus { border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084); background: #ffffff; }
.cart-uid input.is-bad { border-color: rgba(192, 38, 31, .7); box-shadow: 0 0 0 3px rgba(192, 38, 31, .12); }
.cart-unit { font-size: 14px; font-weight: 600; color: rgba(20, 35, 60, .8); }
.cart-qty { display: flex; align-items: center; justify-content: center; }
.cart-qty .buy-stepper { margin: 0; height: 34px; }
.cart-qty .buy-step { width: 32px; height: 32px; font-size: 14px; }
.cart-qty .buy-num { width: 42px; height: 32px; font-size: 14px; }
.cart-sum { text-align: right; }
.cart-del {
  width: 34px; height: 34px; border-radius: 10px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid rgba(13, 38, 90, .1);
  color: rgba(30, 50, 80, .5);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cart-del:hover { border-color: rgba(255, 59, 59, .5); color: #C0261F; background: rgba(255, 59, 59, .06); }

.ord-tabs {
  flex: none; box-sizing: border-box;
  display: flex; align-items: stretch;
  border-bottom: 1px solid rgba(13, 38, 90, .07);
}
.ord-tab {
  position: relative; flex: 1; min-width: 0;
  height: 39px; padding: 0; box-sizing: border-box;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-size: 15px; line-height: 22px; font-weight: 600;
  color: rgba(30, 50, 80, .72);
  transition: color .2s ease;
}
.ord-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--brand-action); border-radius: 3px 3px 0 0;
  opacity: 0; transition: opacity .2s ease;
}
.ord-tab:hover { color: #0C1626; }
.ord-tab.is-active { color: var(--brand-text); }
.ord-tab.is-active::after { opacity: 1; }

.ord-search {
  box-sizing: border-box; width: 100%; height: 42px; padding: 0 14px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
}
.ord-search:focus-within { border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084); }
.ord-search svg { flex: none; }
.ord-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 14px; color: #0C1626;
}
.orders-view .crumb,
.orders-wrap { margin-inline: auto; }
.ord-list-bar { margin-top: 4px; display: flex; align-items: center; gap: 14px; }
.ord-list-bar .ord-search { flex: none; width: 320px; }
.ord-msgs-link {
  margin-left: auto; flex: none; display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700; color: var(--brand-text);
}
.ord-list { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.ord-card {
  box-sizing: border-box; padding: 18px 22px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.ord-card.is-hit { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084); }
.ord-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(13, 38, 90, .07); }
.ord-no { font-size: 15px; font-weight: 700; color: #0C1626; letter-spacing: .04em; }
.ord-no-copy {
  margin-left: -5px; flex: none; height: 24px; padding: 0 9px; border-radius: 7px; cursor: pointer;
  background: rgba(13, 38, 90, .04); border: 1px solid rgba(13, 38, 90, .1);
  font-size: 12px; font-weight: 700; color: rgba(30, 50, 80, .72);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ord-no-copy:hover { border-color: rgba(var(--brand-rgb), .5); background: rgba(var(--brand-rgb), .07); color: var(--brand-text); }
.ord-at { font-size: 13px; color: rgba(30, 50, 80, .7); }
.ord-status {
  margin-left: auto; padding: 4px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 700;
}
.ord-status.is-done { background: rgba(13, 38, 90, .08); color: rgba(30, 50, 80, .8); }
.ord-status.is-part { background: rgba(192, 38, 31, .08); color: #C0261F; }
.ord-item { padding: 12px 0 8px; display: flex; align-items: center; gap: 12px; }
.ord-thumb {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ord-thumb-gone { background: rgba(13, 38, 90, .06); }
.ord-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ord-name { font-size: 14px; font-weight: 700; color: #0C1626; }
.ord-qty { font-size: 14px; color: rgba(30, 50, 80, .72); }
.ord-price { font-size: 15px; font-weight: 700; color: #0C1626; min-width: 74px; text-align: right; }
.ord-key {
  margin-bottom: 6px; padding: 11px 14px; border-radius: 12px;
  background: rgba(13, 38, 90, .03); border: 1px dashed rgba(13, 38, 90, .14);
  display: flex; align-items: center; gap: 10px;
}
.ord-key-label {
  padding: 3px 8px; border-radius: 6px; flex: none;
  background: rgba(var(--brand-rgb), .1); color: var(--brand-text); font-size: 12px; font-weight: 700;
}
.ord-key code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; color: #0C1626;
}
.ord-key > span:not(.ord-key-label) { font-size: 13px; color: rgba(30, 50, 80, .7); }
.ord-key-multi { flex-direction: column; align-items: stretch; gap: 8px; }
.ord-keyhead { display: flex; align-items: center; gap: 10px; }
.ord-keyhead .ord-key-label { flex: none; }
.ord-keyhead .ord-copy { margin-left: auto; }
.ord-keyrows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ord-keyrow { display: flex; align-items: center; gap: 10px; }
.ord-keyrow code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ord-keyrow .ord-no-copy { margin-left: 0; }
.ord-keyfile { display: block; padding: 0; }
.ord-keyfile-sum {
  padding: 11px 14px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.ord-keyfile-sum::-webkit-details-marker { display: none; }
.ord-keyfile-note { flex: 1; min-width: 0; font-size: 12px; color: rgba(30, 50, 80, .7); }
.ord-keyfile .ord-copy { margin-left: 0; }
.ord-keyfile .info-caret { margin-left: 0; flex: none; color: rgba(30, 50, 80, .55); transition: transform .2s var(--ease-out); }
.ord-keyfile[open] .info-caret { transform: rotate(180deg); }
.ord-keyfile-body { padding: 0 14px 12px; max-height: 220px; overflow-y: auto; }
.ord-keyfile-body code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; font-weight: 700; letter-spacing: .08em; color: #0C1626;
}
.ord-copy {
  margin-left: auto; flex: none; height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14);
  font-size: 13px; font-weight: 700; color: var(--brand-text);
  transition: border-color .2s ease, background-color .2s ease;
}
.ord-copy:hover { border-color: rgba(var(--brand-rgb), .6); background: rgba(var(--brand-rgb), .06); }
.ord-items { padding-top: 6px; }
.ord-keys-all { margin-bottom: 6px; padding: 0 14px; display: flex; align-items: center; gap: 12px; }
.ord-foot {
  margin-top: 8px; padding-top: 13px; border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; gap: 12px;
}
.ord-disc { color: #0E7D45; }
.ord-total { margin-left: auto; font-size: 14px; color: rgba(30, 50, 80, .7); display: flex; align-items: baseline; gap: 7px; }
.ord-cs {
  flex: none; height: 36px; padding: 0 14px; border-radius: 10px; box-sizing: border-box;
  display: flex; align-items: center;
  background: #ffffff; border: 1px solid rgba(var(--brand-rgb), .35); color: var(--brand-text);
  font-size: 14px; font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.ord-cs:hover { background: rgba(var(--brand-rgb), .08); border-color: rgba(var(--brand-rgb), .55); }
.ord-cs:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.ord-rev-btn { cursor: pointer; }
.ord-rev-btn.is-done { border-color: rgba(13, 38, 90, .14); color: rgba(30, 50, 80, .72); }
.ord-rev-btn.is-done:hover { background: rgba(13, 38, 90, .04); border-color: rgba(13, 38, 90, .22); }
.done-wrap { margin-inline: auto; }
.done-hero {
  margin-top: 24px; padding: 44px 40px; box-sizing: border-box; text-align: center;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(13, 38, 90, .07);
  display: flex; flex-direction: column; align-items: center;
}
.done-tick {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #34D399, #0E7D45);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(14, 125, 69, .34);
  animation: adPop .35s var(--ease-out);
}
.done-title { margin: 18px 0 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.done-sub { margin: 10px 0 0; font-size: 14px; line-height: 21px; color: rgba(30, 50, 80, .7); }
.done-sub b { color: #0C1626; letter-spacing: .04em; }
.done-note { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: rgba(30, 50, 80, .7); max-width: 560px; }
.done-acts { margin-top: 20px; display: flex; gap: 10px; }

.messages-view .crumb { padding: 0 0 8px; }

.msg-wrap {
  display: flex; gap: 16px;
  position: sticky; top: 146px;
  height: calc(100vh - 224px); min-height: 320px;
}

.msg-rail, .msg-main {
  box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: flex; flex-direction: column; overflow: hidden;
}
.msg-rail { width: 260px; flex: none; }
.msg-main { flex: 1; min-width: 0; }

.msg-filters {
  flex: none; padding: 14px; border-bottom: 1px solid rgba(13, 38, 90, .07);
  display: flex; flex-direction: column; gap: 10px;
}
.msg-convs { flex: 1; overflow-y: auto; padding: 7px; }
.msg-none { margin: 0; padding: 26px 14px; text-align: center; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7); }

.msg-conv {
  box-sizing: border-box; width: 100%; padding: 12px; cursor: pointer;
  border: none; border-radius: 12px; background: none; text-align: left;
  display: flex; align-items: center; gap: 10px;
  transition: background-color .2s var(--ease-out);
}
.msg-conv:hover { background: rgba(13, 38, 90, .04); }
.msg-conv.is-active { background: rgba(var(--brand-rgb), .12); }
.msg-conv.is-active:hover { background: rgba(var(--brand-rgb), .12); }
.msg-conv-av { width: 40px; height: 40px; font-size: 15px; }
.msg-conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msg-conv-top { display: flex; align-items: baseline; gap: 8px; }
.msg-conv-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-conv-at { flex: none; font-size: 12px; color: rgba(30, 50, 80, .72); font-variant-numeric: tabular-nums; }
.msg-conv-sub {
  font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.msg-faq { padding: 14px 12px 0; border-top: 1px solid rgba(13, 38, 90, .07); }
.msg-faq-t {
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626;
}
.msg-faq-q {
  display: block; box-sizing: border-box; width: 100%;
  padding: 8px 12px; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(var(--brand-rgb), .09); color: var(--brand-text); text-align: left;
  font-size: 13px; line-height: 19px; font-weight: 600;
  transition: background-color .2s var(--ease-out);
}
.msg-faq-q + .msg-faq-q { margin-top: 6px; }
.msg-faq-q:hover { background: rgba(var(--brand-rgb), .17); }
.msg-faq-all {
  margin-left: auto; align-self: center;
  display: flex; align-items: center; gap: 3px;
  font-size: 13px; line-height: 19px; font-weight: 600; color: var(--brand-text);
}
.msg-faq-all:hover { text-decoration: underline; color: var(--brand-text); }

.msg-head {
  flex: none; padding: 10px 20px; border-bottom: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; gap: 12px;
}
.msg-head-av { width: 34px; height: 34px; font-size: 14px; }
.msg-head-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msg-head-name {
  min-width: 0; font-size: 16px; font-weight: 600; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-head-sub {
  font-size: 13px; line-height: 18px; color: rgba(30, 50, 80, .75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-head-dp {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 32px; border-radius: 10px;
  border: 1px solid rgba(var(--brand-rgb), .3); background: rgba(var(--brand-rgb), .09);
  color: var(--brand-text); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color .15s var(--ease-out);
}
.msg-head-dp:hover { background: rgba(var(--brand-rgb), .16); }
.msg-head-av-link {
  flex: none; display: flex; border-radius: 50%;
  transition: opacity .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.msg-head-av-link:hover { opacity: .88; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.096); }
.msg-head-av-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.msg-body { flex: 1; overflow-y: auto; padding: 20px 22px; background: #F7F8FA; }
.msg-empty { margin: auto; }

.msg-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; }
.msg-body > :first-child { margin-top: 0; }
.msg-row.is-me { flex-direction: row-reverse; }
.msg-row.is-cont { margin-top: 6px; }
.msg-bubble {
  max-width: 560px; box-sizing: border-box; padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(13, 38, 90, .06);
  font-size: 14px; line-height: 25px; color: #0C1626;
  text-wrap: pretty;
}
.msg-row.is-me .msg-bubble {
  background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .22); color: #0C1626;
  box-shadow: 0 1px 2px rgba(13, 38, 90, .06);
}
.msg-row:not(.is-me) .msg-bubble:not(.is-card) {
  background: #E9ECF3; box-shadow: none;
}
.msg-bubble.is-card { max-width: none; padding: 0; background: none; border: none; box-shadow: none; line-height: 21px; }
.msg-at { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(30, 50, 80, .72); font-variant-numeric: tabular-nums; }

.msg-day { margin-top: 20px; display: flex; justify-content: center; }
.msg-day span {
  padding: 3px 11px; border-radius: 999px;
  background: rgba(13, 38, 90, .06); color: rgba(30, 50, 80, .75);
  font-size: 12px; line-height: 16px;
}

@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } }
.msg-row.is-new { animation: msgIn .2s var(--ease-out); }
.msg-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.msg-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(var(--brand-rgb), .09); color: var(--brand-text);
  font-size: 13px; font-weight: 600;
  transition: background-color .2s var(--ease-out);
}
.msg-link:hover { background: rgba(var(--brand-rgb), .17); }

.msg-typing { display: flex; align-items: center; gap: 5px; padding: 15px; }
.msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(30, 50, 80, .38); animation: msgDot 1s infinite ease-in-out; }
.msg-typing i:nth-child(2) { animation-delay: .15s; }
.msg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msgDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.msg-ord {
  box-sizing: border-box; width: 560px; padding: 13px 16px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .07); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 38, 90, .05);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.msg-ord.is-hit { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084); }
.msg-ord-top { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(13, 38, 90, .07); }
.msg-ord .ord-item { padding: 11px 0 7px; }
.msg-ord .ord-key { margin-bottom: 0; }

.msg-foot { flex: none; padding: 9px 16px; border-top: 1px solid rgba(13, 38, 90, .07); display: flex; gap: 10px; }
.msg-input {
  flex: 1; min-width: 0; box-sizing: border-box; height: 42px; padding: 0 14px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .12); border-radius: 12px; outline: none;
  font-size: 14px; color: #0C1626;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.msg-input:focus { border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084); }

.msg-up { flex: none; position: relative; }
.msg-tool {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(30, 50, 80, .78);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.msg-tool:hover { border-color: rgba(var(--brand-rgb), .5); color: var(--brand-text); background: rgba(var(--brand-rgb), .05); }
.msg-tool svg { transition: transform .2s var(--ease-out); }
.msg-tool.is-open { border-color: rgba(var(--brand-rgb), .5); color: var(--brand-text); background: rgba(var(--brand-rgb), .09); }
.msg-tool.is-open svg { transform: rotate(45deg); }

.msg-up-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5;
  width: max-content; min-width: 140px; padding: 6px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(13, 38, 90, .14);
  display: flex; flex-direction: column; gap: 2px;
  animation: popUp .15s var(--ease-out);
}
.msg-up-pop[hidden] { display: none; }
.msg-up-row {
  width: 100%; height: 34px; padding: 0 10px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #0C1626; text-align: left;
  transition: background-color .2s ease, color .2s ease;
}
.msg-up-row:hover { background: rgba(var(--brand-rgb), .09); color: var(--brand-text); }
.msg-up-row svg { flex: none; display: block; }
.msg-up-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.msg-up-text em {
  font-style: normal; font-size: 11px; font-weight: 500;
  color: rgba(30, 50, 80, .62);
}
.msg-up-row:hover .msg-up-text em { color: rgba(27, 95, 232, .75); }

.msg-file-img { display: block; }
.msg-file-img img {
  display: block; max-width: 320px; max-height: 260px; height: auto; border-radius: 12px;
  background: rgba(13, 38, 90, .06);
}
.msg-file {
  display: flex; align-items: center; gap: 11px;
  box-sizing: border-box; width: 340px; max-width: 100%; padding: 11px 13px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 38, 90, .05);
}
.msg-file-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--brand-rgb), .1); color: var(--brand-text);
}
.msg-file-ico svg { display: block; width: 18px; height: 18px; }
.msg-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-file-name {
  font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-file-size { font-size: 12px; line-height: 16px; color: rgba(30, 50, 80, .72); }

.msg-ref {
  display: block; box-sizing: border-box; width: 340px; padding: 11px 13px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 38, 90, .05);
}
.msg-row.is-me .msg-ref { background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .22); }
.msg-row:not(.is-me) .msg-ref,
.msg-row:not(.is-me) .msg-ord {
  background: #E9ECF3; box-shadow: none;
}
.msg-row:not(.is-me) .msg-ord.is-hit { box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084); }
.msg-ref-link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.msg-ref-link:hover,
.msg-ref-link:focus-visible { border-color: rgba(var(--brand-rgb), .42); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.06); }
.msg-ref-cap {
  display: block; margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(13, 38, 90, .07);
  font-size: 12px; line-height: 16px; font-weight: 700; color: var(--brand-text);
}
.msg-ref-row { display: flex; align-items: center; gap: 10px; }
.msg-ref-thumb {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 38, 90, .06);
}
.msg-ref-thumb .prod-ico { width: 38px; height: 38px; border-radius: 10px; }
.msg-ref-thumb .prod-ico img { width: 22px; height: 22px; }
.msg-ref-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-ref-name {
  font-size: 14px; font-weight: 700; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-ref-meta {
  font-size: 12px; line-height: 17px; color: rgba(30, 50, 80, .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-ref-fast { color: #0E7D45; font-weight: 600; }
.msg-ref-price { flex: none; font-size: 14px; font-weight: 700; color: #0C1626; }

.acct-hero {
  box-sizing: border-box; padding: 20px 22px; display: flex; align-items: center; gap: 16px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.acct-ava {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 26px; font-weight: 700;
}
.acct-hero-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.acct-hero-name {
  font-size: 20px; line-height: 28px; font-weight: 700; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-hero-mail {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 14px; line-height: 20px; color: rgba(30, 50, 80, .7);
}
.acct-hero-mail svg { flex: none; display: block; }

.acct-body { margin-top: 14px; display: flex; gap: 14px; }
.acct-side {
  flex: none; width: 240px; box-sizing: border-box; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.acct-tab {
  height: 48px; min-width: 0; padding: 0 16px; flex: none;
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  background: transparent; border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .72);
  text-align: left;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.acct-tab svg { flex: none; display: block; width: 18px; height: 18px; }
.acct-tab:hover { background: rgba(13, 38, 90, .04); color: #0C1626; }
.acct-tab.is-on:hover { background: rgba(var(--brand-rgb), .09); color: var(--brand-text); }
.acct-tab.is-on {
  background: rgba(var(--brand-rgb), .09); color: var(--brand-text);
}
.acct-panel { flex: 1; min-width: 0; }
.acct-panel.is-swap { animation: acctSwap .16s var(--ease-out); }
@keyframes acctSwap { from { opacity: 0; } }

.acct-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.acct-stat {
  box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; gap: 10px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.acct-stat-top { display: flex; align-items: center; gap: 10px; }
.acct-stat-k { font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }
.acct-stat-ico { margin-left: auto; flex: none; display: flex; color: var(--brand-text); }
.acct-stat-v { font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.acct-stat-v i { font-style: normal; font-size: 22px; font-weight: 700; margin-right: 1px; }
.acct-stat-sub { font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7); }
.acct-stat-cta {
  align-self: flex-start; height: 36px; padding: 0 18px;
  display: inline-flex; align-items: center; border-radius: 10px;
  background: var(--brand-gradient);
  color: #ffffff; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), 0.144);
  transition: transform .15s var(--ease-out), box-shadow .2s ease;
}
.acct-stat-cta:hover { transform: translateY(-2px); color: #ffffff; box-shadow: 0 12px 24px rgba(var(--brand-rgb), 0.192); }

.acct-card {
  margin-top: 14px; box-sizing: border-box; padding: 22px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.acct-panel > .acct-card:first-child, .acct-stats + .acct-card { margin-top: 14px; }
.acct-panel > .acct-card:first-child { margin-top: 0; }
.acct-sec-title { margin: 0 0 14px; font-size: 18px; line-height: 26px; font-weight: 700; color: #0C1626; }
.acct-sub-title { margin: 18px 0 12px; font-size: 15px; line-height: 22px; font-weight: 700; color: #0C1626; }
.acct-sub-title { display: flex; align-items: baseline; gap: 10px; }
.acct-cpn-sum { cursor: pointer; list-style: none; }
.acct-cpn-sum::-webkit-details-marker { display: none; }
.acct-cpn-sum:hover { color: var(--brand-text); }
.acct-cpn-box:not([open]) .acct-cpn-sum { margin-bottom: 0; }
.acct-cpn-sum .info-caret { align-self: center; color: rgba(30, 50, 80, .64); }
.acct-cpn-sum .acct-sub-n + .info-caret { margin-left: 0; }
.acct-cpn-box[open] .acct-cpn-sum .info-caret { transform: rotate(180deg); }
.acct-sub-n {
  margin-left: auto; font-style: normal; font-size: 13px; line-height: 19px;
  font-weight: 500; color: rgba(30, 50, 80, .64); font-variant-numeric: tabular-nums;
}
.acct-cpn-sub {
  margin: 18px 0 8px; font-size: 12px; line-height: 18px; font-weight: 600;
  color: rgba(30, 50, 80, .64);
}
.acct-cpns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acct-cpn {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--brand-soft); border: 1px solid rgba(var(--brand-rgb), .22); border-radius: 12px;
}
.acct-cpn-face {
  flex: none; width: 96px; font-size: 15px; line-height: 21px; font-weight: 700;
  color: var(--brand-text); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-cpn-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-cpn-name {
  font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-cpn-meta { font-size: 12px; line-height: 18px; color: rgba(30, 50, 80, .64); }
.acct-cpn.is-void { background: rgba(13, 38, 90, .03); border-color: rgba(13, 38, 90, .08); }
.acct-cpn.is-void .acct-cpn-face { color: rgba(30, 50, 80, .55); }
.acct-cpn.is-void .acct-cpn-name { color: rgba(12, 22, 38, .64); }

.acct-ords { display: flex; flex-direction: column; }
.acct-ord {
  padding: 13px 0; display: flex; align-items: center; gap: 14px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  transition: background-color .15s ease;
}
.acct-ords .acct-ord:first-child { border-top: none; }
.acct-ord:hover { background: rgba(var(--brand-rgb), .04); }
.acct-ord-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-ord-no { font-size: 14px; line-height: 20px; font-weight: 700; color: #0C1626; }
.acct-ord-name {
  font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-ord-at {
  flex: none; width: 128px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13px; color: rgba(30, 50, 80, .7);
}
.acct-ord-sum {
  flex: none; min-width: 112px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 700; color: #0C1626;
}
.acct-ord-st { flex: none; width: 88px; display: flex; justify-content: flex-end; }
.acct-ord .ord-status { margin-left: 0; flex: none; }
.acct-more {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--brand-text);
}
.acct-more:hover { color: var(--brand-hover); }
.acct-more svg { flex: none; display: block; transition: transform .2s var(--ease-out); }
.acct-more:hover svg { transform: translateX(3px); }

.acct-empty {
  padding: 34px 20px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.acct-empty-art { display: block; margin-bottom: 4px; }
.acct-empty p { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: #0C1626; }
.acct-empty span { font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7); max-width: 420px; }

.acct-bal {
  box-sizing: border-box; padding: 20px 22px; border-radius: 14px;
  background: var(--brand-gradient);
  display: flex; align-items: center; gap: 16px;
}
.acct-bal-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.acct-bal-k { font-size: 13px; line-height: 19px; color: #ffffff; }
.acct-bal-v { font-size: 34px; line-height: 42px; font-weight: 700; color: #ffffff; }
.acct-bal-v i { font-style: normal; font-size: 24px; font-weight: 700; margin-right: 1px; }
.acct-bal-cta {
  margin-left: auto; flex: none; height: 38px; padding: 0 20px;
  display: inline-flex; align-items: center; border-radius: 10px;
  background: #ffffff; color: var(--brand-text); font-size: 14px; font-weight: 700;
  transition: transform .15s var(--ease-out);
}
.acct-bal-cta:hover { transform: translateY(-2px); color: var(--brand-text); }

.acct-in {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(13, 38, 90, .12); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #0C1626;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.acct-in::placeholder { color: rgba(30, 50, 80, .45); }
.acct-in:hover { border-color: rgba(var(--brand-rgb), .45); }
.acct-in:focus-visible {
  outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.096);
}
.acct-req { margin-right: 4px; font-style: normal; color: #C0261F; }
.acct-phone { display: flex; align-items: center; gap: 10px; }
.acct-phone .acct-in { flex: 1; min-width: 0; }
.acct-save {
  margin-top: 18px; height: 44px; padding: 0 22px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--brand-gradient);
  font-family: inherit; color: #ffffff; font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), 0.168);
  transition: transform .15s var(--ease-out), box-shadow .2s ease;
}
.acct-save:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--brand-rgb), 0.216); }

.acct-sec-rows { display: flex; flex-direction: column; gap: 10px; }
.acct-sec-row {
  box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .12); border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #0C1626;
  transition: background-color .2s ease, border-color .2s ease;
}
.acct-sec-row i { flex: none; display: flex; color: rgba(30, 50, 80, .7); }
.acct-sec-row:hover { background: rgba(var(--brand-rgb), .04); border-color: rgba(var(--brand-rgb), .35); }

.acct-gate {
  margin-top: 0; box-sizing: border-box; padding: 64px 30px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.acct-gate-ico {
  width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%;
  background: rgba(var(--brand-rgb), .1);
  display: flex; align-items: center; justify-content: center;
}
.acct-gate-title { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; color: #0C1626; }
.acct-gate-sub {
  margin: 0; max-width: 460px; font-size: 14px; line-height: 21px;
  color: rgba(30, 50, 80, .7); text-wrap: pretty;
}
.acct-gate-demo {
  margin-top: -2px; height: 40px; padding: 0 18px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(var(--brand-rgb), .5); border-radius: 999px;
  background: rgba(var(--brand-rgb), .06);
  color: var(--brand-text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.acct-gate-demo:hover { background: rgba(var(--brand-rgb), .11); border-color: rgba(var(--brand-rgb), .8); }
.acct-gate-demo:active { transform: scale(.97); }
.acct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.acct-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.acct-field-k { font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }
.acct-field-v {
  box-sizing: border-box; min-height: 44px; padding: 11px 14px; border-radius: 12px;
  background: rgba(13, 38, 90, .03); border: 1px solid rgba(13, 38, 90, .08);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; line-height: 20px; color: rgba(30, 50, 80, .78);
}
.acct-sel { position: relative; display: block; }
.acct-sel select {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 34px 0 14px;
  border-radius: 12px; border: 1px solid rgba(13, 38, 90, .12); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #0C1626;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.acct-sel select:hover { border-color: rgba(var(--brand-rgb), .45); }
.acct-sel select:focus-visible {
  outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.096);
}

.shop-hero {
  position: relative; overflow: hidden;
  height: 120px; border-radius: 18px;
}
.shop-hero::before, .shop-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.shop-hero::before { width: 300px; height: 300px; right: 150px; top: -276px; }
.shop-hero::after  { width: 190px; height: 190px; right: -46px; top: -166px; }
.shop-card {
  position: relative; margin: -84px 0 0; padding: 22px 24px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(13, 38, 90, .07);
  display: flex; align-items: flex-start; gap: 20px;
}
.shop-logo {
  flex: none; width: 104px; height: 104px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700; color: #ffffff;
  box-shadow: 0 10px 24px rgba(13, 38, 90, .18);
}
.shop-body { flex: 1; min-width: 0; }
.shop-top { display: flex; align-items: flex-start; gap: 20px; }
.shop-id { flex: 1; min-width: 0; }
.shop-name {
  margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; color: #0C1626;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.shop-name .prod-verify { width: 15px; height: 15px; }
.shop-live {
  margin-left: 4px; padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(var(--brand-rgb), .1); color: var(--brand-hover);
  font-size: 13px; line-height: 18px; font-weight: 600;
}
.shop-live svg { flex: none; display: block; }
.shop-since {
  margin: 10px 0 0; font-size: 14px; line-height: 20px; color: rgba(30, 50, 80, .7);
}
.shop-since b { font-weight: 600; color: #0C1626; }
.shop-feed {
  margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px;
  font-size: 14px; line-height: 20px; color: rgba(30, 50, 80, .7);
}
.shop-feed span { display: inline-flex; align-items: baseline; gap: 8px; }
.shop-feed b { font-size: 15px; font-weight: 700; color: var(--brand-hover); }
.shop-feed i { font-style: normal; color: var(--brand-hover); }
.shop-acts { flex: none; display: flex; align-items: center; gap: 12px; }
.shop-cs {
  flex: none; height: 36px; padding: 0 14px; border-radius: 10px; box-sizing: border-box;
  display: flex; align-items: center; gap: 6px;
  background: var(--brand-gradient); border: 1px solid var(--brand-primary); color: #ffffff;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.144);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.shop-cs:hover { background: var(--brand-gradient-hover); border-color: var(--brand-hover); color: #ffffff; box-shadow: 0 8px 18px rgba(var(--brand-rgb), 0.192); }
.shop-cs:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.shop-cs svg { flex: none; display: block; }
.shop-share {
  flex: none; width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14); border-radius: 10px;
  color: rgba(30, 50, 80, .62);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.shop-share:hover { border-color: rgba(var(--brand-rgb), .5); color: var(--brand-text); background: rgba(var(--brand-rgb), .06); }
.shop-share:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.shop-sec { margin-top: 30px; }
.shop-sec-head h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: #0C1626; }

.shop-tabs-wrap {
  margin: 0 -20px 18px; padding: 0 20px;
  border-bottom: 1px solid rgba(13, 38, 90, .07);
}
.shop-tabs {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap; gap: 0 26px;
}
.shop-tabs.is-wrap { justify-content: flex-start; }
.shop-tab {
  position: relative; flex: none;
  height: 46px; padding: 0; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center;
  background: transparent; border: none; font-family: inherit;
  font-size: 15px; line-height: 22px; font-weight: 600; color: rgba(30, 50, 80, .72);
  white-space: nowrap;
  transition: color .2s ease;
}
.shop-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--brand-action); border-radius: 3px 3px 0 0;
  opacity: 0; transition: opacity .2s ease;
}
.shop-tab:hover { color: #0C1626; }
.shop-tab.is-on { color: var(--brand-text); }
.shop-tab.is-on::after { opacity: 1; }
.shop-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.shop-panel {
  margin-top: 14px; padding: 2px 20px 20px; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(13, 38, 90, .05);
}
.shop-tools { display: flex; align-items: center; gap: 12px; }
.shop-q {
  flex: 1; min-width: 0; height: 46px; box-sizing: border-box;
  background: rgba(var(--brand-rgb), .06);
  border: 1px solid rgba(var(--brand-rgb), .22); border-radius: 12px; padding: 0 16px;
  display: flex; align-items: center; gap: 11px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.shop-q:hover { border-color: rgba(var(--brand-rgb), .4); }
.shop-q:focus-within {
  border-color: rgba(var(--brand-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084);
  background: #ffffff;
}
.shop-q svg { flex: none; display: block; width: 18px; height: 18px; stroke: var(--brand-text); }
.shop-q input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 15px; line-height: 20px; color: #0C1626;
}
.shop-q input::placeholder { color: rgba(30, 50, 80, .7); }
.shop-tools .off-sort select {
  min-width: 108px; height: 46px; padding-right: 34px;
  background: rgba(var(--brand-rgb), .06); border-color: rgba(var(--brand-rgb), .22);
  font-size: 15px; color: #0C1626;
}
.shop-tools .off-sort select:hover { border-color: rgba(var(--brand-rgb), .4); }
.shop-count { margin: 16px 0 0; font-size: 14px; color: rgba(30, 50, 80, .7); }
.shop-switch {
  flex: none; display: flex; height: 46px; box-sizing: border-box;
  border: 1px solid rgba(13, 38, 90, .14); border-radius: 12px; overflow: hidden;
  background: #ffffff;
}
.shop-sw {
  width: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: rgba(30, 50, 80, .55);
  transition: background-color .2s ease, color .2s ease;
}
.shop-sw + .shop-sw { border-left: 1px solid rgba(13, 38, 90, .14); }
.shop-sw:hover { background: rgba(var(--brand-rgb), .08); color: var(--brand-text); }
.shop-sw.is-on, .shop-sw.is-on:hover { background: var(--brand-gradient); color: #ffffff; }
.shop-sw:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

@keyframes shopSwap { from { opacity: 0; transform: translateY(4px); } }
.shop-list.is-swap, .shop-grid.is-swap, .shop-empty.is-swap {
  animation: shopSwap .16s var(--ease-out);
}
.shop-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.shop-grid {
  margin-top: 12px; display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.srev-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.srev-chip {
  height: 38px; padding: 0 15px; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center;
  background: #ffffff; border: 1px solid transparent; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(13, 38, 90, .08);
  font-family: inherit; font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .78);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.srev-chip:hover { color: var(--brand-text); box-shadow: 0 2px 8px rgba(13, 38, 90, .1); }
.srev-chip.is-on, .srev-chip.is-on:hover {
  border-color: var(--brand-primary); color: var(--brand-text); box-shadow: none;
}
.srev-chip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.shop-rev-panel { padding: 4px 20px; }
.srev-list.is-swap { animation: shopSwap .16s var(--ease-out); }
.srev + .srev { border-top: 1px solid rgba(13, 38, 90, .07); }
.srev { padding: 13px 0; }
.srev-head { display: flex; align-items: center; gap: 8px; }
.srev-ico { flex: none; display: flex; }
.srev-ico svg { display: block; width: 16px; height: 16px; }
.srev .review-stars { margin-left: 0; flex: none; }
.srev .review-stars svg { display: block; }
.srev-who { flex: none; font-size: 13px; font-weight: 600; color: rgba(30, 50, 80, .78); }
.srev-at {
  flex: none; margin-left: auto; padding-left: 12px;
  font-size: 13px; color: rgba(30, 50, 80, .55); font-variant-numeric: tabular-nums;
}
.srev-text {
  margin: 5px 0 0; font-size: 15px; line-height: 22px; color: #0C1626;
  text-wrap: pretty;
}
.srev-list.is-void { padding: 40px 0; text-align: center; }
.srev-list.is-void p { margin: 0; font-size: 14px; color: rgba(30, 50, 80, .7); }
.srev-foot {
  padding: 18px 0 20px; border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; gap: 20px;
}
.srev-note {
  margin: 0; flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: rgba(12, 22, 38, .86);
}
.srev-foot .pager { margin-top: 0; flex: none; }
.srev-foot .pager-in { gap: 4px; }
.srev-foot .pager-btn {
  min-width: 40px; height: 40px; padding-inline: 10px;
  background: transparent; border-color: transparent; border-radius: 9px;
  color: rgba(12, 22, 38, .86); font-weight: 500;
}
.srev-foot .pager-btn:hover {
  background: rgba(var(--brand-rgb), .06); border-color: transparent; color: var(--brand-text);
}
.srev-foot .pager-btn.is-on, .srev-foot .pager-btn.is-on:hover {
  background: #ffffff; border-color: rgba(13, 38, 90, .22); color: #0C1626;
}
.srev-foot .pager-btn:disabled {
  background: transparent; border-color: transparent; color: rgba(30, 50, 80, .28);
}
.srev-foot .pager-btn:first-child::before { content: '◀'; margin-right: 7px; font-size: 8px; }
.srev-foot .pager-btn:last-child::after { content: '▶'; margin-left: 7px; font-size: 8px; }
.srev-foot .pager-gap { min-width: 34px; height: 40px; color: rgba(30, 50, 80, .35); }

.shop-gcard {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; box-sizing: border-box; border-radius: 14px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .09);
  box-shadow: 0 4px 14px rgba(13, 38, 90, .04);
  transition: transform .15s var(--ease-out), border-color .15s ease, box-shadow .15s ease;
}
.shop-gcard:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--brand-rgb), .3); box-shadow: 0 14px 30px rgba(13, 38, 90, .1);
}
.shop-gcard:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sgc-head { display: flex; align-items: flex-start; gap: 12px; }
.sgc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sgc-title {
  font-size: 14px; line-height: 20px; font-weight: 700; color: #0C1626;
  min-height: 40px; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sgc-desc {
  font-size: 13px; line-height: 18px; color: rgba(30, 50, 80, .7);
  min-height: 54px; text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.sgc-ico {
  flex: none; width: 62px; height: 62px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.sgc-ico img { width: 32px; height: 32px; object-fit: contain; display: block; }
.sgc-letter { font-size: 17px; font-weight: 700; color: var(--brand-text); }
.sgc-foot {
  padding-top: 12px; border-top: 1px solid rgba(13, 38, 90, .07);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.shop-row {
  box-sizing: border-box; padding: 18px; border-radius: 16px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: flex; align-items: center; gap: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shop-row:hover { border-color: rgba(var(--brand-rgb), .3); box-shadow: 0 12px 30px rgba(13, 38, 90, .1); }
.shop-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.shop-row-main:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 12px; }
.shop-row-ico {
  flex: none; width: 62px; height: 62px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.shop-row-ico img { width: 32px; height: 32px; object-fit: contain; display: block; }
.shop-row-letter { font-size: 17px; font-weight: 700; color: var(--brand-text); }
.shop-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shop-row-title {
  font-size: 14px; line-height: 20px; font-weight: 700; color: #0C1626;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-row-meta {
  font-size: 13px; line-height: 18px; color: rgba(30, 50, 80, .7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-row-buy { flex: none; display: flex; align-items: center; gap: 16px; }
.shop-add {
  flex: none; height: 36px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  background: var(--brand-gradient); border: 1px solid var(--brand-primary); color: #ffffff;
  font-size: 14px; font-weight: 600;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.shop-add:hover { background: var(--brand-gradient-hover); box-shadow: 0 8px 18px rgba(var(--brand-rgb), 0.168); }
.shop-add:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.shop-add.is-ghost { background: #ffffff; border-color: rgba(var(--brand-rgb), .35); color: var(--brand-text); }
.shop-add.is-ghost:hover { background: rgba(var(--brand-rgb), .08); box-shadow: none; }
.shop-add.is-ghost svg { flex: none; display: block; }
.shop-empty {
  margin-top: 12px; padding: 46px 30px; border-radius: 14px;
  background: rgba(13, 38, 90, .03); border: 1px solid rgba(13, 38, 90, .07);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.shop-empty p { margin: 0; font-size: 16px; font-weight: 700; color: #0C1626; }

.sh-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(13, 27, 42, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  animation: adFade .2s ease-out;
}
.sh-modal[hidden] { display: none; }
.sh-box {
  width: 480px; max-width: 100%; box-sizing: border-box; padding: 20px 24px 24px;
  background: #ffffff; border-radius: 18px;
  box-shadow: 0 30px 80px rgba(6, 16, 40, .3);
  animation: adPop .28s cubic-bezier(.2, .8, .3, 1);
}
.aff-box { width: 620px; }
.aff-modal-body { max-height: 72vh; overflow-y: auto; padding: 0 8px; margin: 0 -8px; }
.aff-q-row {
  position: sticky; top: 0; z-index: 1;
  margin: 0 -8px 12px; padding: 0 8px 10px; background: #ffffff;
}
.aff-q {
  width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px;
  border: 1px solid rgba(var(--brand-rgb), .26); border-radius: 12px; background: var(--brand-soft);
  font-family: inherit; font-size: 14px; font-weight: 500; color: #0C1626;
}
.aff-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aff-chips + .aff-chips { margin-top: 12px; }
.aff-q::placeholder { color: rgba(30, 50, 80, .55); }
.aff-q:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084); }
.aff-back {
  flex: none; width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: rgba(30, 50, 80, .55);
  transition: background-color .2s ease, color .2s ease;
}
.aff-back[hidden] { display: none; }
.aff-back:hover { background: rgba(13, 38, 90, .06); color: #0C1626; }
.aff-back:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.affd-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 19px; }
.affd-head span { font-weight: 700; color: #17233B; }
.affd-head i { font-style: normal; color: rgba(30, 50, 80, .72); }
.affd-head em { font-style: normal; margin-left: auto; font-size: 12px; color: #C2410C; }
.affd-item {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 8px; margin-top: 8px; border-top: 1px solid rgba(13, 38, 90, .07);
  font-size: 13px; line-height: 19px;
}
.affd-item-main { flex: 1 1 auto; min-width: 0; }
.affd-item-main b { display: block; font-weight: 600; color: #17233B; }
.affd-item-main i {
  display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 17px;
  color: rgba(30, 50, 80, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.affd-item > em { font-style: normal; flex: none; font-size: 12px; color: rgba(30, 50, 80, .72); white-space: nowrap; }
.affd-item > em.is-wait { color: #C2410C; margin-left: auto; }
.affd-item > b { flex: none; min-width: 76px; text-align: right; font-weight: 700; color: #17233B; font-variant-numeric: tabular-nums; }
.affd-item > b i { font-style: normal; margin-right: 5px; font-size: 12px; font-weight: 500; color: rgba(30, 50, 80, .72); }
.affd-sum {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(13, 38, 90, .12);
  font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .72);
}
.affd-sum b { margin-left: auto; min-width: 76px; text-align: right; font-size: 14px; font-weight: 700; color: #17233B; font-variant-numeric: tabular-nums; }
.sh-head { display: flex; align-items: center; margin-bottom: 18px; }
.sh-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; line-height: 22px; font-weight: 700; color: #0C1626;
}
.sh-title svg { flex: none; display: block; }
.sh-close {
  margin-left: auto; flex: none; width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: rgba(30, 50, 80, .55);
  transition: background-color .2s ease, color .2s ease;
}
.sh-close:hover { background: rgba(13, 38, 90, .06); color: #0C1626; }
.sh-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sh-label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }
.sh-label-2 { margin-top: 20px; }
.sh-link-row { display: flex; align-items: center; gap: 10px; }
#shLink {
  flex: 1; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 14px;
  background: rgba(13, 38, 90, .05);
  border: 1px solid rgba(13, 38, 90, .1); border-radius: 10px;
  font-size: 13px; color: rgba(30, 50, 80, .8);
  text-overflow: ellipsis;
}
#shLink:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sh-copy {
  flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14); border-radius: 10px;
  color: rgba(30, 50, 80, .62);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.sh-copy:hover { border-color: rgba(var(--brand-rgb), .5); color: var(--brand-text); background: rgba(var(--brand-rgb), .06); }
.sh-copy:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sh-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sh-way {
  height: 46px; box-sizing: border-box; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14);
  font-size: 14px; font-weight: 600; color: #0C1626;
  transition: border-color .2s ease, background-color .2s ease;
}
.sh-way:hover { border-color: rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .06); color: #0C1626; }
.sh-way:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sh-way img { width: 16px; height: 16px; object-fit: contain; display: block; flex: none; }

.rev-item {
  margin-bottom: 18px; padding: 12px 14px; border-radius: 12px;
  background: rgba(13, 38, 90, .03); border: 1px solid rgba(13, 38, 90, .07);
  display: flex; flex-direction: column; gap: 3px;
}
.rev-item b { font-size: 14px; font-weight: 700; color: #0C1626; }
.rev-blocked {
  margin: -6px 0 16px; padding: 10px 12px; border-radius: 10px;
  background: #FFF7ED; color: #C2410C; font-size: 13px; line-height: 19px;
}
.rev-rate { margin-top: 10px; display: flex; align-items: center; gap: 14px; }
.rev-stars { display: flex; align-items: center; gap: 2px; }
.rev-star {
  padding: 8px; border: none; background: none; cursor: pointer; line-height: 0;
  color: rgba(13, 38, 90, .18);
  transition: color .12s var(--ease-out), transform .12s var(--ease-out);
}
.rev-star svg { display: block; }
.rev-star.is-on { color: #F5A623; }
.rev-star:hover { transform: scale(1.12); }
.rev-stars.is-view .rev-star { cursor: default; }
.rev-stars.is-view .rev-star:hover { transform: none; }
.rev-star:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 6px; }
.rev-word { font-size: 14px; font-weight: 600; color: #0C1626; }
.rev-opt { margin-left: 6px; font-size: 13px; font-weight: 500; color: rgba(30, 50, 80, .55); }
.rev-text {
  box-sizing: border-box; width: 100%; padding: 11px 14px; border-radius: 12px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .14);
  font-family: inherit; font-size: 14px; line-height: 21px; font-weight: 500; color: #0C1626;
  resize: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.rev-text::placeholder { color: rgba(30, 50, 80, .5); }
.rev-text:focus { outline: none; border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084); }
.rev-foot { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.rev-count { font-size: 13px; color: rgba(30, 50, 80, .55); font-variant-numeric: tabular-nums; }
.rev-once { margin-left: auto; font-size: 13px; color: rgba(30, 50, 80, .7); }
.rev-view-text {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(13, 38, 90, .03); border: 1px solid rgba(13, 38, 90, .07);
  font-size: 15px; line-height: 24px; font-weight: 500; color: #0C1626;
  overflow-wrap: anywhere;
}
.rev-view-at { margin: 12px 0 0; font-size: 13px; color: rgba(30, 50, 80, .7); }
#revViewBody[hidden] + .rev-view-at { margin-top: 20px; }
.rev-send {
  flex: none; height: 42px; padding: 0 22px; border: none;
  border-radius: 12px; cursor: pointer;
  background: var(--brand-gradient); color: #ffffff; font-size: 14px; font-weight: 700;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.rev-send:hover { background: var(--brand-gradient-hover); }
.rev-send:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.rev-send:disabled { background: rgba(13, 38, 90, .1); color: rgba(30, 50, 80, .55); cursor: not-allowed; }
.rev-send:disabled:hover { background: rgba(13, 38, 90, .1); }

.dp-box { width: 680px; max-height: calc(100vh - 64px); display: flex; flex-direction: column; }
.dp-box .sh-head { flex: none; }
.dp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px 2px; }
.dp-summary {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 16px;
  background: rgba(13, 38, 90, .04); border: 1px solid rgba(13, 38, 90, .07); border-radius: 12px;
}
.dp-summary > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.dp-summary b { font-size: 14px; line-height: 20px; color: #0C1626; }
.dp-summary small { font-size: 12px; line-height: 18px; color: rgba(30, 50, 80, .7); font-variant-numeric: tabular-nums; }
.dp-summary small.is-urgent { color: #C0261F; font-weight: 700; }
.dp-summary strong { margin-left: auto; flex: none; font-size: 22px; color: #0C1626; }
.dp-dead { margin: 0 0 14px; font-size: 12px; line-height: 18px; color: rgba(30, 50, 80, .7); }
.dp-dead small { font-size: 12px; font-variant-numeric: tabular-nums; }
.dp-dead small.is-urgent { color: #C0261F; font-weight: 700; }
.dp-status { align-self: flex-start; padding: 3px 8px; border-radius: 7px; background: rgba(var(--brand-rgb), .1); color: var(--brand-text); font-size: 12px; font-weight: 700; }
.dp-label { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 7px; font-size: 14px; font-weight: 600; color: #0C1626; }
.dp-label span { font-size: 12px; font-weight: 500; color: rgba(30, 50, 80, .7); }
.dp-control { width: 100%; box-sizing: border-box; border: 1px solid rgba(13, 38, 90, .16); border-radius: 10px; background: #fff; color: #0C1626; font: inherit; font-size: 14px; }
.dp-pick { position: relative; display: block; }
.dp-pickbtn {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 13px;
  cursor: pointer; text-align: left; font-weight: 500;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dp-pickbtn .dp-pickcur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-pickbtn .sel-caret { flex: none; color: #596B85; }
.dp-pickbtn.is-ph { color: rgba(30, 50, 80, .6); }
.dp-pickbtn:hover { border-color: rgba(13, 38, 90, .24); }
.dp-pickbtn[aria-expanded="true"] { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084); }
.dp-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  max-height: 272px; overflow-y: auto;
  box-sizing: border-box; padding: 8px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(13, 38, 90, .18);
  transform-origin: top left;
  animation: popDown .15s var(--ease-out);
}
.dp-opt {
  width: 100%; min-height: 34px; padding: 7px 10px; border: none; border-radius: 9px;
  background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: flex-start; gap: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; color: #0C1626;
  transition: background-color .2s ease;
}
.dp-opt > span { flex: 1; min-width: 0; }
.dp-opt:hover { background: rgba(var(--brand-rgb), .09); }
.dp-opt.is-on { color: var(--brand-text); }
.dp-opt svg {
  box-sizing: content-box; flex: none; display: block; margin-top: 2px;
  width: 10px; height: 10px; padding: 3px; border-radius: 50%; background: var(--brand-action);
}
.dp-text { min-height: 96px; padding: 11px 12px; resize: vertical; line-height: 20px; }
.dp-control:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084); }
.dp-count { margin-top: 5px; text-align: right; color: rgba(30, 50, 80, .7); font-size: 12px; font-variant-numeric: tabular-nums; }
.dp-count.is-warn { color: #C2410C; font-weight: 600; }
.dp-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.dp-drop .dp-files { margin-top: 0; }
.dp-up {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px;
  flex: none; white-space: nowrap;
  height: 34px; padding: 0 12px; border-radius: 9px;
  border: 1px dashed rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .05);
  font-size: 13px; font-weight: 600; color: var(--brand-text); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dp-up:hover { background: rgba(var(--brand-rgb), .1); border-color: rgba(var(--brand-rgb), .62); }
.dp-up svg { width: 13px; height: 13px; }
.dp-up input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dp-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.dp-file { max-width: 190px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgba(13, 38, 90, .1); border-radius: 9px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; appearance: none; transition: border-color .15s ease, background .15s ease; }
.dp-file:hover { border-color: rgba(var(--brand-rgb), .45); background: var(--brand-soft); }
.dp-file:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.dp-preview-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(13, 27, 42, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dp-preview-modal[hidden] { display: none; }
.dp-preview-box { width: 760px; max-width: 100%; max-height: 86vh; box-sizing: border-box; padding: 18px; overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(6, 16, 40, .3); }
.dp-preview-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dp-preview-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 22px; }
.dp-preview-close { margin-left: auto; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgba(30, 50, 80, .55); font: 24px/28px Arial, sans-serif; cursor: pointer; }
.dp-preview-close:hover { background: rgba(13, 38, 90, .06); color: #0C1626; }
.dp-preview-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.dp-preview-body { display: flex; align-items: center; justify-content: center; min-height: 180px; max-height: calc(86vh - 84px); padding: 8px; overflow: auto; box-sizing: border-box; border-radius: 12px; background: var(--brand-soft); }
.dp-preview-image { display: block; max-width: 100%; max-height: calc(86vh - 120px); object-fit: contain; border-radius: 10px; box-shadow: 0 8px 24px rgba(13, 38, 90, .12); }
.dp-preview-text { width: 100%; box-sizing: border-box; margin: 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font: 13px/21px ui-monospace, SFMono-Regular, Menlo, monospace; color: #243B64; background: #fff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 12px; }
.dp-file img, .dp-file i { width: 28px; height: 28px; flex: none; border-radius: 6px; object-fit: cover; background: rgba(13, 38, 90, .06); }
.dp-file i { display: flex; align-items: center; justify-content: center; font-size: 10px; font-style: normal; font-weight: 700; color: rgba(30, 50, 80, .7); }
.dp-file b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.dp-void { margin: 8px 0 0; color: rgba(30, 50, 80, .7); font-size: 12px; }
.dp-notice { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; padding: 13px 15px; border-radius: 11px; background: rgba(var(--brand-rgb), .07); color: rgba(30, 50, 80, .76); font-size: 13px; line-height: 19px; }
.dp-notice b { color: #0C1626; }
.dp-risk { display: flex; gap: 9px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(192, 38, 31, .18); border-radius: 11px; background: rgba(192, 38, 31, .05); }
.dp-risk > svg { flex: none; margin-top: 2px; color: #C0261F; }
.dp-risk p { margin: 0; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .82); }
.dp-risk b { color: #C0261F; }
.dp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dp-btn { height: 40px; padding: 0 18px; border: 1px solid var(--brand-primary); border-radius: 10px; background: var(--brand-gradient); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.dp-btn:hover { background: var(--brand-gradient-hover); }.dp-btn-line { background: #fff; color: var(--brand-text); }.dp-btn-line:hover { background: rgba(var(--brand-rgb), .07); }
.dp-empty { padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; background: rgba(13, 38, 90, .035); border-radius: 12px; }
.dp-empty b { font-size: 16px; }.dp-empty span { font-size: 13px; color: rgba(30, 50, 80, .7); }.dp-empty .dp-btn { margin-top: 8px; }
.dp-section { padding: 14px 0; border-bottom: 1px solid rgba(13, 38, 90, .08); }
.dp-section h4 { margin: 0 0 8px; font-size: 14px; }.dp-section p { margin: 0; font-size: 13px; line-height: 20px; color: rgba(30, 50, 80, .76); }
.dp-arb { margin-bottom: 4px; padding: 10px 12px; border-radius: 9px; background: #FFF7ED; color: #C2410C; font-size: 13px; line-height: 19px; }
.dp-time { list-style: none; margin: 0; padding: 0; }.dp-time li { position: relative; display: flex; gap: 10px; padding: 0 0 14px; }.dp-time li:last-child { padding-bottom: 0; }
.dp-time li:before { content: ''; position: absolute; left: 4px; top: 10px; bottom: -2px; width: 1px; background: rgba(13, 38, 90, .12); }.dp-time li:last-child:before { display: none; }
.dp-time li > i { width: 9px; height: 9px; margin-top: 4px; z-index: 1; flex: none; border-radius: 50%; background: var(--brand-action); box-shadow: 0 0 0 3px #fff; }
.dp-time li > span { display: flex; flex-direction: column; gap: 2px; }.dp-time b { font-size: 13px; line-height: 19px; }.dp-time em { font-style: normal; font-size: 12px; line-height: 18px; color: rgba(30, 50, 80, .72); }.dp-time small { font-size: 12px; line-height: 17px; color: rgba(30, 50, 80, .7); }
.msg-sys { display: flex; justify-content: center; }
.msg-syswrap { width: min(560px, 92%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.msg-syscard { width: 100%; box-sizing: border-box; border: 1px solid rgba(13, 38, 90, .1); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(13, 38, 90, .06); overflow: hidden; }
.msg-syscard-hd { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid rgba(13, 38, 90, .07); background: rgba(13, 38, 90, .03); color: rgba(30, 50, 80, .76); font-size: 13px; }
.msg-syscard-hd b { font-size: 13px; font-weight: 700; color: inherit; }
.msg-syscard-hd span { margin-left: auto; font-size: 12px; color: rgba(30, 50, 80, .64); font-variant-numeric: tabular-nums; }
.msg-syscard-bd { padding: 12px 14px; }
.msg-syscard.is-live { border-color: rgba(var(--brand-rgb), .3); }
.msg-syscard.is-live .msg-syscard-hd { background: rgba(var(--brand-rgb), .08); border-bottom-color: rgba(var(--brand-rgb), .18); color: var(--brand-text); }
.msg-syscard.is-ok { border-color: rgba(22, 128, 61, .32); }
.msg-syscard.is-ok .msg-syscard-hd { background: rgba(22, 128, 61, .08); border-bottom-color: rgba(22, 128, 61, .2); color: #15803D; }
.msg-syscard.is-bad { border-color: rgba(192, 38, 31, .3); }
.msg-syscard.is-bad .msg-syscard-hd { background: rgba(192, 38, 31, .06); border-bottom-color: rgba(192, 38, 31, .18); color: #C0261F; }
.msg-syscard.is-plat { border-color: rgba(194, 65, 12, .3); }
.msg-syscard.is-plat .msg-syscard-hd { background: #FFF7ED; border-bottom-color: rgba(194, 65, 12, .2); color: #C2410C; }
.msg-syscard.is-done .msg-syscard-hd, .msg-syscard.is-void .msg-syscard-hd { color: rgba(30, 50, 80, .62); }
.msg-syscard.is-void { border-color: rgba(13, 38, 90, .1); }
.msg-sysord { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(13, 38, 90, .08); border-radius: 10px; background: #fff; }
.msg-sysord-thumb { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; overflow: hidden; }
.msg-sysord-thumb .prod-ico { width: 22px; height: 22px; }
.msg-sysord-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-sysord-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.msg-sysord-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgba(30, 50, 80, .7); }
.msg-sysord strong { margin-left: auto; flex: none; font-size: 14px; }
.msg-sysrow { margin: 9px 0 0; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .82); }
.msg-sysrow b { color: #0C1626; font-weight: 600; }
.msg-syscard-bd .dp-files { margin-top: 9px; }
.msg-sysfoot {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-top: 1px solid rgba(13, 38, 90, .07);
  font-size: 12px; line-height: 18px; color: rgba(30, 50, 80, .72);
}
.msg-sysacts { display: flex; gap: 8px; margin-left: auto; flex: none; }
.msg-sysbtn { padding: 0; border: 0; background: none; color: var(--brand-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.msg-sysbtn:hover { text-decoration: underline; }

.sl-hero {
  position: relative; overflow: hidden;
  margin-top: 18px; padding: 46px 48px; box-sizing: border-box; border-radius: 22px;
  background: linear-gradient(125deg, #0E2A5C, var(--brand-action) 58%, var(--brand-primary));
  box-shadow: 0 18px 44px rgba(13, 38, 90, .22);
  display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center;
}
.sl-hero > * { position: relative; z-index: 1; }
.sl-art {
  box-sizing: border-box; padding: 18px 20px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 40px rgba(6, 20, 60, .3);
}
.sl-art-top { display: flex; align-items: center; justify-content: space-between; }
.sl-art-t { font-size: 14px; font-weight: 700; color: rgba(30, 50, 80, .72); }
.sl-art-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-action); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.084);
}
.sl-art-svg { display: block; width: 100%; height: 108px; margin-top: 14px; }
.sl-art-foot {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(13, 38, 90, .08);
  display: flex; gap: 28px;
}
.sl-art-cell { display: flex; flex-direction: column; gap: 2px; }
.sl-art-cell b { font-size: 12px; font-weight: 700; color: rgba(30, 50, 80, .7); }
.sl-art-cell i { font-style: normal; font-size: 14px; font-weight: 700; color: #0C1626; }
.sl-orb {
  position: absolute; right: -70px; top: -90px; z-index: 0;
  width: 300px; height: 300px; border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, .09);
}
.sl-hero .pm-kicker { display: inline-flex; }
.sl-title { margin: 12px 0 0; font-size: 40px; line-height: 50px; font-weight: 700; color: #ffffff; }
.sl-sub {
  margin: 14px 0 0; max-width: 620px;
  font-size: 15px; line-height: 1.75; color: rgba(219, 232, 255, .82); text-wrap: pretty;
}
.sl-hero-acts { margin-top: 22px; display: flex; gap: 10px; }
.sl-hero-acts .solo-cta { background: #ffffff; color: var(--brand-text); box-shadow: 0 10px 26px rgba(6, 20, 60, .3); }
.sl-hero-acts .solo-cta:hover { color: var(--brand-text); }
.sl-hero-acts .solo-cta-ghost {
  background: rgba(255, 255, 255, .1); color: #ffffff; border-color: rgba(255, 255, 255, .42);
}
.sl-hero-acts .solo-cta-ghost:hover { background: rgba(255, 255, 255, .2); color: #ffffff; }
.sl-stats, .sl-steps, .sl-perks {
  box-sizing: border-box; overflow: hidden; border-radius: 18px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.sl-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.sl-sec + .sl-stats { margin-top: 34px; }
.sl-stat { box-sizing: border-box; padding: 22px; text-align: center; }
.sl-stat-num { display: block; font-size: 30px; line-height: 38px; font-weight: 700; color: var(--brand-text); }
.sl-stat-label { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .7); }
.sl-stat-note {
  display: block; margin-top: 10px;
  font-size: 13px; line-height: 1.6; color: rgba(30, 50, 80, .7); text-wrap: pretty;
}
.sl-sec { margin-top: 34px; }
.sl-sec .feat-head { align-items: baseline; }

.sl-wants { margin-top: 22px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.sl-want {
  box-sizing: border-box; padding: 20px 18px; border-radius: 16px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  transition: transform .15s var(--ease-out), box-shadow .15s ease, border-color .2s ease;
}
.sl-want:hover {
  transform: translateY(-3px); border-color: rgba(var(--brand-rgb), .4);
  box-shadow: 0 16px 36px rgba(13, 38, 90, .13);
}
.sl-want-ico {
  width: 44px; height: 44px; border-radius: 13px; background: rgba(var(--brand-rgb), .1);
  display: flex; align-items: center; justify-content: center;
}
.sl-want-name { font-size: 15px; line-height: 21px; font-weight: 700; color: #0C1626; }

.sl-band {
  position: relative; overflow: hidden;
  margin-top: 34px; padding: 34px 40px; box-sizing: border-box; border-radius: 22px;
  background: var(--brand-gradient);
  box-shadow: 0 16px 38px rgba(13, 38, 90, .2);
  display: flex; align-items: center; gap: 32px;
}
.sl-band-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.sl-band-title { margin: 0; font-size: 26px; line-height: 34px; font-weight: 700; color: #ffffff; }
.sl-band-sub {
  margin: 8px 0 0; max-width: 760px;
  font-size: 14px; line-height: 1.7; color: rgba(219, 232, 255, .86); text-wrap: pretty;
}
.sl-band-cta {
  position: relative; z-index: 1; flex: none;
  background: #ffffff; color: var(--brand-text); box-shadow: 0 10px 26px rgba(6, 20, 60, .28);
}
.sl-band-cta:hover { color: var(--brand-text); }
.sl-band-end::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .34) 1.8px, transparent 1.8px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, transparent 44%, #000 82%);
  mask-image: linear-gradient(100deg, transparent 44%, #000 82%);
}

.sl-case {
  position: relative; margin-top: 22px; padding: 28px 32px; box-sizing: border-box; border-radius: 18px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: grid; grid-template-columns: 40px 1fr 44px; gap: 24px; align-items: start;
}
.sl-case-mark { font-size: 58px; line-height: 46px; font-weight: 700; color: rgba(var(--brand-rgb), .22); }
.sl-case-body { min-height: 115px; }
.sl-case-who { display: flex; align-items: center; gap: 11px; }
.sl-case-avatar { width: 44px; height: 44px; font-size: 17px; flex: none; }
.sl-case-name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: #0C1626; }
.sl-case-meta { font-size: 13px; font-weight: 600; color: rgba(30, 50, 80, .7); }
.sl-case-metric {
  padding: 4px 10px; border-radius: 8px; background: rgba(var(--brand-rgb), .1);
  font-size: 13px; font-weight: 700; color: var(--brand-text);
}
.sl-case-who .head-btn { margin-left: auto; }
.sl-case-q {
  margin: 15px 0 0; max-width: 880px; font-size: 15px; line-height: 1.85;
  color: rgba(20, 35, 60, .82); text-wrap: pretty;
}
.sl-case-nav { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sl-case-dots { display: flex; flex-direction: column; gap: 7px; }
.sl-case-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: rgba(13, 38, 90, .16); cursor: pointer; transition: background .2s ease;
}
.sl-case-dot.is-on { background: var(--brand-action); }
.sl-case-arw {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .12); color: rgba(30, 50, 80, .6);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
.sl-case-arw:hover { border-color: rgba(var(--brand-rgb), .55); color: var(--brand-text); }

.sl-payout {
  padding: 34px 40px; box-sizing: border-box; border-radius: 22px; text-align: center;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.sl-payout-h { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; color: #0C1626; }
.sl-payout-sub {
  margin: 8px auto 0; max-width: 640px;
  font-size: 14px; line-height: 1.7; color: rgba(30, 50, 80, .7);
}
.sl-payout-row { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 46px; }
.sl-payout-item { display: flex; align-items: center; gap: 9px; }
.sl-payout-item img {
  --po: 23px;
  width: auto; height: calc(var(--po) * var(--pk, 1)); object-fit: contain; display: block;
}
.sl-payout-item b { font-size: 15px; font-weight: 700; color: rgba(20, 35, 60, .78); }
.sl-perks { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.sl-perk {
  box-sizing: border-box; padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.sl-perk-ico {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(var(--brand-rgb), .1);
  display: flex; align-items: center; justify-content: center;
}
.sl-perk-title { font-size: 16px; line-height: 22px; font-weight: 700; color: #0C1626; }
.sl-perk-sub { font-size: 14px; line-height: 1.7; color: rgba(30, 50, 80, .7); text-wrap: pretty; }
.sl-steps {
  margin: 22px 0 0; padding: 0; list-style: none;
  counter-reset: slstep;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.sl-step {
  position: relative; box-sizing: border-box; padding: 48px 22px 22px;
  display: flex; flex-direction: column; gap: 6px;
  counter-increment: slstep;
}
.sl-step::before {
  content: counter(slstep);
  position: absolute; top: 22px; left: 22px;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--brand-action); color: #ffffff;
  font-size: 14px; font-weight: 700; line-height: 27px; text-align: center;
}
.sl-step-t { font-size: 15px; font-weight: 700; color: #0C1626; }
.sl-step-d { font-size: 14px; line-height: 1.7; color: rgba(30, 50, 80, .7); text-wrap: pretty; }
.sl-two { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.sl-box {
  box-sizing: border-box; padding: 24px 26px; border-radius: 18px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
}
.sl-box-h { margin: 0 0 14px; font-size: 17px; line-height: 22px; font-weight: 700; color: #0C1626; }
.sl-need { margin: 0; padding-left: 20px; }
.sl-need li { margin-bottom: 8px; font-size: 14px; line-height: 1.75; color: rgba(20, 35, 60, .8); text-wrap: pretty; }
.sl-need li::marker { color: rgba(var(--brand-rgb), .45); }
.sl-fee-row {
  padding: 11px 0; border-bottom: 1px solid rgba(13, 38, 90, .06);
  display: flex; align-items: baseline; gap: 14px;
}
.sl-fee-row:last-child { border-bottom: none; }
.sl-fee-row span { width: 96px; flex: none; font-size: 14px; font-weight: 700; color: rgba(30, 50, 80, .72); }
.sl-fee-row b { flex: 1; font-size: 14px; line-height: 1.65; font-weight: 600; color: #0C1626; }
.sl-field { display: block; }
.sl-field-wide { grid-column: 1 / -1; }
.sl-field > span:first-child {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 700; color: rgba(30, 50, 80, .75);
}
.sl-field input, .sl-field select, .sl-field textarea {
  box-sizing: border-box; width: 100%; padding: 11px 13px;
  border: 1px solid rgba(13, 38, 90, .12); border-radius: 11px;
  background: rgba(13, 38, 90, .025);
  font-family: inherit; font-size: 14px; font-weight: 500; color: #0C1626;
  outline: none; resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sl-field input:focus, .sl-field select:focus, .sl-field textarea:focus {
  border-color: rgba(var(--brand-rgb), .6); background: #ffffff;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084);
}
.sl-sel { position: relative; display: block; }
.sl-field select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.sl-sel .sel-caret { right: 13px; }
.sl-faq {
  margin-top: 22px; box-sizing: border-box; padding: 4px 28px 12px; border-radius: 18px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08);
  box-shadow: 0 6px 20px rgba(13, 38, 90, .05);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px;
  align-items: start;
}
.sl-faq .info-qa {
  border-bottom: none; border-top: 1px solid rgba(13, 38, 90, .07);
}
.sl-faq .info-qa:nth-child(-n + 2) { border-top: none; }

.sl-steps-3 { grid-template-columns: repeat(3, 1fr); }
.sl-perks-3 { grid-template-columns: repeat(3, 1fr); }
.inv-panel { padding: 22px 22px 20px; }
.inv-panel .sh-label-2 { margin-top: 18px; }
.inv-link {
  flex: 1; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 14px;
  background: rgba(13, 38, 90, .05);
  border: 1px solid rgba(13, 38, 90, .1); border-radius: 10px;
  font-size: 13px; color: rgba(30, 50, 80, .8);
  text-overflow: ellipsis;
}
.inv-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.inv-code {
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid rgba(13, 38, 90, .08);
  font-size: 12px; line-height: 18px; color: rgba(30, 50, 80, .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-code b { font-weight: 700; color: #0C1626; }
.inv-note { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(30, 50, 80, .7); text-wrap: pretty; }
.inv-cta { margin-top: 16px; }

.sl-hero-solo { grid-template-columns: 1fr; }
.aff-hero-note { margin-top: 20px; max-width: 620px; }
.aff-hero-t { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: #ffffff; }
.aff-hero-p {
  margin: 0; font-size: 13px; line-height: 1.75;
  color: rgba(255, 255, 255, .86); text-wrap: pretty;
}
.aff-wait { cursor: default; }
.aff-wait:hover { transform: none; box-shadow: none; }
.aff-note {
  margin: 16px 0 0; padding: 14px 18px;
  background: rgba(var(--brand-rgb), .06); border-left: 3px solid var(--brand-primary);
  border-radius: 0 12px 12px 0;
}
.aff-note.is-bad { background: rgba(192, 38, 31, .05); border-left-color: #C0261F; }
.aff-note b { display: block; font-size: 14px; line-height: 20px; font-weight: 700; }
.aff-note span {
  display: block; margin-top: 3px;
  font-size: 13px; line-height: 20px; color: rgba(30, 50, 80, .78); text-wrap: pretty;
}

.afd-kvs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.afd-kv i { display: block; font-style: normal; font-size: 12px; line-height: 17px; color: rgba(30, 50, 80, .72); }
.afd-kv b {
  display: block; margin-top: 2px;
  font-size: 18px; line-height: 24px; font-weight: 700; color: #17233B;
  font-variant-numeric: tabular-nums;
}
.afd-kv em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12px; line-height: 17px; font-weight: 600; color: #0E7D45;
  font-variant-numeric: tabular-nums;
}
.afd-sub { margin: 16px 0 0; font-size: 12px; line-height: 17px; font-weight: 600; color: rgba(30, 50, 80, .72); }
.afd-th { display: flex; align-items: baseline; gap: 10px; }
.afd-th b { margin-left: auto; min-width: 76px; text-align: right; font-weight: 600; color: inherit; }
.afd-sub-row { display: flex; align-items: center; gap: 12px; }
.afd-sub-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afd-range { margin-left: auto; flex: none; display: flex; gap: 6px; }
.afd-range-b {
  height: 30px; padding: 0 11px; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center;
  background: #ffffff; border: 1px solid transparent; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(13, 38, 90, .08);
  font-family: inherit; font-size: 12px; font-weight: 600; color: rgba(30, 50, 80, .78);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.afd-range-b:hover { color: var(--brand-text); box-shadow: 0 2px 8px rgba(13, 38, 90, .1); }
.afd-range-b.is-on, .afd-range-b.is-on:hover { border-color: var(--brand-primary); color: var(--brand-text); box-shadow: none; }
.afd-range-b:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.afd-ln { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.afd-ln-grid { stroke: rgba(13, 38, 90, .09); stroke-width: 1; }
.afd-ln-yl, .afd-ln-xl { font-size: 11px; font-weight: 500; fill: rgba(30, 50, 80, .7); }
.afd-ln-path { fill: none; stroke: var(--brand-text); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.afd-ln-dot { fill: #ffffff; stroke: var(--brand-text); stroke-width: 2; }
.afd-ln-empty { margin-top: 8px; padding: 28px 0; text-align: center; }
.afd-row {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 8px; margin-top: 8px; border-top: 1px solid rgba(13, 38, 90, .07);
  font-size: 13px; line-height: 19px;
}
.afd-row span { font-weight: 600; color: #17233B; white-space: nowrap; }
.afd-row i {
  font-style: normal; color: rgba(30, 50, 80, .72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.afd-row i.afd-goods { flex: 1 1 auto; min-width: 64px; color: #17233B; }
.afd-row i.afd-meta { flex: none; }
.afd-row.afd-ord {
  width: calc(100% + 16px); margin-left: -8px; margin-right: -8px;
  padding-left: 8px; padding-right: 8px; padding-bottom: 8px; margin-bottom: -8px;
  border-left: 0; border-right: 0; border-bottom: 0; border-radius: 8px;
  background: none; font-family: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease;
}
.afd-row.afd-ord:hover { background: rgba(13, 38, 90, .04); }
.afd-row.afd-ord:active { background: rgba(13, 38, 90, .07); transition-duration: .1s; }
.afd-row.afd-ord:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.afd-all-btn {
  width: 100%; margin-top: 12px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(var(--brand-rgb), .28); background: var(--brand-soft);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand-text); cursor: pointer;
  transition: background-color .15s ease;
}
.afd-all-btn:hover { background: #E8F0FF; }
.afd-all-btn:active { background: var(--brand-border); transition-duration: .1s; }
.afd-all-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.afd-row em { font-style: normal; margin-left: auto; font-size: 12px; color: rgba(30, 50, 80, .72); white-space: nowrap; }
.afd-row em.is-wait { color: #C2410C; }
.afd-row b {
  margin-left: auto; min-width: 76px; text-align: right;
  font-weight: 700; color: #17233B; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.afd-row em ~ b { margin-left: 10px; }
.afd-cash { margin-top: 14px; }
.afd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.afd-form[hidden] { display: none; }
.afd-form .sl-field[hidden] { display: none; }
.afd-acct { grid-column: 1 / -1; }
.afd-amt { position: relative; display: block; }
.afd-amt input { width: 100%; padding-right: 64px; }
.afd-all {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  height: 28px; padding: 0 11px; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--brand-soft);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand-text);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.afd-all:hover { background: var(--brand-border); color: var(--brand-hover); }
.afd-all:active { background: var(--brand-border); transition-duration: .1s; }
.afd-all:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.afd-form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.afd-form-foot span { font-size: 12px; line-height: 17px; color: rgba(30, 50, 80, .72); text-wrap: pretty; }
.afd-note, .afd-empty { margin: 10px 0 0; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7); text-wrap: pretty; }

.aff-form { margin-top: 22px; }

.slw-wrap { margin-inline: auto; }
.slw-head { margin-top: 26px; text-align: center; }
.slw-head-row { display: flex; align-items: center; justify-content: center; gap: 9px; }
.slw-head-row .prod-verify { width: 22px; height: 22px; }
.slw-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; color: #0C1626; }
.slw-step { margin: 7px 0 0; font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .7); }
.slw-card {
  position: relative; margin-top: 20px; box-sizing: border-box; padding: 36px 40px 34px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(13, 38, 90, .07); overflow: hidden;
}
.slw-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(13, 38, 90, .06); }
.slw-bar i { display: block; height: 100%; background: var(--brand-gradient); transition: width .3s ease; }
.slw-q { margin: 0 0 22px; text-align: center; font-size: 20px; line-height: 28px; font-weight: 700; color: #0C1626; }

.slw-opts { display: flex; flex-direction: column; }
.slw-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 13px; border-radius: 12px; cursor: pointer;
  transition: background-color .2s ease;
}
.slw-opt:hover { background: rgba(var(--brand-rgb), .05); }
.slw-opt input, .slw-agree input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 1px 0 0;
  width: 18px; height: 18px; box-sizing: border-box;
  border: 1.5px solid rgba(13, 38, 90, .24); background: #ffffff; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.slw-opt input[type="radio"] { border-radius: 50%; }
.slw-opt input[type="checkbox"], .slw-agree input { border-radius: 5px; }
.slw-opt:hover input, .slw-agree:hover input { border-color: rgba(var(--brand-rgb), .55); }
.slw-opt input:checked, .slw-agree input:checked { border-color: var(--brand-primary); background-color: var(--brand-action); }
.slw-opt input[type="radio"]:checked { box-shadow: inset 0 0 0 3.5px #ffffff; }
.slw-opt input[type="checkbox"]:checked, .slw-agree input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.2 4.6 9 10 3.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}
.slw-opt-txt { min-width: 0; }
.slw-opt-t { font-size: 14px; line-height: 20px; font-weight: 600; color: #0C1626; }
.slw-opt-d { display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7); text-wrap: pretty; }
.slw-when { margin: -2px 0 8px; padding-left: 43px; }

.slw-opts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; }
.slw-opts-grid .slw-opt { align-items: center; padding: 9px 13px; }
.slw-opts-grid .slw-opt input { margin-top: 0; }
.slw-opts-grid .slw-when { grid-column: 1 / -1; margin: 0 0 8px; padding-left: 13px; }
.slw-opt-ico { flex: none; display: block; }
.aff-multi { margin-left: 6px; font-size: 13px; font-weight: 500; font-style: normal; color: rgba(30, 50, 80, .6); }
.aff-where { margin-bottom: 20px; }

.slw-note {
  margin-bottom: 18px; padding: 13px 15px; border-radius: 12px;
  background: rgba(var(--brand-rgb), .07); border: 1px solid rgba(var(--brand-rgb), .18);
  display: flex; align-items: flex-start; gap: 10px;
}
.slw-note svg { flex: none; margin-top: 1px; }
.slw-note p { margin: 0; font-size: 14px; line-height: 21px; color: rgba(20, 35, 60, .82); text-wrap: pretty; }

.slw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.slw-grid > * { align-self: start; }
.slw-opts + .slw-grid { margin-top: 20px; }
.slw-lab {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 700; color: rgba(30, 50, 80, .75);
}
.slw-rule { grid-column: 1 / -1; height: 1px; margin: 4px 0 0; background: rgba(13, 38, 90, .07); }
.slw-req {
  display: inline-block; width: 5px; height: 5px; margin-left: 3px; vertical-align: 2px;
  border-radius: 50%; background: #E5484D;
}
.slw-hint { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7); }
.slw-warn { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: #B45309; }

.slw-cw { position: relative; }
.slw-cw input, .slw-cw textarea { padding-right: 62px; }
.slw-cnt {
  position: absolute; right: 12px; bottom: 11px;
  font-size: 13px; font-weight: 600; color: rgba(30, 50, 80, .7); pointer-events: none;
}

.slw-phone { display: flex; gap: 8px; }
.slw-phone .dial-pick { flex: none; }
.slw-phone input { flex: 1; min-width: 0; }

.dial-pick { position: relative; display: block; }
.dial-btn {
  position: relative; box-sizing: border-box; width: 84px; height: 41px;
  display: flex; align-items: center; padding: 0 13px; cursor: pointer;
  border: 1px solid rgba(13, 38, 90, .12); border-radius: 11px;
  background: rgba(13, 38, 90, .025);
  font-family: inherit; font-size: 14px; font-weight: 500; color: #0C1626;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.dial-btn:hover { border-color: rgba(13, 38, 90, .22); }
.dial-btn:focus-visible {
  outline: none; border-color: rgba(var(--brand-rgb), .6); background: #ffffff;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.084);
}
.dial-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: max-content; max-height: 288px; overflow-y: auto;
  box-sizing: border-box; padding: 8px;
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .1); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(13, 38, 90, .18);
  transform-origin: top left;
  animation: popDown .15s var(--ease-out);
}
.dial-row {
  width: 100%; height: 34px; padding: 0 10px; border: none; border-radius: 9px;
  background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #0C1626;
  transition: background-color .2s ease;
}
.dial-row b { flex: none; min-width: 40px; font-weight: 600; color: rgba(30, 50, 80, .6); }
.dial-row:hover { background: rgba(var(--brand-rgb), .09); }
.dial-row.is-on { color: var(--brand-text); }
.dial-row.is-on b { color: var(--brand-text); }
.dial-row svg { margin-left: auto; flex: none; display: block; }
.dial-row.is-on svg {
  box-sizing: content-box; width: 10px; height: 10px; padding: 3px;
  border-radius: 50%; background: var(--brand-action);
}

.slw-file {
  position: relative; box-sizing: border-box; min-height: 74px; padding: 14px 16px;
  border: 1.5px dashed rgba(13, 38, 90, .18); border-radius: 12px;
  background: rgba(13, 38, 90, .02); cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: background-color .2s ease, border-color .2s ease;
}
.slw-file:hover { border-color: rgba(var(--brand-rgb), .5); background: rgba(var(--brand-rgb), .04); }
.slw-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.slw-file svg { flex: none; }
.slw-file-txt { min-width: 0; }
.slw-file-t { display: block; font-size: 14px; font-weight: 700; color: #0C1626; }
.slw-file-n {
  display: block; margin-top: 3px; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slw-file.is-on { border-style: solid; border-color: rgba(var(--brand-rgb), .45); background: rgba(var(--brand-rgb), .05); }
.slw-file.is-on .slw-file-n { color: var(--brand-text); font-weight: 600; }
.slw-ava-row { position: relative; display: flex; align-items: center; }
.slw-ava {
  box-sizing: border-box; flex: none; width: 62px; height: 62px;
  border-radius: 15px; object-fit: cover; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.slw-ava.is-empty {
  border: 1.5px dashed rgba(var(--brand-rgb), .4);
  background: rgba(46, 124, 255, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B6BFF' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.slw-ava.is-empty:hover { border-color: rgba(var(--brand-rgb), .7); background-color: rgba(var(--brand-rgb), .13); }
.slw-ava:not(.is-empty):hover { opacity: .85; }
.sl-field .slw-ava-row input {
  position: absolute; left: 0; top: 0; width: 62px; height: 62px;
  padding: 0; border: none; background: none; opacity: 0; cursor: pointer;
}

.slw-pays { grid-template-columns: repeat(3, 1fr); }
.slw-pays .co-pay { position: relative; }
.slw-pays .co-pay input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.slw-sum { border-top: 1px solid rgba(13, 38, 90, .07); }
.slw-sum-row { padding: 14px 2px 16px; border-bottom: 1px solid rgba(13, 38, 90, .06); }
.slw-sum-top { display: flex; align-items: baseline; gap: 12px; }
.slw-sum-k {
  flex: 1; min-width: 0; font-size: 14px; line-height: 20px;
  font-weight: 600; color: #0C1626;
}
.slw-sum-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.slw-sum-f { min-width: 0; }
.slw-sum-f-wide { grid-column: 1 / -1; }
.slw-sum-fk { display: block; font-size: 13px; line-height: 18px; color: rgba(30, 50, 80, .7); }
.slw-sum-fv {
  display: block; margin-top: 2px; font-size: 14px; line-height: 21px;
  font-weight: 600; color: #0C1626; text-wrap: pretty; overflow-wrap: anywhere;
}
.slw-edit {
  flex: none; padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand-text);
}
.slw-edit:hover { text-decoration: underline; }
.slw-agree { margin-top: 20px; display: flex; align-items: flex-start; gap: 12px; }
.slw-agree .slw-opt-t { font-weight: 500; color: rgba(20, 35, 60, .82); }
.slw-agree a { font-weight: 600; }

.slw-acts { margin-top: 22px; display: flex; justify-content: center; gap: 14px; }
.slw-acts .solo-cta { margin-top: 0; min-width: 172px; justify-content: center; }

.buy-acts { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.buy-acts .buy-cta { flex: 1; min-width: 0; }
.buy-cart {
  width: 50px; height: 50px; box-sizing: border-box; flex: none;
  border-radius: 12px; cursor: pointer; padding: 0;
  background: rgba(var(--brand-rgb), .06); border: 1px solid rgba(var(--brand-rgb), .28); color: var(--brand-text);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s var(--ease-out);
}
.buy-cart:hover { background: rgba(var(--brand-rgb), .12); border-color: rgba(var(--brand-rgb), .55); transform: translateY(-2px); }
.co-cpns { margin-top: 14px; }
.co-cpns .co-label { display: flex; align-items: baseline; gap: 8px; }
.co-cpn-n {
  margin-left: auto; font-style: normal; font-size: 12px; line-height: 18px;
  font-weight: 500; color: rgba(30, 50, 80, .64); font-variant-numeric: tabular-nums;
}
.co-cpn-list {
  margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
  max-height: 248px; overflow-y: auto;
}
.co-cpn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; text-align: left; cursor: pointer;
  background: var(--brand-soft); border: 1px solid rgba(var(--brand-rgb), .22); border-radius: 12px;
  font-family: inherit; transition: border-color .15s ease, background .15s ease;
}
.co-cpn:hover { border-color: rgba(var(--brand-rgb), .4); }
.co-cpn.is-on { background: var(--brand-border); border-color: var(--brand-primary); }
.co-cpn-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-cpn-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.co-cpn-name { overflow: hidden; white-space: nowrap; }
.co-cpn-face {
  flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}
.co-cpn-meta {
  font-size: 12px; line-height: 17px; color: rgba(30, 50, 80, .64);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-cpn-off {
  margin-left: auto; flex: none; font-size: 14px; line-height: 20px; font-weight: 700;
  color: var(--brand-text); font-variant-numeric: tabular-nums;
}
.co-cpn.is-void {
  background: rgba(13, 38, 90, .03); border-color: rgba(13, 38, 90, .08); cursor: default;
}
.co-cpn.is-void:hover { border-color: rgba(13, 38, 90, .08); }
.co-cpn.is-void .co-cpn-name { color: rgba(12, 22, 38, .64); }
.co-cpn.is-void .co-cpn-off { font-size: 13px; font-weight: 500; color: rgba(30, 50, 80, .64); }
.co-cpn-empty {
  margin-top: 6px; font-size: 13px; line-height: 19px; color: rgba(30, 50, 80, .64);
}
.co-cpn-empty a { color: var(--brand-text); font-weight: 600; }
.co-item + .co-item-flags + .co-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(13, 38, 90, .06); }
.co-item-price { margin-left: auto; font-size: 14px; font-weight: 700; color: #0C1626; }

.affp-list { display: flex; flex-direction: column; gap: 10px; }
.affp-group { display: flex; flex-direction: column; gap: 4px; }
.affp-row {
  display: grid;
  grid-template-columns: 1fr minmax(132px, max-content) minmax(132px, max-content) minmax(0, 230px) auto;
  align-items: center; gap: 18px;
  padding: 14px 18px; background: #ffffff;
  border: 1px solid rgba(13, 38, 90, .08); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(13, 38, 90, .04);
  cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), border-color .15s var(--ease-out);
}
.affp-row:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-rgb), .22);
  box-shadow: 0 6px 16px rgba(13, 38, 90, .08);
}
.affp-row:active { transform: translateY(0); transition-duration: .1s; }
.affp-link, .affp-copy { cursor: auto; }
.affp-copy { cursor: pointer; }
.affp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.affp-name {
  min-width: 0; font-size: 14px; font-weight: 600; color: #0C1626;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.affp-name:hover { color: var(--brand-text); }
.affp-multi {
  background: #ffffff; border: 1px solid rgba(13, 38, 90, .08); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(13, 38, 90, .04);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.affp-multi[open] { border-color: rgba(var(--brand-rgb), .22); box-shadow: 0 6px 16px rgba(13, 38, 90, .08); }
.affp-multi .affp-row {
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  grid-template-columns: 1fr minmax(132px, max-content) minmax(132px, max-content) minmax(0, 230px) 86px;
}
.affp-sum { list-style: none; }
.affp-sum::-webkit-details-marker { display: none; }
.affp-sum:hover { background: rgba(var(--brand-rgb), .04); }
.affp-multi[open] .affp-sum { border-bottom: 1px solid rgba(13, 38, 90, .07); }
.affp-nsel {
  align-self: start; font-style: normal; font-size: 12px; font-weight: 600; color: var(--brand-text);
  background: rgba(var(--brand-rgb), .1); border-radius: 6px; padding: 1px 7px;
}
.affp-more {
  grid-column: 5; justify-self: end; display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--brand-text); white-space: nowrap;
}
.affp-more svg { transition: transform .15s var(--ease-out); }
.affp-multi[open] .affp-more svg { transform: rotate(180deg); }
.affp-subs .affp-row + .affp-row { border-top: 1px solid rgba(13, 38, 90, .07); }
.affp-sub .affp-name { font-size: 13px; }
.affp-sub:hover { background: rgba(var(--brand-rgb), .04); }
.affp-num { flex: none; display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; }
.affp-num i { font-style: normal; font-size: 12px; color: rgba(30, 50, 80, .7); }
.affp-num b { font-size: 14px; font-weight: 600; color: rgba(30, 50, 80, .8); font-variant-numeric: tabular-nums; }
.affp-cut b { font-size: 15px; font-weight: 700; color: #0C1626; }
.affp-link {
  min-width: 0; box-sizing: border-box; height: 40px; padding: 0 12px;
  background: rgba(13, 38, 90, .05);
  border: 1px solid rgba(13, 38, 90, .1); border-radius: 10px;
  font-size: 12px; color: rgba(30, 50, 80, .8); text-overflow: ellipsis;
}
.affp-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.affp-copy {
  flex: none; height: 40px; padding: 0 16px; cursor: pointer; white-space: nowrap;
  background: rgba(var(--brand-rgb), .08); border: 1px solid rgba(var(--brand-rgb), .28);
  border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand-text);
  transition: background-color .15s ease, border-color .15s ease;
}
.affp-copy:hover { background: rgba(var(--brand-rgb), .14); border-color: rgba(var(--brand-rgb), .5); }
.affp-copy:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }


.banner-link:active, .promo-card:active, .feat-card:active, .hot-card:active,
.info-card.is-link:active, .cart-thumb:active,
.sl-want:active, .tp-card:active, .shop-gcard:active {
  transform: translateY(0) scale(.985);
  transition-duration: .1s;
}
.offer-card:has(.offer-card-main:active) {
  transform: translateY(0) scale(.985);
  transition-duration: .1s;
}
.buy-cta:active, .co-cta:active, .solo-cta:active, .buy-cart:active,
.ad-modal-cta:active, .pa-tab:active,
.shop-add:active, .shop-cs:active,
.shop-share:active, .sh-copy:active, .sh-way:active, .ord-cs:active, .rev-send:active {
  transform: translateY(0) scale(.97);
  transition-duration: .1s;
}
.buy-step:active { transform: scale(.9); transition-duration: .1s; }

.sg-pop, .msg-up-pop, .dial-pop, .dp-pop {
  transition: opacity .14s var(--ease-out), transform .14s var(--ease-out);
}
.sg-pop.is-out, .dial-pop.is-out, .dp-pop.is-out { opacity: 0; transform: translateY(-4px) scale(.98); }
.head-pop { transition: opacity .16s var(--ease-out); }
.head-pop.is-out { opacity: 0; pointer-events: none; }
.head-pop.is-out .head-pop-box { transform: translateY(6px) scale(.98); transition: transform .16s var(--ease-out); }
.msg-up-pop.is-out { opacity: 0; transform: translateY(4px) scale(.98); }
.ad-modal, .sh-modal { transition: opacity .16s var(--ease-out); }
.ad-modal.is-out, .sh-modal.is-out { opacity: 0; pointer-events: none; }
.ad-modal.is-out .ad-modal-box,
.sh-modal.is-out .sh-box { transform: translateY(6px) scale(.98); transition: transform .16s var(--ease-out); }

.gm-head {
  height: 76px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(13, 38, 90, .08);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.gm-brand { grid-column: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.gm-logo { flex: none; padding: 2px; border-radius: 14px; }
.gm-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.gm-ico img { width: 26px; height: 26px; object-fit: contain; display: block; }
.gm-letter { font-size: 16px; font-weight: 700; color: var(--brand-text); }
.gm-name { font-size: 22px; line-height: 28px; font-weight: 700; color: #0C1626; }

.gm-tabs { grid-column: 2; align-self: stretch; display: flex; align-items: stretch; }
.gm-tab {
  position: relative; padding: 0 20px; display: flex; align-items: center;
  font-size: 15px; font-weight: 600; color: rgba(30, 50, 80, .78);
  white-space: nowrap; transition: color .2s ease;
}
.gm-tab::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px;
  background: var(--brand-action); border-radius: 3px 3px 0 0;
  opacity: 0; transition: opacity .2s ease;
}
.gm-tab:hover { color: #0C1626; }
.gm-tab.is-on { color: var(--brand-text); font-weight: 700; }
.gm-tab.is-on::after { opacity: 1; }
.gm-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -4px; border-radius: 8px; }

.gm-bar { min-height: 34px; display: flex; align-items: center; gap: 12px; }
.gm-bar .off-count { margin-right: auto; text-align: left; }
.gm-bar .off-sort { margin-left: auto; }

.buy-num-in {
  display: block; width: 106px; height: 36px; box-sizing: border-box;
  padding: 0; text-align: center; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #0C1626;
  border-block: none; border-radius: 0;
}
.buy-num-in:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.game-view > .gm-head:first-child,
.pdp-view > .gm-head:first-child { margin-top: -22px; }

.gcard-n {
  background: rgba(var(--brand-rgb), .08); border-color: rgba(var(--brand-rgb), .16);
  color: var(--brand-text);
}
.gm-head.is-solo { grid-template-columns: auto 1fr; }