/* ═══════════════════════════════════════════════════════════════
   FASTMARKET — Design System v2  |  blue/white branded theme
═══════════════════════════════════════════════════════════════ */

/* ─── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --tg-content-safe-top: 0px;

  --primary:       #1A7AE5;
  --primary-dk:    #1462C0;
  --primary-grad:  linear-gradient(135deg, #1462C0 0%, #2590F0 100%);
  --primary-light: #E8F1FD;

  --bg:     #EDF2F9;
  --card:   #FFFFFF;
  --border: #E4EAF4;

  --text:  #1a2333;
  --text2: #6a7b99;
  --text3: #9aa8c0;

  --r:    18px;
  --r-sm: 12px;

  --shadow:    0 4px 14px rgba(18,35,72,.08);
  --shadow-md: 0 10px 28px rgba(18,35,72,.12);

  --nav-h: 62px;

  --bg2:      var(--bg);
  --accent:   var(--primary);
  --accent-fg: #fff;
  --hint:     var(--text2);
  --link:     var(--primary);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}
a { color: var(--primary); text-decoration: none; }
a:hover { opacity: .80; }

/* PAGE SYSTEM */
.page {
  position: absolute; inset: 0; bottom: var(--nav-h);
  display: none; flex-direction: column; background: var(--bg);
  max-width: 100vw;
  overflow-x: hidden;
}
.page.active   { display: flex; }
.page.sub-page { bottom: 0; z-index: 10; }
.page-scroll {
  flex: 1; overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; padding-bottom: 24px;
}

/* SUB-PAGE HEADER */
.header {
  display: flex; align-items: center; padding: 12px 16px;
  background: var(--card); border-bottom: 1px solid var(--border);
  flex-shrink: 0; min-height: 52px; gap: 6px;
}
.header-brand { display: flex; align-items: center; gap: 8px; flex: 1; }
.header-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.header-sub .header-title { font-size: 15px; font-weight: 600; }
.back-btn {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--primary); cursor: pointer; padding: 4px 10px 4px 0;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}

/* BOTTOM NAV */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0));
  background: rgba(255,255,255,.92);
  border-top: 1px solid #dfe7f3;
  box-shadow: 0 -10px 28px rgba(20,45,88,.10);
  backdrop-filter: blur(10px);
  display: flex; align-items: stretch; z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav .nav-item {
  flex: 1; background: none; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; color: var(--text2);
  transition: color .15s, background .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
  margin: 6px 6px 4px;
  border-radius: 12px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav .nav-item:active { transform: translateY(1px); }
.bottom-nav .nav-item.active {
  color: var(--primary);
  background: #eaf3ff;
}
.bottom-nav .nav-icon  { font-size: 22px; line-height: 1; }
.bottom-nav .nav-label { font-size: 11px; font-weight: 700; letter-spacing: .01em; }

/* ═══ HOME PAGE — page-catalog ═══════════════════════════════ */
#page-catalog { flex-direction: column; }

/* Desktop top header */
.desk-header {
  display: none; align-items: center; height: 68px; padding: 0 24px;
  background: var(--card); border-bottom: 1px solid var(--border);
  gap: 16px; flex-shrink: 0; z-index: 5;
}
.dh-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.dh-logo-icon { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.dh-brand-name { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.4px; white-space: nowrap; }
.dh-brand-name b { color: var(--primary); font-weight: 900; }

.dh-search {
  flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 16px; color: var(--text2); font-size: 14px; cursor: pointer;
  transition: border-color .15s; user-select: none;
}
.dh-search:hover { border-color: var(--primary); }
.dh-search-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .55; }
.dh-search-text { flex: 1; }
.dh-kbd { font-size: 11px; background: var(--border); border-radius: 4px; padding: 2px 7px; font-family: monospace; color: var(--text3); white-space: nowrap; }

.dh-right { display: flex; align-items: center; gap: 0; flex-shrink: 0; margin-left: auto; }
.dh-nav-btn {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--text2); border-radius: var(--r-sm);
  transition: background .15s, color .15s; white-space: nowrap;
}
.dh-nav-btn:hover { background: var(--bg); color: var(--text); }
.dh-nav-btn.active {
  background: var(--primary-light);
  color: var(--primary);
}
.dh-nav-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.dh-login-btn {
  background: var(--primary); color: #fff; padding: 9px 22px;
  border-radius: var(--r-sm); border: none; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: background .15s; margin-left: 4px;
}
.dh-login-btn:hover { background: var(--primary-dk); }
.dh-login-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.dh-login-btn.active,
.dh-login-btn.nav-item.active {
  color: #fff;
  background: var(--primary-dk);
}
.dh-login-btn.active svg,
.dh-login-btn.nav-item.active svg {
  color: #fff;
}

/* Mobile mini-header */
.mob-mini-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top) + var(--tg-content-safe-top)) 14px 8px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.mob-brand-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 auto; }
.mob-logo-icon { width: 26px; height: 26px; object-fit: contain; }
.mob-brand { font-size: 16px; font-weight: 700; color: var(--text); }
.mob-brand b { color: var(--primary); font-weight: 900; }
.mob-head-actions { display: flex; align-items: center; gap: 4px; }
.mob-head-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #7c8aa6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mob-head-btn svg { width: 22px; height: 22px; }
.mob-head-btn:active { background: #edf3fe; color: var(--primary); }
.mob-head-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2b84ff;
  position: absolute;
  right: 7px;
  top: 7px;
}

/* Catalog body */
.catalog-body { flex: 1; display: flex; overflow: hidden; }

/* Left sidebar */
.desk-sidebar {
  display: none; flex-direction: column; width: 260px; flex-shrink: 0;
  background: var(--card); border-right: 1px solid var(--border);
  overflow: hidden; padding: 14px 0 0;
}
.ds-nav { padding: 0 10px; }
.ds-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.ds-nav-item:hover   { background: var(--primary-light); color: var(--primary); }
.ds-nav-item.ds-active { background: var(--primary); color: #fff; font-weight: 600; }
.ds-nav-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }

.ds-trust-badges { margin-top: 24px; padding: 0 12px; display: flex; flex-direction: column; gap: 16px; }
.ds-trust-item { display: flex; align-items: flex-start; gap: 10px; }
.ds-trust-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.ds-trust-title { font-size: 12px; font-weight: 700; color: var(--primary); line-height: 1.3; display: block; }
.ds-trust-sub { font-size: 11px; color: var(--text2); line-height: 1.4; margin-top: 2px; display: block; }

.ds-decor-wrap { margin-top: auto; overflow: hidden; }
.ds-decor-wrap img { width: 100%; height: auto; display: block; object-fit: contain; }

/* Main content */
.catalog-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  scrollbar-width: none;
}
.catalog-main::-webkit-scrollbar { display: none; }

/* Hero banner — фон применяется через JS из assets.json (data-asset="banner") */
.hero-banner {
  background: linear-gradient(135deg, #0f1b2d 0%, #1a3a5c 60%, #0d2137 100%) center center / cover no-repeat;
  border-radius: var(--r);
  margin: 12px; padding: 28px 24px;
  display: flex; align-items: center; min-height: 180px;
  overflow: hidden; position: relative;
}

/* Home hero carousel — swipeable slides + dot pagination. Each .hero-slide
   sets its own background-image (gradient, or a photo via data-asset like
   support_banner) rather than sharing .hero-banner, since slides need to sit
   in a horizontally-snapping row instead of .hero-banner's fixed box. */
.hero-carousel { margin: 10px 12px; border-radius: 18px; overflow: hidden; position: relative; }
.hero-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  padding: 20px 14px 52px; display: flex; align-items: stretch;
  aspect-ratio: 2 / 1; min-height: 180px;
  overflow: hidden; position: relative;
}
.hero-dots {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; justify-content: center; gap: 6px; padding: 0; z-index: 2;
}
.hero-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.38); transition: background .15s, width .15s; }
.hero-dot.active { background: #fff; width: 16px; }
@media (min-width: 600px) { .hero-slide { min-height: 220px; } }
@media (min-width: 900px) {
  .hero-carousel { margin: 16px; border-radius: 16px; }
  .hero-slide { padding: 36px 40px 52px; min-height: 260px; background-position: center; }
}

.hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; max-width: 54%; }
.hero-title { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.12); }
.hero-desc  { font-size: 13px; color: rgba(255,255,255,.88); line-height: 1.5; margin-bottom: 16px; }
.hero-ctas  { display: flex; flex-direction: column; gap: 10px; }
.hero-btn-fill {
  background: #fff; color: var(--primary-dk); border: none; border-radius: var(--r-sm);
  padding: 12px 20px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%;
  text-align: center; transition: opacity .15s, transform .1s; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.hero-btn-fill:active { opacity: .8; transform: scale(.97); }
.hero-btn-ghost {
  background: rgba(255,255,255,.18); color: #fff; border: 1.5px solid rgba(255,255,255,.65);
  border-radius: var(--r-sm); padding: 12px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; width: 100%; text-align: center; transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent; backdrop-filter: blur(4px);
}
.hero-btn-ghost:hover  { background: rgba(255,255,255,.28); }
.hero-btn-ghost:active { opacity: .8; transform: scale(.97); }
/* No img needed — image is in the background */
.hero-img-wrap { display: none; }
.hero-img { display: none; }

/* Trust row */
.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 12px; }
.trust-item {
  padding: 14px 12px;
  display: flex; align-items: center; gap: 10px;
}
.trust-icon { font-size: 26px; flex-shrink: 0; }
.trust-texts b { display: block; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.trust-texts p { font-size: 11.5px; color: var(--text2); line-height: 1.3; margin-top: 2px; }

/* Section heading */
.section-header-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 8px; }
.shr-title { font-size: 15px; font-weight: 700; color: var(--text); }
.shr-all   { font-size: 13px; color: var(--primary); background: none; border: none; cursor: pointer; font-weight: 500; padding: 0; }

/* Buy again — quiet personalization shortcut, deliberately smaller/muted
   than the section headings and catalog grid above/below it. */
.ba-row { padding: 2px 0; }
.ba-header { padding: 0 12px 6px; }
.ba-title { font-size: 11.5px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .3px; }
.ba-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ba-scroll::-webkit-scrollbar { display: none; }
.ba-card {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 7px 14px 7px 7px; max-width: 220px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(18,35,72,.05);
  -webkit-tap-highlight-color: transparent; transition: background .1s, transform .1s;
}
.ba-card:active { transform: scale(.96); background: var(--bg); }
/* Same colored icon-chip language as .order-row-icon in "Мои заказы",
   just scaled down for this row's smaller, quieter footprint. */
.ba-card-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.ba-card-icon svg { display: block; flex-shrink: 0; width: 16px; height: 16px; }
.ba-card-label {
  font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 152px;
}

/* Скины CS2 — mobile home teaser row. Reuses .ba-scroll for the horizontal
   scroll mechanics (same overflow-x/gap/no-scrollbar as Buy Again); only
   the card itself is new, since it needs an image, unlike .ba-card. */
.csm-home-card {
  flex: 0 0 auto; width: 108px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .1s;
}
.csm-home-card:active { transform: scale(.96); }
.csm-home-card-img { width: 108px; height: 72px; border-radius: 10px; margin-bottom: 6px; }
.csm-home-card-name {
  font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; min-height: 28px; margin-bottom: 2px;
}
.csm-home-card-price { font-size: 12.5px; font-weight: 700; color: var(--primary); }

/* Hero mini-stats — order count / rating / buyer count badges directly
   under the hero (homepage reference design). Desktop only. */
.hero-mini-stats { display: none; }
@media (min-width: 900px) {
  .hero-mini-stats { display: flex; gap: 10px; margin: 0 16px 22px; }
  .hms-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 12px 14px; box-shadow: 0 1px 6px rgba(0,0,0,.05);
  }
  .hms-icon {
    width: 36px; height: 36px; border-radius: 10px; background: var(--primary-light);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .hms-icon img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }
  .hms-texts b    { display: block; font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.2; }
  .hms-texts span { font-size: 11.5px; color: var(--text2); }
}

/* Category tiles — colored banner-style buttons (homepage reference design),
   desktop-only companion to the mobile/detail .cats-grid list rows. Each
   tile's background is an inline gradient placeholder; swap it for real
   banner art later (see CONVERT_IMAGES.md's data-asset pipeline). */
.hcat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 16px 16px; }
@media (min-width: 900px) { .hcat-grid { grid-template-columns: repeat(4,1fr); } }
.hcat-tile {
  border-radius: var(--r); padding: 18px 18px 16px; min-height: 118px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  position: relative; overflow: hidden;
  cursor: pointer; color: #fff; background-size: cover; background-position: center;
  transition: transform .12s, box-shadow .12s; box-shadow: 0 6px 16px rgba(18,35,72,.14);
}
.hcat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,17,29,.76) 0%, rgba(9,17,29,.60) 38%, rgba(9,17,29,.22) 68%, rgba(9,17,29,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.10) 100%);
}
.hcat-tile > * { position: relative; z-index: 1; }
.hcat-tile > :last-child {
  max-width: 56%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
.hcat-tile:hover  { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(18,35,72,.20); }
.hcat-tile:active { transform: scale(.97); }
.hcat-tile-icon {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hcat-tile-icon img { width: 18px; height: 18px; }
.hcat-tile-name  { font-size: 14px; font-weight: 700; line-height: 1.22; min-height: 34px; text-shadow: 0 2px 10px rgba(0,0,0,.34); }
.hcat-tile-count { font-size: 11.5px; color: rgba(255,255,255,.88); text-shadow: 0 2px 10px rgba(0,0,0,.34); }

@media (min-width: 900px) {
  .hcat-tile {
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: 18px;
  }

  .hcat-tile > :last-child {
    position: absolute;
    left: 18px;
    right: 34%;
    bottom: 16px;
    max-width: none;
    min-height: 0;
    justify-content: flex-end;
    gap: 6px;
  }

  .hcat-tile-name {
    min-height: 0;
    font-size: 13px;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .hcat-tile-count {
    font-size: 11px;
    line-height: 1.2;
    flex-shrink: 0;
  }
}

/* Popular products row — fixed-width horizontal scroller so more cards can be
   appended without reworking the layout. Mobile keeps rectangular cards in a
   swipeable row; desktop shows wider cards with horizontal overflow when the
   list grows. */
.pprod-grid {
  display: flex;
  gap: 12px;
  padding: 0 16px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pprod-grid.is-auto-scrolling { scroll-snap-type: none; }
.pprod-grid::-webkit-scrollbar { display: none; }
.pprod-card {
  flex: 0 0 198px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 12px; position: relative; cursor: pointer;
  min-height: 198px;
  display: grid; grid-template-rows: auto minmax(54px, auto) minmax(34px, auto) auto; gap: 6px;
  transition: transform .12s, box-shadow .12s; box-shadow: 0 1px 6px rgba(0,0,0,.05);
  scroll-snap-align: start;
}
.pprod-card:hover  { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pprod-card:active { transform: scale(.97); }
.pprod-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 15px; font-weight: 800; overflow: hidden;
  margin-bottom: 2px;
}
.pprod-icon svg { width: 24px; height: 24px; display: block; }
.pprod-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pprod-name {
  font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.22;
  min-height: 54px; display: flex; align-items: flex-start;
}
.pprod-sub  {
  font-size: 11px; color: var(--text2); line-height: 1.35;
  min-height: 30px; display: flex; align-items: flex-start;
}
.pprod-foot {
  display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto;
  padding-top: 10px; border-top: 1px solid rgba(107,122,153,.14);
}
.pprod-price  { font-size: 12.5px; font-weight: 700; color: var(--text); }
.pprod-rating { font-size: 11px; color: #f5a623; font-weight: 600; }
.pprod-pct {
  position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 700;
  color: var(--primary); background: var(--primary-light); border-radius: 20px; padding: 2px 8px;
}

@media (min-width: 900px) {
  .pprod-grid {
    gap: 14px;
  }

  .pprod-card {
    flex-basis: 222px;
    min-height: 206px;
  }
}

/* Categories grid */
.cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 16px; }
.cat-row-item {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-radius: 16px; padding: 14px 12px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(19,43,88,.08);
  border: 1px solid rgba(26,122,229,.10);
  transition: transform .12s, box-shadow .12s, border-color .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.cat-row-item:hover { box-shadow: 0 12px 26px rgba(19,43,88,.14); border-color: rgba(26,122,229,.20); }
.cat-row-item:active { transform: scale(.97); }
.cat-banner-card {
  --cat-banner-pad: 14px;
  min-height: 148px;
  padding: var(--cat-banner-pad);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  background-size: cover;
  background-position: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(18,35,72,.14);
}
.cat-banner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(112deg, rgba(9,17,29,.52) 0%, rgba(9,17,29,.34) 34%, rgba(9,17,29,.12) 62%, rgba(9,17,29,.02) 100%),
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.06) 100%);
}
.cat-banner-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(138% 96% at -6% 104%, rgba(7,14,24,.66) 0%, rgba(7,14,24,.38) 48%, rgba(7,14,24,.14) 70%, rgba(7,14,24,0) 100%),
    radial-gradient(92% 62% at 22% 100%, rgba(7,14,24,.42) 0%, rgba(7,14,24,.18) 54%, rgba(7,14,24,0) 100%);
}
.cat-banner-card > * { position: relative; z-index: 1; }
.cat-banner-card .cri-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,.16);
  color: #fff;
}
.cat-banner-card .cri-icon-wrap img { width: 22px; height: 22px; }
.cat-banner-card .cri-texts {
  align-self: flex-start;
  margin-top: auto;
  width: min(100%, calc(82% + var(--cat-banner-pad)));
  max-width: min(100%, calc(82% + var(--cat-banner-pad)));
  padding: 0 8px 2px var(--cat-banner-pad);
  margin: 0 0 0 calc(var(--cat-banner-pad) * -1);
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
}
.cat-banner-card .cri-name {
  color: #fff;
  font-size: 16px;
  line-height: 1.16;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.cat-banner-card .cri-sub {
  color: rgba(255,255,255,.84);
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0,0,0,.26);
}
.cat-banner-card .cri-arrow { display: none; }
.cri-icon-wrap {
  width: 46px; height: 46px; background: var(--primary-light); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  color: var(--primary);
}
.cri-icon-wrap img { width: 30px; height: 30px; object-fit: contain; }
.cri-icon-wrap > svg { width: 28px; height: 28px; }
/* Категории service cards nest the same real .psvc-icon markup used by the
   "Популярные сервисы" list — stretch it to fill the 46px tile instead of
   showing a smaller badge floating inside a second background. */
.cri-icon-wrap .psvc-icon,
.cri-icon-wrap .svc-icon-photo-wrap { width: 100%; height: 100%; border-radius: 12px; }
.cri-icon-wrap .psvc-icon img,
.cri-icon-wrap .svc-icon-photo-wrap img { width: 100%; height: 100%; }
.cri-icon-wrap .psvc-icon svg { width: 26px; height: 26px; }
.cri-icon-wrap .psvc-icon-brand svg { width: 22px; height: 22px; }
.psvc-icon-googleplay {
  background: #fff !important;
  border: 1px solid rgba(66,133,244,.28);
}
.psvc-icon-googleplay svg { width: 20px; height: 20px; }
.cri-emoji  { font-size: 24px; }
.cri-texts  { flex: 1; min-width: 0; }
.cri-name   { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; }
.cri-sub    { font-size: 11px; color: var(--text2); line-height: 1.4; margin-top: 2px; }
.cri-arrow  { font-size: 18px; color: var(--text3); flex-shrink: 0; line-height: 1; }

/* Категории page — sort control + "didn't find it" support banner */
.cat-sort-row { display: flex; justify-content: flex-end; padding: 0 12px 10px; }
.cat-sort-row .svcsec-filter { width: auto; }
.cat-support-cta {
  display: flex; align-items: center; gap: 12px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #0f1b2d 0%, #1a3a5c 60%, #0d2137 100%);
  border-radius: var(--r); padding: 18px 16px; margin: 4px 12px 16px; min-height: 130px;
}
.cat-support-text { position: relative; z-index: 1; max-width: 62%; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cat-support-text b    { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.cat-support-text span { font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.4; }
.cat-support-text .btn { margin-top: 4px; }
.cat-support-img {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 100%; max-width: 38%; width: auto; object-fit: contain;
  opacity: .9; pointer-events: none; z-index: 0;
}
@media (min-width: 480px) { .cat-support-img { max-width: 42%; height: 130%; opacity: 1; } }

/* Mobile home: compact "Популярное" quick grid + services list + promo strip.
   The full detailed grid (.home-desktop-cats) stays desktop-only; mobile
   users reach it via the "Категории" bottom-nav tab instead. */
.home-desktop-cats { display: none; }
@media (min-width: 900px) {
  .home-desktop-cats { display: block; }
  .home-mobile-cats  { display: none; }
}

/* Fixed card width (no flex-grow) so the row always overflows into a real
   horizontal scroller instead of stretching 4 cards to fill the screen —
   more categories can be appended later without any layout change. */
.quick-cats-row { display: flex; gap: 10px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-left: 16px; }
.quick-cats-row::-webkit-scrollbar { display: none; }
.quick-cats-row .quick-cat-item:first-child { margin-left: 4px; }
.quick-cat-item {
  flex: 0 0 132px; width: 132px; background: var(--card); border-radius: var(--r);
  padding: 18px 12px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: transform .12s; -webkit-tap-highlight-color: transparent; user-select: none;
  scroll-snap-align: start;
}
.quick-cat-item:active { transform: scale(.96); }
.quick-cat-banner {
  flex: 0 0 174px;
  width: 174px;
  min-height: 138px;
  padding: 14px 14px 16px;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  color: #fff;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(18,35,72,.14);
}
.quick-cat-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,17,29,.76) 0%, rgba(9,17,29,.56) 42%, rgba(9,17,29,.14) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.08) 100%);
}
.quick-cat-banner > * { position: relative; z-index: 1; }
.quick-cat-banner .quick-cat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,.16);
  color: #fff;
}
.quick-cat-banner .quick-cat-icon img { width: 22px; height: 22px; }
.quick-cat-banner .quick-cat-copy {
  max-width: 62%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quick-cat-banner .quick-cat-title {
  color: #fff;
  font-size: 17px;
  line-height: 1.08;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.quick-cat-banner .quick-cat-sub {
  color: rgba(255,255,255,.84);
  font-size: 11px;
  line-height: 1.32;
  text-shadow: 0 2px 10px rgba(0,0,0,.26);
}
.quick-cat-icon {
  width: 56px; height: 56px; background: var(--primary-light); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0;
}
.quick-cat-icon img { width: 30px; height: 30px; object-fit: contain; }
.quick-cat-icon svg { width: 28px; height: 28px; }
.quick-cat-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.quick-cat-sub   { font-size: 11px; color: var(--text2); line-height: 1.3; }

.mob-card-block {
  background: var(--card); border-radius: var(--r); margin: 0 12px 4px; padding: 6px 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.mob-card-block .drp-header { padding: 8px 4px 2px; }

.promo-strip {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border-radius: var(--r); padding: 14px 16px; margin: 8px 12px 4px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06); cursor: pointer; transition: transform .12s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.promo-strip:active { transform: scale(.98); }
.promo-strip-icon {
  width: 40px; height: 40px; border-radius: 12px; background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.promo-strip-body { flex: 1; min-width: 0; }
.promo-strip-body b    { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.promo-strip-body span { font-size: 11px; color: var(--text2); }

/* Stats bar */
.stats-bar  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 16px; }
.stats-item {
  background: var(--card); border-radius: var(--r); padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.stats-item b    { font-size: 18px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.stats-item span { font-size: 11px; color: var(--text2); line-height: 1.3; }

/* Catalog footer */
.catalog-footer {
  display: none; padding: 12px 20px; font-size: 12px; color: var(--text2);
  border-top: 1px solid var(--border); justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 8px;
}
.cf-links { display: flex; gap: 16px; }
.cf-links a { font-size: 12px; color: var(--text2); }
.cf-links a:hover { color: var(--primary); }

/* Right panel */
.desk-right-panel {
  display: none; flex-direction: column; width: 380px; flex-shrink: 0;
  background: var(--card); border-left: 1px solid var(--border);
  overflow-y: auto; padding: 16px 20px; gap: 22px;
}
.drp-section { display: flex; flex-direction: column; gap: 10px; }
.drp-header  { display: flex; align-items: center; justify-content: space-between; }
.drp-header > span { font-size: 14px; font-weight: 700; color: var(--text); }
.drp-all-link { font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 500; }

.popular-svcs-list { display: flex; flex-direction: column; }
.psvc {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px;
  border-radius: var(--r-sm); cursor: pointer; transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.psvc:hover  { background: var(--bg); }
.psvc:active { opacity: .75; }
.psvc + .psvc { border-top: 1px solid var(--border); }
.psvc-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  flex-shrink: 0; overflow: hidden;
}
.psvc-icon img { width: 38px; height: 38px; object-fit: cover; border-radius: 10px; }
.psvc-info { flex: 1; min-width: 0; }
.psvc-info b { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.psvc-info p { font-size: 11px; color: var(--text2); margin-top: 1px; }
.psvc-pct {
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 20px; padding: 3px 9px; flex-shrink: 0;
}

/* "Deal of the day" promo card — right panel. Background is an inline
   gradient placeholder; swap it for a real banner image via
   data-asset="promo_day" later (see CONVERT_IMAGES.md). */
.promo-day-card {
  border-radius: var(--r); padding: 18px 16px; position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  color: #fff; min-height: 140px; display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
}
.promo-day-badge {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; background: rgba(255,255,255,.16); border-radius: 20px; padding: 3px 10px;
}
.promo-day-text { font-size: 13.5px; font-weight: 600; line-height: 1.4; max-width: 78%; }
.promo-day-text b { color: #fff; }
.promo-day-timer {
  font-size: 20px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  margin-top: auto;
}

.review-card { background: var(--bg); border-radius: var(--r); padding: 14px; }
.rc-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rc-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.rc-date  { font-size: 11px; color: var(--text2); }
.rc-body  { font-size: 13px; color: var(--text); line-height: 1.55; margin-bottom: 8px; }
.rc-author { font-size: 12px; font-weight: 600; color: var(--text2); }
.rc-dots { color: var(--text3); font-size: 10px; letter-spacing: 4px; margin-top: 10px; text-align: center; }

.section-card { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }

/* >= 600px: hero side-by-side buttons */
@media (min-width: 600px) {
  .hero-ctas { flex-direction: row; }
  .hero-btn-fill, .hero-btn-ghost { width: auto; }
  .hero-banner { min-height: 200px; }
}

/* DESKTOP >= 900px */
@media (min-width: 900px) {
  .page { bottom: 0; }
  .bottom-nav { display: none !important; }
  .desk-header { display: flex; }
  .desk-sidebar { display: flex; }
  .desk-right-panel { display: flex; }
  .mob-mini-header { display: none; }
  .catalog-footer  { display: flex; }
  #page-catalog { max-width: 1600px; width: 100%; margin: 0 auto; }
  .catalog-body { gap: 12px; padding: 12px; }
  .desk-sidebar,
  .catalog-main,
  .desk-right-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(22,47,90,.06);
  }
  .desk-header {
    margin: 8px 12px 0 28px;
    padding: 0 84px 0 56px;
    border-radius: 14px;
    border: 1px solid var(--border);
  }
  .dh-search { max-width: 560px; margin-right: 8px; }
  .dh-right { margin-left: 0; transform: translateX(-14px); }
  .hero-banner { margin: 16px; padding: 36px 40px; border-radius: 16px; min-height: 240px; }
  .hero-title  { font-size: 30px; }
  .hero-desc   { font-size: 14.5px; max-width: 360px; margin-bottom: 24px; }
  .hero-btn-fill, .hero-btn-ghost { padding: 13px 24px; font-size: 14.5px; }
  .hero-text   { max-width: 48%; }
  .trust-row { grid-template-columns: repeat(4,1fr); padding: 0 16px 12px; }
  .cats-grid { grid-template-columns: repeat(3,1fr); padding: 0 16px 16px; }
  .stats-bar { grid-template-columns: repeat(4,1fr); padding: 4px 16px 16px; }
  .section-header-row { padding: 16px 16px 10px; }
  .ba-row { padding: 4px 0 8px; }
  .ba-header { padding: 0 16px 8px; }
  .ba-scroll { padding: 0 16px 4px; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .trust-row { grid-template-columns: repeat(4,1fr); }
  .stats-bar { grid-template-columns: repeat(4,1fr); }
}

/* ═══ TABS ═══════════════════════════════════════════════════ */
.tab-bar {
  display: flex; gap: 0; padding: 0 4px;
  background: var(--card); border-bottom: 1.5px solid var(--border);
  flex-shrink: 0; overflow-x: auto; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0; background: none; border: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  padding: 12px 18px; font-size: 14px; font-weight: 600;
  color: var(--text2); cursor: pointer;
  transition: color .15s, border-color .15s; -webkit-tap-highlight-color: transparent;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: none; }

/* ═══ FORMS ══════════════════════════════════════════════════ */
.detail-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.form-block  { display: flex; flex-direction: column; gap: 7px; }
.form-label  { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.form-input  {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 15px; color: var(--text); width: 100%; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .15s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,122,229,.10); }
.form-textarea {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 14px; color: var(--text); outline: none; resize: vertical;
  font-family: inherit; transition: border-color .15s;
}
.form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,122,229,.10); }

.slr-photo-picker {
  aspect-ratio: 1.6 / 1; border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg); border: 1.5px dashed var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.slr-photo-picker:hover { border-color: var(--primary); background: var(--primary-light); }
.slr-photo-picker-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slr-photo-picker-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 26px; color: var(--text3); pointer-events: none;
}
.slr-photo-picker-empty span { font-size: 12.5px; font-weight: 600; color: var(--text2); }

/* ═══ ORDER CHAT (buyer<->seller deal chat) ══════════════════ */
.chat-bubble { max-width: 88%; padding: 8px 12px; border-radius: var(--r-sm); background: var(--bg2, var(--card)); }
.chat-bubble-me   { align-self: flex-end; background: var(--primary-light); margin-left: auto; }
.chat-bubble-them { align-self: flex-start; background: var(--card); border: 1px solid var(--border); }
.chat-bubble-meta { font-size: 10.5px; color: var(--text2); margin-bottom: 3px; }
.chat-bubble-body { font-size: 13.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
/* System (automated) + support (staff) messages — visually distinct from the
   two parties so a buyer/seller can tell it's the platform, not the other side
   pretending to be support. Centered, full-width, tinted. */
.chat-bubble-system,
.chat-bubble-support {
  align-self: center; max-width: 96%; margin: 2px auto;
  border-radius: var(--r-sm); border: 1px dashed transparent;
}
.chat-bubble-system  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); }
.chat-bubble-support { background: rgba(26,122,229,.10); border-color: rgba(26,122,229,.45); border-style: solid; }
.chat-bubble-system  .chat-bubble-meta { color: #b45309; font-weight: 700; }
.chat-bubble-support .chat-bubble-meta { color: var(--primary-dk); font-weight: 700; }
.form-hint { font-size: 12px; color: var(--text2); line-height: 1.45; }
.input-row { display: flex; gap: 8px; }
.input-row .form-input { flex: 1; }
.btn-check {
  background: var(--primary-light); color: var(--primary); border: none; border-radius: var(--r-sm);
  padding: 0 16px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.btn-check:hover { background: var(--primary); color: #fff; }

.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.stepper { display: flex; align-items: center; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm); width: fit-content; overflow: hidden; }
.stepper-btn { background: none; border: none; font-size: 22px; font-weight: 300; color: var(--primary); width: 46px; height: 46px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.stepper-btn:active { opacity: .6; }
.stepper-val { min-width: 40px; text-align: center; font-size: 17px; font-weight: 700; }

.qty-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.qty-preset {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.qty-preset.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.total-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: var(--r); padding: 14px 16px; border: 2px solid var(--primary); }
.total-label  { font-size: 14px; color: var(--text2); }
.total-amount { font-size: 22px; font-weight: 800; color: var(--primary); }

.btn { width: 100%; padding: 14px; border: none; border-radius: var(--r); font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; transition: opacity .15s, transform .1s; -webkit-tap-highlight-color: transparent; line-height: 1; }
.btn:active   { opacity: .75; transform: scale(.98); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dk); }
.btn-outline  { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-sm       { padding: 10px 20px; width: auto; font-size: 13px; }

.error-msg { font-size: 13px; color: #d32f2f; background: rgba(211,47,47,.08); border-radius: var(--r-sm); padding: 10px 13px; text-align: center; }

/* ═══ CAT / OFFER ROWS ═══════════════════════════════════════ */
.category-list { padding: 0 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.cat-row { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: var(--r); padding: 12px 14px; cursor: pointer; margin-bottom: 6px; box-shadow: var(--shadow); transition: transform .1s; -webkit-tap-highlight-color: transparent; }
.cat-row:active { transform: scale(.98); }
.cat-row-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cat-row-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.cat-row-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row-note { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cat-row-chevron { font-size: 22px; color: var(--text3); flex-shrink: 0; line-height: 1; }

.offers-list { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.offer-row { background: var(--card); border-radius: var(--r); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color .15s; -webkit-tap-highlight-color: transparent; }
.offer-row.selected { border-color: var(--primary); }
.offer-row.out-of-stock { opacity: .45; pointer-events: none; }
.offer-row-name  { font-size: 14px; font-weight: 600; color: var(--text); }
.offer-row-stock { font-size: 12px; color: var(--text2); margin-top: 2px; }
.offer-row-price { font-size: 15px; font-weight: 800; color: var(--primary); flex-shrink: 0; }

.selected-offer-card { background: var(--primary-light); border-radius: var(--r); padding: 12px 16px; margin: 0 16px 0; border-left: 4px solid var(--primary); }
.soc-name  { font-size: 14px; font-weight: 700; color: var(--text); }
.soc-price { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 2px; }

#steam-gift-offers-list.offer-picker-grid,
#topup-offers-list.offer-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 12px 8px;
}

.offer-tile {
  position: relative;
  min-height: 98px;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1.5px solid #dfe8f6;
  box-shadow: 0 6px 18px rgba(19,43,88,.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.offer-tile:hover {
  border-color: rgba(26,122,229,.24);
  box-shadow: 0 10px 24px rgba(19,43,88,.12);
}

.offer-tile.selected {
  border-color: #2a7de8;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
  box-shadow: 0 0 0 2px rgba(42,125,232,.12), 0 10px 24px rgba(19,43,88,.12);
}

.offer-tile-wide {
  min-height: 112px;
}

.offer-tile .offer-row-name {
  font-size: 15px;
  line-height: 1.22;
  font-weight: 800;
  white-space: normal;
}

.offer-tile .offer-row-stock {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text2);
}

.offer-tile .offer-row-price {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1;
}

.offer-tile-check {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #2a7de8;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

.offer-tile.selected .offer-tile-check {
  display: flex;
}

#steam-gift-selected-card,
#topup-selected-card {
  margin: 0 12px;
  border-left: none;
  border: 2px solid rgba(42,125,232,.18);
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
  box-shadow: 0 6px 16px rgba(19,43,88,.08);
}

#steam-gift-selected-card .soc-name,
#topup-selected-card .soc-name {
  font-size: 15px;
  line-height: 1.25;
}

#steam-gift-selected-card .soc-price,
#topup-selected-card .soc-price {
  font-size: 14px;
  margin-top: 4px;
}

/* ═══ GIFT CARDS GRID ════════════════════════════════════════ */
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 20px; }
@media (min-width: 700px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
.cat-tile { background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%); border-radius: 16px; padding: 12px 10px 11px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; cursor: pointer; text-align: left; box-shadow: 0 6px 18px rgba(19,43,88,.09); border: 1px solid rgba(26,122,229,.10); transition: transform .1s, box-shadow .1s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.cat-tile:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cat-tile:active { transform: scale(.95); }
.cat-tile-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cat-tile-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; flex-shrink: 0; box-shadow: inset 0 -6px 14px rgba(0,0,0,.08); }
.cat-tile-badge { font-size: 10px; font-weight: 700; color: var(--primary); background: var(--primary-light); border-radius: 999px; padding: 3px 9px; }
.cat-tile-name { font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 30px; overflow-wrap: anywhere; }
.cat-tile-meta { font-size: 10.5px; line-height: 1.34; color: var(--text2); min-height: 27px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* ═══ SEARCH / SORT ══════════════════════════════════════════ */
.list-search-wrap { padding: 10px 12px 4px; }
.list-search { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 13px; font-size: 15px; color: var(--text); width: 100%; outline: none; -webkit-appearance: none; appearance: none; }
.list-search:focus { border-color: var(--primary); }
.sort-bar { display: flex; gap: 6px; padding: 4px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.sort-bar::-webkit-scrollbar { display: none; }
.sort-pill { flex-shrink: 0; background: var(--bg); border: 1.5px solid transparent; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.sort-pill.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* ═══ STEAM RATES ════════════════════════════════════════════ */
.rates-banner { background: var(--primary-grad); margin: 12px; border-radius: var(--r); padding: 14px 16px; color: #fff; font-size: 13px; text-align: center; }
.rates-loading { color: rgba(255,255,255,.75); font-size: 13px; }
.rates-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rate-chip { background: rgba(255,255,255,.18); border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: #fff; }

/* ═══ TELEGRAM PRICING / PREMIUM ════════════════════════════ */
.pricing-hero, .tg-stars-hero { background: var(--primary-grad); margin: 12px; border-radius: var(--r); padding: 20px; color: #fff; text-align: center; }
.ph-loading { color: rgba(255,255,255,.75); font-size: 13px; }
.ph-main  { display: flex; align-items: baseline; gap: 8px; justify-content: center; margin-bottom: 4px; }
.ph-big   { font-size: 34px; font-weight: 800; line-height: 1; color: #fff; }
.ph-label { font-size: 14px; opacity: .8; }
.ph-range { font-size: 12px; opacity: .65; }

.premium-plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 4px 16px 8px; }
.plan-card { background: var(--card); border-radius: var(--r); padding: 16px 8px; text-align: center; cursor: pointer; border: 2px solid transparent; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.plan-card:hover    { box-shadow: var(--shadow-md); }
.plan-card.selected { border-color: var(--primary); }
.plan-months       { font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.plan-months-label { font-size: 11px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.plan-price        { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 6px; }

/* ═══ PRODUCT DETAIL ════════════════════════════════════════ */
.product-hero-banner { display: flex; align-items: center; gap: 16px; padding: 20px 16px; color: #fff; }
.product-hero-icon   { font-size: 54px; line-height: 1; }
.product-hero-name   { font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; }
.product-hero-price  { font-size: 22px; font-weight: 800; }
.detail-desc         { font-size: 14px; color: var(--text2); line-height: 1.55; }
.detail-row { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: var(--r-sm); padding: 10px 14px; }
.detail-row-label { font-size: 14px; color: var(--text2); }
.stock-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; }
.stock-badge.ok   { background: rgba(39,174,96,.12); color: #1a8c4a; }
.stock-badge.none { background: rgba(200,0,0,.08);   color: #c00; }

/* ═══ ORDERS ════════════════════════════════════════════════ */
.ord-sec-head { padding: 8px 16px 4px; display: flex; align-items: center; justify-content: space-between; }
.ord-sec-title { font-size: 15px; font-weight: 700; color: var(--text); }

.orders-list { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.order-row {
  background: var(--card);
  border-radius: var(--r);
  padding: 13px 14px 13px 0;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
  border-left: 4px solid transparent;
  overflow: hidden;
}
.order-row:hover  { box-shadow: 0 4px 18px rgba(22,47,90,.1); transform: translateY(-1px); }
.order-row:active { transform: scale(.98); box-shadow: var(--shadow); }

/* Status accent border */
.order-row.st-done { border-left-color: #27ae60; }
.order-row.st-prog { border-left-color: #3498db; }
.order-row.st-pend { border-left-color: #bbb; }
.order-row.st-err  { border-left-color: #e74c3c; }

.order-row-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; margin-left: 14px; }
.order-row-icon svg { display: block; flex-shrink: 0; }
.order-row-icon .order-media-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.order-row-info { flex: 1; min-width: 0; }
.order-row-title  { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-row-meta   { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.order-row-date   { font-size: 12px; color: var(--text2); }
.order-row-right  { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; padding-right: 2px; }
.order-row-amount { font-size: 15px; font-weight: 700; }

/* SMM status badge inside order row */
.smm-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 20px;
  background: rgba(52,152,219,.12); color: #1a6fae;
  white-space: nowrap;
}

.status-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; white-space: nowrap; }
.sp-created, .sp-awaiting_payment     { background: rgba(120,120,120,.12); color: #666; }
.sp-payment_detected                  { background: rgba(241,196,15,.18);  color: #a07800; }
.sp-paid                              { background: rgba(39,174,96,.15);   color: #1a8c4a; }
.sp-fulfillment_in_progress           { background: rgba(52,152,219,.15);  color: #1a6fae; }
.sp-fulfilled, .sp-completed          { background: rgba(39,174,96,.25);   color: #0f6632; }
.sp-expired                           { background: rgba(200,0,0,.10);     color: #c00; }
.sp-refunded                          { background: rgba(155,89,182,.15);  color: #8e44ad; }
.sp-underpaid, .sp-manual_review, .sp-disputed { background: rgba(241,90,36,.12); color: #c0450a; }
.sp-in_guarantee                      { background: rgba(52,152,219,.15);  color: #1a6fae; }

/* Profile recent orders — meta row with smm badge */
.prf-ro-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.prf-ro-date { font-size: 12px; color: var(--text2); }

/* ═══ ORDER DETAIL ═══════════════════════════════════════════ */
.order-status-block { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px 20px; text-align: center; }
.order-status-icon  { font-size: 64px; line-height: 1; }
.order-status-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.info-card { background: var(--card); border-radius: var(--r); margin: 0 12px; overflow: hidden; box-shadow: var(--shadow); }
.info-row  { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; gap: 12px; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
/* .info-card relies on children for inset (.info-row brings its own 14px
   padding) — but the seller panel's forms (Кабинет продавца: Товары,
   Склад, Баланс и выплаты) build fields straight from .form-block with no
   padding of its own, so labels sat flush against the card's edge (x=0)
   and got clipped by overflow:hidden (uppercase + letter-spacing was
   enough to push the first glyph past the boundary). :has() scopes this
   to only the form-flavored cards — .info-row-based cards are untouched. */
.info-card:has(.form-block) { padding: 14px 14px 4px; }
.info-card:has(.form-block) > * + * { margin-top: 10px; }
.info-key  { font-size: 14px; color: var(--text2); flex-shrink: 0; }
.info-val  { font-size: 14px; font-weight: 600; text-align: right; word-break: break-word; }
.info-mono { font-family: "SF Mono","Fira Code",monospace; font-size: 12px; font-weight: 400; color: var(--text2); max-width: 55%; }
.order-hint { font-size: 13px; color: var(--text2); text-align: center; padding: 12px 24px 0; line-height: 1.55; }

/* ═══ PROFILE ════════════════════════════════════════════════ */
.profile-hero { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 20px; gap: 8px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.profile-name     { font-size: 20px; font-weight: 700; text-align: center; }
.profile-username { font-size: 14px; color: var(--text2); }
.role-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; background: var(--primary-light); color: var(--primary); margin-top: 2px; }

.stats-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
.stat-card  { background: var(--card); border-radius: var(--r); padding: 16px; text-align: center; box-shadow: var(--shadow); }
.stat-val   { font-size: 24px; font-weight: 800; color: var(--primary); line-height: 1.1; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: var(--text2); font-weight: 500; }

/* ═══ EMPTY / AUTH ════════════════════════════════════════════ */
.empty-state, .auth-wall { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 24px; color: var(--text2); text-align: center; }
/* Plain grey circle — no emoji — for every .empty-state (no results, empty
   list, locked/auth-wall, error). .empty-icon-loading adds a shimmer on top
   for the in-flight-fetch case specifically. */
.empty-icon, .empty-icon-loading {
  width: 52px; height: 52px; border-radius: 50%; background: var(--border);
}
.empty-icon-loading {
  background: linear-gradient(90deg, var(--border) 25%, #eef2f9 37%, var(--border) 63%);
  background-size: 400% 100%;
  animation: skelShimmer 1.4s ease infinite;
}
.empty-inline { text-align: center; padding: 32px 24px; color: var(--text2); font-size: 14px; }

/* ═══ MISC ════════════════════════════════════════════════════ */
.info-note { background: var(--primary-light); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text2); text-align: center; }
.loader-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; z-index: 999; }
.spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.oso-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 20px; }
.oso-card { background: var(--card); border-radius: 20px; padding: 28px 24px 24px; text-align: center; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oso-emoji { font-size: 52px; line-height: 1; margin-bottom: 4px; }
.oso-title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); }
.oso-meta  { font-size: 13px; color: var(--text2); line-height: 1.4; min-height: 16px; }

.test-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: linear-gradient(90deg,#f39c12,#e67e22); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 16px; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: .02em; }
.test-real-badge { background: rgba(255,255,255,.25); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
body:has(#test-banner:not([style*="none"])) .page { top: 28px; }

/* ═══ TOPUP DETAIL SECTION PAGE ═══════════════════════════ */
#section-topup-detail { padding-bottom: 8px; }

/* ════════════════════════════════════════════════════════════
   PROFILE v2  — section inside catalog-main (no duplicate shell)
════════════════════════════════════════════════════════════ */

/* Breadcrumb — always visible (same as dtl-breadcrumb) */
.prf-breadcrumb {
  display: flex;
  align-items: center; gap: 6px;
  padding: 10px 20px 6px;
  font-size: 13px; color: var(--text2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.prf-bc-home { color: var(--primary); cursor: pointer; font-weight: 500; }
.prf-bc-home:hover { text-decoration: underline; }
.prf-bc-sep  { color: var(--text3); }
.prf-bc-cur  { color: var(--text); font-weight: 600; }

/* Hero card */
.prf-hero-card {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 20px 16px 16px;
  display: flex; flex-direction: column; gap: 20px;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .prf-hero-card { flex-direction: row; align-items: flex-start; padding: 24px 28px 20px; gap: 32px; }
}

.prf-hero-left { display: flex; align-items: center; gap: 14px; }
.prf-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--primary-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(26,118,229,.3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 900px) { .prf-avatar { width: 84px; height: 84px; font-size: 30px; } }
.prf-avatar.has-photo {
  background: #dbe8fb;
}

.prf-info { display: flex; flex-direction: column; gap: 4px; }
.prf-name-row { display: flex; align-items: center; gap: 7px; }
.prf-name { font-size: 18px; font-weight: 700; color: var(--text); }
@media (min-width: 900px) { .prf-name { font-size: 20px; } }

.prf-level-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: #e6f4ea; color: #2e7d32;
  letter-spacing: .02em; width: fit-content;
}
.prf-level-badge.badge-silver   { background: #f0f0f0; color: #555; }
.prf-level-badge.badge-gold     { background: #FFF8DC; color: #b8860b; }
.prf-level-badge.badge-platinum { background: #f0f0ff; color: #4040c0; }

.prf-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.prf-meta span { font-size: 12px; color: var(--text2); }

/* KPI row */
.prf-kpi-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .prf-kpi-row { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px) { .prf-kpi-row { flex: 1; gap: 16px; } }

.prf-kpi {
  background: var(--bg); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border);
}
.prf-kpi-level { grid-column: 1 / -1; }
@media (min-width: 640px) { .prf-kpi-level { grid-column: auto; } }

.prf-kpi-label {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 4px;
}
.prf-kpi-hint { font-size: 11px; cursor: help; opacity: .6; }
.prf-kpi-val  { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 2px 0; }
.prf-kpi-blue { color: var(--primary); }
.prf-kpi-gift { display: flex; align-items: center; gap: 5px; }
.prf-kpi-gift-icon { font-size: 18px; }

.prf-kpi-action {
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 6px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: opacity .15s; width: 100%; text-align: center;
}
.prf-kpi-action:hover { opacity: .88; }
.prf-kpi-action-ghost {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary);
}

.prf-level-progress-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.prf-level-progress-bar  { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }
.prf-level-progress-fill { height: 100%; background: var(--primary-grad); border-radius: 10px; transition: width .5s; }
.prf-level-progress-hint { font-size: 11px; color: var(--text2); }

/* Tab bar */
.prf-tab-bar {
  background: var(--card); border-bottom: 1.5px solid var(--border);
  display: flex; overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0; padding: 0 4px;
  touch-action: pan-x; /* swipe only scrolls the bar itself, never the page vertically */
}
.prf-tab-bar::-webkit-scrollbar { display: none; }
.prf-tab-btn {
  flex-shrink: 0; background: none; border: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  padding: 11px 14px; font-size: 13px; font-weight: 600;
  color: var(--text2); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.prf-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.prf-tab-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* Hero card */
.prf-hero-card {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 20px 16px 16px;
  display: flex; flex-direction: column; gap: 20px;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .prf-hero-card { flex-direction: row; align-items: flex-start; padding: 24px 28px 20px; gap: 32px; }
}

.prf-hero-left { display: flex; align-items: center; gap: 14px; }
.prf-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--primary-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(26,118,229,.3);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 900px) { .prf-avatar { width: 84px; height: 84px; font-size: 30px; } }
.prf-avatar.has-photo {
  background: #dbe8fb;
}
.prf-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prf-avatar-initials {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.prf-info { display: flex; flex-direction: column; gap: 4px; }
.prf-name-row { display: flex; align-items: center; gap: 7px; }
.prf-name { font-size: 18px; font-weight: 700; color: var(--text); }
@media (min-width: 900px) { .prf-name { font-size: 20px; } }

.prf-level-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: #e6f4ea; color: #2e7d32;
  letter-spacing: .02em; width: fit-content;
}
.prf-level-badge.badge-silver   { background: #f0f0f0; color: #555; }
.prf-level-badge.badge-gold     { background: #FFF8DC; color: #b8860b; }
.prf-level-badge.badge-platinum { background: #f0f0ff; color: #4040c0; }

.prf-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.prf-meta span { font-size: 12px; color: var(--text2); }

/* KPI row */
.prf-kpi-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .prf-kpi-row { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px) { .prf-kpi-row { flex: 1; gap: 16px; } }

.prf-kpi {
  background: var(--bg); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border);
}
.prf-kpi-level { grid-column: 1 / -1; }
@media (min-width: 640px) { .prf-kpi-level { grid-column: auto; } }

.prf-kpi-label {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 4px;
}
.prf-kpi-hint { font-size: 11px; cursor: help; opacity: .6; }
.prf-kpi-val  { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; margin: 2px 0; }
.prf-kpi-blue { color: var(--primary); }
.prf-kpi-gift { display: flex; align-items: center; gap: 5px; }
.prf-kpi-gift-icon { font-size: 18px; }

.prf-kpi-action {
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 6px 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: opacity .15s; width: 100%; text-align: center;
}
.prf-kpi-action:hover { opacity: .88; }
.prf-kpi-action-ghost {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary);
}

.prf-level-progress-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.prf-level-progress-bar  { height: 6px; background: var(--border); border-radius: 10px; overflow: hidden; }
.prf-level-progress-fill { height: 100%; background: var(--primary-grad); border-radius: 10px; transition: width .5s; }
.prf-level-progress-hint { font-size: 11px; color: var(--text2); }

/* Tab bar */
.prf-tab-bar {
  background: var(--card); border-bottom: 1.5px solid var(--border);
  display: flex; overflow-x: auto; scrollbar-width: none;
  flex-shrink: 0; padding: 0 4px;
  touch-action: pan-x; /* swipe only scrolls the bar itself, never the page vertically */
}
.prf-tab-bar::-webkit-scrollbar { display: none; }
.prf-tab-btn {
  flex-shrink: 0; background: none; border: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  padding: 11px 14px; font-size: 13px; font-weight: 600;
  color: var(--text2); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.prf-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.prf-tab-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* Tab content */
.prf-tab-content { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .prf-tab-content { padding: 20px 24px; gap: 16px; } }

/* Section titles */
.prf-section-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -.1px;
}

/* Generic card */
.prf-card {
  background: var(--card); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}

/* Quick access grid */
.prf-quick-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 900px) { .prf-quick-grid { grid-template-columns: repeat(4,1fr); } }

.prf-quick-card {
  background: var(--card); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 14px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: box-shadow .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.prf-quick-card:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.prf-quick-card:active { transform: scale(.97); }
.prf-qc-icon { font-size: 22px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prf-qc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prf-qc-body b  { font-size: 13px; font-weight: 700; color: var(--text); }
.prf-qc-body span { font-size: 11px; color: var(--text2); }

/* Two column layout */
.prf-two-col { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  .prf-two-col { flex-direction: row; align-items: flex-start; gap: 16px; }
  .prf-two-col .prf-col { flex: 1; }
}
.prf-col { display: flex; flex-direction: column; gap: 8px; }

/* Recent orders */
.prf-recent-order-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.prf-recent-order-row:last-child { border-bottom: none; }
.prf-recent-order-row:hover { background: var(--bg); }
.prf-ro-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.prf-ro-icon svg { display: block; flex-shrink: 0; }
.prf-ro-icon .order-media-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.prf-ro-info  { flex: 1; min-width: 0; }
.prf-ro-name  { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prf-ro-date  { font-size: 11px; color: var(--text2); margin-top: 1px; }
.prf-ro-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.prf-ro-amount { font-size: 13px; font-weight: 700; color: var(--text); }
.prf-ro-arrow  { font-size: 12px; color: var(--text3); }

.prf-empty-orders { padding: 24px; text-align: center; color: var(--text2); font-size: 13px; }

/* Stats card */
.prf-stats-card { display: flex; flex-direction: column; }
.prf-stat-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.prf-stat-row:last-child { border-bottom: none; }
.prf-stat-icon  { font-size: 15px; width: 20px; flex-shrink: 0; }
.prf-stat-label { font-size: 13px; color: var(--text2); flex: 1; }
.prf-stat-val   { font-size: 13px; font-weight: 700; color: var(--text); text-align: right; }
.prf-stat-green { color: #2e7d32; }

/* Bonus card */
.prf-bonus-card { padding: 14px 14px 10px; }
.prf-bonus-row  { display: flex; align-items: center; gap: 10px; }
.prf-bonus-icon { font-size: 24px; }
.prf-bonus-info { flex: 1; }
.prf-bonus-info b    { font-size: 14px; font-weight: 700; display: block; }
.prf-bonus-info span { font-size: 12px; color: var(--primary); }
.prf-bonus-active-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; background: #e6f4ea; color: #2e7d32;
}
.prf-bonus-valid { font-size: 11px; color: var(--text2); margin-top: 8px; }

/* "Show all" button */
.prf-all-orders-btn {
  background: none; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 18px;
  font-size: 13px; font-weight: 600; color: var(--primary);
  cursor: pointer; transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent; width: 100%;
}
.prf-all-orders-btn:hover { background: var(--primary-light); }

/* Level card */
.prf-level-card { padding: 16px 14px 14px; }
.prf-lc-header  { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.prf-lc-star    { font-size: 32px; }
.prf-lc-title   { font-size: 18px; font-weight: 800; color: var(--text); }
.prf-lc-sub     { font-size: 12px; color: var(--text2); }
.prf-lc-perks   { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.prf-lc-perk    { display: flex; align-items: center; gap: 8px; min-width: 120px; flex: 1; }
.prf-lc-perk > span { font-size: 18px; }
.prf-lc-perk b  { font-size: 13px; font-weight: 700; display: block; }
.prf-lc-perk span:last-child { font-size: 11px; color: var(--text2); }
.prf-lc-progress-label { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.prf-lc-bar { margin-bottom: 2px; }

/* Balance info card */
.prf-balance-info-card { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.prf-bi-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.prf-bi-row span { color: var(--text2); }
.prf-bi-row b    { font-weight: 700; color: var(--text); }

/* Empty tab */
.prf-empty-tab {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 60px 24px;
  text-align: center; color: var(--text2);
}
.prf-empty-tab > span { font-size: 48px; }
.prf-empty-tab > p { font-size: 14px; line-height: 1.55; }

/* Status pill overrides */
.sp-paid     { background: #e6f4ea; color: #2e7d32; }
.sp-pending  { background: #FFF8DC; color: #b8860b; }
.sp-failed   { background: #fdecea; color: #c62828; }
.sp-reserved { background: #e8f1fd; color: var(--primary); }

.dtl-breadcrumb {
  display: flex; align-items: center; gap: 5px; padding: 14px 20px 8px;
  font-size: 13px; color: var(--text2); flex-wrap: wrap;
}
.dtl-bc-btn { background: none; border: none; cursor: pointer; color: var(--text2); font-size: 13px; padding: 0; transition: color .12s; }
.dtl-bc-btn:hover { color: var(--primary); text-decoration: underline; }
.dtl-bc-sep { color: var(--text3); }
.dtl-bc-cur { color: var(--text); font-weight: 600; }

.dtl-hero-card {
  background: var(--card); border-radius: var(--r); margin: 0 20px 14px;
  padding: 20px; display: flex; align-items: flex-start; gap: 18px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.dtl-hero-icon {
  width: 80px; height: 80px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -1px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  transform: translateZ(0);
}
.dtl-hero-icon svg,
.svc-card-icon svg,
.cat-row-icon svg,
.pprod-icon svg {
  display: block;
}

/* Steam wallet hero — the plain "S" glyph reads as a weak logo at the
   default .dtl-hero-icon size, so it gets a bigger box of its own. */
#sw-hero-icon { width: 100px; height: 100px; font-size: 44px; border-radius: 20px; }
#sw-hero-icon svg { width: 44px; height: 44px; }
.svc-icon-fallback-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dtl-hero-body { flex: 1; min-width: 0; }
.dtl-hero-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.dtl-hero-title { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.dtl-hero-sub { font-size: 13.5px; color: var(--text2); margin-bottom: 9px; line-height: 1.4; }
.dtl-hero-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dtl-stars   { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.dtl-rating  { font-size: 14px; font-weight: 700; color: var(--text); }
.dtl-reviews { font-size: 13px; color: var(--text2); }
.dtl-hero-feats { display: flex; gap: 8px; flex-wrap: wrap; }
.dtl-feat {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text2);
  background: var(--bg); border-radius: 20px; padding: 5px 12px;
  border: 1px solid var(--border);
}
.dtl-feat svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--primary); }

/* Seller profile avatar — Telegram photo_url when present (see sp-avatar-img
   onerror fallback in app.js for expired/missing links), else the same
   initial-letter idea as .msg-row-avatar, sized to match .dtl-hero-icon. */
.sp-avatar { border-radius: 50%; background: var(--primary); position: relative; overflow: hidden; }
.sp-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-product-link {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--text2); font-size: 12.5px; margin-top: 2px;
}
.sp-product-link:hover { color: var(--primary); text-decoration: underline; }
.sp-product-link-avatar {
  width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}

/* Two-column steps body */
.dtl-body { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 20px 12px; }
@media (min-width: 900px) { .dtl-body { grid-template-columns: 1fr 1fr; align-items: start; } }

.dtl-col-left, .dtl-col-right { display: flex; flex-direction: column; gap: 12px; }

.dtl-step-card {
  background: var(--card); border-radius: var(--r); padding: 20px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.dtl-step-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dtl-step-badge {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary);
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dtl-step-title { font-size: 15px; font-weight: 700; color: var(--text); }
.dtl-step-body { display: flex; flex-direction: column; gap: 8px; }

/* Seller-uploaded proof screenshots parsed out of BBCode [IMG] tags in the
   listing description — see renderDescriptionHtml() in app.js. */
.acc-dtl-desc-img {
  display: block; max-width: 100%; height: auto; border-radius: var(--r-sm);
  margin: 8px 0; border: 1px solid var(--border); cursor: zoom-in;
}

.dtl-field-label { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.dtl-select {
  width: 100%; background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 32px 10px 12px; font-size: 14px; color: var(--text);
  outline: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7a99'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s; font-family: inherit;
}
.dtl-select:focus { border-color: var(--primary); }
.dtl-info-box {
  background: rgba(26,122,229,.07); border: 1px solid rgba(26,122,229,.15);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; color: var(--text2);
  line-height: 1.5; display: flex; gap: 7px;
}
.dtl-info-box-icon { font-size: 15px; flex-shrink: 0; color: var(--primary); }

/* Offer denomination grid */
.dtl-offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 480px) { .dtl-offers-grid { grid-template-columns: repeat(2, 1fr); } }

.dtl-offer-card {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 8px; text-align: center; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.dtl-offer-card:hover  { border-color: var(--primary); background: var(--primary-light); }
.dtl-offer-card:active { transform: scale(.96); }
.dtl-offer-card.selected { border-color: var(--primary); background: var(--primary-light); }
.dtl-oc-name  { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; word-break: break-word; }
.dtl-oc-price { font-size: 11.5px; color: var(--text2); margin-top: 3px; }
.dtl-oc-check {
  display: none; position: absolute; top: 5px; right: 5px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px;
  align-items: center; justify-content: center;
}
.dtl-offer-card.selected .dtl-oc-check { display: flex; }
.dtl-offer-loading { grid-column: 1/-1; text-align: center; padding: 24px 0; color: var(--text2); font-size: 13px; }

.sgd-region-tools {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 8px;
  margin-bottom: 10px;
}
.sgd-region-search { min-width: 0; }
.sgd-region-sort { width: 100%; }
#sgd-region-grid {
  max-height: 330px;
  overflow: auto;
  padding-right: 3px;
  align-content: start;
}
#sgd-region-grid::-webkit-scrollbar { width: 8px; }
#sgd-region-grid::-webkit-scrollbar-thumb {
  background: #c5d3eb;
  border-radius: 8px;
}
#sgd-region-grid .dtl-offer-card { min-height: 70px; }

/* Bonus row */
.dtl-bonus-row {
  background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.22);
  border-radius: var(--r-sm); padding: 11px 12px; display: flex; align-items: center; gap: 9px;
}
.dtl-bonus-check { font-size: 16px; color: #16a34a; flex-shrink: 0; }
.dtl-bonus-text { flex: 1; font-size: 12.5px; color: var(--text); line-height: 1.4; }
.dtl-bonus-text b { display: block; font-weight: 700; margin-bottom: 1px; }
.dtl-bonus-pct-badge { font-size: 12px; font-weight: 700; color: #16a34a; background: rgba(22,163,74,.14); border-radius: 20px; padding: 3px 9px; flex-shrink: 0; }

/* Dynamic form fields */
.dtl-form-block { display: flex; flex-direction: column; gap: 5px; }
.dtl-form-label { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; }
.dtl-form-input {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 14px; color: var(--text); width: 100%; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.dtl-form-input:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px rgba(26,122,229,.08); }
.dtl-form-input::placeholder { color: var(--text3); }
.dtl-form-select {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 32px 11px 13px; font-size: 14px; color: var(--text); width: 100%; outline: none;
  -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7a99'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s;
}
.dtl-form-select:focus { border-color: var(--primary); background-color: var(--card); }
.dtl-form-hint { font-size: 12px; color: var(--text2); line-height: 1.45; }
.dtl-help-box {
  background: rgba(26,122,229,.07); border: 1px solid rgba(26,122,229,.15);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; color: var(--text2); line-height: 1.5;
}
.dtl-help-link { color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer; border: none; background: none; font-size: inherit; padding: 0; }

/* Summary bar */
.dtl-summary {
  background: var(--card); border-radius: var(--r); margin: 0 20px 10px;
  padding: 14px 20px; display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow); border: 1px solid var(--border); flex-wrap: wrap;
}
.dtl-sum-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 120px; }
.dtl-sum-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  overflow: hidden;
  transform: translateZ(0);
}
.dtl-sum-name { font-size: 12px; color: var(--text2); }
.dtl-sum-offer-name { font-size: 15px; font-weight: 700; color: var(--text); }
.dtl-sum-bonus-block { text-align: center; font-size: 12px; color: var(--text2); line-height: 1.55; flex-shrink: 0; }
.dtl-sum-bonus-block b { color: #16a34a; font-size: 13px; }
.dtl-sum-bonus-val { color: #16a34a; font-weight: 700; }
.dtl-sum-total-block { text-align: right; font-size: 12px; color: var(--text2); flex-shrink: 0; }
.dtl-sum-total-val { font-size: 22px; font-weight: 800; color: var(--primary); display: block; line-height: 1.1; }

/* Security notice */
.dtl-security-row {
  background: rgba(241,189,65,.10); border: 1px solid rgba(241,189,65,.35);
  border-radius: var(--r-sm); margin: 0 20px 10px; padding: 11px 14px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text2); line-height: 1.4;
}
.dtl-security-icon { font-size: 16px; flex-shrink: 0; }

/* Action buttons */
.dtl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 20px 6px; }
.dtl-btn-ghost {
  background: var(--card); border: 1.5px solid var(--primary); color: var(--primary);
  border-radius: var(--r); padding: 13px 12px; text-align: center; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; line-height: 1.3;
}
.dtl-btn-ghost small { display: block; font-size: 11px; font-weight: 400; opacity: .75; margin-top: 2px; }
.dtl-btn-ghost:hover { background: var(--primary-light); }
.dtl-btn-pay {
  background: var(--primary-grad); color: #fff; border: none; border-radius: var(--r);
  padding: 13px 12px; text-align: center; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: filter .15s; -webkit-tap-highlight-color: transparent; line-height: 1.3;
}
.dtl-btn-pay small { display: block; font-size: 11px; font-weight: 400; opacity: .85; margin-top: 2px; }
.dtl-btn-pay:hover { filter: brightness(1.08); }
.dtl-btn-pay:disabled { opacity: .45; pointer-events: none; }

.dtl-btn-balance {
  background: #27AE60; color: #fff; border: none; border-radius: var(--r);
  padding: 13px 12px; text-align: center; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: filter .15s, opacity .15s; -webkit-tap-highlight-color: transparent;
  line-height: 1.3; width: 100%;
}
.dtl-btn-balance:hover { filter: brightness(1.08); }
.dtl-btn-balance:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Строка: [Оплатить с баланса] [Пополнить] — side by side */
.dtl-balance-row {
  display: flex; gap: 8px; align-items: stretch;
}
.dtl-balance-row .dtl-btn-balance {
  flex: 1; min-width: 0;
}
/* Компактная кнопка "➕ Пополнить" рядом с балансовой кнопкой */
.dtl-btn-topup-sm {
  flex-shrink: 0;
  background: transparent; color: var(--primary); border: 1.5px solid var(--primary);
  border-radius: var(--r); padding: 0 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.dtl-btn-topup-sm:hover { background: var(--primary-light); }

/* Устаревший класс — оставляем для совместимости */
.dtl-btn-topup-balance {
  background: transparent; color: var(--primary); border: 1.5px solid var(--primary);
  border-radius: var(--r); padding: 11px 12px; text-align: center;
  font-size: 13px; font-weight: 600; cursor: pointer; width: 100%;
  transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.dtl-btn-topup-balance:hover { background: var(--primary-light); }

/* ── Toast / snackbar ────────────────────────────────────────────────────── */
#fm-toast {
  position: fixed; bottom: 80px; left: 12px; right: 12px;
  background: #1a1a2e; color: #fff;
  border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(16px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9998; pointer-events: none; visibility: hidden;
}
#fm-toast.fm-toast-active {
  opacity: 1; transform: translateY(0);
  pointer-events: all; visibility: visible;
}
.fm-toast-msg { flex: 1; line-height: 1.4; }
.fm-toast-btn {
  flex-shrink: 0;
  background: var(--primary); color: #fff; border: none;
  border-radius: 9px; padding: 8px 14px;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.fm-toast-btn:hover { filter: brightness(1.1); }

.dtl-balance-hint {
  text-align: center; font-size: 12px; color: var(--text2); margin-top: 2px; padding: 0 4px;
}

.dtl-terms { text-align: center; font-size: 12px; color: var(--text2); margin: 4px 20px 16px; }
.dtl-terms a { color: var(--primary); }

/* Right panel: service features (shown on detail page) */
.drp-feats { display: flex; flex-direction: column; gap: 12px; }
.drp-feat-item { display: flex; align-items: center; gap: 10px; }
.drp-feat-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px;
}
.drp-feat-info b { font-size: 13px; font-weight: 600; color: var(--text); display: block; line-height: 1.3; }
.drp-feat-info span { font-size: 11.5px; color: var(--text2); }

@media (max-width: 899px) {
  .dtl-breadcrumb { padding: 10px 12px 6px; }
  .dtl-hero-card { margin: 0 12px 12px; }
  .dtl-body { padding: 0 12px 12px; }
  .dtl-summary { margin: 0 12px 10px; }
  .dtl-security-row { margin: 0 12px 10px; }
  .dtl-actions { margin: 0 12px 6px; }
  .dtl-terms { margin: 4px 12px 16px; }
  #dtl-error { margin: 0 12px 12px !important; }
  .dtl-hero-icon { width: 60px; height: 60px; font-size: 20px; }
  #sw-hero-icon { width: 76px; height: 76px; font-size: 32px; border-radius: 18px; }
  #sw-hero-icon svg { width: 34px; height: 34px; }
  .dtl-hero-title { font-size: 17px; }
}

/* ─── Featured / pinned service cards ─── */
.svcsec-pins {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 0 20px 14px;
}
@media (max-width: 600px) { .svcsec-pins { grid-template-columns: 1fr; } }
@media (min-width: 601px) and (max-width: 899px) { .svcsec-pins { grid-template-columns: repeat(3, 1fr); } }

.svc-pin-card {
  border-radius: var(--r); padding: 18px 16px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; position: relative; overflow: hidden; min-height: 84px;
  transition: filter .15s, transform .1s; -webkit-tap-highlight-color: transparent; user-select: none;
}
.svc-pin-card:hover  { filter: brightness(1.08); }
.svc-pin-card:active { transform: scale(.97); }
.svc-pin-steam { background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%); }
.svc-pin-tg    { background: linear-gradient(135deg, #229ed9 0%, #0b69a3 100%); }
.svc-pin-stars { background: linear-gradient(135deg, #6d4ee6 0%, #9b3ab5 100%); }

.svc-pin-icon {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden;
}
.svc-pin-icon svg { width: 26px; height: 26px; }
.svc-pin-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.svc-pin-icon img.pin-icon-zoom { transform: scale(1.32); }
.svc-pin-icon img.pin-icon-cover { object-fit: cover; }
.svc-pin-body { flex: 1; min-width: 0; }
.svc-pin-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
.svc-pin-desc  { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.svc-pin-badge {
  display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.22); color: #fff; border-radius: 20px; padding: 2px 8px;
}
.svc-pin-arrow { font-size: 20px; color: rgba(255,255,255,.55); flex-shrink: 0; }

/* ─── Breadcrumb parent section dynamic label ─── */
#dtl-bc-section-label { font-size: 13px; color: var(--text2); }

/* ═══ TOPUPS SECTION VIEW (within desktop catalog) ══════════ */
#section-home, #section-topups { min-height: 100%; }

.svcsec-header { padding: 20px 20px 8px; }
.svcsec-title  { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.3px; line-height: 1.2; }
.svcsec-sub    { font-size: 13.5px; color: var(--text2); margin-top: 5px; }

.svcsec-search-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px 6px;
  flex-wrap: wrap;
}
.svcsec-search-wrap {
  flex: 1; min-width: 180px; display: flex; align-items: center;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; transition: border-color .15s;
}
.svcsec-search-wrap:focus-within { border-color: var(--primary); }
.svcsec-search-icon { width: 16px; height: 16px; flex-shrink: 0; margin-left: 12px; opacity: .45; color: var(--text2); }
.svcsec-search-input {
  flex: 1; border: none; background: none; outline: none; padding: 10px 12px;
  font-size: 14px; color: var(--text); width: 100%;
}
.svcsec-search-input::placeholder { color: var(--text3); }
.svcsec-filter {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 28px 9px 11px; font-size: 13px; color: var(--text2); cursor: pointer;
  outline: none; -webkit-appearance: none; appearance: none; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7a99'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color .15s;
}
.svcsec-filter:focus { border-color: var(--primary); }

.svcsec-tabs {
  display: flex; gap: 6px; padding: 8px 20px 12px; overflow-x: auto; scrollbar-width: none;
}
.svcsec-tabs::-webkit-scrollbar { display: none; }
.svcsec-tab {
  flex-shrink: 0; background: var(--card); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight: 500;
  color: var(--text2); cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.svcsec-tab:hover  { border-color: var(--primary); color: var(--primary); }
.svcsec-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* Account category picker — icon-tile grid (replaces plain pill tabs once
   there are 20+ categories; a scrolling pill row stops being usable). */
#acc-cat-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 12px 6px;
  padding: 10px 20px 16px;
}
.acccat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 2px;
  -webkit-tap-highlight-color: transparent;
}
.acccat-icon {
  position: relative;
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #fff;
  box-shadow: 0 2px 6px rgba(20,30,50,.14);
  transition: transform .15s, box-shadow .15s, outline-color .15s;
  outline: 2.5px solid transparent; outline-offset: 2px;
}
.acccat-icon-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.acccat-tile:hover .acccat-icon  { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,30,50,.2); }
.acccat-tile.active .acccat-icon { outline-color: var(--primary); }
.acccat-label {
  font-size: 10.5px; font-weight: 600; color: var(--text2); text-align: center;
  max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acccat-tile.active .acccat-label { color: var(--primary); }

.acccat-warn {
  position: absolute; top: -3px; right: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
  cursor: help;
}

/* Generic hover/focus tooltip — attach to any element via data-tooltip="…" */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1f2430; color: #fff; font-size: 11px; font-weight: 500; line-height: 1.35;
  padding: 7px 10px; border-radius: 8px; width: max-content; max-width: 180px;
  text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  z-index: 30;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Limited-support notice on the account detail page */
.dtl-limited-notice {
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
  border-radius: var(--r-sm); margin: 0 20px 12px; padding: 11px 14px;
  display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text2); line-height: 1.4;
}
.dtl-limited-notice-icon {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: #f59e0b; color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

#gk-main-tabs {
  background: #e9effa;
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
}
#gk-main-tabs .svcsec-tab {
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #5c6f91;
  font-weight: 700;
  padding: 8px 14px;
}
#gk-main-tabs .svcsec-tab.active {
  background: #ffffff;
  color: #1b3f78;
  border-color: #d5e1f5;
  box-shadow: 0 2px 8px rgba(36,73,130,.12);
}

.svcsec-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; padding: 0 20px 12px;
}

.svcsec-loading {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  padding: 60px 0; color: var(--text2); font-size: 14px; gap: 12px;
}
.svcsec-loading-compact {
  padding: 24px 0;
  font-size: 13px;
}
.svcsec-loading .spinner {
  width: 42px;
  height: 42px;
  border: 3px solid #d4e0f3;
  border-top-color: #2a7de8;
  border-right-color: #8fbaff;
  border-radius: 50%;
  animation: spin .72s linear infinite, svcSpinPulse 1.25s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(42,125,232,.22);
}

@keyframes svcSpinPulse {
  0% { box-shadow: 0 0 0 0 rgba(42,125,232,.22); }
  70% { box-shadow: 0 0 0 10px rgba(42,125,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,125,232,0); }
}

/* Skeleton placeholder cards — shown instantly while a grid's first
   fetch is in flight, replaced by real cards once data arrives. */
.skel-card {
  background: var(--card); border-radius: var(--r); padding: 14px;
  box-shadow: var(--shadow); border: 1.5px solid transparent;
  display: flex; flex-direction: column; gap: 10px;
}
.skel-block {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--border) 25%, #eef2f9 37%, var(--border) 63%);
  background-size: 400% 100%;
  animation: skelShimmer 1.4s ease infinite;
}
@keyframes skelShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skel-icon { width: 48px; height: 48px; border-radius: 12px; }
.skel-line { height: 12px; }
.skel-line.skel-w70 { width: 70%; }
.skel-line.skel-w40 { width: 40%; }

.svc-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  cursor: pointer; box-shadow: 0 10px 24px rgba(19,43,88,.08); border: 1px solid rgba(26,122,229,.12);
  transition: box-shadow .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.svc-card:hover  { box-shadow: 0 16px 32px rgba(19,43,88,.14); border-color: rgba(26,122,229,.24); transform: translateY(-2px); }
.svc-card:active { transform: scale(.985); }

.svc-card-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff; flex-shrink: 0; letter-spacing: -.5px;
  box-shadow: 0 6px 14px rgba(26,64,126,.22);
}
.svc-icon-photo-wrap {
  overflow: hidden;
  background: #dbe8fb !important;
  padding: 0;
}
.svc-icon-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-icon-photo-fallback {
  display: none; width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.svc-icon-photo-wrap.is-broken {
  background: none !important;
}
.svc-icon-photo-wrap.is-broken .svc-icon-photo-fallback { display: flex; }
.svc-icon-photo-wrap.is-broken .svc-icon-photo {
  display: none;
}
.svc-icon-neutral-placeholder {
  background: linear-gradient(135deg, #b6bfcb 0%, #aab4c2 55%, #9ca8b8 100%) !important;
  box-shadow: inset 0 -6px 14px rgba(40,54,74,.14);
}
.svc-banner-photo-wrap {
  overflow: hidden;
  background: #dbe8fb;
}
.svc-banner-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-banner-photo-wrap.is-broken {
  background: linear-gradient(135deg, #73808a 0%, #7f8d98 58%, #8a98a3 100%);
}
.svc-banner-photo-wrap.is-broken .svc-banner-photo {
  display: none;
}
.svc-card-name {
  font-size: 14.5px; font-weight: 800; color: var(--text);
  margin-bottom: 6px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 34px;
}
.svc-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  min-height: 22px;
  max-height: 44px;
  overflow: hidden;
}
.svc-badge-popular {
  font-size: 10px; font-weight: 600; color: var(--primary);
  background: var(--primary-light); border-radius: 20px; padding: 2px 8px;
}
.svc-badge-pct {
  font-size: 10px; font-weight: 700; color: #15803d;
  background: rgba(22,163,74,.12); border-radius: 20px; padding: 2px 8px;
}
.svc-badge-regions {
  font-size: 10px; font-weight: 600; color: #7c3aed;
  background: rgba(124,58,237,.10); border-radius: 20px; padding: 2px 8px;
}
.svc-card-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.svc-card-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  border-top: 1px solid rgba(107,122,153,.18); padding-top: 10px;
}
.svc-card-price { font-size: 15px; font-weight: 800; color: var(--primary); }
.svc-card-arrow { font-size: 18px; color: var(--text3); line-height: 1; }

/* Seller-marketplace cards: more product-focused layout + explicit actions. */
.sg-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-radius: 18px;
  border: 1px solid rgba(26,122,229,.14);
  box-shadow: 0 10px 24px rgba(19,43,88,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.sg-card:hover {
  border-color: rgba(26,122,229,.26);
  box-shadow: 0 14px 30px rgba(19,43,88,.14);
  transform: translateY(-2px);
}
.sg-card:active { transform: scale(.99); }

/* Photo-forward header — same big-image-on-top language as the CS2 skin
   and "Популярные товары" cards, since these listings are just as visual.
   .svc-icon-photo-wrap/.svc-icon-photo/.svc-icon-photo-fallback are the
   shared photo/fallback classes (with fmHandleMediaLoad/Error retry logic)
   used across the app; only sizing + the type pill are sg-card-specific. */
.sg-card-photo {
  aspect-ratio: 1.6 / 1;
  position: relative;
  flex-shrink: 0;
}
.sg-card-photo-fallback { font-size: 34px; color: #fff; }
.sg-card-type {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(10,22,45,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 999px;
  padding: 3px 9px;
}
.sg-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 0;
}
.sg-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.24;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.sg-card-seller {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
}
.sg-card .svc-card-badges {
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
}
.sg-card .svc-card-desc {
  margin-bottom: 0;
  min-height: 0;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.sg-card-footer {
  margin-top: auto;
  border-top: 1px solid rgba(107,122,153,.18);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sg-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sg-card-actions-single { grid-template-columns: 1fr; }
.sg-card-btn {
  border-radius: 12px;
  padding: 9px 10px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, filter .15s, background .15s;
}
.sg-card-btn:active { transform: scale(.98); }
.sg-card-btn-buy {
  background: var(--primary-grad);
  color: #fff;
}
.sg-card-btn-buy:hover { filter: brightness(1.06); }
.sg-card-btn-msg {
  background: #fff;
  color: var(--primary);
  border-color: rgba(26,122,229,.35);
}
.sg-card-btn-msg:hover { background: var(--primary-light); }

.gc-card {
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(26,122,229,.10);
  box-shadow: 0 4px 16px rgba(25,55,105,.08);
  grid-template-rows: auto auto auto auto;
  overflow: hidden;
}
.gc-card-banner {
  height: 92px;
  margin: -12px -12px 10px;
  border-radius: 16px 16px 10px 10px;
}
.gc-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.gc-card-top-body {
  min-width: 0;
  flex: 1;
}
.gc-card .svc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 0;
}
.gc-card .svc-card-name {
  min-height: 0;
  margin-bottom: 4px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.gc-card .svc-card-badges {
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
}
.gc-card-desc {
  min-height: 50px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.gc-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gc-card-meta-item {
  font-size: 10px;
  font-weight: 700;
  color: #516487;
  background: #eaf2fe;
  border-radius: 999px;
  padding: 4px 8px;
}
.gc-card .svc-card-footer {
  border-top: 1px solid #e4ebf7;
  padding-top: 8px;
}

.gk-card {
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid rgba(26,122,229,.12);
  box-shadow: 0 7px 22px rgba(19,43,88,.10);
  grid-template-rows: auto auto auto auto;
  overflow: hidden;
}
.gk-card:hover {
  border-color: rgba(26,122,229,.24);
  box-shadow: 0 10px 26px rgba(19,43,88,.14);
}
.gk-card-banner {
  height: 108px;
  margin: -12px -12px 10px;
  border-radius: 16px 16px 10px 10px;
}
.gk-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.gk-card-top-body { min-width: 0; flex: 1; }
.gk-card .svc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 0;
}
.gk-card .svc-card-name {
  min-height: 0;
  margin-bottom: 4px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.gk-card .svc-card-badges {
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
}
.gk-card-desc {
  min-height: 50px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.gk-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gk-card-meta-item {
  font-size: 10px;
  font-weight: 700;
  color: #445c81;
  background: #ebf2ff;
  border-radius: 999px;
  padding: 4px 8px;
}
.gk-card .svc-card-footer {
  border-top: 1px solid #e4ebf7;
  padding-top: 8px;
}

.steam-gift-card {
  overflow: hidden;
}
.steam-gift-banner {
  height: 132px;
  margin: -12px -12px 10px;
  border-radius: 16px 16px 10px 10px;
}

.gk-card.no-banner .gk-card-banner,
.steam-gift-card.no-banner .steam-gift-banner {
  display: none;
}

.gk-card.no-banner .gk-card-top,
.steam-gift-card.no-banner .gk-card-top {
  margin-top: 2px;
}

.svc-banner-fallback {
  background:
    linear-gradient(120deg, rgba(255,255,255,.08) 20%, rgba(255,255,255,.24) 42%, rgba(255,255,255,.08) 62%),
    linear-gradient(135deg, #73808a 0%, #7f8d98 58%, #8a98a3 100%);
  background-size: 220% 100%, 100% 100%;
  animation: bannerShimmer 1.15s linear infinite;
}

@keyframes bannerShimmer {
  0% { background-position: 200% 0, 0 0; }
  100% { background-position: -20% 0, 0 0; }
}

.svcsec-empty {
  grid-column: 1 / -1; text-align: center; padding: 48px 24px;
  color: var(--text2); font-size: 14px;
}

.svcsec-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 20px 24px; flex-wrap: wrap;
}
.svcsec-page-btn {
  min-width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 10px;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.svcsec-page-btn:hover { border-color: var(--primary); color: var(--primary); }
.svcsec-page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.svcsec-page-btn.ellipsis { pointer-events: none; border-color: transparent; background: none; color: var(--text3); }
.svcsec-page-btn.prev-next { padding: 0 12px; }

@media (min-width: 600px) {
  .svcsec-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .svcsec-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    grid-auto-rows: 1fr;
  }
  .svc-card {
    min-height: 292px;
    height: 100%;
  }
  .svc-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .svcsec-header { padding: 24px 24px 10px; }
  .svcsec-search-row { padding: 10px 24px 6px; }
  .svcsec-tabs { padding: 8px 24px 12px; }
  .svcsec-grid { padding: 0 24px 12px; }
  .svcsec-pagination { padding: 8px 24px 24px; }

  #section-topup-detail .dtl-col-right {
    position: sticky;
    top: 84px;
    align-self: start;
  }

  .dtl-quick-pay-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px;
    box-shadow: var(--shadow);
  }
  .dtl-quick-pay-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
  }
  .dtl-quick-pay-sub {
    font-size: 12px;
    color: var(--text2);
    margin-top: 2px;
    margin-bottom: 10px;
  }
  .dtl-quick-pay-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #section-topup-detail #dtl-actions,
  #section-topup-detail #dtl-terms {
    display: none !important;
  }

  .steam-gift-banner {
    height: 104px;
  }

  .gk-card-banner {
    height: 98px;
  }

  .gc-card-banner {
    display: none;
  }
}

@media (max-width: 899px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  .page-scroll,
  .catalog-main,
  .svcsec-grid {
    touch-action: pan-y;
  }

  .svcsec-header { padding: 14px 14px 6px; }
  .svcsec-title { font-size: 28px; letter-spacing: -.2px; }
  .svcsec-sub { font-size: 13px; margin-top: 4px; }

  .svcsec-pins {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 14px 10px;
  }
  .svc-pin-card {
    min-height: 74px;
    border-radius: 14px;
    padding: 12px;
    gap: 10px;
  }
  .svc-pin-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .svc-pin-icon svg { width: 22px; height: 22px; }
  .svc-pin-icon img { width: 100%; height: 100%; }
  .svc-pin-icon img.pin-icon-zoom { transform: scale(1.2); }
  .svc-pin-title { font-size: 14px; }
  .svc-pin-desc  { font-size: 11px; }
  .svc-pin-badge { margin-top: 4px; }

  .svcsec-search-row {
    padding: 8px 14px 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .svcsec-search-wrap {
    min-width: 0;
    grid-column: 1 / -1;
  }

  .svcsec-filter {
    width: 100%;
    min-width: 0;
    padding: 10px 28px 10px 11px;
    font-size: 12.5px;
  }

  .svcsec-tabs { padding: 8px 14px 10px; }
  .svcsec-tab { border-radius: 14px; padding: 7px 13px; }
  #acc-cat-tabs {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 10px 4px;
    padding: 8px 14px 12px;
  }
  .acccat-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
  .acccat-label { font-size: 10px; max-width: 58px; }
  #gk-main-tabs {
    width: 100%;
    border-radius: 16px;
  }
  #gk-main-tabs .svcsec-tab {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 12.5px;
  }

  .svcsec-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 14px 10px;
  }

  .svc-card {
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(19,43,88,.10);
    border: 1px solid rgba(26,122,229,.12);
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  #section-topup-detail .dtl-quick-pay-card { display: none !important; }

  .sg-card { border-radius: 16px; }
  .sg-card-main { padding: 10px 11px 0; gap: 5px; }
  .sg-card-footer { padding: 8px 11px 11px; }
  .sg-card-photo-fallback { font-size: 28px; }
  .sg-card-name { font-size: 14px; }
  .sg-card-btn {
    font-size: 12px;
    padding: 8px 9px;
  }

  .svc-card:active { transform: scale(.99); }

  .svc-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / 6;
  }

  .svc-card-name {
    grid-column: 2;
    margin-bottom: 0;
    font-size: 14.5px;
    line-height: 1.24;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .svc-card-badges {
    grid-column: 2;
    margin-bottom: 0;
  }

  .svc-card-desc {
    grid-column: 2;
    margin-bottom: 0;
    line-height: 1.35;
    font-size: 11.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .svc-card-footer {
    grid-column: 2;
    border-top: 1px solid rgba(107,122,153,.18);
    padding-top: 8px;
  }

  #steam-gift-offers-list.offer-picker-grid,
  #topup-offers-list.offer-picker-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px 6px;
  }

  .offer-tile {
    min-height: 88px;
    border-radius: 16px;
    padding: 12px;
  }

  .offer-tile .offer-row-name {
    font-size: 14px;
  }

  .offer-tile .offer-row-price {
    font-size: 17px;
  }

  .gc-card {
    padding: 11px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .gc-card-top { margin-bottom: 6px; }
  .gc-card-desc {
    min-height: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 11px;
  }
  .gc-card-meta { margin-bottom: 6px; }
  .gc-card-meta-item { font-size: 9px; padding: 3px 7px; }

  .gk-card {
    padding: 11px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    border: 1px solid rgba(26,122,229,.10);
    box-shadow: 0 4px 16px rgba(19,43,88,.09);
  }
  .gk-card-top { margin-bottom: 6px; }
  .gk-card-desc {
    min-height: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 11px;
  }
  .gk-card-meta { margin-bottom: 6px; }
  .gk-card-meta-item { font-size: 9px; padding: 3px 7px; }

  .gk-card .svc-card-name,
  .gk-card .svc-card-badges,
  .gk-card .svc-card-desc,
  .gk-card .svc-card-footer,
  .gc-card .svc-card-name,
  .gc-card .svc-card-badges,
  .gc-card .svc-card-desc,
  .gc-card .svc-card-footer {
    grid-column: auto;
  }
  .gk-card .svc-card-name,
  .gc-card .svc-card-name {
    white-space: normal;
  }

  .sgd-region-tools { grid-template-columns: 1fr; }
  #sgd-region-grid { max-height: 250px; }

  .svc-card-price { font-size: 15px; }
  .svc-card-arrow { font-size: 20px; }

  .svcsec-pagination { padding: 8px 14px 20px; }

  .mob-mini-header {
    justify-content: center;
    gap: 10px;
    padding: calc(8px + env(safe-area-inset-top) + var(--tg-content-safe-top)) 14px 8px;
    min-height: 58px;
  }
  .mob-brand-wrap { margin: 0 auto; }
  .mob-search-btn {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .logo-img-sm { height: 21px; }

  #section-topup-detail {
    padding-bottom: calc(var(--nav-h) + 160px);
  }
  #section-topup-detail #dtl-summary { margin-bottom: 8px; }
  #section-topup-detail #dtl-security { margin-bottom: 90px; }
  #section-topup-detail #dtl-actions {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 8px);
    margin: 0;
    padding: 8px;
    border-radius: 16px;
    background: rgba(237,243,254,.94);
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(20,45,88,.14);
    backdrop-filter: blur(8px);
    z-index: 140;
  }
  #section-topup-detail #dtl-terms { display: none !important; }

  .hero-banner {
    margin: 10px 12px;
    min-height: 198px;
    border-radius: 18px;
    padding: 20px 14px;
    background-position: 66% center;
  }

  .hero-slide {
    min-height: 196px;
    padding: 16px 14px 64px;
    background-position: 64% center;
    align-items: stretch;
  }
  .hero-dots { bottom: 12px; }

  .hero-text { max-width: 60%; }
  .hero-title {
    font-size: 18px;
    line-height: 1.18;
    margin-bottom: 6px;
  }
  .hero-desc {
    font-size: 10.5px;
    line-height: 1.35;
    margin-bottom: 9px;
  }
  .hero-ctas {
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: auto;
    transform: translateY(-3px);
  }

  .hero-slide--main .hero-text { max-width: 66%; }
  .hero-slide--main .hero-title {
    font-size: 19px;
    line-height: 1.2;
  }
  .hero-slide--main .hero-desc { margin-top: 2px; }

  /* Per-banner text bounds so copy sits inside each artwork's safe area. */
  .hero-slide--accounts .hero-text { max-width: 56%; }
  .hero-slide--telegram .hero-text { max-width: 58%; }
  .hero-slide--giftcards .hero-text { max-width: 54%; }
  .hero-btn-fill,
  .hero-btn-ghost {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 10px 10px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 12px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .hero-btn-fill { min-width: 96px; }
  .hero-btn-ghost { min-width: 58px; }

  .trust-row {
    gap: 7px;
    padding: 0 12px 10px;
  }
  .trust-item { padding: 12px 10px; }
  .trust-texts b { font-size: 12px; }
  .trust-texts p { font-size: 10px; }

  .section-header-row { padding: 14px 12px 8px; }
  .shr-title { font-size: 28px; letter-spacing: -.2px; }

  .cats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 0 12px 14px;
  }
  .cat-row-item {
    border-radius: 14px;
    padding: 12px 10px;
    gap: 10px;
  }
  .quick-cat-banner {
    flex-basis: 162px;
    width: 162px;
    min-height: 132px;
    padding: 13px 13px 14px;
  }
  .quick-cat-banner .quick-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .quick-cat-banner .quick-cat-title {
    font-size: 15px;
    line-height: 1.14;
  }
  .quick-cat-banner .quick-cat-sub { font-size: 11px; }
  .cat-banner-card {
    --cat-banner-pad: 12px;
    min-height: 132px;
    padding: var(--cat-banner-pad);
  }
  .cat-banner-card .cri-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .cat-banner-card .cri-texts {
    width: min(100%, calc(84% + var(--cat-banner-pad)));
    max-width: min(100%, calc(84% + var(--cat-banner-pad)));
  }
  .cat-banner-card .cri-name { font-size: 14px; line-height: 1.18; }
  .cat-banner-card .cri-sub { font-size: 11px; margin-top: 3px; }
  .cat-tile {
    border-radius: 15px;
    padding: 11px 9px 10px;
    gap: 6px;
  }
  .cat-tile-icon { width: 46px; height: 46px; font-size: 24px; }
  .cat-tile-badge { font-size: 9px; padding: 3px 8px; }
  .cat-tile-name { font-size: 11px; line-height: 1.24; min-height: 29px; }
  .cat-tile-meta { font-size: 10px; line-height: 1.28; min-height: 25px; }
  .cri-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .cri-icon-wrap img { width: 22px; height: 22px; }
  .cri-name { font-size: 12px; line-height: 1.28; }
  .cri-sub { font-size: 10px; line-height: 1.30; }

  /* CS2 skins are browsed by their look, so on mobile they keep the
     photo-forward card (big image on top, 2-up grid) instead of the
     compact icon+text list the other .svc-card sections switch to above. */
  #csm-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 12px 10px;
  }
  #csm-items-grid .svc-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    padding: 8px;
    border-radius: 16px;
  }
  #csm-items-grid .svc-icon-photo-wrap {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin: 0 0 8px !important;
  }
  #csm-items-grid .svc-card-name,
  #csm-items-grid .svc-card-badges,
  #csm-items-grid .svc-card-footer {
    grid-column: 1;
  }
  #csm-items-grid .svc-card-name {
    font-size: 12.5px;
    line-height: 1.22;
    min-height: 31px;
    white-space: normal;
  }
  #csm-items-grid .svc-card-badges { min-height: 0; margin-bottom: 6px; }
  #csm-items-grid .svc-card-price { font-size: 14px; }
  #csm-items-grid .svc-card-arrow { font-size: 16px; }

  /* Seller-goods cards (Товары продавцов): 1 column at full device width
     read as a detail page, not a catalog. Switch to a compact 3-up grid —
     trimmed to photo/name/stock/price/Buy since the full desktop card
     (seller row, 3 badges, description, 2 buttons) can't fit three across;
     everything dropped here is still one tap away on the detail page. */
  #sg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 12px 10px;
  }
  #sg-grid .sg-card { border-radius: 14px; }
  #sg-grid .sg-card-photo { aspect-ratio: 1 / 1; }
  #sg-grid .sg-card-photo-fallback { font-size: 22px; }
  #sg-grid .sg-card-type { display: none; }
  #sg-grid .sg-card-main { padding: 7px 7px 0; gap: 3px; }
  #sg-grid .sg-card-name { font-size: 11.5px; line-height: 1.22; min-height: 28px; }
  #sg-grid .sg-card-seller,
  #sg-grid .sg-card-desc,
  /* .svc-badge-pct backs both the delivery pill (✋/⚡) and the rating/"Новый"
     pill — dropping it leaves just the stock badge, the one fact that
     matters at a glance in a 3-up grid. */
  #sg-grid .sg-card-badges .svc-badge-pct {
    display: none;
  }
  #sg-grid .sg-card-footer { padding: 6px 7px 8px; gap: 5px; }
  #sg-grid .sg-card-price-row .svc-card-price { font-size: 12.5px; }
  /* "Написать продавцу" drops from the grid card — the card itself is
     tappable through to the detail page, which still has both actions. */
  #sg-grid .sg-card-btn-msg { display: none; }
  #sg-grid .sg-card-actions { grid-template-columns: 1fr; }
  #sg-grid .sg-card-btn { font-size: 10.5px; padding: 6px 4px; }
}

@media (max-width: 420px) {
  .sg-card-actions { grid-template-columns: 1fr; }
}

/* ═══ ICON COLOR FILTERS ════════════════════════════════════ */
/* Black PNG → primary blue */
.ic-blue  { filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }
/* Black PNG → white (for icons on colored bg) */
.ic-white { filter: brightness(0) invert(1); }
/* Black PNG → orange/amber */
.ic-orange{ filter: brightness(0) saturate(100%) invert(62%) sepia(90%) saturate(700%) hue-rotate(4deg) brightness(105%); }
/* Black PNG → gray */
.ic-gray  { filter: brightness(0) saturate(0%) invert(55%) brightness(1.1); }
/* Black PNG → primary blue, 60% opacity (inactive nav) */
.ic-nav   { filter: brightness(0) saturate(0%) invert(55%) brightness(1.05); }
.ic-nav-active { filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }

/* Trust icon wrapper dots */
.trust-ic-wrap {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trust-ic-wrap img { width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }

/* Logo image */
.logo-img { height: 28px; width: auto; object-fit: contain; flex-shrink: 0; }
.logo-img-sm { height: 22px; width: auto; object-fit: contain; flex-shrink: 0; }

/* Category icon img */
.cri-icon-wrap img { width: 26px; height: 26px; object-fit: contain; }
.cri-icon-wrap img.ic-blue { filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }

/* Sidebar nav icon */
.ds-nav-icon img { width: 16px; height: 16px; object-fit: contain; }
.ds-nav-item:not(.ds-active) .ds-nav-icon img { filter: brightness(0) saturate(0%) invert(55%); }
.ds-nav-item.ds-active .ds-nav-icon img { filter: brightness(0) invert(1); }

/* Stats icon */
.stats-item img { width: 22px; height: 22px; margin-bottom: 2px; filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }

/* Sidebar trust icon */
.ds-trust-icon img { width: 20px; height: 20px; object-fit: contain; }
.ds-trust-item:nth-child(1) .ds-trust-icon img { filter: brightness(0) saturate(100%) invert(58%) sepia(80%) saturate(900%) hue-rotate(5deg); }
.ds-trust-item:nth-child(2) .ds-trust-icon img { filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(1200%) hue-rotate(196deg) brightness(105%); }
.ds-trust-item:nth-child(3) .ds-trust-icon img { filter: brightness(0) saturate(0%) invert(55%); }
/* ══ SMM Section — 3-step UI ════════════════════════════════ */
.smm-pg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 8px 20px 20px;
}
.smm-pc {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: var(--r);
  border: 1px solid #e6edf8;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 10px 14px; gap: 10px;
  cursor: pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease, background .18s ease;
  box-shadow: 0 8px 18px rgba(38, 70, 120, .07);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.smm-pc:hover  {
  box-shadow: 0 14px 28px rgba(37, 74, 126, .12);
  border-color: #d6e4f8;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}
.smm-pc:active { transform: scale(.95); }
.smm-pc-ico {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid rgba(92, 115, 156, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 14px rgba(38, 70, 120, .08);
}
.smm-pc-ico svg { width: 27px; height: 27px; display: block; }
.smm-pc-name {
  font-size: 12.5px; font-weight: 700; color: #607196;
  text-align: center; line-height: 1.3;
}
.smm-pc-count { font-size: 10.5px; color: #8a98b3; text-align: center; }
.smm-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--border);
  flex-shrink: 0; min-height: 58px;
}
.smm-nav-back {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text2);
  transition: background .12s, color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.smm-nav-back:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.smm-nav-back svg { width: 18px; height: 18px; }
.smm-nav-body { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.smm-nav-pico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(92, 115, 156, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.smm-nav-pico svg { width: 20px; height: 20px; }
.smm-nav-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smm-search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; background: var(--card); border-bottom: 1px solid var(--border);
}
.smm-search-bar input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text);
}
.smm-step-body { margin-top: 0; }
.smm-search-in-card {
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

/* Step 1: category cards */
.smm-cats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.smm-cat-card {
  height: 100%;
  min-height: 90px;
}
.smm-cat-card .dtl-oc-name { font-size: 13px; }
.smm-cat-card .dtl-oc-price { font-size: 11px; }

/* Step 2: service cards */
.smm-svcs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.smm-svc-offer {
  text-align: left;
  padding: 11px 9px;
  height: 100%;
  min-height: 132px;
  display: flex;
  flex-direction: column;
}
.smm-svc-title {
  font-size: 12.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
  word-break: normal;
  overflow-wrap: anywhere;
}
.smm-svc-price {
  margin-top: auto;
  color: var(--primary);
  font-weight: 700;
  line-height: 1.2;
}
.smm-svc-limits {
  font-size: 10.5px;
  color: var(--text2);
  margin-top: 3px;
  min-height: 26px;
}

/* Disable press-scale jitter for SMM cards */
.smm-cat-card:active,
.smm-svc-offer:active { transform: none; }

/* Order form - step 3 */
.smm-order-steps { margin-bottom: 14px; }
.smm-order-step-label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-hint-inline { font-size: 11px; color: var(--text2); font-weight: 400; margin-left: 4px; }
.smm-qty-row { display: flex; align-items: center; gap: 10px; }
.smm-qty-input { flex: 1; min-width: 0; }
.smm-qty-total {
  font-size: 16px; font-weight: 800; color: var(--primary);
  white-space: nowrap; flex-shrink: 0; min-width: 80px; text-align: right;
}
.smm-pay-btn { width: 100%; margin-top: 6px; }
.smm-svc-info {
  margin: 0;
  background: var(--primary-light); border-left: 4px solid var(--primary);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.smm-svc-info-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.smm-svc-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.smm-svc-meta-item { display: flex; flex-direction: column; gap: 2px; }
.smm-svc-meta-label { font-size: 10.5px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.smm-svc-meta-val   { font-size: 13px; font-weight: 700; color: var(--text); }
@media (max-width: 600px) {
  .smm-pg { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 14px 16px; }
  .smm-pc { padding: 14px 6px 12px; }
  .smm-pc-ico { width: 46px; height: 46px; border-radius: 13px; }
  .smm-pc-ico svg { width: 24px; height: 24px; }
  .smm-pc-name { font-size: 11px; }
  .smm-svcs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .smm-pg { grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 10px 24px 20px; }
  .smm-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .smm-svcs-grid { grid-template-columns: repeat(3, 1fr); }
  .smm-nav { padding: 12px 24px; }
}

/* ════════════════════════════════════════════════════════════
   DEPOSIT MODAL
════════════════════════════════════════════════════════════ */
.dm-card {
  background: var(--card);
  border-radius: 20px;
  padding: 0;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
}
.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, #e8e8e8);
}
.dm-header-title { font-size: 16px; font-weight: 700; color: var(--text); }
.dm-close-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg2, #f2f2f2); border: none; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--text2); transition: background .15s;
}
.dm-close-btn:hover { background: var(--border); }
.dm-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.dm-methods { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-method-btn {
  flex: 1; min-width: 90px; padding: 10px 8px; border-radius: 12px;
  border: 2px solid var(--border, #e8e8e8); background: var(--card);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px; transition: border-color .15s, background .15s;
  font-size: 11px; font-weight: 600; color: var(--text2);
}
.dm-method-btn.active {
  border-color: var(--accent, #2688EB);
  background: rgba(38,136,235,.07);
  color: var(--accent, #2688EB);
}
.dm-method-icon { font-size: 22px; }
.dm-amount-group { display: flex; flex-direction: column; gap: 6px; }
.dm-amount-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.dm-amount-input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border, #e8e8e8); background: var(--bg2, #f7f7f7);
  font-size: 16px; font-weight: 600; color: var(--text);
  outline: none; transition: border-color .15s; box-sizing: border-box;
}
.dm-amount-input:focus { border-color: var(--accent, #2688EB); }
.dm-hint { font-size: 12px; color: var(--text2); line-height: 1.5; }
.dm-hint.dm-hint-warn { color: #E74C3C; }
.dm-submit-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  background: var(--accent, #2688EB); color: #fff;
  border: none; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.dm-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Step 2 */
.dm-pay-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dm-qr-wrap { width: 180px; height: 180px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); }
.dm-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
.dm-pay-row { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.dm-pay-row-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.dm-pay-row-val {
  font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--bg2, #f7f7f7); border-radius: 10px;
  padding: 10px 12px; word-break: break-all;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dm-copy-btn {
  flex-shrink: 0; padding: 4px 10px; border-radius: 8px;
  background: var(--accent, #2688EB); color: #fff;
  border: none; font-size: 11px; font-weight: 600; cursor: pointer;
}
.dm-warn-box {
  width: 100%; background: #FFF8E1; border: 1.5px solid #FFD54F;
  border-radius: 12px; padding: 10px 14px;
  font-size: 12px; color: #7B5F00; line-height: 1.5;
}
.dm-status-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text2);
}
.dm-status-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent, #2688EB);
  animation: dm-spin .8s linear infinite;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-status-confirmed { color: #27AE60; font-size: 14px; font-weight: 700; }
.dm-status-expired   { color: #E74C3C; font-size: 14px; font-weight: 700; }
.dm-timer { font-size: 12px; color: var(--text2); }
.dm-back-btn {
  background: none; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text2); width: 100%;
}

/* ═══ GLOBAL SEARCH OVERLAY ═══════════════════════════════════ */
.gsr-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 54px 16px 0;
}
.gsr-overlay.gsr-hidden { display: none; }
.gsr-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 25, 50, .52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: gsr-fade-in .15s ease;
}
.gsr-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 700px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15, 30, 70, .28);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 76px);
  animation: gsr-slide-in .16s ease;
  overflow: hidden;
}
@keyframes gsr-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsr-slide-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.gsr-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.gsr-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .45; color: var(--text2); }
.gsr-input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 16px; color: var(--text); line-height: 1.4;
  font-family: inherit; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.gsr-input::-webkit-search-cancel-button { display: none; }
.gsr-input::placeholder { color: var(--text3); }
.gsr-close {
  border: none; background: none; cursor: pointer; flex-shrink: 0;
  font-size: 11px; color: var(--text3); padding: 3px 9px;
  border-radius: 6px; border: 1px solid var(--border);
  font-family: monospace; white-space: nowrap; font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.gsr-close:hover { background: var(--bg); color: var(--text2); border-color: var(--text3); }

.gsr-results {
  flex: 1; overflow-y: auto; padding: 12px 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gsr-empty {
  text-align: center; color: var(--text2);
  padding: 36px 16px; font-size: 14px; line-height: 1.7;
}
.gsr-empty b { color: var(--text); display: block; font-size: 15px; margin-bottom: 6px; }
.gsr-hint {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 6px 0 0;
}
.gsr-hint-chip {
  background: var(--primary-light); color: var(--primary);
  border: none; border-radius: 20px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.gsr-hint-chip:hover { background: #d0e6ff; }

.gsr-section { display: flex; flex-direction: column; gap: 8px; }
.gsr-section-title {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text3); padding: 0 2px;
}
.gsr-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.gsr-card {
  background: var(--bg); border-radius: 13px;
  padding: 11px 10px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px;
  transition: background .12s, box-shadow .12s, border-color .12s;
  border: 1.5px solid transparent;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.gsr-card:hover, .gsr-card:focus { background: var(--primary-light); border-color: #bcd8ff; outline: none; }
.gsr-card:active { transform: scale(.97); }
.gsr-card-icon {
  width: 42px; height: 42px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; background: var(--card);
}
.gsr-card-icon img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gsr-card-name {
  font-size: 12px; font-weight: 700; color: var(--text);
  line-height: 1.3; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gsr-card-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  margin-top: auto; width: fit-content;
}
.gsr-badge-topup    { background: #e0f2e9; color: #1a7a4a; }
.gsr-badge-giftcard { background: #fff0e0; color: #b05000; }
.gsr-badge-gamekey  { background: #e8f1fd; color: var(--primary); }
.gsr-badge-steam    { background: #e0e6ef; color: #1b2838; }
.gsr-badge-smm      { background: #f0e8fd; color: #7a22d4; }

.gsr-steam-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--text3); font-size: 13px; padding: 4px 2px;
}
.gsr-spinner {
  width: 14px; height: 14px; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: gsr-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes gsr-spin { to { transform: rotate(360deg); } }

/* Mobile search button in mob-mini-header */
.mob-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: transparent; color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mob-search-btn svg { width: 20px; height: 20px; }
.mob-search-btn:active { background: var(--primary-light); color: var(--primary); }

@media (max-width: 640px) {
  .gsr-overlay { padding: 0; align-items: flex-start; }
  .gsr-panel { max-height: 100dvh; border-radius: 0 0 18px 18px; }
  .gsr-cards-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════
   SUPPORT SECTION
════════════════════════════════════════════════════════════ */
/* support_banner (see assets.json) is a transparent cutout, not a flat
   full-bleed photo like the home page's `banner` asset — so it's layered
   as a foreground <img> instead of hijacking .hero-banner's background,
   which stays the plain gradient. That also means it degrades gracefully:
   worst case (asset fails to load) is just the gradient + text, never a
   broken-image icon. */
.supp-hero-img {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 100%; max-width: 34%; width: auto; object-fit: contain;
  opacity: .9; pointer-events: none; z-index: 0;
}
/* .hero-text is 54% wide up to 900px, then 48% (see base rule + the
   900px breakpoint above) — the image's max-width is kept a notch under
   the complement at each step so the two never crowd each other. Shown at
   every width now (used to be hidden below 480px, which meant most phones
   never saw it at all). */
@media (min-width: 480px) {
  .supp-hero-img { max-width: 40%; height: 135%; opacity: 1; }
}
@media (min-width: 900px) {
  .supp-hero-img { right: 0; height: 150%; max-width: 48%; }
}

.supp-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 24px); margin: 0 12px; padding: 15px;
  background: var(--primary); color: #fff; border: none; border-radius: var(--r);
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(26,122,229,.28);
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.supp-new-btn:hover  { background: var(--primary-dk); }
.supp-new-btn:active { transform: scale(.98); }
.supp-new-btn-icon { font-size: 18px; font-weight: 800; line-height: 1; }
@media (min-width: 900px) { .supp-new-btn { width: calc(100% - 32px); margin: 0 16px; } }

.supp-ticket-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.supp-ticket-row:last-child { border-bottom: none; }
.supp-ticket-row:hover { background: var(--bg); }
.supp-ticket-row-main { min-width: 0; flex: 1; }
.supp-ticket-row-subject { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supp-ticket-row-meta { font-size: 11.5px; color: var(--text2); margin-top: 2px; }
.supp-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.supp-badge-open, .supp-badge-in_progress    { background: #FFF3E0; color: #B0700E; }
.supp-badge-awaiting_client                  { background: #E8F1FD; color: var(--primary-dk); }
.supp-badge-resolved                         { background: #E0F2E9; color: #1A7A4A; }
.supp-badge-closed                           { background: var(--bg); color: var(--text2); }

.supp-ticket-meta { font-size: 12.5px; color: var(--text2); margin-bottom: 12px; line-height: 1.6; }
.supp-thread { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 14px; padding-right: 2px; }
.supp-msg { max-width: 84%; border-radius: 14px; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
/* Own messages (the client, since this thread renders inside the storefront)
   sit on the right like every chat app; support's replies sit on the left. */
.supp-msg-client { align-self: flex-end;   background: var(--primary); color: #fff;       border-bottom-right-radius: 4px; }
.supp-msg-staff   { align-self: flex-start; background: var(--bg);      color: var(--text); border-bottom-left-radius: 4px; }
.supp-msg-time { font-size: 10.5px; opacity: .7; margin-top: 4px; }

/* ═══ СООБЩЕНИЯ (unified per-person conversations inbox) ═══════ */
/* #section-messages sits inside .catalog-main, which is already the
   correctly-sized scroll container (flex:1 inside the header/nav-aware
   .page layout) — height:100% inherits that instead of re-deriving
   header/nav heights via 100vh, which double-counts the mobile header and
   clips the input row under the bottom nav. */
#section-messages { height: 100%; }
.msg-page {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  min-height: 420px;
  gap: 0;
}
@media (min-width: 900px) {
  .msg-page { grid-template-columns: 320px 1fr; gap: 16px; }
}

.msg-list-pane {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.msg-list-head { padding: 14px 16px; font-weight: 700; font-size: 18px; border-bottom: 1px solid var(--border); }
.msg-list { flex: 1; overflow-y: auto; }

.msg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.msg-row:hover { background: var(--bg2, var(--bg)); }
.msg-row.active { background: var(--primary-light); }
.msg-row-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.msg-row-body { flex: 1; min-width: 0; }
.msg-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.msg-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-time { font-size: 11px; color: var(--text2); flex-shrink: 0; }
.msg-row-role { font-size: 11px; color: var(--text2); margin: 2px 0; }
.msg-row-preview { font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row.unread .msg-row-preview { color: var(--text); font-weight: 600; }
.msg-row.unread .msg-row-name { font-weight: 700; }
.msg-row-dot {
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; flex-shrink: 0;
  background: #e05252; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.msg-thread-pane {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.msg-thread-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text2); text-align: center; gap: 8px; padding: 20px;
}
.msg-thread-empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--border); }
.msg-thread-open { display: flex; flex-direction: column; height: 100%; }
.msg-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.msg-thread-back { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text); padding: 0 4px; }
.msg-thread-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.msg-thread-title { font-weight: 700; font-size: 15px; }
.msg-thread-sub { font-size: 12px; color: var(--text2); }
.msg-thread-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.msg-thread-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.msg-thread-input-row input { flex: 1; }

@media (max-width: 899px) {
  .msg-list-pane, .msg-thread-pane { border-radius: 0; border: none; }
  .msg-page.thread-open .msg-list-pane { display: none; }
  .msg-page:not(.thread-open) .msg-thread-pane { display: none; }
  .msg-thread-back { display: inline-block; }
}

/* Unread badges on the 3 Messages entry points (header, profile tab, bottom nav) */
.nav-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #e05252; color: #fff; font-size: 10px; font-weight: 700;
  margin-left: 4px; line-height: 1;
}
.bottom-nav .nav-item { position: relative; }
.nav-unread-badge-corner { position: absolute; top: 4px; right: calc(50% - 22px); margin-left: 0; }

/* ════════════════════════════════════════════════════════════
   КАБИНЕТ ПРОДАВЦА v2 — dense product table (desktop) / card list
   (mobile), unified via CSS Grid: renderProductRow() emits ONE markup
   per product, this file repositions its children between a mobile
   card layout (base, mobile-first) and a desktop table row
   (>=900px, matching the site-wide desktop breakpoint) purely through
   grid-template-areas — see STRUCTURE.md for why 900px is the cut.
════════════════════════════════════════════════════════════ */

/* Stats bar reuses .prf-kpi-row/.prf-kpi (profile KPI cards) as-is —
   same "3 numbers at a glance" shape, already responsive. */
#slr-stats-row { padding: 4px 12px 10px; }

/* Toolbar: search + status filter + sort + "new product" button.
   Mobile-first stack; row layout from 640px up. */
.slr-toolbar { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 10px; }
.slr-toolbar .svcsec-search-wrap { margin: 0; width: 100%; }
.slr-toolbar-selects { display: flex; gap: 8px; }
.slr-toolbar-selects .svcsec-filter { flex: 1; min-width: 0; }
.slr-new-btn { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 640px) {
  .slr-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .slr-toolbar .svcsec-search-wrap { flex: 1 1 200px; }
  .slr-toolbar-selects { flex: 0 0 auto; }
  .slr-toolbar-selects .svcsec-filter { flex: 0 0 auto; width: auto; }
}

/* Bulk selection bar — appears only once >=1 row is checked. */
.slr-bulk-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 12px; margin: 0 12px 8px;
  background: var(--primary-light); border: 1.5px solid #bcd8ff; border-radius: var(--r-sm);
}
.slr-bulk-check-all { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--primary-dk); cursor: pointer; min-height: 32px; }
.slr-bulk-check-all input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.slr-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.slr-bulk-btn {
  min-height: 36px; padding: 8px 13px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.slr-bulk-btn:hover, .slr-bulk-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.slr-bulk-btn-danger { color: #c0392b; }
.slr-bulk-btn-danger:hover, .slr-bulk-btn-danger:focus-visible { border-color: #c0392b; color: #c0392b; }
.slr-bulk-cancel { background: none; border: none; color: var(--text2); font-weight: 600; }

/* Unified status badge system — green=active/approved, yellow=pending
   moderation, gray=hidden/neutral, red=rejected/error, blue=info/stock. */
.slr-badge {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; letter-spacing: .02em; white-space: nowrap;
}
.slr-badge-green  { background: rgba(31,168,85,.16);  color: #167a3f; }
.slr-badge-yellow { background: rgba(230,164,0,.20);  color: #8a6300; }
.slr-badge-gray   { background: rgba(106,123,153,.16); color: #566178; }
.slr-badge-red    { background: rgba(224,60,60,.15);  color: #b7311f; }
.slr-badge-blue   { background: rgba(26,122,229,.14); color: #1462c0; }

/* "Needs attention" rows (rejected / draft / active-but-out-of-stock) get
   a left accent so sellers can scan past everything-fine rows quickly. */
.slr-prow-attn, .slr-srow-attn {
  border-left: 3px solid #e6a400;
  background: linear-gradient(90deg, rgba(230,164,0,.07), transparent 60%);
}

/* Table head — desktop column labels only; the mobile card layout needs
   no header row since each card repeats its own labels via badges. */
.slr-thead { display: none; }

/* ─── Product row: single markup, two layouts via grid-template-areas ── */
.slr-prow {
  display: grid;
  grid-template-columns: 44px 40px 1fr 44px;
  grid-template-areas:
    "chk thumb title  menu"
    "chk thumb price  menu"
    "badges badges badges badges";
  column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 8px 4px; background: var(--card); border-bottom: 1px solid var(--border);
}
.slr-plist { background: var(--card); margin: 0 12px 12px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.slr-plist .slr-prow:last-child, .slr-plist .slr-srow:last-child { border-bottom: none; }
/* Products table wrapper: header + rows are both direct children so a
   single overflow-x scrolls them together — see the >=900px rule below
   for why this needs to scroll at all. */
.slr-plist-scroll { background: var(--card); margin: 0 12px 12px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
#slr-products-list .slr-prow:last-child { border-bottom: none; }

.slr-prow-chk { grid-area: chk; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slr-prow-chk input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.slr-prow-thumb {
  grid-area: thumb; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.slr-prow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slr-prow-title { grid-area: title; display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; }
.slr-prow-name { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slr-prow-sub  { font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slr-prow-price { grid-area: price; display: flex; align-items: center; }
.slr-price-btn {
  background: none; border: none; padding: 4px 2px; min-height: 32px;
  font-size: 13.5px; font-weight: 700; color: var(--primary); cursor: pointer;
  border-bottom: 1px dashed rgba(26,122,229,.5);
}
.slr-price-btn:hover { border-bottom-color: var(--primary); }
.slr-price-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.slr-price-input {
  width: 88px; padding: 7px 9px; border: 1.5px solid var(--primary); border-radius: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--text); outline: none;
}
.slr-prow-badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 2px; }
.slr-prow-actions { display: none; }
.slr-prow-menu-btn {
  grid-area: menu; width: 44px; height: 44px; border: none; background: none; border-radius: 50%;
  font-size: 19px; line-height: 1; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slr-prow-menu-btn:hover, .slr-prow-menu-btn:focus-visible { background: var(--bg); color: var(--primary); outline: none; }

.slr-empty, .slr-empty-state { padding: 28px 16px; color: var(--text2); font-size: 13px; text-align: center; }

@media (min-width: 900px) {
  /* .catalog-main is a flexed middle column between the sidebar and the
     right panel — at common laptop widths (1280-1440px) it's often only
     ~550-700px wide, nowhere near enough for 6 comfortable columns. Rather
     than squeeze the columns until the title track collapses to 0 (it did,
     silently — the name was in the DOM but rendered 0px wide), the row
     gets a real min-width and .slr-plist scrolls horizontally below that,
     same trade-off any dense admin table makes. */
  .slr-thead, .slr-prow {
    grid-template-columns: 36px 32px minmax(110px, 1fr) 76px 150px 144px;
    grid-template-areas: "chk thumb title price badges actions";
    column-gap: 10px; min-width: 600px;
  }
  .slr-thead {
    display: grid; align-items: center;
    padding: 9px 14px; border-bottom: 1.5px solid var(--border);
    background: var(--card); font-size: 10.5px; font-weight: 700; color: var(--text2);
    text-transform: uppercase; letter-spacing: .05em;
  }
  .slr-th-title { grid-area: title; } .slr-th-price { grid-area: price; }
  .slr-th-badges { grid-area: badges; } .slr-th-actions { grid-area: actions; text-align: right; }
  /* The wrapper (not .slr-thead/.slr-prow individually) owns the scrollbar
     so the header and every row shift together as one unit. */
  .slr-plist-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }

  .slr-prow { row-gap: 0; padding: 8px 14px; }
  .slr-prow-chk { width: 36px; height: 36px; }
  .slr-prow-thumb { width: 32px; height: 32px; font-size: 14px; }
  .slr-prow-menu-btn { display: none; }
  .slr-prow-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
  .slr-prow-badges { padding: 0; }
}

.slr-icon-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid var(--border);
  background: var(--card); display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; color: var(--text2); transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.slr-icon-btn:hover, .slr-icon-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.slr-icon-btn-danger:hover, .slr-icon-btn-danger:focus-visible { border-color: #c0392b; color: #c0392b; }

/* ─── Stock rows (Склад tab) — same badge system, simpler flex row ──── */
.slr-srow {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 10px; padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.slr-srow:last-child { border-bottom: none; }
.slr-srow-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.slr-srow-date { font-size: 12px; color: var(--text2); }

/* ─── Modals: New/edit product, bulk price, stock add ───────────────── */
.slr-modal-card { max-width: 420px; }
.slr-modal-card-sm { max-width: 340px; }
.slr-mode-tabs { display: flex; gap: 6px; background: var(--bg); border-radius: var(--r-sm); padding: 3px; }
.slr-mode-tab {
  flex: 1; border: none; background: none; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--text2); cursor: pointer; transition: all .15s;
}
.slr-mode-tab.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgba(18,35,72,.10); }

/* ─── Row action sheet ("..." menu on mobile / anywhere) ─────────────── */
.slr-sheet-overlay { align-items: flex-end; padding: 0; }
@media (min-width: 480px) { .slr-sheet-overlay { align-items: center; padding: 20px; } }
.slr-sheet-card {
  background: var(--card); width: 100%; max-width: 420px;
  border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex; flex-direction: column; max-height: 80vh; overflow-y: auto;
}
@media (min-width: 480px) { .slr-sheet-card { border-radius: 18px; } }
.slr-sheet-title { padding: 14px 20px 6px; font-size: 13px; font-weight: 700; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slr-sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; padding: 13px 20px; font-size: 15px; font-weight: 600; color: var(--text);
  min-height: 44px; cursor: pointer;
}
.slr-sheet-item:hover, .slr-sheet-item:focus-visible { background: var(--bg); outline: none; }
.slr-sheet-item-danger { color: #c0392b; }
.slr-sheet-item-icon { width: 22px; text-align: center; flex-shrink: 0; }
.slr-sheet-cancel { border-top: 1px solid var(--border); margin-top: 4px; color: var(--text2); font-weight: 700; justify-content: center; }

/* Mobile: "+ Новый товар" becomes a sticky bottom bar, same fixed-bar
   technique as #dtl-actions (position:fixed survives .catalog-main's
   scroll — proven there) — the primary action stays reachable with one
   thumb no matter how far the seller has scrolled the product list.
   Desktop keeps it inline in the toolbar; the bottom nav is gone there
   anyway so a floating button would have nothing to dock above. */
@media (max-width: 899px) {
  #slr-tab-products { padding-bottom: calc(var(--nav-h) + 72px); }
  .slr-new-btn {
    position: fixed; left: 12px; right: 12px; z-index: 140;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 10px);
    width: auto; margin: 0; min-height: 48px;
    box-shadow: 0 10px 26px rgba(20,45,88,.24);
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH MODAL — вход через Google / email-код  (am-*)
   Отдельная карточка, а не dm-card: это витринная точка входа,
   ей положены свой ритм отступов и фирменный акцент.
═══════════════════════════════════════════════════════════════ */
.am-card {
  position: relative;
  width: 100%; max-width: 400px;
  background: var(--card);
  border-radius: 22px;
  padding: 30px 28px 22px;
  box-shadow: var(--shadow-md);
  max-height: 92vh; overflow-y: auto;
  animation: amPop .26s cubic-bezier(.2,.9,.3,1.15);
}
.am-card::before {
  /* фирменная градиентная кромка сверху */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--primary-grad);
  border-radius: 22px 22px 0 0;
}
@keyframes amPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.am-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: none; cursor: pointer;
  font-size: 15px; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.am-close:hover { background: var(--border); color: var(--text); }

.am-head { text-align: center; margin-bottom: 20px; }
.am-logo-badge {
  width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 16px; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
}
.am-logo-img { width: 32px; height: 32px; object-fit: contain; }
.am-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.am-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text2); }

.am-body { display: flex; flex-direction: column; gap: 14px; }

/* Google */
.am-google-slot { display: flex; flex-direction: column; gap: 14px; }
.am-google-btn-wrap { display: flex; justify-content: center; min-height: 44px; }
.am-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; color: var(--text3);
  text-transform: lowercase;
}
.am-divider::before, .am-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Email input */
#am-email-form { display: flex; flex-direction: column; gap: 8px; }
.am-label { font-size: 12px; font-weight: 700; color: var(--text2); letter-spacing: .02em; }
.am-input-wrap { position: relative; }
.am-input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text3); pointer-events: none;
}
.am-input {
  width: 100%; padding: 13px 14px 13px 42px;
  border-radius: 13px; border: 1.5px solid var(--border);
  background: var(--bg); font-size: 15px; font-weight: 500; color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.am-input:focus {
  border-color: var(--primary); background: var(--card);
  box-shadow: 0 0 0 3px rgba(26,122,229,.12);
}
.am-input::placeholder { color: var(--text3); font-weight: 400; }

.am-primary-btn {
  width: 100%; padding: 14px; margin-top: 4px;
  border: none; border-radius: 14px; cursor: pointer;
  background: var(--primary-grad); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(26,122,229,.28);
  transition: transform .12s, box-shadow .15s, opacity .15s;
}
.am-primary-btn:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(26,122,229,.36); }
.am-primary-btn:active:not(:disabled) { transform: translateY(1px); }
.am-primary-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Код из письма */
.am-sent-line { font-size: 13.5px; color: var(--text2); text-align: center; line-height: 1.5; word-break: break-all; }
.am-sent-line b { color: var(--text); font-weight: 700; }
.am-code-row { display: flex; gap: 8px; justify-content: center; }
.am-code-cell {
  width: 46px; height: 56px; text-align: center;
  font-size: 22px; font-weight: 800; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 13px;
  background: var(--bg); outline: none; caret-color: var(--primary);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.am-code-cell:focus {
  border-color: var(--primary); background: var(--card);
  box-shadow: 0 0 0 3px rgba(26,122,229,.12);
}
.am-code-cell.filled { border-color: var(--primary); background: var(--primary-light); }
.am-code-row.am-shake { animation: amShake .4s; }
@keyframes amShake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.am-code-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.am-ghost-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--primary);
  padding: 7px 10px; border-radius: 10px;
  transition: background .15s, color .15s;
}
.am-ghost-btn:hover:not(:disabled) { background: var(--primary-light); }
.am-ghost-btn:disabled { color: var(--text3); cursor: default; }

/* Ошибки / подписи */
.am-error {
  font-size: 13px; line-height: 1.45; color: #c0392b;
  background: #fdf0ee; border: 1px solid #f6d5d0;
  border-radius: 10px; padding: 9px 12px; text-align: center;
}
.am-note { font-size: 12px; color: var(--text3); text-align: center; line-height: 1.5; }
.am-legal {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text3); text-align: center; line-height: 1.5;
}

/* Успех */
.am-success { align-items: center; padding: 10px 0 6px; }
.am-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  animation: amPop .3s cubic-bezier(.2,.9,.3,1.2);
}
.am-success-icon svg { width: 30px; height: 30px; }
.am-success-text { font-size: 15px; font-weight: 700; color: var(--text); }

/* Кнопка входа на auth wall профиля */
.am-wall-login-btn { max-width: 260px; }

/* Выход из веб-сессии (профиль) */
.prf-logout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text2);
  transition: color .15s, border-color .15s, background .15s;
}
.prf-logout-btn:hover { color: #c0392b; border-color: #f0c7c1; background: #fdf0ee; }
.prf-logout-btn svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
  .am-card { padding: 26px 20px 18px; }
  .am-code-cell { width: 42px; height: 52px; font-size: 20px; }
}