:root,
html[data-theme="light"] {
  --canvas: #e8edf3;
  --canvas-glow: rgba(51, 144, 236, 0.18);
  --app-bg: #f1f2f6;
  --section-bg: #ffffff;
  --secondary-bg: #f2f3f5;
  --tertiary-bg: #e9ebee;
  --header-bg: rgba(255, 255, 255, 0.92);
  --bottom-bg: rgba(255, 255, 255, 0.94);
  --text: #111318;
  --hint: #8a8f98;
  --subtitle: #5d636d;
  --separator: rgba(60, 60, 67, 0.12);
  --accent: #3390ec;
  --accent-2: #6d5dfc;
  --accent-text: #ffffff;
  --accent-soft: rgba(51, 144, 236, 0.12);
  --success: #28a745;
  --success-soft: rgba(40, 167, 69, 0.12);
  --danger: #e64646;
  --danger-soft: rgba(230, 70, 70, 0.12);
  --pink: #ed5f9b;
  --pink-soft: rgba(237, 95, 155, 0.12);
  --orange: #f39a35;
  --orange-soft: rgba(243, 154, 53, 0.13);
  --violet: #7667f4;
  --violet-soft: rgba(118, 103, 244, 0.13);
  --shadow-phone: 0 32px 90px rgba(30, 45, 60, 0.24);
  --shadow-float: 0 12px 32px rgba(20, 35, 50, 0.12);
  color-scheme: light;
}

html[data-theme="dark"] {
  --canvas: #080b10;
  --canvas-glow: rgba(62, 157, 255, 0.22);
  --app-bg: #0f1012;
  --section-bg: #1c1d20;
  --secondary-bg: #25262a;
  --tertiary-bg: #303136;
  --header-bg: rgba(15, 16, 18, 0.9);
  --bottom-bg: rgba(20, 21, 24, 0.94);
  --text: #f4f4f5;
  --hint: #92959c;
  --subtitle: #b2b4ba;
  --separator: rgba(255, 255, 255, 0.09);
  --accent: #5da9ef;
  --accent-2: #8879ff;
  --accent-text: #ffffff;
  --accent-soft: rgba(93, 169, 239, 0.16);
  --success: #4ac76b;
  --success-soft: rgba(74, 199, 107, 0.16);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.16);
  --pink: #f178aa;
  --pink-soft: rgba(241, 120, 170, 0.16);
  --orange: #ffad55;
  --orange-soft: rgba(255, 173, 85, 0.16);
  --violet: #9589ff;
  --violet-soft: rgba(149, 137, 255, 0.16);
  --shadow-phone: 0 34px 100px rgba(0, 0, 0, 0.56);
  --shadow-float: 0 14px 36px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 92px 24px 34px;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 10%, var(--canvas-glow), transparent 32rem),
    linear-gradient(155deg, color-mix(in srgb, var(--canvas) 90%, var(--accent) 10%), var(--canvas));
  transition: background-color .2s ease, color .2s ease;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hidden {
  display: none !important;
}

.preview-toolbar {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 200;
  width: min(calc(100% - 32px), 760px);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--separator);
  border-radius: 18px;
  color: var(--text);
  background: color-mix(in srgb, var(--section-bg) 90%, transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.preview-copy,
.preview-actions,
.profile-brief,
.wallet-button,
.quick-action,
.section-title-row,
.category-card,
.product-main,
.product-top,
.product-bottom,
.page-header,
.profile-card,
.support-intro,
.sheet-header,
.modal-product-heading,
.order-total,
.toast {
  display: flex;
  align-items: center;
}

.preview-copy {
  min-width: 0;
  gap: 10px;
}

.preview-copy div {
  min-width: 0;
}

.preview-copy strong,
.preview-copy small {
  display: block;
}

.preview-copy strong {
  font-size: 13px;
  font-weight: 700;
}

.preview-copy small {
  margin-top: 2px;
  color: var(--hint);
  font-size: 11px;
}

.preview-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px var(--success-soft);
}

.preview-actions {
  gap: 8px;
}

.theme-segment {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--secondary-bg);
}

.theme-button {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--hint);
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}

.theme-button.active {
  color: var(--text);
  background: var(--section-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.preview-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}

.device-stage {
  min-height: calc(100vh - 126px);
  display: grid;
  place-items: center;
}

.device-shell {
  position: relative;
  width: 390px;
  height: min(844px, calc(100vh - 126px));
  min-height: 680px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 48px;
  background: #08090b;
  box-shadow: var(--shadow-phone);
}

.device-sensor {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 80;
  width: 92px;
  height: 26px;
  border-radius: 999px;
  background: #050607;
  transform: translateX(-50%);
  pointer-events: none;
}

.app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: 39px;
  background: var(--app-bg);
  isolation: isolate;
}

.app::-webkit-scrollbar {
  display: none;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: calc(17px + env(safe-area-inset-top)) 16px 11px;
  border-bottom: 1px solid transparent;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
}

.app.scrolled .app-header {
  border-bottom-color: var(--separator);
}

.profile-brief {
  min-width: 0;
  gap: 10px;
}

.user-avatar,
.profile-avatar-large {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  font-weight: 750;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 16px;
}

.profile-copy {
  min-width: 0;
}

.profile-copy span,
.profile-copy strong {
  display: block;
}

.profile-copy span {
  color: var(--hint);
  font-size: 11px;
}

.profile-copy strong {
  max-width: 160px;
  margin-top: 2px;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-button {
  gap: 8px;
  min-height: 44px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--separator);
  border-radius: 15px;
  color: var(--text);
  background: var(--section-bg);
}

.wallet-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
}

.wallet-icon svg {
  width: 18px;
  height: 18px;
}

.wallet-button small,
.wallet-button strong {
  display: block;
  text-align: left;
  line-height: 1.05;
}

.wallet-button small {
  color: var(--hint);
  font-size: 9px;
}

.wallet-button strong {
  margin-top: 4px;
  font-size: 13px;
}

.view {
  display: none;
  width: 100%;
  max-width: 100%;
  min-height: calc(100% - 76px);
  padding: 12px 14px 102px;
  overflow-x: clip;
}

.view.active {
  display: block;
  animation: viewIn .18s ease both;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-card {
  position: relative;
  min-height: 224px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, #0b6fd3), color-mix(in srgb, var(--accent-2) 78%, #2b7eea));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 25%, transparent);
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, #fff 0 1px, transparent 1px);
  background-size: 24px 24px, 32px 32px;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 72%;
  padding: 21px 0 20px 20px;
}

.hero-badge {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.hero-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #75f0a3;
  box-shadow: 0 0 0 4px rgba(117,240,163,.16);
}

.hero-card h1 {
  margin: 15px 0 8px;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.hero-card p {
  max-width: 245px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 11.5px;
  line-height: 1.45;
}

.hero-button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 0 13px;
  border-radius: 12px;
  color: #16344c;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
}

.hero-button svg {
  width: 15px;
  height: 15px;
}

.hero-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  overflow: hidden;
}

.hero-ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
}

.ring-one {
  top: 13px;
  right: -50px;
  width: 182px;
  height: 182px;
}

.ring-two {
  right: -4px;
  bottom: -56px;
  width: 132px;
  height: 132px;
}

.hero-plane {
  position: absolute;
  top: 68px;
  right: 19px;
  width: 92px;
  height: 92px;
  fill: rgba(255,255,255,.95);
  stroke: none;
  filter: drop-shadow(0 12px 18px rgba(19,62,110,.25));
  transform: rotate(-7deg);
}

.hero-plane .plane-cut {
  fill: none;
  stroke: rgba(50,115,190,.65);
  stroke-width: 2;
}

.quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.quick-action {
  min-width: 0;
  gap: 10px;
  min-height: 68px;
  padding: 11px;
  border: 1px solid var(--separator);
  border-radius: 18px;
  color: var(--text);
  background: var(--section-bg);
  text-align: left;
}

.quick-icon,
.settings-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
}

.quick-icon {
  width: 40px;
  height: 40px;
}

.quick-icon svg,
.settings-icon svg {
  width: 20px;
  height: 20px;
}

.quick-icon.blue,
.settings-icon.blue {
  color: var(--accent);
  background: var(--accent-soft);
}

.quick-icon.violet,
.settings-icon.violet {
  color: var(--violet);
  background: var(--violet-soft);
}

.settings-icon.red {
  color: var(--danger);
  background: var(--danger-soft);
}

.quick-action span:last-child {
  min-width: 0;
}

.quick-action strong,
.quick-action small {
  display: block;
}

.quick-action strong {
  font-size: 12px;
}

.quick-action small {
  margin-top: 4px;
  color: var(--hint);
  font-size: 9.5px;
  white-space: nowrap;
}

.search-section {
  margin-bottom: 16px;
}

.search-box {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--hint);
  background: var(--section-bg);
}

.search-box > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 13px;
}

.search-box input::placeholder {
  color: var(--hint);
}

.clear-search {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--section-bg);
  background: var(--hint);
  font-size: 17px;
  line-height: 1;
}

.content-section {
  min-width: 0;
  max-width: 100%;
  margin-top: 17px;
}

.products-section,
.product-list,
.product-card {
  min-width: 0;
  max-width: 100%;
}

.products-section {
  overflow-x: clip;
}

.section-title-row {
  min-width: 0;
  max-width: 100%;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 9px;
}

.section-title-row > div {
  min-width: 0;
  flex: 1;
}

.section-title-row h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-title-row .text-button {
  flex: 0 0 auto;
}

.section-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.section-title-row h2,
.page-header h1 {
  margin: 3px 0 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.section-count {
  color: var(--hint);
  font-size: 10px;
}

.text-button {
  padding: 6px 3px;
  color: var(--accent);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.category-list,
.product-list,
.order-list,
.ticket-list,
.settings-list {
  overflow: hidden;
  border-radius: 18px;
  background: var(--section-bg);
}

.category-card {
  position: relative;
  width: 100%;
  min-height: 74px;
  gap: 11px;
  padding: 10px 36px 10px 11px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.category-card + .category-card,
.product-card + .product-card,
.settings-list > * + *,
.ticket-card + .ticket-card,
.order-card + .order-card {
  border-top: 1px solid var(--separator);
}

.category-card.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.category-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
}

.category-icon svg {
  width: 23px;
  height: 23px;
}

.category-blue {
  color: var(--accent);
  background: var(--accent-soft);
}

.category-pink {
  color: var(--pink);
  background: var(--pink-soft);
}

.category-orange {
  color: var(--orange);
  background: var(--orange-soft);
}

.category-copy {
  min-width: 0;
  flex: 1;
}

.category-copy strong,
.category-copy small {
  display: block;
}

.category-copy strong {
  font-size: 13px;
}

.category-copy small {
  max-width: 220px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--hint);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-meta {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--hint);
  background: var(--secondary-bg);
  font-size: 8.5px;
  font-weight: 700;
}

.chevron {
  position: absolute;
  right: 12px;
  width: 15px;
  height: 15px;
  color: var(--hint);
  stroke-width: 2;
}

.filter-chips {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
}

.filter-chip {
  min-width: 0;
  min-height: 32px;
  max-width: 100%;
  flex: 0 1 auto;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 999px;
  color: var(--subtitle);
  background: var(--section-bg);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip.active {
  border-color: transparent;
  color: var(--accent);
  background: var(--accent-soft);
}

.product-card {
  padding: 12px;
}

.product-top {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.product-main {
  min-width: 0;
  gap: 11px;
}

.product-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #796eff));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.product-icon.tone-green { background: linear-gradient(145deg, #33c56d, #20a95a); }
.product-icon.tone-red { background: linear-gradient(145deg, #ff5151, #e22f42); }
.product-icon.tone-purple { background: linear-gradient(145deg, #815ced, #6541d4); }
.product-icon.tone-blue { background: linear-gradient(145deg, #35a8f5, #2484e6); }
.product-icon.tone-pink { background: linear-gradient(145deg, #f35c9b, #d63a7d); }
.product-icon.tone-orange { background: linear-gradient(145deg, #ffad45, #ee7f2d); }
.product-icon.tone-dark { background: linear-gradient(145deg, #3b414b, #20242a); }
.product-icon.tone-cyan { background: linear-gradient(145deg, #24c4d9, #1599bd); }

.product-copy {
  min-width: 0;
}

.product-copy strong,
.product-copy span {
  display: block;
}

.product-copy strong {
  max-width: 185px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-copy span {
  margin-top: 4px;
  color: var(--hint);
  font-size: 10px;
  line-height: 1.35;
}

.product-tag {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 8px;
  font-weight: 750;
}

.product-bottom {
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-left: 54px;
}

.product-price {
  font-size: 11px;
  font-weight: 750;
}

.choose-button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 10px;
  font-weight: 750;
}

.empty-state {
  display: grid;
  place-items: center;
  padding: 28px 18px;
  border-radius: 18px;
  color: var(--hint);
  background: var(--section-bg);
  text-align: center;
}

.empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 16px;
  color: var(--accent);
  background: var(--accent-soft);
}

.empty-icon svg {
  width: 24px;
  height: 24px;
}

.empty-state strong {
  color: var(--text);
  font-size: 13px;
}

.empty-state span {
  max-width: 245px;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
}

.demo-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 15px;
  color: var(--subtitle);
  background: var(--accent-soft);
}

.demo-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--accent);
}

.demo-note p {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.45;
}

.page-view {
  padding-top: 10px;
}

.page-header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding: 2px 2px 0;
}

.circle-action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: var(--section-bg);
}

.circle-action svg {
  width: 19px;
  height: 19px;
}

.online-badge,
.availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 10px;
  font-weight: 700;
}

.online-badge i,
.availability i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}

.order-card,
.ticket-card {
  padding: 13px;
}

.order-card-head,
.ticket-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.order-card h3,
.ticket-card h3 {
  margin: 0;
  font-size: 12px;
}

.order-card p,
.ticket-card p {
  margin: 4px 0 0;
  color: var(--hint);
  font-size: 9.5px;
  line-height: 1.4;
}

.status-pill {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 8px;
  font-weight: 750;
}

.order-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--separator);
  color: var(--hint);
  font-size: 8.5px;
}

.support-intro {
  gap: 11px;
  margin-bottom: 12px;
  padding: 13px;
  border-radius: 18px;
  background: var(--section-bg);
}

.support-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  color: var(--accent);
  background: var(--accent-soft);
}

.support-avatar svg {
  width: 24px;
  height: 24px;
}

.support-intro strong,
.support-intro span {
  display: block;
}

.support-intro strong {
  font-size: 12px;
}

.support-intro span {
  margin-top: 4px;
  color: var(--hint);
  font-size: 9.5px;
}

.form-group {
  padding: 14px;
  border-radius: 18px;
  background: var(--section-bg);
}

.field-label {
  display: block;
  margin: 0 0 7px;
  color: var(--subtitle);
  font-size: 10px;
  font-weight: 700;
}

.form-group .field-label:not(:first-child) {
  margin-top: 14px;
}

.select-wrap {
  position: relative;
}

.select-wrap select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--separator);
  outline: 0;
  color: var(--text);
  background: var(--secondary-bg);
  font-size: 12px;
}

.select-wrap select {
  min-height: 44px;
  padding: 0 38px 0 12px;
  border-radius: 13px;
  appearance: none;
}

.select-wrap > svg {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--hint);
  pointer-events: none;
  transform: translateY(-50%);
}

.form-group textarea {
  min-height: 116px;
  padding: 12px;
  resize: vertical;
  border-radius: 13px;
}

.select-wrap select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.primary-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.primary-button svg {
  width: 17px;
  height: 17px;
}

.primary-button.full {
  width: 100%;
  margin-top: 14px;
}

.ticket-list {
  margin-top: 12px;
}

.profile-card {
  position: relative;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--section-bg);
}

.profile-avatar-large {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 20px;
}

.profile-card > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.profile-card strong,
.profile-card span {
  display: block;
}

.profile-card strong {
  font-size: 15px;
}

.profile-card span {
  margin-top: 4px;
  color: var(--hint);
  font-size: 10px;
}

.verified-mark {
  width: 22px;
  height: 22px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-text) !important;
  background: var(--accent);
}

.verified-mark svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}

.stat-tile {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 16px;
  background: var(--section-bg);
}

.stat-tile span,
.stat-tile strong {
  display: block;
}

.stat-tile span {
  color: var(--hint);
  font-size: 8.5px;
}

.stat-tile strong {
  margin-top: 5px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.success-text {
  color: var(--success);
  font-size: 10px !important;
}

.settings-list > button,
.settings-list > a {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 34px 9px 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.settings-icon {
  width: 40px;
  height: 40px;
}

.settings-list > * > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.settings-list strong,
.settings-list small {
  display: block;
}

.settings-list strong {
  font-size: 12px;
}

.settings-list small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--hint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 7px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
  background: var(--bottom-bg);
  backdrop-filter: saturate(180%) blur(22px);
}

.nav-item {
  position: relative;
  min-height: 55px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 14px;
  color: var(--hint);
  background: transparent;
}

.nav-item > svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.nav-item small {
  font-size: 8.5px;
  font-weight: 650;
}

.nav-item.active {
  color: var(--accent);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  top: 4px;
  width: 42px;
  height: 30px;
  z-index: -1;
  border-radius: 12px;
  background: var(--accent-soft);
}

.nav-badge {
  position: absolute;
  top: 5px;
  right: calc(50% - 21px);
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bottom-bg);
  border-radius: 999px;
  color: #fff;
  background: var(--danger);
  font-size: 7px;
  font-weight: 800;
}

.sheet {
  width: min(390px, 100%);
  max-width: 100%;
  max-height: min(86dvh, 720px);
  margin: auto auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px 24px 0 0;
  color: var(--text);
  background: transparent;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, .46);
  backdrop-filter: blur(3px);
}

.sheet-card {
  max-height: min(86dvh, 720px);
  overflow: auto;
  padding: 9px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  color: var(--text);
  background: var(--section-bg);
}

.sheet-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 13px;
  border-radius: 999px;
  background: var(--tertiary-bg);
}

.sheet-header {
  justify-content: space-between;
  gap: 12px;
}

.sheet-header h2 {
  margin: 3px 0 0;
  font-size: 21px;
  letter-spacing: -.025em;
}

.sheet-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--hint);
  background: var(--secondary-bg);
  font-size: 22px;
  line-height: 1;
}

.balance-preview {
  margin: 15px 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--secondary-bg);
}

.balance-preview span,
.balance-preview strong {
  display: block;
}

.balance-preview span {
  color: var(--hint);
  font-size: 10px;
}

.balance-preview strong {
  margin-top: 4px;
  font-size: 23px;
}

.topup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.topup-grid button {
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--separator);
  border-radius: 15px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
}

.topup-grid button strong,
.topup-grid button small {
  display: block;
}

.topup-grid button strong {
  font-size: 13px;
}

.topup-grid button small {
  margin-top: 4px;
  color: var(--hint);
  font-size: 9px;
}

.topup-grid button.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sheet-note {
  margin: 10px 4px 0;
  color: var(--hint);
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

.modal-product-heading {
  min-width: 0;
  gap: 10px;
}

.modal-icon {
  width: 44px;
  height: 44px;
}

.modal-product-heading > div {
  min-width: 0;
}

.modal-product-heading h2 {
  max-width: 220px;
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-modal-description {
  margin: 14px 0;
  color: var(--subtitle);
  font-size: 10.5px;
  line-height: 1.5;
}

.product-sheet .field-label {
  margin-top: 4px;
}

.product-sheet .select-wrap select {
  background: var(--secondary-bg);
}

.order-total {
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding: 13px;
  border-radius: 15px;
  background: var(--secondary-bg);
}

.order-total span,
.order-total strong {
  display: block;
}

.order-total > div > span {
  color: var(--hint);
  font-size: 9px;
}

.order-total > div > strong {
  margin-top: 4px;
  font-size: 18px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 300;
  width: min(calc(100% - 28px), 358px);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--section-bg) 94%, transparent);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--success);
  background: var(--success-soft);
}

.toast-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

#toastText {
  font-size: 10.5px;
  line-height: 1.35;
}


/* SMS activation workspace */
.numbers-workspace {
  scroll-margin-top: 74px;
}

.sms-console-head,
.sms-price-head,
.sms-checkout-row,
.sms-activation-head,
.sms-number-row,
.sms-activation-meta,
.sms-actions,
.sms-history-card,
.sms-history-main,
.sms-api-map {
  display: flex;
  align-items: center;
}

.sms-console-head {
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 9px;
}

.sms-console-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.sync-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}

.sync-button svg {
  width: 18px;
  height: 18px;
}

.sync-button.syncing svg {
  animation: sms-spin .7s linear infinite;
}

@keyframes sms-spin {
  to { transform: rotate(360deg); }
}

.sms-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.sms-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--separator);
  border-radius: 15px;
  background: var(--section-bg);
}

.sms-metric span,
.sms-metric strong,
.sms-metric small {
  display: block;
}

.sms-metric span {
  color: var(--hint);
  font-size: 8.5px;
}

.sms-metric strong {
  margin-top: 3px;
  font-size: 17px;
  letter-spacing: -.03em;
}

.sms-metric small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--accent);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 10px;
  padding: 3px;
  border-radius: 14px;
  background: var(--tertiary-bg);
}

.sms-tab {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 11px;
  color: var(--hint);
  background: transparent;
  font-size: 9.5px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.sms-tab.active {
  color: var(--text);
  background: var(--section-bg);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 10%, transparent);
}

.sms-tab-badge {
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 8px;
}

.sms-panel {
  display: none;
  margin-top: 10px;
}

.sms-panel.active {
  display: block;
  animation: sms-panel-in .18s ease;
}

@keyframes sms-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sms-form-card {
  padding: 12px;
  border-radius: 18px;
  background: var(--section-bg);
}

.sms-field-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 8px;
}

.sms-field > span {
  display: block;
  margin: 0 0 6px 2px;
  color: var(--hint);
  font-size: 8.5px;
  font-weight: 650;
}

.sms-field .select-wrap select,
.sms-field input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--separator);
  outline: 0;
  color: var(--text);
  background: var(--secondary-bg);
  font-size: 10.5px;
}

.sms-field .select-wrap select:focus,
.sms-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sms-price-head {
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
}

.sms-price-head > div {
  min-width: 0;
}

.sms-price-head strong,
.sms-price-head span {
  display: block;
}

.sms-price-head strong {
  font-size: 11px;
}

.sms-price-head > div > span {
  margin-top: 3px;
  color: var(--hint);
  font-size: 8px;
}

.api-live {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 7.5px;
  font-weight: 750;
}

.api-live i,
.sms-status i {
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
}

.sms-price-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.sms-price-option {
  position: relative;
  min-width: 0;
  min-height: 86px;
  padding: 9px 7px 7px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
}

.sms-price-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sms-price-option strong,
.sms-price-option b,
.sms-price-option small {
  display: block;
}

.sms-price-option strong {
  font-size: 9px;
}

.sms-price-option b {
  margin-top: 7px;
  font-size: 14px;
  letter-spacing: -.02em;
}

.sms-price-option small {
  margin-top: 4px;
  color: var(--hint);
  font-size: 7px;
  line-height: 1.3;
}

.sms-recommended {
  position: absolute;
  top: -6px;
  right: 5px;
  padding: 3px 5px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 6.5px;
  font-weight: 800;
}

.sms-advanced {
  margin-top: 10px;
  border-top: 1px solid var(--separator);
}

.sms-advanced summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.sms-advanced summary::-webkit-details-marker {
  display: none;
}

.sms-advanced summary span,
.sms-advanced summary strong,
.sms-advanced summary small {
  display: block;
}

.sms-advanced summary strong {
  font-size: 10px;
}

.sms-advanced summary small {
  margin-top: 3px;
  color: var(--hint);
  font-size: 8px;
}

.sms-advanced summary svg {
  width: 16px;
  height: 16px;
  color: var(--hint);
  transition: transform .18s ease;
}

.sms-advanced[open] summary svg {
  transform: rotate(180deg);
}

.sms-advanced-body {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 8px;
  padding: 0 0 11px;
}

.input-suffix {
  position: relative;
}

.input-suffix input {
  padding: 0 30px 0 11px;
  border-radius: 13px;
}

.input-suffix em {
  position: absolute;
  top: 50%;
  right: 11px;
  color: var(--hint);
  font-size: 10px;
  font-style: normal;
  transform: translateY(-50%);
}

.sms-checkout-row {
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--secondary-bg);
}

.sms-checkout-row span,
.sms-checkout-row strong,
.sms-checkout-row small {
  display: block;
}

.sms-checkout-row > div:first-child > span {
  color: var(--hint);
  font-size: 8px;
}

.sms-checkout-row > div:first-child > strong {
  margin-top: 3px;
  font-size: 18px;
  letter-spacing: -.03em;
}

.sms-stock {
  text-align: right;
}

.sms-stock span {
  color: var(--success);
  font-size: 9px;
  font-weight: 750;
}

.sms-stock small {
  margin-top: 3px;
  color: var(--hint);
  font-size: 7.5px;
}

.primary-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.sms-api-map {
  gap: 10px;
  margin-top: 9px;
  padding: 11px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--section-bg));
}

.sms-api-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
}

.sms-api-icon svg {
  width: 18px;
  height: 18px;
}

.sms-api-map div:last-child {
  min-width: 0;
}

.sms-api-map strong,
.sms-api-map span {
  display: block;
}

.sms-api-map strong {
  font-size: 9.5px;
}

.sms-api-map span {
  margin-top: 3px;
  color: var(--hint);
  font-size: 7.8px;
  line-height: 1.4;
}

.sms-activation-list,
.sms-history-list {
  display: grid;
  gap: 9px;
}

.sms-activation-card {
  padding: 12px;
  border-radius: 18px;
  background: var(--section-bg);
}

.sms-activation-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sms-status {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--orange);
  background: var(--orange-soft);
  font-size: 7px;
  font-weight: 750;
  white-space: nowrap;
}

.sms-status.success {
  color: var(--success);
  background: var(--success-soft);
}

.sms-number-row {
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--secondary-bg);
}

.sms-number-row span,
.sms-number-row strong {
  display: block;
}

.sms-number-row span {
  color: var(--hint);
  font-size: 8px;
}

.sms-number-row strong {
  margin-top: 3px;
  font-size: 15px;
  letter-spacing: .01em;
}

.sms-number-row button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--accent);
  background: var(--accent-soft);
}

.sms-number-row button svg {
  width: 17px;
  height: 17px;
}

.sms-waiting-box,
.sms-code-box {
  margin-top: 9px;
  border-radius: 14px;
}

.sms-waiting-box {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--subtitle);
  background: var(--secondary-bg);
}

.sms-waiting-box strong,
.sms-waiting-box small {
  display: block;
}

.sms-waiting-box strong {
  font-size: 10px;
}

.sms-waiting-box small {
  margin-top: 3px;
  color: var(--hint);
  font-size: 8px;
}

.sms-loader {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sms-spin .9s linear infinite;
}

.sms-code-box {
  padding: 12px;
  color: var(--success);
  background: var(--success-soft);
  text-align: center;
}

.sms-code-box span,
.sms-code-box strong,
.sms-code-box small {
  display: block;
}

.sms-code-box span {
  font-size: 8px;
  font-weight: 700;
}

.sms-code-box strong {
  margin-top: 4px;
  font-size: 28px;
  letter-spacing: .16em;
}

.sms-code-box small {
  margin-top: 5px;
  overflow: hidden;
  color: var(--subtitle);
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-activation-meta {
  justify-content: space-between;
  gap: 7px;
  margin-top: 9px;
  color: var(--hint);
  font-size: 7.5px;
}

.sms-timer {
  padding: 4px 6px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.sms-timer.urgent {
  color: var(--danger);
  background: var(--danger-soft);
}

.sms-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 7px;
  margin-top: 10px;
}

.sms-action {
  min-height: 39px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 750;
}

.sms-action.primary {
  color: var(--accent-text);
  background: var(--accent);
}

.sms-action.secondary {
  color: var(--accent);
  background: var(--accent-soft);
}

.sms-action.danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.sms-empty {
  padding: 25px 18px;
  border-radius: 18px;
  background: var(--section-bg);
  text-align: center;
}

.sms-empty.compact {
  padding-block: 21px;
}

.sms-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 16px;
  color: var(--accent);
  background: var(--accent-soft);
}

.sms-empty-icon svg {
  width: 24px;
  height: 24px;
}

.sms-empty strong,
.sms-empty span {
  display: block;
}

.sms-empty strong {
  margin-top: 10px;
  font-size: 12px;
}

.sms-empty span {
  max-width: 260px;
  margin: 5px auto 0;
  color: var(--hint);
  font-size: 8.5px;
  line-height: 1.45;
}

.sms-empty button {
  min-height: 36px;
  margin-top: 12px;
  padding: 0 13px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent);
  font-size: 9px;
  font-weight: 750;
}

.sms-history-card {
  justify-content: space-between;
  gap: 8px;
  padding: 11px;
  border-radius: 16px;
  background: var(--section-bg);
}

.sms-history-main {
  min-width: 0;
  gap: 9px;
}

.sms-history-main .product-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 9px;
}

.sms-history-main > div:last-child {
  min-width: 0;
}

.sms-history-main strong,
.sms-history-main span,
.sms-history-result strong,
.sms-history-result span {
  display: block;
}

.sms-history-main strong {
  font-size: 10.5px;
}

.sms-history-main span {
  margin-top: 3px;
  color: var(--hint);
  font-size: 7.5px;
}

.sms-history-result {
  flex: 0 0 auto;
  text-align: right;
}

.sms-history-result strong {
  font-size: 8.5px;
}

.sms-history-result span {
  margin-top: 4px;
  color: var(--hint);
  font-size: 7.5px;
}

@media (max-width: 760px) {
  .preview-toolbar {
    width: min(calc(100% - 24px), 600px);
  }

  .preview-copy small {
    display: none;
  }
}

@media (max-width: 560px) {
  html,
  body {
    background: var(--app-bg);
  }

  body {
    padding: 0;
  }

  .preview-toolbar {
    display: none;
  }

  .device-stage {
    display: block;
    min-height: 100dvh;
  }

  .device-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--app-bg);
    box-shadow: none;
  }

  .device-sensor {
    display: none;
  }

  .app {
    border-radius: 0;
  }

  .app-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .sheet {
    width: 100%;
  }
}

@media (max-width: 355px) {
  .hero-card h1 {
    font-size: 22px;
  }

  .hero-content {
    width: 77%;
  }

  .hero-plane {
    right: 5px;
    width: 78px;
  }

  .category-meta {
    display: none;
  }

  .product-copy strong {
    max-width: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

.api-live.offline {
  color: var(--hint);
  background: var(--secondary-bg);
}

.sms-price-options > .sms-empty {
  grid-column: 1 / -1;
  margin: 0;
}


/* v6: searchable service selector and USD retail pricing */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.preview-link.secondary {
  color: var(--accent);
  background: var(--accent-soft);
}

.service-picker-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--separator);
  border-radius: 13px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
}

.service-picker-button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.service-picker-button > svg {
  width: 16px;
  height: 16px;
  color: var(--hint);
}

.service-picker-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
  font-size: 8px;
  font-weight: 850;
}

.service-picker-copy { min-width: 0; }
.service-picker-copy strong, .service-picker-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-picker-copy strong { font-size: 10.5px; }
.service-picker-copy small { margin-top: 2px; color: var(--hint); font-size: 7.5px; }

.service-modal-search {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 10px;
  padding: 0 12px;
  border: 1px solid var(--separator);
  border-radius: 14px;
  background: var(--secondary-bg);
}
.service-modal-search svg { width: 18px; height: 18px; color: var(--hint); }
.service-modal-search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.service-picker-list { display: grid; gap: 6px; padding-bottom: 8px; }
.service-picker-item {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
}
.service-picker-item.active { border-color: var(--accent); background: var(--accent-soft); }
.service-picker-item .service-picker-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 9px; }
.service-picker-item > span:nth-child(2) { min-width: 0; }
.service-picker-item strong, .service-picker-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-picker-item strong { font-size: 11px; }
.service-picker-item small { margin-top: 3px; color: var(--hint); font-size: 8px; }
.service-picker-item > svg { width: 17px; height: 17px; color: var(--hint); }
.service-picker-sheet .sheet-card { min-height: min(72dvh, 600px); }

.tone-blue { background: #3390ec; }
.tone-green { background: #2fb86e; }
.tone-red { background: #e85252; }
.tone-pink { background: #e9619e; }
.tone-purple { background: #7667f4; }
.tone-cyan { background: #27a7bf; }
.tone-orange { background: #ef973c; }
.tone-dark { background: #25262a; }


/* Country catalog with local flags, availability and final USD prices */
.country-picker-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--separator);
  border-radius: 13px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
}
.country-picker-button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.country-picker-button > svg { width: 16px; height: 16px; color: var(--hint); }
.country-picker-copy { min-width: 0; }
.country-picker-copy strong,
.country-picker-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-picker-copy strong { font-size: 10.5px; }
.country-picker-copy small { margin-top: 2px; color: var(--hint); font-size: 7.4px; }
.country-flag,
.country-list-flag {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--separator);
  background: var(--section-bg);
}
.country-flag { width: 38px; height: 34px; border-radius: 10px; font-size: 21px; }
.country-list-flag { width: 46px; height: 38px; border-radius: 11px; font-size: 24px; }
.country-flag img,
.country-list-flag img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.country-flag img:not([hidden]) + span,
.country-list-flag img:not([hidden]) + span { opacity: 0; }
.country-picker-sheet .sheet-card {
  min-height: min(80dvh, 680px);
  max-height: min(88dvh, 760px);
  display: flex;
  flex-direction: column;
}
.country-search { margin-bottom: 8px; }
.country-picker-summary {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 0 3px 8px;
  color: var(--hint);
  font-size: 8px;
  font-weight: 650;
}
.country-picker-list {
  min-height: 0;
  display: grid;
  gap: 7px;
  padding: 1px 1px 10px;
  overflow-y: auto;
  scrollbar-width: none;
}
.country-picker-list::-webkit-scrollbar { display: none; }
.country-picker-item {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 54px 68px;
  align-items: center;
  gap: 9px;
  padding: 8px 8px;
  border: 1px solid var(--separator);
  border-radius: 17px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.country-picker-item:active { transform: scale(.99); }
.country-picker-item.active { border-color: var(--accent); background: var(--accent-soft); }
.country-picker-item.unavailable { opacity: .58; }
.country-list-name { min-width: 0; }
.country-list-name strong,
.country-list-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-list-name strong { font-size: 11px; letter-spacing: -.015em; }
.country-list-name small { margin-top: 3px; color: var(--hint); font-size: 7px; }
.country-list-stock { min-width: 0; text-align: right; }
.country-list-stock strong,
.country-list-stock small { display: block; }
.country-list-stock strong { overflow: hidden; color: var(--subtitle); font-size: 9px; font-weight: 650; text-overflow: ellipsis; }
.country-list-stock small { margin-top: 2px; color: var(--hint); font-size: 7px; }
.country-list-price {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--separator));
  border-radius: 12px;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange-soft) 70%, transparent);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.country-list-price.empty {
  border-color: var(--separator);
  color: var(--hint);
  background: transparent;
  font-size: 8px;
}
.country-picker-skeleton {
  min-height: 62px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 68px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 17px;
  background: var(--secondary-bg);
  overflow: hidden;
}
.country-picker-skeleton i,
.country-picker-skeleton span,
.country-picker-skeleton b {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--tertiary-bg), var(--section-bg), var(--tertiary-bg));
  background-size: 220% 100%;
  animation: country-shimmer 1.2s linear infinite;
}
.country-picker-skeleton i { width: 46px; height: 38px; }
.country-picker-skeleton span { height: 22px; }
.country-picker-skeleton b { width: 68px; height: 36px; }
@keyframes country-shimmer { to { background-position: -220% 0; } }

@media (max-width: 360px) {
  .country-picker-item { grid-template-columns: 42px minmax(0, 1fr) 48px 62px; gap: 7px; padding-inline: 7px; }
  .country-list-flag { width: 42px; height: 35px; }
  .country-list-price { font-size: 9px; }
}

/* Optimized SMS catalog, real price options and polished dialogs */
.sheet-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--subtitle);
  background: var(--secondary-bg);
  transition: transform .14s ease, background-color .14s ease, color .14s ease;
}
.sheet-close:active { transform: scale(.92); }
.sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-close svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

/* Unsupported provider/pool controls were removed from the UI. */
.sms-advanced { display: none !important; }

.offer-sort {
  display: flex;
  gap: 6px;
  margin: 10px 0 8px;
  padding: 3px;
  border-radius: 12px;
  background: var(--secondary-bg);
}
.offer-sort button {
  min-width: 0;
  flex: 1;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  color: var(--hint);
  background: transparent;
  font-size: 7.5px;
  font-weight: 750;
}
.offer-sort button.active {
  color: var(--text);
  background: var(--section-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.sms-price-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 0;
}
.sms-price-option {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 21px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--separator);
  border-radius: 15px;
  color: var(--text);
  background: var(--secondary-bg);
  text-align: left;
  content-visibility: auto;
  contain-intrinsic-size: 60px;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease;
}
.sms-price-option:active { transform: scale(.992); }
.sms-price-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.sms-price-option small,
.sms-price-option strong,
.sms-price-option b { display: block; margin: 0; }
.offer-quantity { min-width: 0; }
.offer-quantity small,
.offer-price small { color: var(--hint); font-size: 7px; font-weight: 650; }
.offer-quantity strong { margin-top: 3px; font-size: 10px; letter-spacing: -.01em; }
.offer-price {
  min-width: 78px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--separator));
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
  text-align: center;
}
.offer-price b { margin-top: 2px; font-size: 12px; letter-spacing: -.025em; white-space: nowrap; }
.offer-check {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 50%;
  color: transparent;
  background: var(--section-bg);
}
.sms-price-option.active .offer-check { border-color: var(--accent); color: var(--accent-text); background: var(--accent); }
.offer-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.offer-skeleton {
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 15px;
  background: var(--secondary-bg);
  overflow: hidden;
}
.offer-skeleton span,
.offer-skeleton b {
  display: block;
  height: 20px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--tertiary-bg), var(--section-bg), var(--tertiary-bg));
  background-size: 220% 100%;
  animation: country-shimmer 1.15s linear infinite;
}
.offer-skeleton b { height: 39px; }

.service-picker-sheet .sheet-card {
  min-height: min(78dvh, 650px);
  max-height: min(90dvh, 760px);
  display: flex;
  flex-direction: column;
}
.service-picker-list {
  min-height: 0;
  display: grid;
  gap: 7px;
  padding: 1px 1px 12px;
  overflow-y: auto;
  scrollbar-width: none;
}
.service-picker-list::-webkit-scrollbar { display: none; }
.service-picker-item {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  color: var(--text);
  background: var(--secondary-bg);
  content-visibility: auto;
  contain-intrinsic-size: 62px;
}
.service-picker-item.active { border-color: var(--accent); background: var(--accent-soft); }
.service-favorite {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--hint);
  background: transparent;
}
.service-favorite svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linejoin: round; }
.service-favorite.active { color: #f5a623; }
.service-favorite.active svg { fill: currentColor; }
.service-select-action {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 0 4px 0 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.service-select-action > span:not(.service-brand) { min-width: 0; }
.service-select-action strong,
.service-select-action small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-select-action strong { font-size: 11px; letter-spacing: -.015em; }
.service-select-action small { margin-top: 3px; color: var(--hint); font-size: 7px; }
.service-chevron { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--hint); }
.service-brand {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 22%, var(--separator));
  border-radius: 12px;
  color: #fff;
  background: var(--accent);
}
.service-brand.compact { width: 30px; height: 30px; border-radius: 9px; }
.service-brand svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }
.service-brand.compact svg { width: 20px; height: 20px; }
.service-brand b { font-size: 8px; font-weight: 850; }
.brand-whatsapp { background: #25d366; }
.brand-telegram { background: #2aabee; }
.brand-facebook { background: #1877f2; }
.brand-apple { background: #111; }
.brand-google { color: #4285f4; background: #fff; }
.brand-instagram { background: #d94683; }
.brand-tiktok { background: #111; }
.brand-walmart { color: #ffc220; background: #0879bf; }
.brand-amazon { color: #ff9900; background: #111; }
.brand-discord { background: #5865f2; }
.brand-microsoft { background: #737373; }
.brand-x { background: #111; }
.brand-vk { background: #0077ff; }
.brand-other, .brand-generic { background: var(--tertiary-bg); color: var(--text); }
.brand-walmart svg, .brand-x svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.service-picker-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 10px;
  color: inherit;
  background: transparent;
}

.country-picker-item {
  content-visibility: auto;
  contain-intrinsic-size: 62px;
}
.country-list-flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.country-list-price { min-width: 70px; }

.compact-sheet .sheet-card { max-width: 390px; }
.cancel-confirmation {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 14px 0;
  padding: 13px;
  border-radius: 16px;
  background: var(--secondary-bg);
}
.cancel-confirmation-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  font-size: 22px;
}
.cancel-confirmation strong { display: block; font-size: 10px; }
.cancel-confirmation p { margin: 5px 0 0; color: var(--hint); font-size: 8px; line-height: 1.45; }
.danger-button,
.secondary-button {
  min-height: 46px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 800;
}
.danger-button { color: #fff; background: var(--danger); }
.secondary-button { margin-top: 7px; color: var(--text); background: var(--secondary-bg); }

@media (max-width: 360px) {
  .sms-price-option { grid-template-columns: minmax(0, 1fr) auto 20px; gap: 7px; padding-inline: 9px; }
  .offer-price { min-width: 70px; padding-inline: 7px; }
  .country-picker-item { grid-template-columns: 42px minmax(0, 1fr) 62px; }
  .country-list-stock { display: none; }
}

/* v10: local SVG flags */
.country-flag, .country-list-flag { overflow: hidden; padding: 0; background: var(--tg-section-bg, var(--surface)); }
.country-flag img, .country-list-flag img, .country-flag-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.country-list-flag { flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }


/* v10 performance helpers */
.product-card,
.country-picker-item,
.service-picker-item,
.sms-offer-card {
  content-visibility: auto;
  contain-intrinsic-size: 84px;
}

.catalog-load-more,
.picker-load-more {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  background: var(--section-bg);
  color: var(--button-color);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.catalog-load-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.catalog-load-more span {
  color: var(--hint-color);
  font-size: 13px;
  font-weight: 500;
}

.picker-load-more {
  margin: 8px 0 2px;
}

.catalog-load-more:active,
.picker-load-more:active {
  transform: scale(.99);
  background: var(--secondary-bg);
}

/* ===== ServiceHub v11: category-first home and full catalog pages ===== */
.hero-card-compact {
  min-height: 142px;
  border-radius: 22px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}

.hero-card-compact .hero-content {
  width: 73%;
  padding: 15px 0 15px 16px;
}

.hero-card-compact .hero-badge {
  padding: 4px 8px;
  font-size: 8.5px;
}

.hero-card-compact h1 {
  max-width: 230px;
  margin: 9px 0 4px;
  font-size: 20px;
  line-height: 1.05;
}

.hero-card-compact p {
  max-width: 220px;
  font-size: 10px;
  line-height: 1.35;
}

.hero-card-compact .hero-button {
  min-height: 32px;
  margin-top: 9px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 9.5px;
}

.hero-card-compact .hero-art {
  width: 40%;
}

.hero-card-compact .hero-plane {
  top: 39px;
  right: 12px;
  width: 68px;
  height: 68px;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.hero-orb-one {
  width: 104px;
  height: 104px;
  right: -27px;
  top: -34px;
}

.hero-orb-two {
  width: 68px;
  height: 68px;
  right: 44px;
  bottom: -34px;
}

.home-catalog {
  margin-top: 18px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.category-grid .category-card {
  position: relative;
  min-width: 0;
  min-height: 194px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: 20px;
  color: var(--text);
  background: var(--section-bg);
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.035);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.category-grid .category-card + .category-card {
  border-top: 1px solid var(--separator);
}

.category-grid .category-card.active::before {
  display: none;
}

.category-grid .category-card:active {
  transform: scale(.975);
}

@media (hover: hover) {
  .category-grid .category-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--separator));
    box-shadow: 0 9px 22px rgba(0,0,0,.065);
  }
}

.category-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1.55 / 1;
  display: block;
  overflow: hidden;
  background: var(--secondary-bg);
}

.category-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(0,0,0,.10), transparent);
  pointer-events: none;
}

.category-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.category-grid .category-copy {
  display: block;
  padding: 11px 11px 7px;
}

.category-grid .category-copy strong {
  font-size: 13px;
  line-height: 1.15;
}

.category-grid .category-copy small {
  margin-top: 4px;
  color: var(--hint);
  font-size: 9.5px;
  line-height: 1.25;
}

.category-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding: 0 11px 11px;
  color: var(--hint);
  font-size: 8.5px;
}

.category-footer span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-footer b {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 8.5px;
  font-weight: 750;
}

.category-image-hint {
  margin: 10px 2px 0;
  color: var(--hint);
  font-size: 8px;
  line-height: 1.35;
}

.category-image-hint code {
  color: var(--accent);
  font-family: inherit;
}

.catalog-view {
  padding-top: 8px;
}

.catalog-nav-header {
  position: sticky;
  top: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 7px;
  margin: -8px -14px 10px;
  padding: 9px 14px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--separator) 82%, transparent);
  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
}

.catalog-back-button,
.catalog-home-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--separator);
  border-radius: 13px;
  color: var(--text);
  background: var(--section-bg);
}

.catalog-back-button svg,
.catalog-home-button svg {
  width: 19px;
  height: 19px;
}

.breadcrumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  color: var(--hint);
  font-size: 8.5px;
  white-space: nowrap;
}

.breadcrumbs button {
  flex: 0 0 auto;
  padding: 4px 2px;
  color: var(--accent);
  background: transparent;
  font: inherit;
}

.breadcrumbs svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.breadcrumbs span {
  flex: 0 0 auto;
}

.breadcrumbs strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
}

.catalog-page-banner {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 13px;
  border: 1px solid var(--separator);
  border-radius: 20px;
  background: var(--section-bg);
}

.catalog-page-copy {
  min-width: 0;
  flex: 1;
}

.catalog-page-copy h1 {
  margin: 3px 0 5px;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.catalog-page-copy p {
  margin: 0;
  color: var(--hint);
  font-size: 10px;
  line-height: 1.4;
}

.catalog-page-banner > img {
  width: 104px;
  height: 78px;
  flex: 0 0 auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 7px 16px rgba(0,0,0,.10);
}

.catalog-search {
  margin: 11px 0 2px;
}

.catalog-view .numbers-workspace,
.catalog-view .products-section {
  scroll-margin-top: 66px;
}

.catalog-view .products-section {
  margin-top: 15px;
}

.catalog-view .demo-note {
  margin-bottom: 4px;
}


@media (max-width: 390px) {
  .filter-chips {
    gap: 6px;
  }

  .filter-chip {
    min-height: 30px;
    padding: 0 10px;
    font-size: 9.5px;
  }
}

@media (max-width: 355px) {
  .category-grid {
    gap: 7px;
  }

  .category-grid .category-card {
    min-height: 181px;
    border-radius: 17px;
  }

  .category-grid .category-copy,
  .category-footer {
    padding-left: 9px;
    padding-right: 9px;
  }

  .catalog-page-banner > img {
    width: 88px;
    height: 68px;
  }

  .breadcrumbs span,
  .breadcrumbs svg:nth-of-type(1) {
    display: none;
  }
}


/* ===== ServiceHub v11.1: clearer separation between tariff and checkout ===== */
.sms-price-options {
  padding-bottom: 1px;
}

.sms-checkout-row {
  min-height: 64px;
  margin-top: 13px;
  border: 1px solid var(--separator);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .045);
}

html[data-theme="dark"] .sms-checkout-row,
html[data-preview-theme="dark"] .sms-checkout-row {
  box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
}

/* Games API workspace — v12 */
.games-workspace{display:block;min-width:0;overflow:hidden}
.games-workspace.hidden,.game-detail-view.hidden,.game-detail-loading.hidden,.game-dynamic-fields.hidden,.game-quantity.hidden,.catalog-load-more.hidden{display:none!important}
.games-console-head,.games-orders-head,.game-offers-head,.games-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.games-console-head h2,.games-orders-head h3{margin:2px 0 0;font-size:20px}
.games-status-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px;padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--card)}
.games-status-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent-soft);font-size:21px}
.games-status-card div{min-width:0}.games-status-card strong,.games-status-card small{display:block}.games-status-card small{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}
.games-family-tabs{display:flex;gap:8px;margin:15px 0 10px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}.games-family-tabs::-webkit-scrollbar{display:none}
.games-family-tabs button{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:38px;padding:0 13px;border:1px solid var(--border);border-radius:999px;background:var(--chip);color:var(--muted);font:inherit;font-size:12px;font-weight:700}
.games-family-tabs button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.games-family-tabs button span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--surface);font-size:10px}
.games-toolbar{margin:7px 1px 11px;color:var(--muted);font-size:12px}.games-toolbar button,.games-orders-head button{border:0;background:none;color:var(--accent);font:inherit;font-weight:700}
.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.game-card{display:flex;flex-direction:column;min-width:0;min-height:174px;padding:10px;border:1px solid var(--border);border-radius:18px;background:var(--card);text-align:left;color:var(--text);box-shadow:0 3px 12px rgba(0,0,0,.035)}
.game-card-media{position:relative;display:grid;place-items:center;height:88px;overflow:hidden;border-radius:13px;background:linear-gradient(145deg,var(--accent-soft),var(--surface))}
.game-card-media img{width:100%;height:100%;object-fit:cover}.game-card-media span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--accent);color:#fff;font-size:15px;font-weight:800}
.game-card-copy{display:flex;flex-direction:column;min-width:0;padding:10px 2px 3px}.game-card-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.game-card-copy small{display:-webkit-box;overflow:hidden;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.3;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.game-card-footer{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:auto;padding:5px 2px 0;color:var(--accent);font-size:10px;font-weight:700}.game-card-footer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.games-grid .catalog-load-more{grid-column:1/-1}
.games-orders-head{margin:20px 0 10px;padding-top:15px;border-top:1px solid var(--border)}
.game-orders-list{display:grid;gap:9px}.game-order-card{padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.game-order-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.game-order-card strong{display:block;font-size:13px}.game-order-card small{display:block;margin-top:3px;color:var(--muted);font-size:11px}.game-order-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;color:var(--muted);font-size:11px}.game-order-open{border:0;background:none;color:var(--accent);font:inherit;font-size:11px;font-weight:700}
.game-status-pill{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:800}.game-status-pill.completed{background:rgba(48,196,103,.14);color:#2bbb63}.game-status-pill.failed,.game-status-pill.refund{background:rgba(255,77,79,.12);color:#e34b4e}
.game-detail-view{min-width:0}.game-detail-back{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-size:12px;font-weight:800}.game-detail-back svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.game-detail-hero{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:13px;margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:19px;background:var(--card)}
.game-detail-cover{display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border-radius:17px;background:var(--accent-soft);font-size:30px}.game-detail-cover img{width:100%;height:100%;object-fit:cover}.game-detail-hero h2{margin:3px 0 4px;font-size:21px;line-height:1.1}.game-detail-hero p{margin:0;color:var(--muted);font-size:11px;line-height:1.4}
.game-detail-loading{display:flex;align-items:center;justify-content:center;gap:10px;min-height:130px;color:var(--muted)}.game-detail-loading span{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.game-offers-head{margin:18px 1px 9px}.game-offers-head strong,.game-offers-head span{display:block}.game-offers-head div span{margin-top:2px;color:var(--muted);font-size:10px}.game-offers-head>span{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800}
.game-offers-list{display:grid;gap:9px}.game-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--card)}.game-offer.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--accent-soft)}
.game-offer-copy{min-width:0}.game-offer-copy strong{display:block;font-size:13px}.game-offer-copy small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.game-offer-price{display:flex;align-items:center;gap:8px}.game-offer-price b{font-size:14px}.game-offer-check{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;opacity:0}.game-offer.selected .game-offer-check{opacity:1}
.game-dynamic-fields{margin-top:16px}.game-dynamic-fields .field-label{display:block;margin-bottom:8px}.game-fields-list{display:grid;gap:9px}.game-field label,.game-dynamic-fields label{display:block}.game-field span{display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:700}.game-field input,.game-field select,.game-quantity input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none}.game-field input:focus,.game-field select:focus,.game-quantity input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.game-quantity{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:12px;margin-top:13px;padding:11px 12px;border:1px solid var(--border);border-radius:15px;background:var(--card)}.game-quantity span{font-size:12px;font-weight:700}.game-quantity input{text-align:center}
.game-checkout-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:13px;border:1px solid var(--border);border-radius:17px;background:var(--card)}.game-checkout-row>div:last-child{text-align:right}.game-checkout-row span,.game-checkout-row small{display:block;color:var(--muted);font-size:10px}.game-checkout-row strong{display:block;margin-top:2px;font-size:23px}.game-checkout-row>div:last-child span{color:var(--accent);font-size:12px;font-weight:800}
.game-confirm-card{display:grid;gap:9px;margin:12px 0;padding:13px;border:1px solid var(--border);border-radius:16px;background:var(--card)}.game-confirm-card>span{color:var(--muted);font-size:12px}.game-confirm-card>div{display:flex;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid var(--border);font-size:12px}.game-confirm-card b{font-size:13px}
.game-delivery-content{display:grid;gap:10px;margin:12px 0}.game-delivery-code{padding:12px;border:1px dashed var(--accent);border-radius:14px;background:var(--accent-soft);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}.game-delivery-state{padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--card)}.game-delivery-state strong,.game-delivery-state span{display:block}.game-delivery-state span{margin-top:4px;color:var(--muted);font-size:11px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:359px){.games-grid{grid-template-columns:1fr}.games-status-card{grid-template-columns:auto minmax(0,1fr)}.games-status-card .api-live{grid-column:1/-1;justify-self:start}.game-detail-hero{grid-template-columns:64px minmax(0,1fr)}.game-detail-cover{width:64px;height:64px}.game-checkout-row{align-items:flex-start;flex-direction:column}.game-checkout-row>div:last-child{text-align:left}}

/* ===== ServiceHub v13 — premium Telegram game store ===== */
.games-workspace {
  overflow: visible;
  padding: 0;
  background: transparent;
}

.games-store-hero {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 72%, var(--card)), var(--card));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

.games-store-art {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 25%, transparent);
}

.games-store-art svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.games-store-copy { min-width: 0; }
.games-store-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.games-store-copy h2 {
  margin: 4px 0 5px;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.games-store-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.games-store-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.games-store-benefits span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.games-store-actions {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 7px;
}
.games-store-actions .api-live { white-space: nowrap; }
.games-sync-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--accent);
}
.games-sync-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.games-sync-button:active svg { transform: rotate(35deg); }

.games-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 9px;
  margin-top: 14px;
}
.games-search-box {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 48px;
  padding: 0 9px 0 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .035);
}
.games-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.games-search-box > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
}
.games-search-box input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.games-search-box input::placeholder { color: var(--muted); }
.games-search-clear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  font: inherit;
  font-size: 20px;
  line-height: 1;
}
.games-favorites-toggle {
  display: grid;
  place-items: center;
  width: 46px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--muted);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .035);
}
.games-favorites-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.games-favorites-toggle.active {
  border-color: color-mix(in srgb, #ff4d73 45%, var(--border));
  background: color-mix(in srgb, #ff4d73 12%, var(--card));
  color: #ff4d73;
}
.games-favorites-toggle.active svg { fill: currentColor; }

.games-family-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 10px;
  padding: 0;
  overflow: visible;
}
.games-family-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 64px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .03);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.games-family-tabs button:active { transform: scale(.975); }
.games-family-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) inset;
}
.games-tab-icon {
  display: grid !important;
  place-items: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: var(--chip) !important;
  font-size: 16px !important;
}
.games-family-tabs button.active .games-tab-icon { background: var(--surface) !important; }
.games-tab-copy {
  display: block !important;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.games-tab-copy strong,
.games-tab-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.games-tab-copy strong { font-size: 10px; }
.games-tab-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.games-family-tabs button > b {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 8px;
}
.games-family-tabs button.active > b { background: var(--accent); color: #fff; }

.games-platform-chips {
  display: flex;
  gap: 7px;
  margin: 0 -1px 12px;
  padding: 1px 1px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.games-platform-chips::-webkit-scrollbar { display: none; }
.games-platform-chips button {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}
.games-platform-chips button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.games-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 1px 11px;
}
.games-result-copy { min-width: 0; }
.games-result-copy strong,
.games-result-copy span { display: block; }
.games-result-copy strong { font-size: 14px; }
.games-result-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.games-sort-select {
  position: relative;
  flex: 0 0 auto;
}
.games-sort-select select {
  min-height: 34px;
  max-width: 130px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  appearance: none;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}
.games-sort-select svg {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.game-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--card);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .045);
  content-visibility: auto;
  contain-intrinsic-size: 205px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.game-card:active { transform: scale(.982); }
.game-card-open {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 215px;
  padding: 9px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.game-card-favorite {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(20, 25, 35, .38);
  color: #fff;
  backdrop-filter: blur(9px);
}
.game-card-favorite svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.game-card-favorite.active { background: #ff4d73; border-color: #ff4d73; }
.game-card-favorite.active svg { fill: currentColor; }
.game-card-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 108px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent-soft), var(--surface));
}
.game-card-media::after {
  content: '';
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.18));
  pointer-events: none;
}
.game-card-media > img { width: 100%; height: 100%; object-fit: cover; }
.game-card-media > span:not(.game-card-badge) {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 850;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}
.game-card-badge {
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: 8px;
  display: inline-flex !important;
  width: auto !important;
  height: 23px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px !important;
  background: rgba(15, 20, 30, .58) !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  backdrop-filter: blur(8px);
}
.game-card-copy { padding: 10px 2px 4px; }
.game-card-copy strong {
  display: -webkit-box;
  min-height: 32px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.game-card-copy small {
  display: -webkit-box;
  min-height: 26px;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.game-card-tags {
  display: flex;
  gap: 5px;
  min-height: 22px;
  overflow: hidden;
  padding: 0 2px;
}
.game-card-tags i {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 21px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 9px 2px 2px;
  border-top: 1px solid var(--separator);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}
.game-card-footer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.game-card-skeleton { padding: 9px; min-height: 215px; }
.game-card-skeleton .game-card-media,
.game-card-skeleton i {
  position: relative;
  overflow: hidden;
  background: var(--chip);
}
.game-card-skeleton .game-card-media::before,
.game-card-skeleton i::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: gameShimmer 1.25s infinite;
}
.game-card-skeleton .game-card-copy { display: grid; gap: 7px; }
.game-card-skeleton .game-card-copy i { display: block; height: 12px; border-radius: 7px; }
.game-card-skeleton .game-card-copy i:last-child { width: 65%; }
.game-card-skeleton .game-card-footer i { display: block; width: 42%; height: 10px; border-radius: 6px; }
@keyframes gameShimmer { to { transform: translateX(100%); } }

.games-reset-button {
  display: none;
  width: 100%;
  margin-top: 10px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.games-reset-button.visible { display: block; }
.games-status-card {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 88%, var(--accent-soft));
}
.games-status-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 900;
}
.games-status-time { color: var(--muted); font-size: 9px; font-weight: 700; text-align: right; }
.games-orders-head {
  margin-top: 18px;
  padding-top: 16px;
}
.game-orders-list { gap: 8px; }
.game-order-card {
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.03);
}

.game-detail-view { animation: gamePageIn .22s ease both; }
@keyframes gamePageIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.game-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.game-detail-back {
  min-height: 36px;
  padding: 0 11px 0 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.game-detail-crumbs {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
}
.game-detail-crumbs strong {
  max-width: 120px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-detail-hero {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  margin-top: 0;
  padding: 14px;
  border-radius: 21px;
  box-shadow: 0 7px 22px rgba(0,0,0,.045);
}
.game-detail-cover { width: 88px; height: 88px; border-radius: 20px; }
.game-detail-info { min-width: 0; }
.game-detail-hero h2 { font-size: 21px; }
.game-detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.game-detail-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}
.game-steps {
  display: grid;
  grid-template-columns: auto minmax(12px,1fr) auto minmax(12px,1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 14px 2px;
}
.game-steps span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.game-steps span b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  font-size: 9px;
}
.game-steps span.active { color: var(--accent); }
.game-steps span.active b { background: var(--accent); color: #fff; }
.game-steps span.muted { opacity: .42; }
.game-steps i { height: 1px; background: var(--border); }
.game-detail-section {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 5px 16px rgba(0,0,0,.035);
}
.game-offers-head { margin: 0 0 10px; }
.game-offers-list { gap: 8px; }
.game-offer {
  grid-template-columns: 25px minmax(0,1fr) auto;
  gap: 9px;
  min-height: 62px;
  padding: 10px;
  border-radius: 15px;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.game-offer:active { transform: scale(.985); }
.game-offer.selected { background: color-mix(in srgb, var(--accent-soft) 72%, var(--card)); }
.game-offer-radio {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid var(--border);
  border-radius: 50%;
}
.game-offer-radio i { width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.game-offer.selected .game-offer-radio { border-color: var(--accent); }
.game-offer.selected .game-offer-radio i { background: var(--accent); }
.game-offer-copy strong { font-size: 12px; }
.game-offer-copy small { font-size: 9px; }
.game-offer-price { display: block; text-align: right; }
.game-offer-price small { display: block; color: var(--muted); font-size: 8px; }
.game-offer-price b { display: block; margin-top: 2px; font-size: 14px; }
.game-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.game-section-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}
.game-section-heading strong,
.game-section-heading small { display: block; }
.game-section-heading strong { font-size: 12px; }
.game-section-heading small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.game-fields-list { display: grid; gap: 9px; }
.game-field span { margin-bottom: 6px; }
.game-field input,
.game-field select { min-height: 46px; border-radius: 14px; background: var(--surface); }
.game-quantity {
  margin-top: 12px;
  padding: 12px;
  border-radius: 17px;
  box-shadow: 0 5px 16px rgba(0,0,0,.03);
}
.game-quantity > span strong,
.game-quantity > span small { display: block; }
.game-quantity > span small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.game-checkout-dock {
  position: sticky;
  z-index: 6;
  bottom: 8px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 12px;
  align-items: end;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  backdrop-filter: blur(18px);
}
.game-checkout-summary span,
.game-checkout-summary strong,
.game-checkout-summary small,
.game-checkout-side span,
.game-checkout-side small { display: block; }
.game-checkout-summary span { color: var(--muted); font-size: 9px; }
.game-checkout-summary strong { margin-top: 2px; font-size: 24px; line-height: 1; }
.game-checkout-summary small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.game-checkout-side { text-align: right; }
.game-checkout-side span { color: var(--accent); font-size: 10px; font-weight: 800; }
.game-checkout-side small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.game-checkout-dock .primary-button { grid-column: 1 / -1; min-height: 46px; margin: 0; border-radius: 15px; }
.game-purchase-note {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 8px;
  align-items: start;
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.game-purchase-note > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: color-mix(in srgb, #ffb020 16%, var(--card));
  color: #e59100;
  font-weight: 900;
}

html[data-theme="dark"] .games-store-hero,
html[data-preview-theme="dark"] .games-store-hero,
html[data-theme="dark"] .game-card,
html[data-preview-theme="dark"] .game-card,
html[data-theme="dark"] .game-detail-section,
html[data-preview-theme="dark"] .game-detail-section {
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

@media (max-width: 370px) {
  .games-store-hero { grid-template-columns: 54px minmax(0,1fr); padding: 13px; }
  .games-store-art { width: 54px; height: 54px; border-radius: 17px; }
  .games-store-art svg { width: 31px; height: 31px; }
  .games-store-actions { grid-column: 1 / -1; justify-content: space-between; }
  .games-store-benefits span:nth-child(2) { display: none; }
  .games-family-tabs { gap: 6px; }
  .games-family-tabs button { grid-template-columns: 28px minmax(0,1fr); gap: 6px; padding: 7px; }
  .games-tab-icon { width: 28px !important; min-width: 28px !important; height: 28px !important; }
  .games-tab-copy small { display: none; }
  .games-sort-select select { max-width: 114px; }
  .game-card-open { min-height: 202px; }
  .game-card-media { height: 96px; }
  .game-detail-hero { grid-template-columns: 72px minmax(0,1fr); }
  .game-detail-cover { width: 72px; height: 72px; }
  .game-detail-crumbs span,
  .game-detail-crumbs i { display: none; }
}

@media (max-width: 330px) {
  .games-grid { grid-template-columns: 1fr; }
  .game-card-open { min-height: 0; }
  .game-card-media { height: 128px; }
  .games-family-tabs { grid-template-columns: 1fr; }
  .games-family-tabs button { min-height: 52px; }
}

/* v13.1: checkout stays in document flow so it never covers form fields */
.game-checkout-dock {
  position: relative;
  bottom: auto;
  backdrop-filter: none;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .07);
}


/* v14 — минималистичный игровой магазин */
.games-workspace { overflow: visible; }
.games-minimal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: 0 0 13px; padding: 2px 1px 0;
}
.games-minimal-head h2 { margin: 2px 0 3px; font-size: 23px; line-height: 1.08; }
.games-minimal-head p { margin: 0; max-width: 260px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.games-minimal-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.games-minimal-actions .api-live { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.games-sync-button { flex: 0 0 auto; }
.games-minimal-search {
  display: grid; grid-template-columns: 20px minmax(0,1fr) 28px; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 11px; border: 1px solid var(--border); border-radius: 15px;
  background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.025);
}
.games-minimal-search > svg { width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 2; }
.games-minimal-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.games-minimal-search input::placeholder { color: var(--muted); }
.games-minimal-search .games-search-clear { position: static; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 20px; line-height: 1; }
.games-minimal-tabs {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px;
  margin: 10px 0 13px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.games-minimal-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 36px;
  padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; font-weight: 750;
}
.games-minimal-tabs button.active { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.055); }
.games-minimal-tabs button b { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 8px; }
.games-minimal-tabs button.active b { background: var(--accent-soft); color: var(--accent); }
.games-minimal-catalog-head { margin: 0 1px 9px; }
.games-minimal-catalog-head .games-result-copy strong { font-size: 13px; }
.games-minimal-catalog-head .games-result-copy span { font-size: 9px; }
.games-minimal-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; min-width: 0;
}
.game-mini-card {
  display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 9px;
  min-width: 0; min-height: 64px; padding: 9px; border: 1px solid var(--border); border-radius: 13px;
  background: var(--card); color: var(--text); text-align: left; font: inherit;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.game-mini-card:active { transform: scale(.977); background: var(--surface); }
.game-mini-cover {
  display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 850;
}
.game-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.game-mini-cover > span { display: grid; place-items: center; width: 100%; height: 100%; }
.game-mini-copy { min-width: 0; }
.game-mini-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.2; }
.game-mini-copy small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.game-mini-skeleton { pointer-events: none; }
.game-mini-skeleton > span, .game-mini-skeleton > i { position: relative; overflow: hidden; background: var(--surface); }
.game-mini-skeleton > span { width: 42px; height: 42px; border-radius: 11px; }
.game-mini-skeleton > i { display: block; width: 68%; height: 11px; border-radius: 7px; }
.game-mini-skeleton > span::after, .game-mini-skeleton > i::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); animation: gameSkeleton 1.2s infinite;
}
@keyframes gameSkeleton { to { transform: translateX(100%); } }
.games-minimal-status { margin-top: 14px; padding: 11px; border-radius: 14px; }
.games-minimal-status .games-status-time { font-size: 8px; }
.game-minimal-topbar { margin-bottom: 10px; }
.game-minimal-detail-hero { padding: 12px; border-radius: 16px; }
.game-minimal-detail-hero .game-detail-cover { width: 64px; height: 64px; border-radius: 14px; }
.game-minimal-detail-hero h2 { font-size: 19px; }
.game-variant-section { margin-top: 10px; }
.game-variant-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.game-variant-label strong, .game-variant-label small { display: block; }
.game-variant-label strong { font-size: 12px; }
.game-variant-label small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.game-variant-count { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 850; }
.game-variant-select-wrap { position: relative; }
.game-variant-select-wrap select {
  width: 100%; min-height: 48px; padding: 0 42px 0 13px; border: 1px solid var(--border); border-radius: 14px;
  appearance: none; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; outline: none;
}
.game-variant-select-wrap select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.game-variant-select-wrap svg { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.game-detail-section { border-radius: 16px; box-shadow: none; }
.game-offer { border-radius: 14px; }
.game-field input, .game-field select { font-size: 13px; }
.game-checkout-dock { border-radius: 17px; }
@media (max-width: 350px) {
  .games-minimal-head p { display: none; }
  .games-minimal-actions .api-live { display: none; }
  .games-minimal-grid { gap: 6px; }
  .game-mini-card { grid-template-columns: 38px minmax(0,1fr); gap: 7px; min-height: 58px; padding: 7px; }
  .game-mini-cover { width: 38px; height: 38px; border-radius: 10px; }
  .game-mini-copy strong { font-size: 10px; }
}

.game-variant-select-wrap { border-radius: 14px; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.035); }
.game-variant-select-wrap select { border-color: color-mix(in srgb, var(--border) 78%, var(--accent) 22%); background: var(--card); }


/* Steam wallet — v15 */
.steam-detail-content{display:block}.steam-detail-content.hidden{display:none}.steam-wallet-panel{display:grid;gap:16px;padding:16px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow-soft)}.steam-wallet-intro{display:flex;align-items:center;gap:12px}.steam-wallet-mark{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:#163a66;overflow:hidden}.steam-wallet-mark img{width:100%;height:100%;object-fit:cover}.steam-wallet-intro div{display:grid;gap:4px;min-width:0}.steam-wallet-intro strong{font-size:17px}.steam-wallet-intro small,.steam-field>small{color:var(--muted);font-size:12px;line-height:1.4}.steam-field{display:grid;gap:8px}.steam-field>span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.steam-login-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.steam-login-row input,.steam-amount-wrap,.steam-select-wrap{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.steam-login-row input{width:100%;padding:13px 14px;color:var(--text);font:inherit;outline:none}.steam-login-row input:focus,.steam-amount-wrap:focus-within,.steam-select-wrap:focus-within{border-color:var(--accent)}.steam-login-row button{border:0;border-radius:14px;padding:0 14px;background:var(--accent-soft);color:var(--accent);font-weight:700}.steam-login-row button:disabled{opacity:.6}.steam-field>small.success{color:#36b36a}.steam-field>small.error{color:#ef5b62}.steam-field>small.checking{color:var(--accent)}.steam-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.steam-select-wrap{position:relative;display:flex;align-items:center}.steam-select-wrap select{width:100%;appearance:none;border:0;background:transparent;color:var(--text);font:inherit;padding:13px 36px 13px 12px;outline:none}.steam-select-wrap svg{position:absolute;right:12px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none}.steam-amount-wrap{display:flex;align-items:center}.steam-amount-wrap input{width:100%;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;padding:13px 6px 13px 12px;outline:none}.steam-amount-wrap b{padding-right:12px;color:var(--muted);font-size:13px}.steam-quick-amounts{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.steam-quick-amounts::-webkit-scrollbar{display:none}.steam-quick-amounts button{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:9px 12px;background:var(--surface-2);color:var(--text);font-weight:650}.steam-rate-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border-radius:18px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line))}.steam-rate-card div{display:grid;gap:3px}.steam-rate-card span{font-size:12px;color:var(--muted)}.steam-rate-card strong{font-size:19px}.steam-rate-card small{grid-column:1/-1;color:var(--muted);font-size:11px}.games-minimal-tabs{overflow-x:auto;scrollbar-width:none}.games-minimal-tabs::-webkit-scrollbar{display:none}.games-minimal-tabs button{flex:0 0 auto}
@media(max-width:370px){.steam-form-grid{grid-template-columns:1fr}.steam-login-row{grid-template-columns:1fr}.steam-login-row button{min-height:42px}.steam-rate-card{grid-template-columns:1fr}}


/* Minimal game grid and standalone Steam */
.games-minimal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0;
}
.game-mini-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:64px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--card);
  color:var(--text);
  text-align:left;
  box-shadow:none;
}
.game-mini-card:hover{border-color:color-mix(in srgb,var(--border) 55%,var(--accent) 45%)}
.game-mini-card:active{transform:scale(.98);background:var(--surface)}
.game-mini-cover{
  width:42px;height:42px;border-radius:10px;overflow:hidden;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--border) 76%,transparent);
}
.game-mini-cover img{width:100%;height:100%;display:block;object-fit:cover}
.game-mini-copy{min-width:0;display:flex;align-items:center}
.game-mini-copy strong{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;font-size:11px;line-height:1.24;font-weight:760;letter-spacing:-.01em;
}
.game-mini-copy small{display:none!important}
@media(max-width:350px){
  .games-minimal-grid{gap:6px}
  .game-mini-card{grid-template-columns:38px minmax(0,1fr);min-height:58px;padding:7px 8px;gap:7px}
  .game-mini-cover{width:38px;height:38px}
  .game-mini-copy strong{font-size:10px}
}
.steam-workspace{display:grid;gap:14px}
.steam-workspace.hidden{display:none}
.steam-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 2px 0}
.steam-page-head h2{margin:3px 0 4px;font-size:22px;letter-spacing:-.03em}
.steam-page-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.steam-workspace .steam-wallet-panel{margin:0;padding:15px;border-radius:18px;box-shadow:none}
.category-grid .category-card[data-category="steam"] .category-media{background:#172a48}
.category-grid .category-card[data-category="steam"] .category-media img{object-fit:contain;padding:7px}

/* ServiceHub v17 — restored Telegram store card system */
:root,
html[data-theme="light"] {
  --card: var(--section-bg);
  --surface: var(--secondary-bg);
  --surface-2: var(--secondary-bg);
  --border: var(--separator);
  --line: var(--separator);
  --muted: var(--hint);
  --shadow-soft: 0 8px 24px rgba(24, 39, 58, .08);
  --game-card-bg: #ffffff;
  --game-card-border: #dce3eb;
  --game-card-pressed: #f4f7fa;
  --game-cover-bg: #edf3f8;
  --game-search-bg: #ffffff;
  --game-tabs-bg: #e9edf2;
}
html[data-theme="dark"] {
  --card: var(--section-bg);
  --surface: var(--secondary-bg);
  --surface-2: var(--secondary-bg);
  --border: var(--separator);
  --line: var(--separator);
  --muted: var(--hint);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, .24);
  --game-card-bg: #19232f;
  --game-card-border: #304052;
  --game-card-pressed: #202d3a;
  --game-cover-bg: #111923;
  --game-search-bg: #19232f;
  --game-tabs-bg: #121a23;
}

.games-workspace .games-minimal-head {
  margin-bottom: 14px;
  padding-inline: 1px;
}
.games-workspace .games-minimal-head h2 {
  margin-top: 3px;
  font-size: 25px;
  letter-spacing: -.025em;
}
.games-workspace .games-minimal-head p {
  max-width: 250px;
  font-size: 11px;
  line-height: 1.45;
}
.games-workspace .games-minimal-search {
  min-height: 48px;
  border: 1px solid var(--game-card-border);
  border-radius: 15px;
  background: var(--game-search-bg);
  box-shadow: none;
}
.games-workspace .games-minimal-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.games-workspace .games-minimal-tabs {
  border: 0;
  border-radius: 14px;
  background: var(--game-tabs-bg);
}
.games-workspace .games-minimal-tabs button {
  min-height: 38px;
  border-radius: 10px;
  font-size: 10.5px;
}
.games-workspace .games-minimal-tabs button.active {
  background: var(--game-card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.games-workspace .games-minimal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.games-workspace .game-mini-card {
  appearance: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  margin: 0;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid var(--game-card-border);
  border-radius: 13px;
  background: var(--game-card-bg);
  color: var(--text);
  text-align: left;
  box-shadow: none;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.games-workspace .game-mini-card:hover {
  border-color: color-mix(in srgb, var(--game-card-border) 54%, var(--accent) 46%);
}
.games-workspace .game-mini-card:active {
  transform: scale(.98);
  background: var(--game-card-pressed);
}
.games-workspace .game-mini-card:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--accent);
}
.games-workspace .game-mini-cover {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--game-card-border) 84%, transparent);
  border-radius: 11px;
  background: var(--game-cover-bg);
  color: var(--accent);
}
.games-workspace .game-mini-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.games-workspace .game-cover-fallback {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 20%, var(--game-cover-bg)), var(--game-cover-bg));
}
.games-workspace .game-cover-fallback svg {
  width: 24px;
  height: 24px;
  opacity: .58;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.games-workspace .game-cover-fallback b {
  position: absolute;
  right: 3px;
  bottom: 2px;
  min-width: 17px;
  height: 14px;
  padding: 0 3px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--game-card-bg) 84%, transparent);
  color: var(--text);
  font-size: 7px;
  line-height: 14px;
  text-align: center;
  letter-spacing: .02em;
}
.games-workspace .game-mini-copy {
  min-width: 0;
  display: flex;
  align-items: center;
}
.games-workspace .game-mini-copy strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: -.014em;
  overflow-wrap: anywhere;
}
.games-workspace .games-minimal-catalog-head {
  margin-bottom: 10px;
}
.games-workspace .games-status-card {
  border-color: var(--game-card-border);
  background: var(--game-card-bg);
}

@media (max-width: 350px) {
  .games-workspace .games-minimal-grid { gap: 6px; }
  .games-workspace .game-mini-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
    min-height: 58px;
    padding: 7px 8px;
  }
  .games-workspace .game-mini-cover {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
  }
  .games-workspace .game-mini-copy strong { font-size: 10px; }
}

/* ===== ServiceHub v19: currency selector, spacing and rebuilt Steam checkout ===== */
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
}
.currency-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  flex:0 0 auto;
  padding:3px;
  border:1px solid var(--separator);
  border-radius:13px;
  background:var(--section-bg);
}
.currency-switch button{
  width:27px;
  height:27px;
  padding:0;
  border:0;
  border-radius:9px;
  color:var(--hint);
  background:transparent;
  font:inherit;
  font-size:13px;
  font-weight:800;
  line-height:1;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.currency-switch button.active{
  color:var(--accent-button-text);
  background:var(--accent);
  box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 24%,transparent);
}
.currency-switch button:active{transform:scale(.94)}
.wallet-button{min-width:96px}
.wallet-button strong{white-space:nowrap}

/* More button must read as a separate action, not the last product card. */
.games-minimal-grid + .catalog-load-more,
#productList > .catalog-load-more{
  margin-top:18px;
  margin-bottom:6px;
}
.games-workspace .catalog-load-more{
  min-height:50px;
  border-style:dashed;
  background:color-mix(in srgb,var(--section-bg) 92%,var(--accent) 8%);
}

.steam-workspace{
  gap:12px;
}
.steam-store-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 1px 4px;
}
.steam-store-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.steam-store-logo{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  overflow:hidden;
  border-radius:15px;
  background:#152b46;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.steam-store-logo img{
  width:100%;
  height:100%;
  padding:7px;
  object-fit:contain;
}
.steam-store-brand h2{
  margin:2px 0 2px;
  font-size:20px;
  letter-spacing:-.03em;
}
.steam-store-brand p{
  margin:0;
  color:var(--hint);
  font-size:11px;
  line-height:1.35;
}
.steam-checkout-card{
  overflow:hidden;
  border:1px solid var(--separator);
  border-radius:22px;
  background:var(--section-bg);
  box-shadow:0 10px 30px rgba(20,35,52,.07);
}
html[data-theme="dark"] .steam-checkout-card{box-shadow:0 12px 34px rgba(0,0,0,.22)}
.steam-step-block{
  display:grid;
  gap:14px;
  padding:17px;
}
.steam-step-head{
  display:flex;
  align-items:center;
  gap:11px;
}
.steam-step-number{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:10px;
  color:var(--accent);
  background:var(--accent-soft);
  font-size:12px;
  font-weight:850;
}
.steam-step-head > div{
  display:grid;
  gap:2px;
  min-width:0;
}
.steam-step-head strong{
  font-size:15px;
  letter-spacing:-.01em;
}
.steam-step-head small{
  color:var(--hint);
  font-size:11px;
  line-height:1.35;
}
.steam-card-divider{
  height:1px;
  margin:0 17px;
  background:var(--separator);
}
.steam-field{
  display:grid;
  gap:8px;
}
.steam-field > span{
  color:var(--hint);
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.steam-login-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.steam-login-row input,
.steam-amount-wrap{
  min-width:0;
  border:1px solid var(--separator);
  border-radius:14px;
  background:var(--secondary-bg);
}
.steam-login-row input{
  width:100%;
  padding:13px 14px;
  color:var(--text);
  font:inherit;
  font-size:14px;
  outline:none;
}
.steam-login-row button{
  min-width:92px;
  border:0;
  border-radius:14px;
  padding:0 14px;
  color:var(--accent);
  background:var(--accent-soft);
  font:inherit;
  font-size:12px;
  font-weight:800;
}
.steam-login-row input:focus,
.steam-amount-wrap:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.steam-field > small{
  color:var(--hint);
  font-size:11px;
  line-height:1.4;
}
.steam-field > small.success{color:#36b36a}
.steam-field > small.error{color:#ef5b62}
.steam-field > small.checking{color:var(--accent)}
.steam-currency-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.steam-currency-tabs button{
  display:grid;
  place-items:center;
  gap:2px;
  min-height:52px;
  padding:6px 3px;
  border:1px solid var(--separator);
  border-radius:14px;
  color:var(--text);
  background:var(--secondary-bg);
  font:inherit;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.steam-currency-tabs button b{
  font-size:18px;
  line-height:1;
}
.steam-currency-tabs button span{
  color:var(--hint);
  font-size:9px;
  font-weight:750;
}
.steam-currency-tabs button.active{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}
.steam-currency-tabs button.active span{color:var(--accent)}
.steam-currency-tabs button:active{transform:scale(.97)}
.steam-amount-large{
  display:flex;
  align-items:center;
  min-height:58px;
}
.steam-amount-large input{
  width:100%;
  min-width:0;
  border:0;
  padding:12px 8px 12px 14px;
  color:var(--text);
  background:transparent;
  font:inherit;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.03em;
  outline:none;
}
.steam-amount-large b{
  padding-right:14px;
  color:var(--hint);
  font-size:16px;
}
.steam-quick-amounts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  overflow:visible;
  padding:0;
}
.steam-quick-amounts button{
  min-width:0;
  padding:9px 3px;
  overflow:hidden;
  border:1px solid var(--separator);
  border-radius:12px;
  color:var(--text);
  background:var(--secondary-bg);
  font-size:10px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.steam-quick-amounts button.active{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}
.steam-order-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--accent) 25%,var(--separator));
  border-radius:17px;
  background:var(--accent-soft);
}
.steam-order-summary > div{
  display:grid;
  gap:4px;
  min-width:0;
}
.steam-order-summary span{
  color:var(--hint);
  font-size:11px;
}
.steam-order-summary strong{
  overflow:hidden;
  font-size:18px;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.steam-order-summary .steam-summary-total{
  padding-left:11px;
  border-left:1px solid color-mix(in srgb,var(--accent) 23%,var(--separator));
}
.steam-order-summary .steam-summary-total strong{color:var(--accent)}
.steam-order-summary small{
  grid-column:1/-1;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--hint);
  font-size:10px;
  line-height:1.35;
}
.steam-buy-button{
  min-height:50px;
  border-radius:15px;
}
.steam-help-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  border:1px solid var(--separator);
  border-radius:17px;
  background:var(--section-bg);
}
.steam-help-card > span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:9px;
  color:var(--accent);
  background:var(--accent-soft);
  font-size:12px;
  font-weight:850;
}
.steam-help-card div{
  display:grid;
  gap:3px;
}
.steam-help-card strong{font-size:12px}
.steam-help-card small{color:var(--hint);font-size:10px;line-height:1.4}

@media(max-width:370px){
  .app-header{gap:7px;padding-left:11px;padding-right:11px}
  .profile-brief{gap:7px}
  .user-avatar{width:37px;height:37px}
  .profile-copy span{display:none}
  .profile-copy strong{max-width:82px;font-size:13px}
  .header-actions{gap:5px}
  .currency-switch button{width:24px;height:25px}
  .wallet-button{min-width:82px;padding-right:7px}
  .wallet-icon{display:none}
  .steam-login-row{grid-template-columns:1fr}
  .steam-login-row button{min-height:43px}
  .steam-currency-tabs{gap:5px}
  .steam-quick-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steam-order-summary{grid-template-columns:1fr}
  .steam-order-summary .steam-summary-total{padding:9px 0 0;border-left:0;border-top:1px solid color-mix(in srgb,var(--accent) 23%,var(--separator))}
}

/* ===== ServiceHub v20 — Telegram-native visual system ===== */
:root,
html[data-theme="light"] {
  --canvas: #dfe8f1;
  --app-bg: #f4f5f7;
  --section-bg: #ffffff;
  --secondary-bg: #f1f3f5;
  --tertiary-bg: #e8ebef;
  --header-bg: rgba(255,255,255,.88);
  --bottom-bg: rgba(255,255,255,.92);
  --text: #0f1720;
  --hint: #8b98a5;
  --subtitle: #52606d;
  --separator: rgba(15,23,32,.08);
  --accent: #2aabee;
  --accent-2: #1787d4;
  --accent-soft: rgba(42,171,238,.12);
  --shadow-phone: 0 30px 90px rgba(24,48,72,.26), 0 4px 14px rgba(24,48,72,.12);
}

html[data-theme="dark"] {
  --canvas: #070b0f;
  --app-bg: #10161c;
  --section-bg: #182129;
  --secondary-bg: #202b34;
  --tertiary-bg: #293640;
  --header-bg: rgba(16,22,28,.88);
  --bottom-bg: rgba(18,25,31,.94);
  --text: #f4f7fa;
  --hint: #82909c;
  --subtitle: #b0bac3;
  --separator: rgba(255,255,255,.075);
  --accent: #2aabee;
  --accent-2: #55bff4;
  --accent-soft: rgba(42,171,238,.16);
}

body {
  background:
    radial-gradient(circle at 50% 2%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30rem),
    linear-gradient(145deg, color-mix(in srgb, var(--canvas) 92%, #fff 8%), var(--canvas));
}

.device-shell {
  padding: 7px;
  border-radius: 43px;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg,#20252a,#050607 48%,#171b1f);
}
.device-sensor { top: 14px; width: 86px; height: 24px; opacity: .96; }
.app { border-radius: 36px; }

.app-header {
  min-height: 72px;
  gap: 10px;
  padding: calc(16px + env(safe-area-inset-top)) 14px 10px;
  box-shadow: 0 1px 0 transparent;
}
.app.scrolled .app-header { box-shadow: 0 1px 0 var(--separator); }
.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg,#55c7f5,#168cd6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24),0 3px 10px rgba(42,171,238,.23);
}
.profile-copy span { font-size: 10.5px; }
.profile-copy strong { font-size: 15px; letter-spacing: -.01em; }
.header-actions { gap: 7px; }
.currency-switch {
  height: 36px;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: var(--secondary-bg);
}
.currency-switch button { width: 29px; height: 30px; border-radius: 9px; font-size: 12px; }
.currency-switch button.active { background: var(--section-bg); box-shadow: 0 1px 5px rgba(0,0,0,.1); }
.wallet-button {
  min-height: 40px;
  padding: 4px 9px 4px 5px;
  border: 0;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
}
.wallet-icon { width: 31px; height: 31px; border-radius: 10px; color: #fff; background: var(--accent); }
.wallet-button small { color: color-mix(in srgb,var(--accent) 70%,var(--hint)); }
.wallet-button strong { color: var(--text); }

.view { padding: 10px 12px 96px; }
.hero-card-compact {
  min-height: 158px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 14%,rgba(255,255,255,.25),transparent 26%),
    linear-gradient(135deg,#1c9be4,#2aabee 54%,#6bc6f3);
  box-shadow: 0 12px 28px rgba(42,171,238,.23);
}
.hero-card-compact .hero-content { width: 75%; padding: 16px 0 16px 17px; }
.hero-card-compact .hero-badge { border: 0; background: rgba(255,255,255,.16); font-size: 9px; }
.hero-card-compact h1 { max-width: 235px; margin: 10px 0 5px; font-size: 21px; line-height: 1.06; }
.hero-card-compact p { font-size: 10.5px; }
.hero-card-compact .hero-button {
  min-height: 34px;
  margin-top: 11px;
  padding: 0 12px;
  border-radius: 11px;
  color: #1177b5;
  box-shadow: 0 3px 12px rgba(0,70,120,.14);
}
.hero-card-compact .hero-plane { top: 43px; right: 11px; width: 72px; height: 72px; }

.quick-row { gap: 9px; margin: 11px 0 4px; }
.quick-action {
  min-height: 64px;
  padding: 10px;
  border: 0;
  border-radius: 17px;
  background: var(--section-bg);
  box-shadow: 0 2px 10px rgba(15,30,45,.04);
  transition: transform .14s ease, background .14s ease;
}
.quick-action:active { transform: scale(.975); background: var(--secondary-bg); }
.quick-icon { width: 39px; height: 39px; border-radius: 13px; }
.quick-action strong { font-size: 12px; }
.quick-action small { font-size: 9px; }

.home-catalog { margin-top: 17px; }
.section-kicker { color: var(--accent); letter-spacing: .055em; }
.section-title-row h2 { font-size: 19px; letter-spacing: -.025em; }
.section-count { border: 0; background: var(--secondary-bg); color: var(--hint); }
.category-grid { gap: 9px; }
.category-grid .category-card {
  min-height: 184px;
  border: 0;
  border-radius: 19px;
  box-shadow: 0 2px 10px rgba(15,30,45,.055);
}
.category-media { aspect-ratio: 1.62/1; }
.category-media::after { height: 44%; opacity: .65; }
.category-grid .category-copy { padding: 10px 11px 6px; }
.category-grid .category-copy strong { font-size: 13.5px; letter-spacing: -.012em; }
.category-grid .category-copy small { font-size: 9.3px; }
.category-footer { padding: 0 11px 10px; font-size: 8.3px; }
.category-footer b { color: var(--accent); }
.category-image-hint { display: none; }

.bottom-nav {
  gap: 0;
  padding: 5px 7px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
}
.nav-item { min-height: 54px; gap: 2px; border-radius: 13px; }
.nav-item > svg { width: 23px; height: 23px; stroke-width: 1.85; }
.nav-item small { font-size: 9px; font-weight: 600; }
.nav-item.active::before {
  top: 2px;
  width: 45px;
  height: 31px;
  border-radius: 14px;
  background: var(--accent-soft);
}
.nav-item.active > svg { stroke-width: 2.15; }

.catalog-nav-header {
  min-height: 54px;
  margin: -10px -12px 10px;
  padding: 7px 11px;
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(180%);
}
.catalog-back-button,.catalog-home-button { border: 0; background: var(--secondary-bg); }
.catalog-page-banner { border: 0; border-radius: 20px; box-shadow: 0 2px 12px rgba(15,30,45,.05); }
.search-box { border: 0; background: var(--section-bg); box-shadow: 0 2px 10px rgba(15,30,45,.04); }

.product-card,.order-card,.support-card,.profile-card,.settings-list,.empty-state,
.game-card,.steam-wallet-panel,.sms-product-card,.catalog-panel {
  border-color: transparent !important;
  box-shadow: 0 2px 12px rgba(15,30,45,.045);
}

.sheet-card { border-radius: 24px 24px 0 0; }
.primary-button,.buy-button,.checkout-button { background: var(--accent); box-shadow: 0 7px 18px rgba(42,171,238,.2); }
.toast { border: 0; box-shadow: 0 12px 34px rgba(0,0,0,.18); }

@media (max-width: 520px) {
  body { padding: 0; background: var(--app-bg); }
  .preview-toolbar,.device-sensor { display: none; }
  .device-stage { min-height: 100dvh; display: block; }
  .device-shell { width: 100%; height: 100dvh; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .app { border-radius: 0; }
}

/* ===== ServiceHub v21: polished catalog badge, profile currency and premium navigation ===== */
.header-actions .currency-switch { display: none; }

.section-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 11px 5px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 88%, white), var(--section-bg));
  color: var(--muted);
  box-shadow: 0 5px 16px rgba(25, 118, 174, .08), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.section-count b { color: var(--text); font-size: 12px; }
.section-count-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #55c7f5, #168cd6);
  box-shadow: 0 3px 8px rgba(42,171,238,.28);
  font-size: 10px;
}

.profile-preferences {
  margin: 13px 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--separator));
  border-radius: 22px;
  background: var(--section-bg);
  box-shadow: 0 6px 22px rgba(15,30,45,.055);
}
.preference-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.preference-heading h2 { margin:3px 0 4px; font-size:17px; letter-spacing:-.02em; }
.preference-heading p { max-width:245px; margin:0; color:var(--hint); font-size:10px; line-height:1.45; }
.preference-globe {
  width: 42px; height:42px; flex:0 0 42px; display:grid; place-items:center;
  border-radius:14px; color:var(--accent); background:var(--accent-soft);
}
.preference-globe svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.profile-currency-switch {
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%; height:auto; padding:0; border:0; background:transparent;
}
.profile-currency-switch button {
  position:relative; width:auto; height:auto; min-height:70px; display:flex; align-items:center; gap:9px;
  padding:10px; border:1px solid var(--separator); border-radius:17px;
  background:var(--secondary-bg); color:var(--text); text-align:left;
  box-shadow:none; transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.profile-currency-switch button:active { transform:scale(.975); }
.profile-currency-switch button.active {
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:linear-gradient(145deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 42%,var(--section-bg)));
  box-shadow:0 6px 18px rgba(42,171,238,.12);
}
.currency-symbol {
  width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center;
  border-radius:12px; color:var(--accent); background:var(--section-bg);
  box-shadow:0 3px 10px rgba(15,30,45,.07); font-size:18px; font-weight:800;
}
.profile-currency-switch button.active .currency-symbol { color:#fff; background:linear-gradient(145deg,#55c7f5,#168cd6); }
.profile-currency-switch button > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.profile-currency-switch strong { font-size:11.5px; }
.profile-currency-switch small { color:var(--hint); font-size:8px; font-weight:700; letter-spacing:.06em; }
.currency-check {
  position:absolute; top:7px; right:7px; width:17px; height:17px; display:grid; place-items:center;
  border-radius:50%; color:transparent; background:transparent;
}
.currency-check svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; }
.profile-currency-switch button.active .currency-check { color:#fff; background:var(--accent); }

.bottom-nav {
  bottom: 7px;
  margin: 0 9px 7px;
  padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
  border: 1px solid color-mix(in srgb,var(--separator) 82%,transparent);
  border-radius: 22px;
  background: color-mix(in srgb,var(--bottom-bg) 94%,transparent);
  box-shadow: 0 12px 32px rgba(15,30,45,.14), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: saturate(190%) blur(24px);
}
.nav-item { min-height:58px; gap:4px; border-radius:16px; overflow:hidden; transition:transform .15s ease,color .15s ease; }
.nav-item:active { transform:scale(.94); }
.nav-item > svg { position:relative; z-index:1; width:24px; height:24px; }
.nav-item small { position:relative; z-index:1; font-size:9px; font-weight:700; letter-spacing:-.01em; }
.nav-item.active::before {
  top:4px; bottom:4px; width:calc(100% - 8px); height:auto;
  border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 92%,white),color-mix(in srgb,var(--accent-soft) 58%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
}
.nav-item.active::after {
  content:""; position:absolute; bottom:4px; left:50%; width:14px; height:2px;
  border-radius:999px; background:var(--accent); transform:translateX(-50%);
}
.nav-badge { top:5px; right:calc(50% - 24px); box-shadow:0 2px 7px rgba(225,65,75,.32); }
@media (max-width: 430px) {
  .bottom-nav { margin-left:7px; margin-right:7px; }
  .profile-preferences { padding:14px; }
}


/* ===== ServiceHub v22: true glass header and expandable theme picker ===== */
html[data-theme="blue"] {
  --canvas:#07142e;
  --canvas-glow:rgba(72,124,255,.34);
  --app-bg:#081833;
  --section-bg:rgba(18,39,78,.82);
  --secondary-bg:rgba(20,45,88,.72);
  --tertiary-bg:rgba(40,72,126,.6);
  --header-bg:rgba(7,25,57,.42);
  --bottom-bg:rgba(10,28,62,.58);
  --text:#f6f9ff;
  --hint:#93a8cc;
  --subtitle:#b9c9e8;
  --separator:rgba(157,188,255,.15);
  --accent:#57b6ff;
  --accent-2:#7b6cff;
  --accent-text:#fff;
  --accent-soft:rgba(87,182,255,.16);
  --muted:#a8b8d6;
  --card-shadow:0 16px 40px rgba(0,6,24,.24);
}
html[data-theme="blue"] body,
html[data-theme="blue"] .app {
  background:
    radial-gradient(circle at 86% 3%,rgba(92,86,255,.32),transparent 29%),
    radial-gradient(circle at 4% 27%,rgba(0,173,255,.2),transparent 34%),
    linear-gradient(155deg,#07142f 0%,#0b2550 50%,#101c45 100%);
}
html[data-theme="blue"] .section-count,
html[data-theme="blue"] .profile-preferences,
html[data-theme="blue"] .theme-preferences,
html[data-theme="blue"] .profile-card,
html[data-theme="blue"] .settings-list {
  box-shadow:0 16px 40px rgba(0,5,25,.2),inset 0 1px 0 rgba(255,255,255,.08);
}

.app-header {
  border-bottom:0 !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--header-bg) 92%,transparent),color-mix(in srgb,var(--header-bg) 58%,transparent)) !important;
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  backdrop-filter:blur(30px) saturate(190%);
  box-shadow:none !important;
}
.app-header::after {
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--separator) 75%,transparent),transparent);
  opacity:0;
  transition:opacity .2s ease;
}
.app.scrolled .app-header::after { opacity:1; }
html[data-theme="light"] .app-header {
  background:linear-gradient(180deg,rgba(247,251,255,.64),rgba(247,251,255,.28)) !important;
}
html[data-theme="dark"] .app-header {
  background:linear-gradient(180deg,rgba(12,18,25,.64),rgba(12,18,25,.28)) !important;
}

.theme-preferences {
  position:relative;
  z-index:6;
  margin:13px 0;
  padding:7px;
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--separator));
  border-radius:22px;
  background:color-mix(in srgb,var(--section-bg) 92%,transparent);
  box-shadow:0 7px 24px rgba(15,30,45,.06);
  overflow:visible;
}
.theme-select-trigger {
  width:100%;min-height:68px;display:flex;align-items:center;gap:11px;
  padding:10px 11px;border:0;border-radius:16px;background:transparent;color:var(--text);text-align:left;
  transition:background .18s ease,transform .15s ease;
}
.theme-select-trigger:active { transform:scale(.985); }
.theme-select-trigger[aria-expanded="true"] { background:var(--secondary-bg); }
.theme-trigger-icon {
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:14px;color:#fff;
  background:linear-gradient(145deg,#42c5ff,#536dff 55%,#8d62ff);box-shadow:0 8px 18px rgba(65,116,255,.28);
}
.theme-trigger-icon svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.theme-trigger-copy { min-width:0;display:grid;gap:3px;flex:1; }
.theme-trigger-copy small { color:var(--hint);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.theme-trigger-copy strong { font-size:13px;letter-spacing:-.01em; }
.theme-preview-dots { display:flex;align-items:center;margin-right:2px; }
.theme-preview-dots i { width:13px;height:13px;border:2px solid var(--section-bg);border-radius:50%;margin-left:-4px;box-shadow:0 2px 5px rgba(0,0,0,.12); }
.theme-preview-dots i:nth-child(1){background:#fff}.theme-preview-dots i:nth-child(2){background:#17202b}.theme-preview-dots i:nth-child(3){background:linear-gradient(135deg,#25b9ff,#765cff)}
.theme-trigger-chevron { width:18px;height:18px;fill:none;stroke:var(--hint);stroke-width:2;transition:transform .22s ease; }
.theme-select-trigger[aria-expanded="true"] .theme-trigger-chevron { transform:rotate(180deg); }
.theme-dropdown {
  display:grid;gap:6px;margin-top:6px;padding:6px;border-radius:18px;
  background:color-mix(in srgb,var(--secondary-bg) 88%,transparent);
  animation:themeDrop .22s cubic-bezier(.2,.8,.2,1);
  transform-origin:top;
}
.theme-dropdown[hidden] { display:none; }
@keyframes themeDrop { from{opacity:0;transform:translateY(-8px) scale(.98)} to{opacity:1;transform:none} }
.theme-dropdown button {
  position:relative;width:100%;min-height:62px;display:flex;align-items:center;gap:11px;padding:8px 10px;
  border:1px solid transparent;border-radius:15px;background:transparent;color:var(--text);text-align:left;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.theme-dropdown button:active { transform:scale(.98); }
.theme-dropdown button.active { background:var(--section-bg);border-color:color-mix(in srgb,var(--accent) 22%,var(--separator));box-shadow:0 5px 15px rgba(10,30,55,.08); }
.theme-dropdown button > span:nth-child(2) { display:grid;gap:3px;flex:1; }
.theme-dropdown strong { font-size:12px; }.theme-dropdown small { color:var(--hint);font-size:9px; }
.theme-swatch { width:44px;height:44px;flex:0 0 44px;border-radius:14px;padding:5px;box-shadow:inset 0 0 0 1px rgba(127,150,180,.15); }
.theme-swatch i { display:block;width:100%;height:100%;border-radius:10px;box-shadow:0 3px 8px rgba(0,0,0,.12); }
.theme-swatch-light { background:#edf2f7; }.theme-swatch-light i { background:linear-gradient(145deg,#fff 0 58%,#dce8f3 58%); }
.theme-swatch-dark { background:#141b24; }.theme-swatch-dark i { background:linear-gradient(145deg,#263240 0 58%,#0b1017 58%); }
.theme-swatch-blue { background:#0c2250; }.theme-swatch-blue i { background:linear-gradient(145deg,#25c1ff,#445dff 55%,#8b5cff); }
.theme-option-check { width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:transparent;background:transparent; }
.theme-option-check svg { width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.7; }
.theme-dropdown button.active .theme-option-check { color:#fff;background:linear-gradient(145deg,var(--accent),var(--accent-2)); }
html[data-theme="blue"] .bottom-nav { border-color:rgba(148,188,255,.17);box-shadow:0 18px 44px rgba(0,5,28,.34),inset 0 1px 0 rgba(255,255,255,.09); }

/* ===== ServiceHub v23: visible aurora gradient + dark glass navigation fix ===== */
html[data-theme="blue"] body {
  background:
    radial-gradient(ellipse 82% 52% at 8% 4%, rgba(23,198,255,.42) 0%, rgba(23,198,255,.12) 38%, transparent 68%),
    radial-gradient(ellipse 76% 58% at 94% 14%, rgba(126,79,255,.46) 0%, rgba(126,79,255,.14) 42%, transparent 72%),
    radial-gradient(ellipse 88% 62% at 52% 102%, rgba(0,103,255,.34) 0%, transparent 68%),
    linear-gradient(145deg,#031127 0%,#09275c 34%,#25216f 67%,#071936 100%) !important;
  background-attachment: fixed !important;
}

html[data-theme="blue"] .app {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(155deg,rgba(4,19,48,.84) 0%,rgba(11,44,96,.72) 44%,rgba(45,30,112,.68) 76%,rgba(5,22,53,.84) 100%) !important;
}

html[data-theme="blue"] .app::before,
html[data-theme="blue"] .app::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  filter:blur(18px);
  opacity:.9;
}
html[data-theme="blue"] .app::before {
  width:260px;height:260px;left:-120px;top:95px;border-radius:50%;
  background:radial-gradient(circle,rgba(28,203,255,.42),rgba(28,203,255,.08) 50%,transparent 72%);
}
html[data-theme="blue"] .app::after {
  width:310px;height:310px;right:-165px;top:310px;border-radius:50%;
  background:radial-gradient(circle,rgba(137,77,255,.46),rgba(94,65,255,.1) 52%,transparent 73%);
}

html[data-theme="blue"] .app-header,
html[data-theme="blue"] .bottom-nav {
  background:
    linear-gradient(135deg,rgba(22,77,144,.44),rgba(47,35,122,.30)),
    rgba(4,18,43,.38) !important;
  -webkit-backdrop-filter:blur(34px) saturate(210%) !important;
  backdrop-filter:blur(34px) saturate(210%) !important;
}

/* Remove the bright strip from dark-mode glass bars. */
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .bottom-nav {
  border-color:transparent !important;
  background:linear-gradient(180deg,rgba(15,21,29,.68),rgba(9,14,20,.48)) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) !important;
  backdrop-filter:blur(34px) saturate(180%) !important;
  box-shadow:0 -10px 34px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html[data-theme="dark"] .app-header::after,
html[data-theme="dark"] .bottom-nav::before {
  display:none !important;
  content:none !important;
}

.bottom-nav {
  border-top:0 !important;
  outline:0 !important;
  background-clip:padding-box !important;
}

html[data-theme="dark"] .bottom-nav {
  box-shadow:0 -12px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.018) !important;
}

html[data-theme="blue"] .section-count,
html[data-theme="blue"] .profile-preferences,
html[data-theme="blue"] .theme-preferences,
html[data-theme="blue"] .profile-card,
html[data-theme="blue"] .settings-list,
html[data-theme="blue"] .category-card,
html[data-theme="blue"] .order-card,
html[data-theme="blue"] .support-card {
  background:linear-gradient(145deg,rgba(31,76,143,.50),rgba(37,28,94,.42)) !important;
  border:1px solid rgba(171,204,255,.12) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
}

/* ===== ServiceHub v24: harmonious blue catalog surfaces ===== */
html[data-theme="dark"] .section-count,
html[data-theme="blue"] .section-count {
  border-color: rgba(151, 194, 255, .13) !important;
  background: linear-gradient(135deg, rgba(25, 53, 91, .48), rgba(20, 25, 53, .38)) !important;
  box-shadow: 0 10px 28px rgba(0, 8, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
html[data-theme="dark"] .section-count::before,
html[data-theme="blue"] .section-count::before,
html[data-theme="dark"] .section-count::after,
html[data-theme="blue"] .section-count::after {
  display: none !important;
  content: none !important;
}
html[data-theme="blue"] .section-count-icon {
  background: linear-gradient(145deg, #38d3ff 0%, #4e72ff 55%, #9b65ff 100%) !important;
  box-shadow: 0 6px 16px rgba(70, 112, 255, .35) !important;
}
html[data-theme="blue"] .section-count b { color: #f7fbff; }
html[data-theme="blue"] .section-count { color: rgba(222, 235, 255, .76); }

html[data-theme="blue"] {
  --game-card-bg: rgba(21, 49, 99, .54);
  --game-card-border: rgba(159, 201, 255, .14);
  --game-card-pressed: rgba(42, 66, 132, .68);
  --game-cover-bg: rgba(8, 25, 62, .62);
  --game-search-bg: rgba(13, 38, 82, .48);
  --game-tabs-bg: rgba(7, 25, 61, .42);
}
html[data-theme="blue"] .games-workspace .games-minimal-search,
html[data-theme="blue"] .games-workspace .games-minimal-tabs,
html[data-theme="blue"] .games-workspace .game-mini-card,
html[data-theme="blue"] .games-workspace .games-status-card,
html[data-theme="blue"] .games-workspace .games-platform-chips,
html[data-theme="blue"] .games-workspace .catalog-load-more,
html[data-theme="blue"] .games-workspace .game-detail-section,
html[data-theme="blue"] .games-workspace .game-variant-section,
html[data-theme="blue"] .games-workspace .game-order-card,
html[data-theme="blue"] .games-workspace .game-card {
  background: linear-gradient(145deg, rgba(30, 76, 145, .50), rgba(42, 28, 105, .40)) !important;
  border-color: rgba(165, 204, 255, .14) !important;
  box-shadow: 0 12px 30px rgba(0, 8, 35, .16), inset 0 1px 0 rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}
html[data-theme="blue"] .games-workspace .games-minimal-tabs button.active {
  background: linear-gradient(145deg, rgba(57, 128, 218, .62), rgba(92, 67, 190, .54)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(20, 42, 110, .28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-theme="blue"] .games-workspace .game-mini-cover,
html[data-theme="blue"] .games-workspace .game-cover-fallback {
  background: linear-gradient(145deg, rgba(27, 112, 191, .46), rgba(74, 47, 155, .46)) !important;
  border-color: rgba(170, 214, 255, .15) !important;
}
html[data-theme="blue"] .games-workspace .game-mini-card:hover {
  border-color: rgba(112, 200, 255, .38) !important;
  background: linear-gradient(145deg, rgba(35, 91, 164, .60), rgba(54, 38, 125, .50)) !important;
}
html[data-theme="blue"] .games-workspace .game-mini-card:active {
  background: linear-gradient(145deg, rgba(43, 101, 181, .68), rgba(68, 48, 145, .58)) !important;
}
html[data-theme="blue"] .games-workspace input,
html[data-theme="blue"] .games-workspace input::placeholder,
html[data-theme="blue"] .games-workspace .games-result-copy span,
html[data-theme="blue"] .games-workspace .games-status-card small {
  color: rgba(222, 235, 255, .68) !important;
}
html[data-theme="blue"] .games-workspace .game-mini-copy strong,
html[data-theme="blue"] .games-workspace .games-result-copy strong,
html[data-theme="blue"] .games-workspace .games-status-card strong {
  color: #f7fbff !important;
}


/* ServiceHub Telegram Mini App redesign v28 */
:root {
  --tg-safe-bottom: env(safe-area-inset-bottom);
}

html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 !important;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--tg-theme-bg-color, #ffffff);
  color: var(--tg-theme-text-color, #111111);
}

*, *:before, *:after {
  box-sizing: border-box !important;
}

#app, .app, main, .page, .container, .content, .wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

img, svg, video, canvas {
  max-width: 100% !important;
  height: auto;
}

button, input, textarea, select {
  max-width: 100%;
  font-size: 16px;
}

.card, .box, .panel, .item {
  max-width: 100% !important;
  overflow: hidden;
}

.grid, .cards, .products, .services, .categories {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 12px !important;
}

.bottom-nav, .navbar, .tabs {
  padding-bottom: calc(12px + var(--tg-safe-bottom));
}

@media(max-width:380px){
 .grid, .cards, .products, .services, .categories {
   grid-template-columns: 1fr !important;
 }
}

@media(max-width:430px){
 * {
   letter-spacing: normal !important;
 }
}