:root {
  --c-bg: #f5f1f4;
  --c-surface: rgba(255, 255, 255, 0.78);
  --c-surface-2: rgba(255, 255, 255, 0.56);
  --c-border: rgba(82, 53, 73, 0.10);
  --c-text: #1a0f18;
  --c-text-2: #725f6d;
  --c-text-3: #a993a2;
  --c-accent: #523549;
  --c-accent-2: #7a5070;
  --c-accent-bg: rgba(82, 53, 73, 0.09);
  --c-green: #16a34a;
  --c-green-bg: rgba(22, 163, 74, 0.10);
  --c-red: #dc2626;
  --c-red-bg: rgba(220, 38, 38, 0.09);
  --c-amber: #b45309;
  --c-amber-bg: rgba(180, 83, 9, 0.09);
  --blur: 8px;
  --sat: 160%;
  --r: 16px;
  --r-sm: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow: 0 8px 22px rgba(82, 53, 73, 0.055), 0 1px 2px rgba(82, 53, 73, 0.04);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --glass-shadow:
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.34),
    inset 2px 2px 0 -2px rgba(255, 255, 255, 0.48),
    inset -2px -2px 2px -2px rgba(255, 255, 255, 0.48),
    inset -1.8px -3px 0 -2px rgba(255, 255, 255, 0.34);
}

.dark-theme {
  --c-bg: #0f0e11;
  --c-surface: rgba(255, 255, 255, 0.075);
  --c-surface-2: rgba(255, 255, 255, 0.045);
  --c-border: rgba(255, 255, 255, 0.10);
  --c-text: #f1f0f3;
  --c-text-2: #9a8fa0;
  --c-text-3: #5f5966;
  --c-accent: #c084fc;
  --c-accent-2: #d8b4fe;
  --c-accent-bg: rgba(192, 132, 252, 0.13);
  --c-green: #4ade80;
  --c-green-bg: rgba(74, 222, 128, 0.11);
  --c-red: #f87171;
  --c-red-bg: rgba(248, 113, 113, 0.11);
  --c-amber: #fbbf24;
  --c-amber-bg: rgba(251, 191, 36, 0.11);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);
  --glass-shadow:
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.05),
    inset 2px 2px 0 -2px rgba(255, 255, 255, 0.08),
    inset -2px -2px 2px -2px rgba(255, 255, 255, 0.08),
    inset -1.8px -3px 0 -2px rgba(255, 255, 255, 0.05);
}

body.store-theme-light {
  --c-bg: #f3f4f6;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-border: rgba(15, 23, 42, 0.07);
  --c-text: #141827;
  --c-text-2: #687084;
  --c-text-3: #a8afbd;
  --c-accent: #7c3aed;
  --c-accent-2: #8b5cf6;
  --c-accent-bg: rgba(124, 58, 237, 0.10);
  --blur: 0px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --glass-shadow: none;
}

body.store-theme-dark,
body.store-theme-minimal {
  --c-bg: #09090b;
  --c-surface: #121214;
  --c-surface-2: #18181b;
  --c-border: transparent;
  --c-text: #f4f4f5;
  --c-text-2: #a1a1aa;
  --c-text-3: #52525b;
  --c-accent: #f4f4f5;
  --c-accent-2: #d4d4d8;
  --c-accent-bg: rgba(244, 244, 245, 0.08);
  --blur: 0px;
  --shadow: none;
  --glass-shadow: none;
}

body.store-theme-graphite {
  --c-bg: #111113;
  --c-surface: #1b1b1f;
  --c-surface-2: #24242a;
  --c-border: rgba(255, 255, 255, 0.05);
  --c-text: #f2f2f3;
  --c-text-2: #a0a0a8;
  --c-text-3: #5f6068;
  --c-accent: #e5e7eb;
  --c-accent-2: #cbd5e1;
  --c-accent-bg: rgba(229, 231, 235, 0.09);
  --blur: 0px;
  --shadow: none;
  --glass-shadow: none;
}

body.store-theme-dark .list-item,
body.store-theme-dark .search-input,
body.store-theme-dark .package-card,
body.store-theme-dark .card,
body.store-theme-minimal .list-item,
body.store-theme-minimal .search-input,
body.store-theme-minimal .package-card,
body.store-theme-minimal .card,
body.store-theme-graphite .list-item,
body.store-theme-graphite .search-input,
body.store-theme-graphite .package-card,
body.store-theme-graphite .card {
  border-color: transparent;
  box-shadow: none;
}

body.store-theme-light .tabs {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

body.store-theme-light .store-tabs .tab {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}

body.store-theme-light .tab-indicator {
  background: rgba(124, 58, 237, 0.12);
  box-shadow: none;
}

body.store-theme-light .country-row,
body.store-theme-light .package-card,
body.store-theme-light .order-card,
body.store-theme-light .card {
  border-radius: 20px;
  background: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

body.store-theme-light .search-input {
  border-radius: 18px;
  background: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

body.store-theme-dark .country-list,
body.store-theme-dark .package-list,
body.store-theme-dark .order-list,
body.store-theme-minimal .country-list,
body.store-theme-minimal .package-list,
body.store-theme-minimal .order-list {
  gap: 13px;
}

body.store-theme-dark .country-row,
body.store-theme-dark .package-card,
body.store-theme-dark .order-card,
body.store-theme-dark .card,
body.store-theme-minimal .country-row,
body.store-theme-minimal .package-card,
body.store-theme-minimal .order-card,
body.store-theme-minimal .card {
  border-radius: 10px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
}

body.store-theme-dark .search-input,
body.store-theme-minimal .search-input {
  border-radius: 0;
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: none;
  padding-left: 34px;
}

body.store-theme-graphite .country-row,
body.store-theme-graphite .package-card,
body.store-theme-graphite .order-card,
body.store-theme-graphite .card,
body.store-theme-graphite .search-input,
body.store-theme-graphite .sort-chip {
  border-radius: 8px;
  background: #1b1b1f;
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

body.store-theme-graphite .country-row,
body.store-theme-graphite .package-card,
body.store-theme-graphite .order-card {
  min-height: 52px;
}

body.store-theme-graphite .country-flag,
body.store-theme-graphite .pkg-hero-flag {
  border-radius: 6px;
}

body.store-theme-dark .tabs,
body.store-theme-minimal .tabs,
body.store-theme-graphite .tabs {
  background: rgba(20, 18, 26, 0.72);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    var(--glass-shadow),
    0 8px 40px rgba(0, 0, 0, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.24);
}

body.store-theme-dark .tab-indicator,
body.store-theme-minimal .tab-indicator,
body.store-theme-graphite .tab-indicator {
  background: var(--c-accent-bg);
  box-shadow: none;
}

body.store-theme-dark .tab.active,
body.store-theme-minimal .tab.active,
body.store-theme-graphite .tab.active {
  color: var(--c-accent);
}

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

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

html {
  scroll-behavior: smooth;
}

body::before {
  content: none;
}

#app {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 12px 16px calc(var(--safe-bottom) + 24px);
  position: relative;
}

body.has-tabs #app {
  padding-bottom: calc(var(--safe-bottom) + 96px);
}

@media (min-width: 600px) {
  body { display: flex; justify-content: center; }
  #app {
    min-height: 100dvh;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.18);
  }
}

.loader, .boot-card {
  min-height: calc(100dvh - 32px);
  display: grid;
  place-items: center;
  color: var(--c-text-2);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #7d5475 0%, #523549 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 5px 18px rgba(82, 53, 73, 0.28);
}

.title {
  font-size: 19px;
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: 0;
}

.subtitle {
  color: var(--c-text-2);
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs {
  --switcher-transition: .25s cubic-bezier(1, 0, .4, 1);
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 16px);
  z-index: 20;
  width: fit-content;
  max-width: calc(100% - 28px);
  min-width: 220px;
  min-height: 58px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.50);
  border-radius: 999px;
  backdrop-filter: blur(12px) saturate(220%);
  -webkit-backdrop-filter: blur(12px) saturate(220%);
  box-shadow:
    var(--glass-shadow),
    0 8px 32px rgba(82, 53, 73, 0.18),
    0 2px 8px rgba(82, 53, 73, 0.10);
}

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

.dark-theme .tabs {
  background: rgba(20, 18, 26, 0.70);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    var(--glass-shadow),
    0 8px 40px rgba(0, 0, 0, 0.65),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

.tab-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    var(--glass-shadow),
    0 2px 8px rgba(82, 53, 73, 0.12);
  transition: left var(--switcher-transition), width var(--switcher-transition);
}

.dark-theme .tab-indicator {
  background: rgba(192, 132, 252, 0.18);
  box-shadow:
    var(--glass-shadow),
    0 2px 12px rgba(147, 51, 234, 0.25);
}

.tab {
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  min-height: 48px;
  background: transparent;
  color: var(--c-text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 7px;
  min-width: 92px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color var(--switcher-transition), opacity .12s;
  -webkit-tap-highlight-color: transparent;
}

.tab svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab.active {
  color: var(--c-accent);
}

.tabs.compact {
  min-width: 0;
  width: min(398px, calc(100% - 24px));
}

.tabs.compact .tab {
  min-width: 0;
  flex: 1 1 0;
  padding: 0 8px;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
}

.tabs.compact .tab svg {
  width: 18px;
  height: 18px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pageIn 0.28s var(--ease-out);
}

@keyframes pageIn {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes itemIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sheetFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheetSlideIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -12px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
}

@keyframes softPulse {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}

.panel, .metric, .empty, .input, .textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: var(--glass-shadow), var(--shadow);
}

.panel {
  border-radius: var(--r);
  padding: 16px;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .18s var(--ease-soft), opacity .18s var(--ease-soft), background .22s var(--ease-soft), border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}

.loading-panel {
  min-height: 72px;
  justify-content: center;
  animation: itemIn .18s var(--ease-out) both, softPulse 1.2s ease-in-out infinite;
}

main > .panel,
main > .hero-panel,
main > .guide-panel,
.stack > .panel {
  animation: itemIn .26s var(--ease-out) both;
}

main > .panel:nth-child(2),
.stack > .panel:nth-child(2) { animation-delay: .035s; }

main > .panel:nth-child(3),
.stack > .panel:nth-child(3) { animation-delay: .07s; }

main > .panel:nth-child(n+4),
.stack > .panel:nth-child(n+4) { animation-delay: .1s; }

.hero-panel {
  min-height: 250px;
  padding: 26px 18px 20px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(125, 84, 117, 0.24), transparent 56%),
    var(--c-surface);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: var(--glass-shadow), var(--shadow);
  transition: transform .2s var(--ease-soft), opacity .2s var(--ease-soft), box-shadow .22s var(--ease-soft);
}

.hero-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: var(--c-accent);
  background: var(--c-accent-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-mark svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-panel h1,
.page-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 820;
  letter-spacing: 0;
}

.hero-panel p {
  margin: 0;
  max-width: 320px;
  color: var(--c-text-2);
  font-size: 14px;
  line-height: 1.45;
}

.hero-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.guide-panel {
  margin-top: 12px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px;
  border-radius: var(--r);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft), border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}

button.guide-step {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.guide-step:active {
  transform: translateY(1px) scale(.992);
}

.guide-step.active {
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 12px rgba(82, 53, 73, 0.08);
}

.guide-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(170deg, #7d5475 0%, #523549 100%);
  font-size: 13px;
  font-weight: 800;
}

.guide-step b,
.plan-card b {
  display: block;
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.2;
}

.guide-step span,
.plan-card span,
.hint {
  display: block;
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.42;
}

.plan-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.plan-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-radius: var(--r);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
  transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft), border-color .2s var(--ease-soft);
}

.plan-card.locked {
  opacity: .72;
}

.plan-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--c-accent);
  background: var(--c-accent-bg);
}

.plan-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 12px;
}

.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.bot-card {
  margin-bottom: 0;
}

.bot-card:active {
  transform: translateY(1px) scale(.995);
}

.bot-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bot-card-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #7a506f, #4b2d43);
  box-shadow: 0 12px 24px rgba(82, 53, 73, .14);
  font-size: 18px;
  font-weight: 850;
}

.bot-card-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bot-card-title {
  min-width: 0;
}

.bot-card-title .h2,
.bot-card-title .tiny {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.bot-card-actions.no-open {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bot-quick-action {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(82, 53, 73, 0.07);
  border-radius: 15px;
  color: var(--c-text);
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 8px 22px rgba(82, 53, 73, .05);
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  transition: transform .16s var(--ease-soft), background .18s var(--ease-soft), border-color .18s var(--ease-soft);
}

.bot-quick-action.primary {
  color: #fff;
  border-color: rgba(122, 80, 112, .20);
  background: linear-gradient(145deg, #9d638d, #5c344f);
}

.bot-quick-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bot-quick-action .telegram-logo {
  fill: currentColor;
  stroke: none;
}

.bot-quick-action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-quick-action:active {
  transform: translateY(1px) scale(.985);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 760;
}

.muted { color: var(--c-text-2); }
.tiny { color: var(--c-text-2); font-size: 12px; }
.error { color: var(--c-red); }
.ok { color: var(--c-green); }

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

.metric {
  border-radius: var(--r-sm);
  padding: 12px;
  min-height: 78px;
  transition: transform .18s var(--ease-soft), background .22s var(--ease-soft), border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}

.metric:active {
  transform: translateY(1px) scale(.995);
}

.metric .label {
  color: var(--c-text-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.metric .value {
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  border: 0;
  border-radius: 14px;
  padding: 13px 15px;
  min-height: 46px;
  color: #fff;
  background: linear-gradient(170deg, #7d5475 0%, #523549 100%);
  font: inherit;
  font-weight: 730;
  cursor: pointer;
  transition: opacity .16s var(--ease-soft), transform .16s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s var(--ease-soft), color .2s var(--ease-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px rgba(82, 53, 73, 0.16);
}

.btn:active { opacity: .82; transform: translateY(1px) scale(.99); }

.btn.secondary {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--c-border);
  box-shadow: 0 3px 10px rgba(82, 53, 73, 0.045);
}

.btn.danger {
  color: #fff;
  background: linear-gradient(170deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.24);
}

.btn.small {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 12px;
}

.btn.full { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
button.is-loading {
  cursor: wait;
  pointer-events: none;
  filter: saturate(.82);
}
.btn.is-loading,
.pay-option.is-loading,
.level-card.is-loading,
.theme-option.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn-loader,
button.is-loading-empty::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .46);
  border-top-color: #fff;
  animation: buttonSpin .72s linear infinite;
}
button.is-loading-empty::after {
  content: "";
}
.btn.secondary .btn-loader,
.btn.secondary.is-loading-empty::after,
.pay-option .btn-loader,
.pay-option.is-loading-empty::after,
.level-card .btn-loader,
.level-card.is-loading-empty::after,
.theme-option .btn-loader,
.theme-option.is-loading-empty::after {
  border-color: rgba(82, 53, 73, .20);
  border-top-color: var(--c-accent);
}
.panel.is-busy,
.hub-panel.is-busy,
.sheet.is-busy {
  opacity: .78;
  transition: opacity .16s var(--ease-soft), filter .16s var(--ease-soft);
  filter: saturate(.92);
}
.panel.is-busy :is(input, textarea, select, button):not(.is-loading),
.hub-panel.is-busy :is(input, textarea, select, button):not(.is-loading),
.sheet.is-busy :is(input, textarea, select, button):not(.is-loading) {
  pointer-events: none;
}
@keyframes buttonSpin { to { transform: rotate(360deg); } }

.input, .textarea {
  width: 100%;
  border-radius: var(--r-sm);
  padding: 12px 13px;
  color: var(--c-text);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.input:focus, .textarea:focus { border-color: rgba(82, 53, 73, .34); }

.label {
  display: block;
  color: var(--c-text-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 2px 0 -4px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--r-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

tbody tr {
  animation: itemIn .22s var(--ease-out) both;
  transition: background .16s var(--ease-soft), opacity .16s var(--ease-soft);
}

tbody tr:nth-child(2) { animation-delay: .025s; }
tbody tr:nth-child(3) { animation-delay: .05s; }
tbody tr:nth-child(4) { animation-delay: .075s; }
tbody tr:nth-child(n+5) { animation-delay: .1s; }

tr.clickable:active {
  opacity: .78;
}

th, td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(122, 88, 117, 0.12);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--c-text-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
}

tr:last-child td { border-bottom: 0; }
.num { text-align: right; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--c-accent-bg);
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.chip.green { color: var(--c-green); background: var(--c-green-bg); }
.chip.red { color: var(--c-red); background: var(--c-red-bg); }
.chip.amber { color: var(--c-amber); background: var(--c-amber-bg); }
.chip.blue { color: var(--c-accent); background: var(--c-accent-bg); }

body.admin-app {
  --c-bg: #0b0a0d;
  --c-surface: rgba(255, 255, 255, 0.070);
  --c-surface-2: rgba(255, 255, 255, 0.050);
  --c-border: rgba(255, 255, 255, 0.10);
  --c-text: #f5f2f6;
  --c-text-2: #aaa0ad;
  --c-text-3: #69616d;
  --c-accent: #d38ac5;
  --c-accent-2: #f0b8e1;
  --c-accent-bg: rgba(211, 138, 197, 0.13);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.18);
  min-height: 100vh;
  background: linear-gradient(180deg, #111013 0%, #080709 100%);
}

body.admin-app #app {
  width: min(100%, 430px);
  max-width: 430px;
  margin: 0 auto;
  padding: 12px 14px calc(24px + var(--safe-bottom));
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 18;
  margin: -16px -14px 14px;
  padding: 16px 14px 10px;
  background: linear-gradient(180deg, rgba(247, 239, 245, 0.96) 0%, rgba(247, 239, 245, 0.82) 78%, rgba(247, 239, 245, 0) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #8b557d, #4b2d42);
  box-shadow: 0 14px 30px rgba(82, 53, 73, 0.22);
  font-weight: 850;
}

.admin-title {
  font-size: 21px;
  line-height: 1.05;
  font-weight: 840;
  letter-spacing: 0;
}

.admin-subtitle {
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
}

.admin-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 2px;
}

.admin-page-head h1 {
  margin: 0;
  color: var(--c-text);
  font-size: 25px;
  line-height: 1.05;
  font-weight: 850;
}

.admin-page-head span {
  display: block;
  margin-top: 6px;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.3;
}

body.admin-app .panel,
body.admin-app .metric,
body.admin-app .empty {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow);
}

body.admin-app .panel {
  border-radius: 20px;
  padding: 16px;
}

body.admin-app .metric {
  border-radius: 18px;
  min-height: 82px;
  padding: 14px;
}

body.admin-app .metric .value {
  font-size: 24px;
}

.admin-metrics {
  gap: 12px;
}

.admin-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.admin-action-grid .btn:first-child,
.admin-action-grid .btn:last-child {
  grid-column: auto;
}

.admin-action-grid-flat {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.admin-app .btn {
  border-radius: 18px;
}

body.admin-app .btn.secondary {
  background: rgba(255, 255, 255, 0.075);
}

body.admin-app .btn.secondary.selected {
  color: var(--c-accent);
  background: var(--c-accent-bg);
  border-color: rgba(96, 54, 79, 0.18);
}

body.admin-app .input,
body.admin-app .textarea {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: none;
}

body.admin-app .table-wrap {
  margin-top: 10px;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.admin-list-compact {
  gap: 8px;
  margin-top: 8px;
}

.admin-dense-panel .section-head {
  margin-bottom: 4px;
}

.admin-row {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font: inherit;
  text-align: left;
  transition: transform .16s var(--ease-soft), background .18s var(--ease-soft), border-color .18s var(--ease-soft), opacity .18s var(--ease-soft);
}

.admin-list-compact .admin-row {
  min-height: 58px;
  padding: 11px 12px;
  border-radius: 16px;
}

button.admin-row {
  cursor: pointer;
}

button.admin-row:active {
  transform: translateY(1px) scale(.994);
}

button.admin-row:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.13);
}

.admin-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-row-main b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 780;
  white-space: nowrap;
}

.admin-row-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.admin-row > strong {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1;
  font-weight: 820;
  white-space: nowrap;
}

.admin-row-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-row-meta em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--c-text-2);
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 700;
}

.admin-row-meta .chip {
  min-height: 24px;
  padding: 4px 8px;
  font-size: 11px;
}

.payment-method-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.payment-method-row.selected {
  border-color: rgba(181, 116, 160, 0.52);
  background: rgba(211, 138, 197, 0.11);
}

.payment-method-row .admin-row-meta {
  grid-column: 2 / -1;
}

body.admin-app table {
  min-width: 520px;
}

body.admin-app th,
body.admin-app td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.admin-app tr.clickable:hover {
  background: rgba(255, 255, 255, 0.05);
}

.muted-row {
  opacity: .46;
}

body.admin-app .pay-option {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

body.admin-app .icon-picker.selected {
  color: var(--c-text);
  border-color: rgba(181, 116, 160, 0.55);
  background: rgba(181, 116, 160, 0.12);
}

.method-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}

.icon-picker {
  min-height: 70px;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
}

.icon-picker > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.admin-app .admin-tabs {
  position: sticky;
  top: calc(8px + var(--safe-top));
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  min-height: 58px;
  margin: 0 0 12px;
  padding: 7px;
  justify-content: flex-start;
  border-radius: 20px;
  background: rgba(18, 15, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

body.admin-app .admin-tabs .tab {
  flex: 0 0 72px;
  min-width: 72px;
  min-height: 50px;
  padding-inline: 8px;
  border-radius: 15px;
}

body.admin-app .admin-tabs .tab svg {
  width: 19px;
  height: 19px;
}

body.admin-app .admin-tabs .tab span {
  font-size: 10px;
}

body.admin-app .admin-tabs .tab-indicator {
  top: 7px;
  height: calc(100% - 14px);
  border-radius: 15px;
  background: rgba(211, 138, 197, 0.15);
  box-shadow: none;
}

.admin-filter-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: none;
}

.admin-filter-bar::-webkit-scrollbar {
  display: none;
}

.admin-filter-bar button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--c-text-2);
  background: rgba(255, 255, 255, 0.055);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.admin-filter-bar button.active {
  color: var(--c-text);
  border-color: rgba(211, 138, 197, 0.36);
  background: rgba(211, 138, 197, 0.13);
}

.admin-editor-panel,
.admin-settings-panel {
  display: grid;
  gap: 10px;
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-diagnostics-output {
  min-height: 18px;
  margin-top: 8px;
}

.economy-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.economy-product-row small,
.economy-level-main span,
.economy-level-controls span,
.economy-product-meta span,
.economy-field span {
  color: var(--c-text-2);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 720;
}

.economy-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.economy-level-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.economy-level-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
}

.economy-product-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}

.economy-product-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.economy-product-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--c-accent-2);
  background: linear-gradient(145deg, rgba(211, 138, 197, 0.18), rgba(255, 255, 255, 0.07));
}

.economy-product-icon svg {
  width: 20px;
  height: 20px;
}

.economy-product-icon svg *,
.economy-level-badge svg * {
  stroke: currentColor;
}

.economy-product-top b,
.economy-level-main b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 820;
  white-space: nowrap;
}

.economy-product-meta {
  display: grid;
  grid-template-columns: minmax(92px, .8fr) minmax(126px, 1.2fr);
  gap: 8px;
}

.economy-product-presets-row {
  grid-template-columns: 1fr;
}

.economy-level-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.economy-product-meta label,
.economy-level-controls label,
.economy-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.economy-markup-field {
  position: relative;
}

.economy-markup-field .input {
  padding-right: 30px;
}

.economy-markup-field em {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: var(--c-text-3);
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
}

.economy-level-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.economy-level-card::after {
  display: none;
}

.economy-level-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.economy-level-badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.08);
  font-size: 15px;
  font-weight: 860;
}

.economy-level-main {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  min-height: 48px;
}

.economy-level-price {
  position: relative;
  z-index: 1;
  color: var(--c-text);
  font-size: 22px;
  line-height: 1;
  font-weight: 860;
  white-space: nowrap;
}

.economy-level-controls {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.economy-level-requirement {
  grid-column: 1 / -1;
}

.economy-level-card.level-1 {
  border-color: rgba(190, 190, 198, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.economy-level-card.level-2 {
  border-color: rgba(218, 184, 108, 0.30);
  background: rgba(218, 184, 108, 0.07);
}

.economy-products .btn,
.economy-levels .btn {
  margin-top: 12px;
}

.level-panel {
  margin-top: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.level-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.level-card {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(82, 53, 73, 0.08);
  border-radius: 16px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(82, 53, 73, 0.05);
  font: inherit;
  text-align: left;
}

.level-card.active {
  border-color: rgba(82, 53, 73, 0.16);
  background: linear-gradient(145deg, rgba(122, 88, 117, 0.10), rgba(255, 255, 255, 0.78));
}

.level-card.level-basic {
  border-color: rgba(174, 119, 73, 0.34);
}

.level-card.level-business {
  border-color: rgba(139, 148, 165, 0.38);
}

.level-card.level-enterprise {
  border-color: rgba(190, 145, 49, 0.44);
}

.level-card.level-basic.active {
  background: linear-gradient(145deg, rgba(174, 119, 73, 0.13), rgba(255, 255, 255, 0.80));
}

.level-card.level-business.active {
  background: linear-gradient(145deg, rgba(139, 148, 165, 0.14), rgba(255, 255, 255, 0.82));
}

.level-card.level-enterprise.active {
  background: linear-gradient(145deg, rgba(190, 145, 49, 0.16), rgba(255, 255, 255, 0.84));
}

.level-card span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.level-card b {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 820;
}

.level-card small {
  color: var(--c-text-2);
  font-size: 11px;
  line-height: 1.2;
}

.level-card strong {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 850;
}

@media (max-width: 430px) {
  body.admin-app #app {
    padding-inline: 12px;
  }

  .admin-topbar {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .admin-action-grid {
    grid-template-columns: 1fr;
  }

  .admin-action-grid .btn:first-child,
  .admin-action-grid .btn:last-child {
    grid-column: auto;
  }

  body.admin-app .admin-tabs {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  body.admin-app .admin-tabs .tab {
    min-width: 70px;
    flex: 0 0 70px;
  }

  .economy-product-row,
  .economy-level-grid {
    grid-template-columns: 1fr;
  }

  .economy-product-meta,
  .economy-level-controls,
  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 760px) {
  .economy-product-row,
  .economy-level-grid {
    grid-template-columns: 1fr;
  }

  .economy-product-row {
    align-items: stretch;
  }

  .economy-product-meta,
  .economy-level-controls {
    grid-template-columns: 1fr 1fr;
  }

  .economy-level-card {
    min-height: 0;
  }
}

@media (max-width: 420px) {
  .economy-product-meta,
  .economy-level-controls {
    grid-template-columns: 1fr;
  }
}

.empty {
  color: var(--c-text-2);
  padding: 28px 14px;
  text-align: center;
  border-radius: var(--r);
  box-shadow: none;
}

.clickable { cursor: pointer; }
.clickable:active { opacity: .82; transform: translateY(1px) scale(.995); }

.url-card {
  border-radius: var(--r);
  padding: 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}

.url-box {
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
  padding: 10px 11px;
  border-radius: var(--r-sm);
  color: var(--c-accent);
  background: var(--c-accent-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}

.url-actions {
  margin-top: 10px;
}

.url-actions .btn {
  flex: 1 1 0;
}

.store-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 14px;
}

.store-title {
  font-size: 22px;
  line-height: 1.08;
  font-weight: 820;
}

.store-main {
  gap: 10px;
}

.store-subhead {
  align-items: center;
  margin: 2px 0 4px;
}

.store-search {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-bottom: 4px;
  background: var(--c-bg);
}

.country-list,
.package-list,
.order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.country-row,
.package-card,
.order-card {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft), border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}

.country-row:active,
.package-card:active,
.order-card:active {
  transform: translateY(1px) scale(.992);
}

.country-row span,
.package-card b,
.order-card b {
  font-weight: 760;
}

.country-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.country-main > span:last-child {
  min-width: 0;
}

.country-flag {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c-surface-2);
  overflow: hidden;
}

.country-flag svg,
.order-product-icon svg,
.digital-icon svg {
  color: currentColor;
  stroke: currentColor;
  fill: none;
}

.country-flag svg *,
.order-product-icon svg *,
.digital-icon svg * {
  stroke: currentColor;
  fill: none;
}

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

.flag-fallback {
  color: var(--c-text);
  font-size: 11px;
  font-weight: 800;
}

.country-arrow {
  color: var(--c-text-3);
  font-size: 22px;
}

.support-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-card {
  padding: 15px;
  border-radius: var(--r);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
}

.support-card b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.support-card span {
  display: block;
  margin-top: 5px;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.45;
}

.country-row small,
.package-card small,
.order-card small {
  display: block;
  margin-top: 2px;
  color: var(--c-text-2);
  font-size: 12px;
}

.package-card strong,
.order-card strong {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--c-accent);
}

.small-value {
  font-size: 12px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}

.store-tabs {
  width: min(270px, calc(100% - 72px));
  min-width: 0;
  min-height: 62px;
}

.store-tabs .tab {
  min-width: 0;
  width: auto;
  flex: 1 1 0;
  padding: 0 10px;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  line-height: 1.05;
}

.store-tabs .tab svg {
  width: 20px;
  height: 20px;
}

.store-tabs .tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

code {
  background: var(--c-accent-bg);
  color: var(--c-accent);
  border-radius: 8px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(18, 13, 17, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: sheetFadeIn .18s var(--ease-out);
}

.sheet {
  width: min(100%, 430px);
  max-height: min(78dvh, 620px);
  overflow-y: auto;
  border-radius: 22px 22px 18px 18px;
  padding: 10px 16px calc(var(--safe-bottom) + 16px);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22), var(--glass-shadow);
  transform-origin: 50% 100%;
  animation: sheetSlideIn .28s var(--ease-out);
}

.sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  margin: 0 auto 12px;
  background: var(--c-text-3);
  opacity: .55;
}

.sheet-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.sheet-options {
  margin-top: 2px;
}

.toast-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  z-index: 140;
  width: min(calc(100% - 28px), 430px);
  transform: translateX(-50%);
  animation: toastIn .24s var(--ease-out) both;
  pointer-events: none;
}

.toast-card {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-bg) 88%, white 12%);
  border: 1px solid var(--c-border);
  box-shadow: 0 16px 44px rgba(18, 13, 17, .18), var(--glass-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.toast-card b,
.toast-card span {
  display: block;
}

.toast-card b {
  font-size: 14px;
  line-height: 1.2;
}

.toast-card span {
  margin-top: 2px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.3;
}

.toast-hide {
  animation: toastOut .2s var(--ease-soft) both;
}

.icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-text);
  background: var(--c-surface);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pay-option {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft), border-color .2s var(--ease-soft);
}

.pay-option-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.pay-option-left > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.payment-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px rgba(18, 13, 17, 0.12);
}

.payment-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-icon-sbp {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.30), transparent 30%),
    linear-gradient(145deg, #18a85c, #147fd2 52%, #7a4de8);
}

.payment-icon-card {
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(145deg, #42526e, #1d2433);
}

.payment-icon-crypto {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.30), transparent 32%),
    linear-gradient(145deg, #f0a63b, #8d5c7d 58%, #443052);
}

.pay-option:active {
  transform: translateY(1px) scale(.99);
}

.pay-option:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.pay-option b,
.pay-option small {
  display: block;
}

.pay-option small {
  margin-top: 2px;
  color: var(--c-text-2);
  font-size: 12px;
}

.pay-arrow {
  color: var(--c-text-2);
  font-size: 24px;
  line-height: 1;
}

.tma-preview {
  display: grid;
  place-items: center;
  padding: 4px 0 2px;
}

.tma-preview-phone {
  width: min(100%, 250px);
  border-radius: 22px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(82, 53, 73, 0.08);
  box-shadow: 0 14px 34px rgba(82, 53, 73, .12);
}

.theme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.theme-option {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 10px;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: center;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft), border-color .2s var(--ease-soft);
}

.theme-option:active {
  transform: translateY(1px) scale(.992);
}

.theme-option:disabled {
  opacity: .74;
  cursor: default;
}

.theme-option.active {
  border-color: rgba(192, 132, 252, .45);
  background: var(--c-accent-bg);
}

.theme-option b,
.theme-option small {
  display: block;
}

.theme-option small {
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 12px;
}

.theme-preview {
  height: 180px;
  border-radius: 18px;
  padding: 12px;
  padding-bottom: 46px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--c-bg);
  color: var(--c-text);
}

.theme-option .theme-preview {
  height: 88px;
  border-radius: 14px;
  padding: 8px;
  gap: 5px;
}

.theme-option .theme-preview-compact {
  padding-bottom: 8px;
}

.theme-preview .search-wrap {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
}

.theme-preview .search-icon {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
}

.theme-preview .search-input {
  min-height: 29px;
  border-radius: 10px;
  padding: 8px 10px 8px 26px;
  font-size: 10px;
  line-height: 1;
}

.theme-preview .country-list {
  gap: 5px;
  min-height: 0;
  overflow: hidden;
}

.theme-preview .list-item {
  min-height: 33px;
  border-radius: 10px;
  padding: 6px 7px;
  gap: 7px;
}

.theme-preview .country-flag-wrap {
  width: 24px;
  height: 18px;
  border-radius: 3px;
}

.theme-preview .country-flag-wrap .flag-img {
  border-radius: 3px;
}

.theme-preview .list-item-title {
  font-size: 10px;
  line-height: 1;
}

.theme-preview .list-item-sub {
  margin-top: 2px;
  font-size: 8px;
  line-height: 1;
}

.theme-preview .list-item-arrow {
  width: 10px;
  height: 10px;
}

.theme-preview .tabs {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(82%, 180px);
  min-width: 0;
  min-height: 28px;
  max-width: none;
  margin: 0;
  padding: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(20, 18, 26, 0.76);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.theme-option .theme-preview .tabs {
  left: 8px;
  right: 8px;
  bottom: 6px;
  min-height: 22px;
  padding: 2px;
}

.theme-preview .tab-indicator {
  display: none;
}

.theme-preview .tab {
  min-width: 0;
  width: auto;
  flex: 1 1 0;
  min-height: 22px;
  padding: 0 4px;
  gap: 2px;
  flex-direction: column;
  color: var(--c-text-3);
  font-size: 7px;
  line-height: 1;
}

.theme-option .theme-preview .tab {
  min-height: 18px;
  font-size: 0;
}

.theme-preview .tab svg {
  width: 10px;
  height: 10px;
}

.theme-preview .tab.active {
  color: var(--c-accent);
  background: var(--c-accent-bg);
  box-shadow: none;
}

.theme-preview-light .tabs {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
}

.theme-preview-light .tab {
  color: #6b7280;
}

.theme-preview-light .tab.active {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}

.theme-option .theme-preview .list-item {
  min-height: 24px;
  border-radius: 8px;
  padding: 4px 5px;
  gap: 5px;
}

.theme-option .theme-preview .country-flag-wrap {
  width: 18px;
  height: 13px;
}

.theme-option .theme-preview .list-item-title {
  font-size: 8px;
}

.theme-option .theme-preview .list-item-sub,
.theme-option .theme-preview .list-item-arrow {
  display: none;
}

.theme-option .theme-preview .search-input {
  min-height: 23px;
  border-radius: 8px;
  padding: 6px 8px 6px 22px;
  font-size: 8px;
}

.theme-option .theme-preview .search-icon {
  left: 7px;
  width: 10px;
  height: 10px;
}

.theme-preview-light {
  --c-bg: #f7f8fb;
  --c-surface: #ffffff;
  --c-surface-2: #eef1f6;
  --c-border: rgba(20, 24, 35, 0.08);
  --c-text: #141827;
  --c-text-2: #687084;
  --c-text-3: #a8afbd;
  --c-accent: #7c3aed;
  --c-accent-bg: rgba(124, 58, 237, 0.10);
  --glass-shadow: none;
  --shadow: 0 4px 24px rgba(20, 24, 35, 0.07), 0 1px 3px rgba(20, 24, 35, 0.04);
}

.theme-preview-light .list-item,
.theme-preview-light .search-input {
  border-radius: 14px;
  background: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.theme-preview-dark,
.theme-preview-minimal {
  --c-bg: #09090b;
  --c-surface: #121214;
  --c-surface-2: #18181b;
  --c-border: transparent;
  --c-text: #f4f4f5;
  --c-text-2: #a1a1aa;
  --c-text-3: #52525b;
  --c-accent: #f4f4f5;
  --c-accent-bg: rgba(244, 244, 245, 0.08);
  --glass-shadow: none;
  --shadow: none;
}

.theme-preview-dark .country-list,
.theme-preview-minimal .country-list {
  gap: 8px;
}

.theme-preview-dark .list-item,
.theme-preview-minimal .list-item {
  background: transparent;
  padding-inline: 0;
}

.theme-preview-dark .search-input,
.theme-preview-minimal .search-input {
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  padding-left: 24px;
}

.theme-preview-graphite {
  --c-bg: #111113;
  --c-surface: #1b1b1f;
  --c-surface-2: #24242a;
  --c-border: rgba(255, 255, 255, 0.05);
  --c-text: #f2f2f3;
  --c-text-2: #a0a0a8;
  --c-text-3: #5f6068;
  --c-accent: #e5e7eb;
  --c-accent-bg: rgba(229, 231, 235, 0.09);
  --glass-shadow: none;
  --shadow: none;
}

.theme-preview-graphite .list-item,
.theme-preview-graphite .search-input {
  border-radius: 6px;
  background: #1b1b1f;
  border-color: rgba(255, 255, 255, 0.04);
}

.theme-preview-graphite .country-flag-wrap {
  border-radius: 2px;
}

.theme-preview-dark .list-item,
.theme-preview-dark .search-input,
.theme-preview-minimal .list-item,
.theme-preview-minimal .search-input {
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 420px) {
  #app { padding: 10px 12px calc(var(--safe-bottom) + 22px); }
  body.has-tabs #app { padding-bottom: calc(var(--safe-bottom) + 92px); }
  .title { font-size: 18px; }
  .tabs.compact { width: calc(100% - 20px); }
  .hero-panel { min-height: 236px; padding: 24px 16px 18px; }
  .hero-panel h1, .page-title { font-size: 23px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .row { align-items: stretch; flex-direction: column; }
  .row .btn { width: 100%; }
  .actions .btn { flex: 1 1 calc(50% - 4px); }
  th, td { padding: 9px 7px; }
}

/* Storefront buyer UI borrowed from NeSimka app patterns */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--glass-shadow), var(--shadow);
}

.page-list,
.page-profile,
.page-order-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 4px;
  background: var(--c-bg);
}

.search-icon {
  position: absolute;
  left: 13px;
  color: var(--c-text-2);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.search-icon svg,
.list-item-arrow svg,
.section-title svg,
.settings-row-icon svg,
.settings-arrow svg,
.esim-empty-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-input {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  min-height: 50px;
  padding: 12px 14px 12px 40px;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
  outline: none;
  font: inherit;
  font-size: 16px;
}

.sort-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 3px;
  scrollbar-width: none;
}

.sort-chips::-webkit-scrollbar { display: none; }

.sort-chip {
  border: 1px solid var(--c-border);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 12px;
  flex: 0 0 auto;
  color: var(--c-text-2);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 8px rgba(82, 53, 73, 0.05);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  transition: transform .16s var(--ease-soft), color .18s var(--ease-soft), background .18s var(--ease-soft), border-color .18s var(--ease-soft);
}

.sort-chip:active {
  transform: translateY(1px) scale(.98);
}

.sort-chip-active {
  color: var(--c-accent);
  background: var(--c-accent-bg);
  border-color: rgba(192, 132, 252, 0.35);
}

.list-item {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft), border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}

.list-item:active {
  transform: translateY(1px) scale(.992);
}

.country-list .list-item,
.package-list .package-card,
.order-list .order-card,
.theme-grid .theme-option,
.sheet-options .pay-option {
  animation: itemIn .24s var(--ease-out) both;
}

.country-list .list-item:nth-child(2),
.package-list .package-card:nth-child(2),
.order-list .order-card:nth-child(2),
.theme-grid .theme-option:nth-child(2),
.sheet-options .pay-option:nth-child(2) { animation-delay: .025s; }

.country-list .list-item:nth-child(3),
.package-list .package-card:nth-child(3),
.order-list .order-card:nth-child(3),
.theme-grid .theme-option:nth-child(3),
.sheet-options .pay-option:nth-child(3) { animation-delay: .05s; }

.country-list .list-item:nth-child(4),
.package-list .package-card:nth-child(4),
.order-list .order-card:nth-child(4),
.theme-grid .theme-option:nth-child(4),
.sheet-options .pay-option:nth-child(4) { animation-delay: .075s; }

.country-list .list-item:nth-child(n+5),
.package-list .package-card:nth-child(n+5),
.order-list .order-card:nth-child(n+5),
.theme-grid .theme-option:nth-child(n+5),
.sheet-options .pay-option:nth-child(n+5) { animation-delay: .1s; }

.list-item-content { flex: 1 1 auto; min-width: 0; }
.list-item-title { display: block; font-size: 15px; font-weight: 760; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-sub { display: block; margin-top: 3px; color: var(--c-text-2); font-size: 12px; }
.list-item-arrow { width: 18px; height: 18px; color: var(--c-text-3); flex: 0 0 auto; }
.country-flag-wrap { width: 40px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 4px; overflow: hidden; background: var(--c-surface-2); }
.country-flag-wrap .flag-img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.hot-badge { border-radius: 999px; padding: 4px 7px; color: var(--c-accent); background: var(--c-accent-bg); font-size: 10px; font-weight: 800; }

.pkg-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pkg-hero-flag { width: 74px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: var(--c-surface-2); }
.pkg-hero-flag .flag-img { width: 100%; height: auto; object-fit: cover; border-radius: 8px; }
.pkg-hero-name { font-size: 20px; line-height: 1.08; font-weight: 760; }
.pkg-hero-hint { margin-top: 4px; color: var(--c-text-2); font-size: 13px; }
.pkg-group { display: flex; flex-direction: column; gap: 6px; }
.pkg-group-label { margin: 4px 2px 0; color: var(--c-text-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.nesimka-package-card { position: relative; min-height: 58px; align-items: stretch; overflow: hidden; padding: 10px 13px; }
.package-main { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pkg-left { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.pkg-left-row { display: flex; align-items: center; gap: 7px; line-height: 1; }
.package-volume { font-size: 18px; line-height: 1; font-weight: 760; letter-spacing: 0; }
.package-duration { color: var(--c-text-3); background: transparent; font-size: 12px; line-height: 1; font-weight: 560; white-space: nowrap; }
.package-name { color: var(--c-text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.package-price { color: var(--c-accent); font-size: 17px; font-weight: 760; white-space: nowrap; }
.pkg-price-free { color: var(--c-green); border: 1px solid rgba(74, 222, 128, .35); background: var(--c-green-bg); border-radius: 8px; padding: 4px 9px; font-size: 15px; }
.pkg-price-block { display: flex; align-items: baseline; gap: 7px; }
.price-original { color: var(--c-text-3); font-size: 12px; text-decoration: line-through; }
.pkg-discount-tag { position: absolute; top: 0; right: 0; padding: 2px 7px 2px 9px; border-radius: 0 var(--r) 0 8px; color: #fff; background: linear-gradient(135deg, #e05c00, #c8002a); font-size: 9px; line-height: 1.45; font-weight: 800; }
.package-card-free { border-left: 3px solid var(--c-green); }
.sort-chip-ico { display: inline-flex; align-items: center; justify-content: center; }
.sort-chip-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet-plan-card .package-card { pointer-events: none; }

.profile-header { display: flex; align-items: center; gap: 13px; }
.profile-avatar { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #7d5475 0%, #523549 100%); font-size: 17px; font-weight: 850; }
.profile-info { min-width: 0; display: flex; flex-direction: column; }
.profile-name { font-size: 17px; font-weight: 800; line-height: 1.15; }
.profile-username { margin-top: 3px; color: var(--c-text-2); font-size: 12px; }
.settings-card { padding: 0; overflow: hidden; }
.settings-row { width: 100%; min-height: 54px; border: 0; padding: 14px; display: flex; align-items: center; justify-content: space-between; color: var(--c-text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.settings-row { transition: background .18s var(--ease-soft), opacity .16s var(--ease-soft); }
.settings-row:active { background: var(--c-surface-2); opacity: .86; }
.settings-row-left { display: flex; align-items: center; gap: 10px; }
.settings-row-icon { width: 21px; height: 21px; color: var(--c-accent); }
.settings-label { font-weight: 740; }
.settings-arrow { width: 18px; height: 18px; color: var(--c-text-3); }
.section-title { margin: 6px 2px 0; display: flex; align-items: center; gap: 8px; color: var(--c-text); font-size: 15px; line-height: 1.2; font-weight: 820; }
.section-title svg { width: 18px; height: 18px; color: var(--c-accent); }
.esim-block,
.orders-list { display: flex; flex-direction: column; gap: 8px; }
.esim-card { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r); padding: 12px; color: var(--c-text); background: var(--c-surface); box-shadow: var(--glass-shadow), 0 2px 10px rgba(82, 53, 73, 0.05); font: inherit; text-align: left; cursor: pointer; }
.esim-card { transition: transform .16s var(--ease-soft), opacity .16s var(--ease-soft), background .2s var(--ease-soft); }
.esim-card:active { transform: translateY(1px) scale(.992); opacity: .86; }
.esim-card-top { display: flex; align-items: center; gap: 12px; }
.order-product-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--c-accent); background: var(--c-accent-bg); }
.order-product-icon svg { width: 20px; height: 20px; }
.esim-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.esim-card-name { font-size: 14px; font-weight: 760; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esim-card-expiry { color: var(--c-text-2); font-size: 12px; }
.order-status { flex: 0 0 auto; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; }
.status-active { color: var(--c-green); background: var(--c-green-bg); }
.status-inactive { color: var(--c-red); background: var(--c-red-bg); }
.status-pending { color: var(--c-amber); background: var(--c-amber-bg); }
.esim-empty { min-height: 96px; border: 1px dashed var(--c-border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--c-text-2); background: var(--c-surface-2); }
.esim-empty-icon { width: 24px; height: 24px; color: var(--c-accent); }
.esim-empty-title { font-size: 13px; font-weight: 720; }
.empty-state { margin: 0; padding: 20px 12px; color: var(--c-text-2); text-align: center; }
.summary-country { display: flex; align-items: center; gap: 10px; color: var(--c-text-2); font-size: 13px; }
.summary-country .country-flag-wrap { width: 32px; height: 32px; border-radius: 10px; }
.summary-plan-name { margin-top: 10px; font-size: 18px; line-height: 1.18; font-weight: 820; }
.detail-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--c-text-2); font-size: 13px; }
.detail-value { color: var(--c-text); font-weight: 760; text-align: right; }
.skeleton-list { display: flex; flex-direction: column; gap: 8px; }
.skeleton-item { height: 64px; border-radius: var(--r); background: linear-gradient(90deg, var(--c-surface), var(--c-surface-2), var(--c-surface)); background-size: 200% 100%; animation: skeletonMove 1.2s linear infinite; border: 1px solid var(--c-border); }
@keyframes skeletonMove { from { background-position: 200% 0; } to { background-position: -200% 0; } }

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

.support-card-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.support-card-action svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--c-accent);
}

.product-picker {
  display: grid;
  gap: 10px;
}

.product-card {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 12px;
  color: var(--c-text);
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.product-card.active {
  border-color: rgba(184, 117, 176, .65);
  background:
    linear-gradient(180deg, rgba(184, 117, 176, .22), rgba(184, 117, 176, .10)),
    var(--c-surface);
  box-shadow: 0 12px 32px rgba(184, 117, 176, .14);
}

.product-card:active {
  transform: scale(.985);
}

.product-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--c-accent);
  background: rgba(139, 92, 246, .13);
}

.product-card-icon svg {
  width: 21px;
  height: 21px;
  color: currentColor;
  stroke: currentColor;
  fill: none;
}

.product-card-icon svg * {
  stroke: currentColor;
  fill: none;
}

.product-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.product-card-copy b {
  font-size: 15px;
  line-height: 1.1;
}

.product-card-copy small {
  color: var(--c-text-2);
  font-size: 12px;
}

.product-card-state {
  min-width: 78px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--c-text-2);
  background: rgba(255,255,255,.05);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.product-card.active .product-card-state {
  color: var(--c-accent);
  background: rgba(139, 92, 246, .16);
}

.digital-page {
  display: grid;
  gap: 14px;
}

.digital-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.digital-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--c-accent);
  background: rgba(139, 92, 246, .14);
}

.digital-icon svg {
  width: 24px;
  height: 24px;
  color: currentColor;
  stroke: currentColor !important;
  fill: none !important;
}

.digital-icon svg *,
.product-card-icon svg *,
.order-product-icon svg *,
.store-tabs .tab svg * {
  stroke: currentColor !important;
  fill: none !important;
}

.digital-presets .sort-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.digital-presets .sort-chip span {
  font-size: 11px;
  opacity: .72;
}

.hub-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin: 2px 0 10px;
  border: 1px solid rgba(82, 53, 73, 0.075);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 26px rgba(82, 53, 73, 0.055);
}

.hub-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(155deg, #7c5474, #523549);
  color: #fff;
  font-size: 19px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.hub-avatar span {
  position: relative;
  z-index: 1;
}

.hub-avatar img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

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

.hub-hero-copy h1 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0;
}

.hub-hero-copy span {
  display: block;
  margin-top: 4px;
  color: #7f6b79;
  font-size: 12px;
}

.hub-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hub-level-badge {
  min-width: 78px;
  flex: 0 0 auto;
  padding: 9px 11px;
  border: 1px solid rgba(82, 53, 73, 0.10);
  border-radius: 999px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.hub-level-badge.level-basic {
  border-color: rgba(174, 119, 73, 0.40);
  background: linear-gradient(145deg, rgba(181, 121, 69, 0.13), rgba(255, 255, 255, 0.68));
}

.hub-level-badge.level-business {
  border-color: rgba(139, 148, 165, 0.42);
  background: linear-gradient(145deg, rgba(139, 148, 165, 0.16), rgba(255, 255, 255, 0.70));
}

.hub-level-badge.level-enterprise {
  border-color: rgba(190, 145, 49, 0.50);
  background: linear-gradient(145deg, rgba(190, 145, 49, 0.18), rgba(255, 255, 255, 0.72));
}

.hub-bot-link {
  appearance: none;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(82, 53, 73, 0.08);
  border-radius: 15px;
  background: rgba(82, 53, 73, 0.06);
  color: var(--c-accent);
  box-shadow: none;
}

.hub-bot-link svg {
  width: 18px;
  height: 18px;
  stroke: none;
  fill: currentColor;
}

.hub-bot-link svg * {
  stroke: none;
  fill: currentColor;
}

.hub-bot-link:active {
  transform: scale(.96);
}

.hub-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid rgba(82, 53, 73, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 8px 22px rgba(82, 53, 73, 0.045);
}

.hub-tab {
  appearance: none;
  border: 0;
  min-width: 0;
  min-height: 50px;
  padding: 7px 3px 6px;
  border-radius: 14px;
  background: transparent;
  color: var(--c-text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: inherit;
  font-size: 9.5px;
  font-weight: 760;
  transition: transform .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.hub-tab svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.hub-tab svg * {
  stroke: currentColor;
  fill: none;
}

.hub-tab.active {
  color: var(--c-accent);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(82, 53, 73, 0.08), 0 4px 12px rgba(82, 53, 73, 0.045);
}

.hub-tab:active {
  transform: scale(.97);
}

.hub-panel {
  padding: 15px;
  border: 1px solid rgba(82, 53, 73, 0.065);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 26px rgba(82, 53, 73, 0.055);
  animation: panelIn .28s var(--ease-out) both;
}

.level-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-hero {
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .22), transparent 35%),
    linear-gradient(145deg, #875678, #513147);
  box-shadow: 0 12px 26px rgba(82, 53, 73, .13);
}

.level-hero span {
  display: block;
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 740;
}

.level-hero b {
  display: block;
  margin-top: 4px;
  font-size: 38px;
  line-height: .9;
  font-weight: 880;
}

.level-hero strong {
  padding: 9px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 13px;
  line-height: 1;
  font-weight: 840;
  white-space: nowrap;
}

.basic-channel-card {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  color: var(--c-text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66)),
    radial-gradient(circle at 100% 0%, rgba(35, 130, 200, .16), transparent 44%);
  border: 1px solid rgba(35, 130, 200, 0.18);
  box-shadow: 0 8px 20px rgba(35, 130, 200, 0.08), 0 6px 16px rgba(82, 53, 73, 0.045);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.basic-channel-card:active {
  transform: scale(.985);
}

.basic-channel-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(160deg, #32a8e6, #2382c8);
}

.basic-channel-icon svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  stroke: none;
}

.basic-channel-card b,
.basic-channel-card span {
  display: block;
  min-width: 0;
}

.basic-channel-card b {
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.12;
  font-weight: 820;
}

.basic-channel-card span {
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
}

.basic-channel-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  min-height: 44px;
  margin-top: 0;
  padding: 0 14px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #32a8e6, #2382c8);
  box-shadow: 0 12px 26px rgba(35, 130, 200, .22);
  font-size: 13px;
  font-weight: 840;
  white-space: nowrap;
}

#hub-tab-content {
  will-change: opacity, transform;
}

.hub-tab-content-in {
  animation: hubTabIn .22s var(--ease-out) both;
}

@keyframes hubTabIn {
  from {
    opacity: .35;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hub-alert {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hub-alert b,
.hub-alert span {
  display: block;
}

.hub-alert span {
  color: var(--c-text-2);
  font-size: 12px;
}

.hub-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.hub-overview-kpis,
.hub-finance-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-stat {
  min-height: 70px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(82, 53, 73, 0.045);
  border: 1px solid rgba(82, 53, 73, 0.045);
}

.hub-stat span {
  display: block;
  color: var(--c-text-2);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.hub-stat b {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.05;
}

.hub-markup-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.hub-panel > .label {
  margin: 2px 0 8px;
}

.hub-markup-row .input {
  margin: 0;
}

.markup-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.markup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(82, 53, 73, 0.06);
}

.markup-card span,
.markup-card b,
.markup-card small {
  display: block;
  min-width: 0;
}

.markup-card b {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 780;
}

.markup-card small {
  margin-top: 4px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
}

.markup-card .input {
  margin: 0;
  text-align: center;
}

.hub-markup-save {
  margin-bottom: 14px;
}

.support-settings-card {
  display: grid;
  gap: 9px;
  margin: 0 0 12px;
  padding: 13px;
  border-radius: 19px;
  border: 1px solid rgba(82, 53, 73, 0.06);
  background: rgba(255, 255, 255, 0.58);
}

.support-settings-card.support-settings-missing {
  border-color: rgba(122, 80, 112, 0.24);
  background: linear-gradient(145deg, rgba(122, 80, 112, 0.10), rgba(255, 255, 255, 0.70));
}

.hub-products-mini,
.hub-product-picker,
.hub-action-grid {
  display: grid;
  gap: 10px;
}

.product-settings-page {
  display: grid;
  gap: 12px;
}

.settings-page-head {
  margin-bottom: 0;
}

.settings-block {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(82, 53, 73, 0.06);
}

.settings-block-storefront {
  background: rgba(255, 255, 255, 0.68);
}

.settings-block-markups {
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.52));
}

.settings-block .markup-grid {
  margin-bottom: 0;
}

.settings-block .hub-markup-save {
  margin-bottom: 0;
}

.inline-settings-card {
  position: relative;
  overflow: hidden;
}

.inline-settings-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(122, 80, 112, .13), transparent 42%);
}

.inline-settings-card > * {
  position: relative;
  z-index: 1;
}

.inline-description {
  margin: -2px 0 0;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.38;
}

.inline-description[hidden],
.inline-ready-card[hidden],
.inline-setup-panel[hidden] {
  display: none;
}

.inline-ready-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 16px;
  color: var(--c-text);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(82, 53, 73, .06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.inline-ready-card b,
.inline-ready-card small {
  display: block;
  min-width: 0;
}

.inline-ready-card b {
  font-size: 14px;
  line-height: 1.1;
  font-weight: 850;
}

.inline-ready-card small {
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
}

.inline-ready-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--c-accent);
  background: rgba(122, 80, 112, .10);
}

.inline-ready-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inline-enable-btn {
  min-height: 48px;
}

.inline-setup-panel {
  display: grid;
  gap: 10px;
}
.inline-guide {
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(82, 53, 73, .07);
  overflow: hidden;
}

.inline-guide-title {
  padding: 12px 13px 0;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
}

.inline-guide-body {
  display: grid;
  gap: 12px;
  padding: 12px 13px 13px;
}

.inline-guide-bot {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--c-text);
  background: rgba(122, 80, 112, .08);
  font-size: 14px;
  line-height: 1;
  font-weight: 820;
}

.inline-guide-bot span {
  flex: 0 0 auto;
  color: var(--c-text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.inline-guide-bot b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-guide ol {
  margin: 0;
  padding-left: 22px;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.45;
}

.inline-guide li + li {
  margin-top: 6px;
}

.inline-guide li b {
  color: var(--c-text);
}

.inline-guide-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.inline-guide-actions .btn {
  min-height: 44px;
}

.settings-advanced {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.42));
  border: 1px solid rgba(82, 53, 73, 0.06);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70);
}

.settings-advanced summary {
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 10%, rgba(122, 80, 112, .13), transparent 34%),
    rgba(255, 255, 255, .58);
  transition: transform .16s var(--ease-soft), background .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}

.settings-advanced summary:active {
  transform: scale(.992);
}

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

.settings-advanced summary span,
.settings-advanced summary b,
.settings-advanced summary em {
  display: block;
}

.settings-advanced summary span {
  grid-column: 1;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 820;
}

.settings-advanced summary b {
  grid-column: 1;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 720;
  text-align: left;
}

.settings-advanced summary em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  min-width: 82px;
  padding: 10px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #5c344f);
  box-shadow: 0 10px 20px rgba(82, 53, 73, .14);
  text-align: center;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
}

.settings-advanced[open] summary {
  box-shadow: inset 0 -1px 0 rgba(82, 53, 73, .06);
}

.settings-advanced[open] summary em {
  color: #6e4562;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  font-size: 0;
}

.settings-advanced[open] summary em::before {
  content: "Скрыть";
  font-size: 12px;
}

.settings-advanced-body {
  display: grid;
  gap: 14px;
  padding: 0 12px 14px;
}

.hub-section-toggle {
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr) 46px;
  border-color: rgba(82, 53, 73, .07);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(82, 53, 73, .055);
}

.hub-section-toggle:not(.active) {
  opacity: .82;
}

.product-card-switch {
  width: 44px;
  height: 28px;
  justify-self: end;
  border-radius: 999px;
  background: rgba(82, 53, 73, .12);
  position: relative;
  transition: background .18s var(--ease-out);
}

.product-card-switch i {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(82, 53, 73, .18);
  transition: transform .18s var(--ease-out);
}

.hub-section-toggle.active .product-card-switch {
  background: linear-gradient(145deg, #9b6b8f, #6b3f5f);
}

.hub-section-toggle.active .product-card-switch i {
  transform: translateX(16px);
}

.hub-product-stat {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(82, 53, 73, 0.06);
}

.hub-product-stat b,
.hub-product-stat span {
  display: block;
}

.hub-product-stat span {
  color: var(--c-text-2);
  font-size: 12px;
}

.hub-product-stat strong {
  font-size: 14px;
}

.settings-tool-card {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding: 13px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58));
  border: 1px solid rgba(82, 53, 73, 0.075);
  box-shadow: 0 8px 18px rgba(82, 53, 73, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.tool-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.tool-card-head h2,
.tool-card-head .tiny {
  min-width: 0;
}

.tool-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--c-accent);
  background: rgba(122, 80, 112, 0.10);
}

.tool-card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.free-esim-kpis {
  margin: 0;
  gap: 9px;
}

.free-esim-kpis .hub-stat {
  min-height: 70px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(82, 53, 73, 0.045);
  border-color: rgba(82, 53, 73, 0.04);
}

.tool-balance-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  color: var(--c-text);
  background: rgba(122, 80, 112, 0.08);
  border: 1px solid rgba(122, 80, 112, 0.10);
}

.tool-balance-note.is-warning {
  background: rgba(122, 80, 112, 0.12);
  border-color: rgba(122, 80, 112, 0.18);
}

.tool-balance-note span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--c-accent);
  background: rgba(255, 255, 255, 0.58);
}

.tool-balance-note svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-balance-note p {
  margin: 0;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.free-esim-settings-card .input {
  margin: 0;
}

.toggle-line {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(82, 53, 73, 0.06);
  font-size: 14px;
  font-weight: 760;
}

.toggle-line input {
  appearance: none;
  width: 42px;
  height: 26px;
  flex: 0 0 42px;
  border-radius: 999px;
  background: rgba(82, 53, 73, 0.12);
  border: 1px solid rgba(82, 53, 73, 0.08);
  position: relative;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out);
}

.toggle-line input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(82, 53, 73, .18);
  transition: transform .18s var(--ease-out);
}

.toggle-line input:checked {
  background: var(--c-accent);
  border-color: transparent;
}

.toggle-line input:checked::after {
  transform: translateX(16px);
}

.free-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.package-card-free .pkg-price-free {
  color: var(--c-accent);
  background: var(--c-accent-bg);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 860;
}

.trial-esim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trial-esim-card .label {
  margin-top: 2px;
}

.trial-catalog-controls {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}

.trial-select-card {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 17px;
  border: 1px solid rgba(82, 53, 73, 0.07);
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  text-align: left;
  box-shadow: 0 6px 16px rgba(82, 53, 73, 0.045);
}

.trial-select-card:disabled {
  opacity: .62;
}

.trial-select-card.active {
  border-color: rgba(122, 80, 112, 0.28);
  background: linear-gradient(145deg, rgba(122, 80, 112, 0.10), rgba(255,255,255,.72));
}

.trial-select-card b,
.trial-select-card small {
  display: block;
  min-width: 0;
}

.trial-select-card b {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 820;
}

.trial-select-card small {
  margin-top: 4px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-package-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.trial-package-card {
  min-height: 58px;
}

.trial-package-card.active {
  border-color: rgba(122, 80, 112, 0.34);
  background: linear-gradient(145deg, rgba(122, 80, 112, 0.11), rgba(255,255,255,.82));
}

.trial-esim-card .input,
.trial-esim-grid .input {
  margin: 0;
}

#trial-country {
  text-transform: uppercase;
}

.trial-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.trial-search-results {
  display: grid;
  gap: 7px;
}

.trial-customer {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(82, 53, 73, 0.08);
  border-radius: 15px;
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.64);
  font: inherit;
  text-align: left;
}

.trial-customer-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #9d6591, #523549);
  font-size: 14px;
  font-weight: 820;
}

.trial-customer-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.trial-customer b,
.trial-customer small,
.trial-gift-card b,
.trial-gift-card span {
  display: block;
  min-width: 0;
}

.trial-customer-copy {
  min-width: 0;
}

.trial-customer b {
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-customer small {
  color: var(--c-text-2);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.trial-gift-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(82, 53, 73, 0.07);
}

.trial-gift-card span {
  margin-top: 4px;
  color: var(--c-text-2);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 430px) {
  .hub-hero {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 13px;
  }

  .hub-hero-actions {
    gap: 6px;
  }

  .hub-level-badge {
    min-width: 68px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .hub-bot-link {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .settings-advanced summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
  }

  .settings-advanced summary b {
    max-width: none;
    text-align: left;
  }

  .settings-advanced summary em {
    min-width: 74px;
    padding-inline: 10px;
  }

  .settings-tool-card {
    padding: 13px;
  }

  .settings-tool-card .tiny {
    line-height: 1.35;
  }

  .trial-esim-grid {
    grid-template-columns: 1fr;
  }

  .trial-actions,
  .trial-gift-card {
    grid-template-columns: 1fr;
  }
}

.hub-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

.hub-finance-chart {
  margin: 0 0 12px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(82, 53, 73, 0.06);
}

.hub-daily-card {
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(82, 53, 73, 0.06);
  background:
    radial-gradient(circle at 16% 0%, rgba(122, 80, 112, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 20px rgba(82, 53, 73, 0.045);
}

.hub-daily-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.hub-daily-summary span {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(82, 53, 73, 0.055);
}

.hub-daily-summary b,
.hub-daily-summary small {
  display: block;
}

.hub-daily-summary b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.08;
}

.hub-daily-summary small {
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.hub-day-chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(34px, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 158px;
  margin-top: 12px;
  padding: 8px 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hub-day-chart::-webkit-scrollbar {
  display: none;
}

.hub-day {
  display: grid;
  grid-template-rows: 98px auto auto auto;
  justify-items: center;
  gap: 4px;
  min-width: 34px;
}

.hub-day-bar {
  position: relative;
  align-self: end;
  width: 100%;
  height: 98px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(82, 53, 73, 0.045), rgba(82, 53, 73, 0.018));
}

.hub-day-bar i {
  width: 76%;
  height: var(--day-h);
  min-height: 3px;
  border-radius: 12px 12px 7px 7px;
  background: linear-gradient(180deg, rgba(135, 86, 120, .78), rgba(82, 53, 73, .94));
  box-shadow: 0 6px 13px rgba(82, 53, 73, .13);
}

.hub-day span {
  color: var(--c-text-2);
  font-size: 10px;
  font-weight: 800;
}

.hub-day b,
.hub-day small {
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.05;
}

.hub-day small {
  color: var(--c-text-2);
}

.hub-chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 132px;
  margin-top: 12px;
}

.hub-chart-bar {
  display: grid;
  grid-template-rows: 78px auto auto;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.hub-chart-bar i {
  align-self: end;
  width: 100%;
  max-width: 46px;
  height: var(--bar-h);
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, rgba(135, 86, 120, .74), rgba(82, 53, 73, .92));
  box-shadow: 0 7px 16px rgba(82, 53, 73, .14);
}

.hub-chart-bar span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-2);
  font-size: 11px;
  font-weight: 800;
}

.hub-chart-bar b {
  font-size: 12px;
}

.hub-payout-btn {
  margin: 0 0 12px;
}

.finance-payout-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(82, 53, 73, 0.07);
  box-shadow: 0 8px 18px rgba(82, 53, 73, 0.045);
}

.finance-payout-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--c-accent);
  background: rgba(122, 80, 112, 0.1);
}

.finance-payout-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-payout-copy {
  min-width: 0;
}

.finance-payout-copy b,
.finance-payout-copy span {
  display: block;
}

.finance-payout-copy b {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.08;
  font-weight: 900;
}

.finance-payout-copy span {
  margin-top: 4px;
  color: var(--c-text-2);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
}

.finance-payout-card .btn {
  grid-column: 1 / -1;
  min-height: 44px;
}

.hub-accordion {
  display: grid;
  gap: 8px;
}

.hub-accordion-head {
  appearance: none;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(82, 53, 73, 0.07);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-weight: 820;
  box-shadow: 0 6px 16px rgba(82, 53, 73, 0.045);
}

.hub-accordion-head b {
  color: var(--c-text-2);
  font-size: 12px;
}

.hub-accordion-head.active {
  color: var(--c-accent);
  background: rgba(82, 53, 73, 0.08);
}

.hub-accordion-body {
  display: none;
  overflow-x: auto;
}

.hub-accordion-body.open {
  display: block;
  animation: hubTabIn .22s var(--ease-out) both;
}

.hub-preview-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: rgba(82, 53, 73, 0.055);
  border: 1px solid rgba(82, 53, 73, 0.06);
}

.hub-preview-card .theme-preview {
  width: 132px;
  min-height: 118px;
}

.hub-preview-card b,
.hub-preview-card span {
  display: block;
}

.hub-preview-card span {
  margin-top: 5px;
  color: var(--c-text-2);
  font-size: 12px;
}

.hub-store-card {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin: 14px 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  border: 1px solid rgba(82, 53, 73, 0.07);
  box-shadow: 0 10px 24px rgba(82, 53, 73, 0.055);
}

.hub-store-mini {
  display: grid;
  gap: 7px;
  padding: 9px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(82, 53, 73, 0.07);
  box-shadow: 0 8px 18px rgba(82, 53, 73, 0.08);
}

.hub-store-search,
.hub-store-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 11px;
}

.hub-store-search {
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  color: var(--c-text-2);
  background: rgba(82, 53, 73, 0.055);
  font-size: 10px;
}

.hub-store-search svg,
.hub-store-row svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
}

.hub-store-search svg *,
.hub-store-row svg * {
  stroke: currentColor;
  fill: none;
}

.hub-store-row {
  gap: 7px;
  min-height: 32px;
  padding: 0 8px;
  color: var(--c-text);
  background: rgba(82, 53, 73, 0.045);
}

.hub-store-row > span {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--c-accent);
  background: var(--c-accent-bg);
}

.hub-store-row b {
  flex: 1;
  min-width: 0;
  font-size: 11px;
}

.hub-store-row small {
  color: var(--c-text-2);
  font-size: 9px;
  font-weight: 800;
}

.hub-store-copy b,
.hub-store-copy span {
  display: block;
}

.hub-store-copy b {
  font-size: 16px;
  line-height: 1.2;
}

.hub-store-copy span {
  margin-top: 7px;
  color: var(--c-text-2);
  font-size: 12px;
}

.services-page .section-head {
  margin-bottom: 12px;
}

.service-list {
  display: grid;
  gap: 12px;
}

.service-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 13px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  border: 1px solid rgba(82, 53, 73, 0.07);
  box-shadow: 0 9px 22px rgba(82, 53, 73, 0.05);
  overflow: hidden;
}

.service-visual {
  width: min(136px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 8%, rgba(122, 80, 112, .10), transparent 42%),
    rgba(255, 255, 255, .54);
}

.service-visual .theme-preview {
  width: min(98px, 100%);
  min-height: 82px;
  box-shadow: 0 10px 22px rgba(82, 53, 73, .10);
}

.service-flow-visual {
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(246,240,245,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.tma-example-preview {
  display: grid;
  place-items: center;
  padding: 10px 0 8px;
}
.service-mini-flow {
  width: 116px;
  display: grid;
  place-items: center;
}

.service-mini-phone {
  position: relative;
  width: 116px;
  height: 116px;
  overflow: hidden;
  padding: 7px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(82, 53, 73, .07);
  box-shadow: 0 12px 24px rgba(82, 53, 73, .10);
}

.service-mini-top {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 999px;
  color: #6e4562;
  background: #f4eff4;
  font-size: 8px;
  font-weight: 850;
}

.service-mini-top i,
.service-mini-result i {
  display: grid;
  place-items: center;
}

.service-mini-top svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  stroke: none;
}

.service-mini-layer {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 34px;
  bottom: 24px;
  opacity: 0;
  transform: translateY(7px) scale(.98);
}

.service-mini-categories {
  display: grid;
  gap: 4px;
  animation: serviceMiniCategories 6s var(--ease-soft) infinite;
}

.service-mini-categories span {
  min-height: 16px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 9px;
  color: var(--c-text);
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .045);
  font-size: 7px;
  line-height: 1;
  font-weight: 850;
}

.service-mini-categories svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #7a5070;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-mini-product {
  display: grid;
  gap: 6px;
  animation: serviceMiniProduct 6s var(--ease-soft) infinite;
}

.service-mini-product-card {
  min-height: 38px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 12px;
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .06);
}

.service-mini-product-card i {
  display: grid;
  place-items: center;
}

.service-mini-product-card img {
  width: 24px;
  height: 16px;
  border-radius: 4px;
}

.service-mini-product-card b {
  font-size: 9px;
  line-height: 1;
}

.service-mini-product-card small {
  color: var(--c-text-2);
  font-size: 8px;
  font-weight: 850;
}

.service-mini-payline {
  display: grid;
  gap: 5px;
  padding: 7px;
  border-radius: 12px;
  background: linear-gradient(145deg, #8a5a7c, #4d3347);
}

.service-mini-payline span,
.service-mini-payline strong,
.service-mini-result b,
.service-mini-result span {
  display: block;
  border-radius: 999px;
}

.service-mini-payline span {
  width: 54px;
  height: 5px;
  background: rgba(255,255,255,.62);
}

.service-mini-payline strong {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,.92);
}

.service-mini-result {
  min-height: 58px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 14px;
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .06);
  animation: serviceMiniResult 6s var(--ease-soft) infinite;
}

.service-mini-result i {
  grid-row: span 2;
  width: 27px;
  height: 27px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #5c344f);
}

.service-mini-result svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.service-mini-result b {
  width: 48px;
  height: 6px;
  background: rgba(122, 80, 112, .18);
}

.service-mini-result span {
  width: 34px;
  height: 5px;
  background: rgba(122, 80, 112, .10);
}

.service-mini-nav {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(82, 53, 73, .08);
}

.service-mini-nav i {
  height: 9px;
  border-radius: 999px;
  background: rgba(122, 80, 112, .18);
}

.service-mini-nav i:first-child {
  background: linear-gradient(145deg, rgba(157, 99, 141, .42), rgba(92, 52, 79, .30));
}

.service-full-flow {
  position: relative;
  width: min(292px, 100%);
  height: 300px;
  margin: 0 auto;
}

.service-full-chat,
.service-full-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(82, 53, 73, .08);
  box-shadow: 0 18px 40px rgba(82, 53, 73, .14);
}

.service-full-chat {
  padding: 16px;
  background:
    radial-gradient(circle at 82% 14%, rgba(122, 80, 112, .13), transparent 34%),
    linear-gradient(180deg, #f6f8fb, #eef2f7);
  animation: serviceFullChat 8s var(--ease-soft) infinite;
}

.service-full-chat-head {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--c-text);
  background: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 850;
}

.service-full-chat-head i,
.service-full-open-btn i,
.service-full-app-top i,
.service-full-state-done i {
  display: grid;
  place-items: center;
}

.service-full-chat-head svg,
.service-full-app-top svg,
.service-full-state-done svg {
  fill: currentColor;
  stroke: none;
}

.service-full-chat-head svg {
  width: 16px;
  height: 16px;
  color: #229ed9;
}

.service-full-bubble {
  position: absolute;
  left: 18px;
  height: 38px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(82, 53, 73, .07);
}

.service-full-bubble::before,
.service-full-bubble::after,
.service-full-open-btn span,
.service-full-app-top span,
.service-full-pay-card span,
.service-full-pay-card b,
.service-full-state-done b,
.service-full-state-done span {
  content: "";
  display: block;
  border-radius: 999px;
}

.service-full-bubble::before {
  width: 86px;
  height: 7px;
  margin: 10px 12px 0;
  background: rgba(82, 53, 73, .18);
}

.service-full-bubble::after {
  width: 56px;
  height: 6px;
  margin: 6px 12px 0;
  background: rgba(82, 53, 73, .10);
}

.service-full-bubble-a {
  top: 72px;
  width: 156px;
}

.service-full-bubble-b {
  top: 122px;
  width: 126px;
}

.service-full-open-btn {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 46px;
  height: 48px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #5c344f);
  box-shadow: 0 14px 26px rgba(82, 53, 73, .18);
}

.service-full-open-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-full-open-btn span {
  width: 100%;
  height: 9px;
  background: rgba(255,255,255,.78);
}

.service-full-tap {
  position: absolute;
  width: 22px;
  height: 22px;
  right: 64px;
  bottom: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  border: 3px solid rgba(122, 80, 112, .28);
  box-shadow: 0 8px 16px rgba(82, 53, 73, .18);
  opacity: 0;
  animation: serviceFullTap 8s var(--ease-soft) infinite;
}

.service-full-app {
  padding: 16px;
  background: #fff;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  animation: serviceFullApp 8s var(--ease-soft) infinite;
}

.service-full-app-top {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-radius: 999px;
  color: #6e4562;
  background: #f4eff4;
}

.service-full-app-top svg {
  width: 15px;
  height: 15px;
}

.service-full-app-top span {
  width: 96px;
  height: 8px;
  background: rgba(122, 80, 112, .18);
}

.service-full-state {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 66px;
  bottom: 48px;
  opacity: 0;
  transform: translateY(10px) scale(.98);
}

.service-full-state-categories {
  display: grid;
  gap: 10px;
  animation: serviceFullCategories 8s var(--ease-soft) infinite;
}

.service-full-state-categories div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--c-text);
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .055);
  font-size: 13px;
  font-weight: 850;
}

.service-full-state-categories svg,
.service-full-product-row svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #7a5070;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-full-state-product {
  display: grid;
  align-content: start;
  gap: 10px;
  animation: serviceFullProduct 8s var(--ease-soft) infinite;
}

.service-full-product-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 17px;
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .055);
}

.service-full-product-row i {
  display: grid;
  place-items: center;
}

.service-full-product-row img {
  width: 32px;
  height: 22px;
  border-radius: 6px;
}

.service-full-product-row b,
.service-full-product-row small,
.service-full-product-row strong {
  display: block;
}

.service-full-product-row b {
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.05;
}

.service-full-product-row small {
  margin-top: 3px;
  color: var(--c-text-2);
  font-size: 10px;
  font-weight: 760;
}

.service-full-product-row strong {
  color: var(--c-text);
  font-size: 12px;
  font-weight: 900;
}

.service-full-state-pay {
  display: grid;
  align-content: center;
  gap: 12px;
  animation: serviceFullPay 8s var(--ease-soft) infinite;
}

.service-full-pay-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, #8a5a7c, #4d3347);
  box-shadow: 0 14px 28px rgba(82, 53, 73, .14);
}

.service-full-pay-card span {
  width: 118px;
  height: 11px;
  background: rgba(255,255,255,.62);
}

.service-full-pay-card b {
  width: 100%;
  height: 38px;
  background: rgba(255,255,255,.92);
}

.service-full-pay-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.service-full-pay-methods i {
  height: 34px;
  border-radius: 14px;
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .055);
}

.service-full-state-done {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 24px 20px;
  border-radius: 24px;
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .06);
  animation: serviceFullDone 8s var(--ease-soft) infinite;
}

.service-full-state-done i {
  grid-row: span 2;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #5c344f);
}

.service-full-state-done svg {
  width: 30px;
  height: 30px;
}

.service-full-state-done b {
  width: 128px;
  height: 12px;
  background: rgba(122, 80, 112, .18);
}

.service-full-state-done span {
  width: 92px;
  height: 9px;
  background: rgba(122, 80, 112, .10);
}

.service-full-progress {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  z-index: 4;
}

.service-full-progress i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(122, 80, 112, .18);
}

.service-full-progress i:nth-child(1) { animation: serviceFullDotOne 8s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(2) { animation: serviceFullDotTwo 8s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(3) { animation: serviceFullDotThree 8s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(4) { animation: serviceFullDotFour 8s var(--ease-soft) infinite; }

@keyframes serviceMiniCategories {
  0%, 31% { opacity: 1; transform: translateY(0) scale(1); }
  39%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes serviceMiniProduct {
  0%, 34% { opacity: 0; transform: translateY(8px) scale(.98); }
  42%, 62% { opacity: 1; transform: translateY(0) scale(1); }
  70%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes serviceMiniResult {
  0%, 65% { opacity: 0; transform: translateY(8px) scale(.98); }
  73%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(.99); }
}

@keyframes serviceFullChat {
  0%, 28% { opacity: 1; transform: translateY(0) scale(1); }
  36%, 100% { opacity: 0; transform: translateY(-10px) scale(.96); }
}

@keyframes serviceFullTap {
  0%, 16% { opacity: 0; transform: scale(.75); }
  20%, 27% { opacity: 1; transform: scale(1); }
  31%, 100% { opacity: 0; transform: scale(1.22); }
}

@keyframes serviceFullApp {
  0%, 29% { opacity: 0; transform: translateY(16px) scale(.96); }
  37%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(.99); }
}

@keyframes serviceFullCategories {
  0%, 35% { opacity: 0; transform: translateY(10px) scale(.98); }
  42%, 52% { opacity: 1; transform: translateY(0) scale(1); }
  60%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes serviceFullProduct {
  0%, 53% { opacity: 0; transform: translateY(10px) scale(.98); }
  61%, 69% { opacity: 1; transform: translateY(0) scale(1); }
  77%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes serviceFullPay {
  0%, 70% { opacity: 0; transform: translateY(10px) scale(.98); }
  78%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  90%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes serviceFullDone {
  0%, 84% { opacity: 0; transform: translateY(10px) scale(.98); }
  91%, 97% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(.99); }
}

@keyframes serviceFullDotOne {
  0%, 33% { background: #6e4562; }
  41%, 100% { background: rgba(122, 80, 112, .18); }
}

@keyframes serviceFullDotTwo {
  0%, 35% { background: rgba(122, 80, 112, .18); }
  43%, 56% { background: #6e4562; }
  64%, 100% { background: rgba(122, 80, 112, .18); }
}

@keyframes serviceFullDotThree {
  0%, 58% { background: rgba(122, 80, 112, .18); }
  66%, 78% { background: #6e4562; }
  86%, 100% { background: rgba(122, 80, 112, .18); }
}

@keyframes serviceFullDotFour {
  0%, 82% { background: rgba(122, 80, 112, .18); }
  90%, 98% { background: #6e4562; }
  100% { background: rgba(122, 80, 112, .18); }
}

@media (prefers-reduced-motion: reduce) {
  .service-mini-categories,
  .service-mini-product,
  .service-mini-result,
  .service-full-chat,
  .service-full-tap,
  .service-full-app,
  .service-full-state,
  .service-full-progress i {
    animation: none;
  }

  .service-mini-categories,
  .service-full-chat {
    opacity: 1;
    transform: none;
  }

  .service-mini-product,
  .service-mini-result,
  .service-full-app {
    display: none;
  }
}
.service-dev-visual {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(246,240,245,.70));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.service-dev-preview {
  width: 116px;
  min-height: 102px;
  padding: 7px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid rgba(82, 53, 73, .07);
  box-shadow: 0 12px 24px rgba(82, 53, 73, .10);
}

.service-dev-browser {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}

.service-dev-browser i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(122, 80, 112, .22);
}

.service-dev-hero {
  min-height: 42px;
  padding: 7px;
  border-radius: 11px;
  background: linear-gradient(145deg, #8a5a7c, #4d3347);
}

.service-dev-hero strong,
.service-dev-hero span,
.service-dev-hero em,
.service-dev-grid i,
.service-dev-footer {
  display: block;
  border-radius: 999px;
}

.service-dev-hero strong {
  width: 56px;
  height: 6px;
  background: rgba(255,255,255,.92);
}

.service-dev-hero span {
  width: 38px;
  height: 4px;
  margin-top: 5px;
  background: rgba(255,255,255,.50);
}

.service-dev-hero em {
  width: 32px;
  height: 7px;
  margin-top: 6px;
  background: rgba(255,255,255,.82);
}

.service-dev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.service-dev-grid i {
  height: 21px;
  background: #f1eaf0;
  border: 1px solid rgba(82, 53, 73, .05);
}

.service-dev-footer {
  width: 68px;
  height: 5px;
  margin-top: 6px;
  background: rgba(122, 80, 112, .14);
}

.service-manager-btn {
  color: #fff;
  background: linear-gradient(145deg, #7a5070, #523549);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(82, 53, 73, .18);
}

.service-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.service-top > b {
  color: var(--c-text);
  font-size: 18px;
  line-height: 1.12;
  font-weight: 860;
}

.service-copy > span {
  color: var(--c-text-2);
  font-size: 12.5px;
  line-height: 1.38;
}

.service-buy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-inline: 14px;
  min-height: 48px;
}

.service-preview-btn {
  margin-top: 2px;
  min-height: 44px;
  color: #6c405f;
  background: rgba(122, 80, 112, .07);
}

.service-preview-btn + .service-buy-btn {
  margin-top: 0;
}

.service-buy-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-buy-btn > span:only-child {
  margin: 0 auto;
}

.service-buy-btn > b {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.service-buy-btn s {
  color: rgba(255, 255, 255, .56);
  font-size: 11px;
  text-decoration-thickness: 1.5px;
}

.tma-sheet-actions {
  display: grid;
  gap: 10px;
}

.tma-sheet-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tma-sheet-actions .btn {
  min-height: 54px;
  border-radius: 16px;
  padding-inline: 12px;
  font-size: 14px;
  line-height: 1.15;
}

@media (max-width: 360px) {
  .hub-tab span { display: none; }
  .hub-tab { min-height: 44px; }
  .hub-preview-card { grid-template-columns: 1fr; }
  .hub-preview-card .theme-preview { width: 100%; }
  .hub-store-card { grid-template-columns: 1fr; }
  .service-visual { width: min(132px, 100%); }
  .service-visual .theme-preview { width: min(118px, 100%); }
  .tma-sheet-action-row { grid-template-columns: 1fr; }
}

/* Store service animation v2 */
.service-mini-top {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 999px;
  color: #6e4562;
  background: #f4eff4;
  font-size: 8px;
  font-weight: 850;
}

.service-mini-top i { display: grid; place-items: center; flex: 0 0 12px; }
.service-mini-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-mini-top svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.service-mini-countries {
  display: grid;
  gap: 4px;
  animation: serviceMiniCountries 6s var(--ease-soft) infinite;
}

.service-mini-countries div {
  min-height: 20px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 9px;
  color: var(--c-text);
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .045);
}

.service-mini-countries i,
.service-mini-countries span,
.service-mini-countries b,
.service-mini-countries small { display: block; min-width: 0; }
.service-mini-countries img { width: 18px; height: 12px; border-radius: 3px; }
.service-mini-countries b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7.5px; line-height: 1; font-weight: 850; }
.service-mini-countries small { margin-top: 2px; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6px; line-height: 1; font-weight: 760; }

.service-check-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 12px;
  background: linear-gradient(145deg, #9d638d, #5c344f);
  box-shadow: 0 8px 16px rgba(82, 53, 73, .12);
}

.service-check-mark::before {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

.service-mini-result {
  grid-template-columns: 31px minmax(0, 1fr);
  background: #f8f5f8;
  animation: serviceMiniResult 6s var(--ease-soft) infinite;
}

.service-mini-result .service-check-mark {
  width: 31px;
  height: 31px;
  border-radius: 12px;
  background: linear-gradient(145deg, #9d638d, #5c344f);
  box-shadow: 0 8px 16px rgba(82, 53, 73, .12);
}

@keyframes serviceMiniCategories {
  0%, 31% { opacity: 1; transform: translateY(0) scale(1); }
  39%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes serviceMiniCountries {
  0%, 34% { opacity: 0; transform: translateY(8px) scale(.98); }
  42%, 64% { opacity: 1; transform: translateY(0) scale(1); }
  72%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes serviceMiniResult {
  0%, 68% { opacity: 0; transform: translateY(8px) scale(.98); }
  76%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(.99); }
}
.service-full-flow { height: 322px; }
.service-full-chat { padding: 14px; animation: serviceFullChat 10s var(--ease-soft) infinite; }
.service-full-chat-head {
  height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

.service-full-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #5c344f);
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.service-full-chat-head span,
.service-full-chat-head b,
.service-full-chat-head small,
.service-full-app-top span { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-full-chat-head b { font-size: 12px; line-height: 1.05; font-weight: 900; }
.service-full-chat-head small { margin-top: 2px; color: var(--c-text-2); font-size: 9px; line-height: 1; font-weight: 720; }

.service-full-bubble { height: 36px; }
.service-full-bubble-a,
.service-full-bubble-b { left: 17px; border-radius: 18px 18px 18px 6px; }
.service-full-bubble-a { top: 72px; width: 154px; }
.service-full-bubble-b { top: 166px; width: 142px; }
.service-full-bubble-user { top: 119px; right: 17px; left: auto; width: 132px; border-radius: 18px 18px 6px 18px; background: #dfeeff; }
.service-full-bubble-user::before { width: 72px; background: rgba(39, 83, 130, .22); }
.service-full-bubble-user::after { width: 46px; background: rgba(39, 83, 130, .12); }

.service-full-compose {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 15px;
  height: 44px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 24px rgba(82, 53, 73, .10);
}

.service-full-store-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #5c344f);
}

.service-full-store-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.service-full-input { display: grid; gap: 5px; }
.service-full-input::before,
.service-full-input::after { content: ""; display: block; border-radius: 999px; }
.service-full-input::before { width: 92px; height: 6px; background: rgba(82, 53, 73, .16); }
.service-full-input::after { width: 54px; height: 5px; background: rgba(82, 53, 73, .08); }
.service-full-compose > i { width: 18px; height: 18px; border-radius: 999px; background: rgba(122, 80, 112, .16); }
.service-full-tap { left: 31px; right: auto; bottom: 26px; animation: serviceFullTap 10s var(--ease-soft) infinite; }

@keyframes serviceFullChat {
  0%, 25% { opacity: 1; transform: translateY(0) scale(1); }
  33%, 100% { opacity: 0; transform: translateY(-10px) scale(.96); }
}

@keyframes serviceFullTap {
  0%, 16% { opacity: 0; transform: scale(.75); }
  20%, 27% { opacity: 1; transform: scale(1); }
  31%, 100% { opacity: 0; transform: scale(1.22); }
}
.service-full-app { animation: serviceFullApp 10s var(--ease-soft) infinite; }
.service-full-app-top {
  height: 38px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border-radius: 17px;
  color: var(--c-text);
  background: #f4eff4;
}
.service-full-app-top .service-full-avatar { width: 28px; height: 28px; border-radius: 10px; font-size: 12px; }
.service-full-app-top span { font-size: 12px; font-weight: 900; }
.service-full-state { top: 66px; bottom: 46px; }

.service-full-state-countries,
.service-full-state-plans { display: grid; align-content: start; gap: 9px; }
.service-full-state-countries { animation: serviceFullCountries 10s var(--ease-soft) infinite; }
.service-full-state-plans { animation: serviceFullPlans 10s var(--ease-soft) infinite; }

.service-full-state-countries div,
.service-full-state-plans div {
  min-height: 53px;
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 17px;
  color: var(--c-text);
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .055);
}
.service-full-state-countries div { grid-template-columns: 34px minmax(0, 1fr) 8px; }
.service-full-state-plans div { grid-template-columns: minmax(0, 1fr) auto; }
.service-full-state-countries i,
.service-full-state-countries span,
.service-full-state-countries b,
.service-full-state-countries small,
.service-full-state-plans span,
.service-full-state-plans b,
.service-full-state-plans small,
.service-full-state-plans strong { display: block; min-width: 0; }
.service-full-state-countries img { width: 32px; height: 22px; border-radius: 6px; }
.service-full-state-countries b,
.service-full-state-plans b { color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.05; font-weight: 900; }
.service-full-state-countries small,
.service-full-state-plans small { margin-top: 3px; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1; font-weight: 760; }
.service-full-state-countries strong { width: 7px; height: 7px; border-top: 1.6px solid rgba(82, 53, 73, .34); border-right: 1.6px solid rgba(82, 53, 73, .34); transform: rotate(45deg); }
.service-full-state-plans strong { color: var(--c-text); font-size: 13px; font-weight: 900; }

.service-full-state-pay { align-content: start; gap: 10px; animation: serviceFullPay 10s var(--ease-soft) infinite; }
.service-full-pay-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #f8f5f8;
  border: 1px solid rgba(82, 53, 73, .055);
}
.service-full-pay-total span { width: 96px; height: 8px; background: rgba(122, 80, 112, .16); }
.service-full-pay-total b { color: var(--c-text); font-size: 17px; font-weight: 920; }
.service-full-pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.service-full-pay-methods i { position: relative; height: 42px; border-radius: 15px; background: #f8f5f8; border: 1px solid rgba(82, 53, 73, .055); }
.service-full-pay-methods i:first-child { background: rgba(122, 80, 112, .10); border-color: rgba(122, 80, 112, .16); }
.service-full-pay-methods i::before { content: ""; position: absolute; left: 11px; right: 11px; top: 16px; height: 8px; border-radius: 999px; background: rgba(122, 80, 112, .18); }
.service-full-pay-button { height: 42px; border-radius: 16px; background: linear-gradient(145deg, #9d638d, #5c344f); box-shadow: 0 12px 22px rgba(82, 53, 73, .14); }

.service-full-state-done {
  grid-template-columns: 58px minmax(0, 1fr);
  background: #f8f5f8;
  animation: serviceFullDone 10s var(--ease-soft) infinite;
}
.service-full-state-done .service-check-mark {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(145deg, #9d638d, #5c344f);
  box-shadow: 0 14px 24px rgba(82, 53, 73, .14);
}

.service-full-progress { gap: 5px; }
.service-full-progress i { width: 7px; height: 7px; }
.service-full-progress i:nth-child(1) { animation: serviceFullDotOne 10s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(2) { animation: serviceFullDotTwo 10s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(3) { animation: serviceFullDotThree 10s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(4) { animation: serviceFullDotFour 10s var(--ease-soft) infinite; }
.service-full-progress i:nth-child(5) { animation: serviceFullDotFive 10s var(--ease-soft) infinite; }

@keyframes serviceFullApp {
  0%, 29% { opacity: 0; transform: translateY(16px) scale(.96); }
  36%, 96% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(.99); }
}
@keyframes serviceFullCountries {
  0%, 35% { opacity: 0; transform: translateY(10px) scale(.98); }
  42%, 50% { opacity: 1; transform: translateY(0) scale(1); }
  57%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@keyframes serviceFullPlans {
  0%, 51% { opacity: 0; transform: translateY(10px) scale(.98); }
  58%, 66% { opacity: 1; transform: translateY(0) scale(1); }
  73%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@keyframes serviceFullPay {
  0%, 67% { opacity: 0; transform: translateY(10px) scale(.98); }
  74%, 82% { opacity: 1; transform: translateY(0) scale(1); }
  88%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@keyframes serviceFullDone {
  0%, 82% { opacity: 0; transform: translateY(10px) scale(.98); }
  89%, 97% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(.99); }
}
@keyframes serviceFullDotOne { 0%, 31% { background: #6e4562; } 39%, 100% { background: rgba(122, 80, 112, .18); } }
@keyframes serviceFullDotTwo { 0%, 36% { background: rgba(122, 80, 112, .18); } 43%, 54% { background: #6e4562; } 62%, 100% { background: rgba(122, 80, 112, .18); } }
@keyframes serviceFullDotThree { 0%, 52% { background: rgba(122, 80, 112, .18); } 59%, 69% { background: #6e4562; } 77%, 100% { background: rgba(122, 80, 112, .18); } }
@keyframes serviceFullDotFour { 0%, 69% { background: rgba(122, 80, 112, .18); } 76%, 85% { background: #6e4562; } 92%, 100% { background: rgba(122, 80, 112, .18); } }
@keyframes serviceFullDotFive { 0%, 84% { background: rgba(122, 80, 112, .18); } 90%, 98% { background: #6e4562; } 100% { background: rgba(122, 80, 112, .18); } }
/* Store service animation v3 fixes */
.service-mini-nav {
  display: none;
}

.service-mini-countries div {
  min-height: 18px;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 4px;
  padding: 3px 4px;
}

.service-mini-countries img {
  width: 16px;
  height: 11px;
  border-radius: 3px;
}

.service-mini-countries b {
  font-size: 7.2px;
}

.service-mini-countries small {
  max-width: 56px;
  margin-top: 1px;
  font-size: 5px;
  line-height: .95;
}

.service-full-app-top span {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  line-height: 1.05;
}

.service-full-state-done {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
}

.service-full-state-done .service-qr-code {
  grid-row: span 2;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(82, 53, 73, .08), 0 14px 24px rgba(82, 53, 73, .14);
  overflow: hidden;
}

.service-full-state-done .service-qr-code::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 30px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #21151e;
  box-shadow:
    8px 0 #21151e,
    16px 0 #21151e,
    0 8px #21151e,
    12px 8px #21151e,
    20px 8px #21151e,
    4px 16px #21151e,
    12px 16px #21151e,
    20px 16px #21151e,
    -8px 20px #21151e,
    4px 24px #21151e,
    16px 24px #21151e;
}

.service-full-state-done .service-qr-code::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background:
    linear-gradient(#21151e 0 0) 0 0 / 6px 6px no-repeat,
    linear-gradient(#21151e 0 0) 12px 0 / 6px 6px no-repeat,
    linear-gradient(#21151e 0 0) 6px 6px / 6px 6px no-repeat,
    linear-gradient(#21151e 0 0) 0 12px / 6px 6px no-repeat,
    linear-gradient(#21151e 0 0) 12px 12px / 6px 6px no-repeat;
}

.service-full-state-done .service-qr-code span {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border: 3px solid #21151e;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.service-full-state-done .service-qr-code span::before,
.service-full-state-done .service-qr-code span::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid #21151e;
  border-radius: 3px;
  background: transparent;
}

.service-full-state-done .service-qr-code span::before {
  left: 31px;
  top: -3px;
}

.service-full-state-done .service-qr-code span::after {
  left: -3px;
  top: 31px;
}
/* Public root landing shown outside Telegram TMA */
body.public-landing-page {
  display: block;
  min-height: 100vh;
  overflow-x: hidden;
}

body.public-landing-page #app {
  width: min(100%, 1040px);
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 42px);
  box-shadow: none;
}

.public-landing {
  min-height: calc(100dvh - clamp(36px, 8vw, 84px));
  display: grid;
  place-items: center;
}

.public-hero {
  width: min(100%, 820px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  align-items: center;
  gap: clamp(18px, 4vw, 36px);
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid rgba(82, 53, 73, .08);
  border-radius: 32px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 20px 60px rgba(82, 53, 73, .11), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
}

.public-brand {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-width: 0;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
}

.public-brand span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #523549);
  box-shadow: 0 10px 24px rgba(82, 53, 73, .18);
}

.public-hero-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.public-hero h1 {
  margin: 0;
  max-width: 520px;
  color: var(--c-text);
  font-size: clamp(34px, 6.4vw, 64px);
  line-height: .94;
  letter-spacing: 0;
  font-weight: 920;
}

.public-hero p {
  margin: 0;
  max-width: 430px;
  color: var(--c-text-2);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.35;
  font-weight: 680;
}

.public-hero-btn {
  justify-self: start;
  min-width: 210px;
  min-height: 58px;
  border-radius: 18px;
  font-size: 16px;
  box-shadow: 0 14px 30px rgba(82, 53, 73, .18);
}

.public-preview {
  grid-row: 2 / span 2;
  grid-column: 2;
  width: 236px;
  aspect-ratio: 1 / 1;
  align-self: center;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fff, #f8f4f8);
  border: 1px solid rgba(82, 53, 73, .075);
  box-shadow: 0 18px 42px rgba(82, 53, 73, .12);
}

.public-preview-top,
.public-preview-row,
.public-preview-tabs {
  border-radius: 18px;
  background: rgba(82, 53, 73, .055);
}

.public-preview-top {
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.public-preview-top i {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: linear-gradient(145deg, #9d638d, #523549);
}

.public-preview-top span,
.public-preview-row span,
.public-preview-row b {
  display: block;
  border-radius: 999px;
}

.public-preview-top span {
  width: 108px;
  height: 10px;
  background: rgba(82, 53, 73, .18);
}

.public-preview-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.public-preview-row b {
  width: 38px;
  height: 26px;
  border-radius: 8px;
  background: #ef4444;
  box-shadow: inset 14px 0 0 #fff, inset 28px 0 0 #10b981;
}

.public-preview-row-a span { width: 96px; height: 10px; background: rgba(82, 53, 73, .22); }
.public-preview-row-b span { width: 74px; height: 10px; background: rgba(82, 53, 73, .16); }

.public-preview-tabs {
  align-self: end;
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
}

.public-preview-tabs i {
  border-radius: 999px;
  background: rgba(82, 53, 73, .10);
}

.public-preview-tabs i:first-child {
  background: rgba(122, 80, 112, .26);
}


.checkout-return {
  min-height: calc(100dvh - clamp(36px, 8vw, 84px));
  display: grid;
  place-items: center;
}

.checkout-return-card {
  width: min(100%, 460px);
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(24px, 6vw, 40px);
  border: 1px solid rgba(82, 53, 73, .08);
  border-radius: 30px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 20px 60px rgba(82, 53, 73, .12), inset 0 1px 0 rgba(255,255,255,.72);
  text-align: center;
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
}

.checkout-return-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, #9d638d, #523549);
  box-shadow: 0 16px 34px rgba(82, 53, 73, .20);
}

.checkout-return-mark.fail {
  background: linear-gradient(145deg, #9d638d, #6f2f3c);
}

.checkout-return-mark svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.checkout-return-card h1 {
  margin: 4px 0 0;
  color: var(--c-text);
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 920;
}

.checkout-return-card p {
  margin: 0;
  max-width: 340px;
  color: var(--c-text-2);
  font-size: 15px;
  line-height: 1.38;
  font-weight: 680;
}

.checkout-return-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.checkout-return-actions .btn {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  font-size: 16px;
}

@media (max-width: 720px) {
  body.public-landing-page #app {
    width: min(100%, 430px);
    padding: 14px 16px calc(var(--safe-bottom) + 24px);
  }

  .public-landing {
    min-height: calc(100dvh - 38px);
  }

  .public-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 18px 18px;
    border-radius: 26px;
  }

  .public-preview {
    grid-row: auto;
    grid-column: auto;
    width: min(100%, 220px);
    justify-self: center;
  }

  .public-hero-btn {
    width: 100%;
    justify-self: stretch;
  }
}
/* Store service QR result layout */
.service-full-state-done {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 16px;
}

.service-full-state-done .service-qr-code {
  grid-row: auto;
  width: 112px;
  height: 112px;
  border-radius: 24px;
  background-color: #fff;
  background-image:
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0),
    linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0), linear-gradient(#21151e 0 0);
  background-size:
    28px 28px, 28px 28px, 28px 28px,
    18px 18px, 18px 18px, 18px 18px,
    8px 8px, 8px 8px, 8px 8px,
    6px 6px, 10px 6px, 6px 14px,
    14px 6px, 6px 6px, 6px 10px,
    10px 6px, 6px 6px, 6px 14px,
    6px 6px, 14px 6px, 6px 6px,
    10px 6px, 6px 10px, 6px 6px,
    6px 14px, 14px 6px, 6px 6px,
    10px 6px, 6px 6px, 6px 10px;
  background-position:
    14px 14px, 70px 14px, 14px 70px,
    19px 19px, 75px 19px, 19px 75px,
    24px 24px, 80px 24px, 24px 80px,
    50px 18px, 50px 30px, 62px 30px,
    44px 48px, 64px 48px, 84px 48px,
    50px 62px, 68px 62px, 86px 62px,
    44px 80px, 56px 76px, 78px 76px,
    94px 76px, 54px 92px, 70px 92px,
    86px 88px, 42px 100px, 62px 100px,
    80px 100px, 94px 100px, 100px 88px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(82, 53, 73, .08), 0 18px 32px rgba(82, 53, 73, .16);
}

.service-full-state-done .service-qr-code::before,
.service-full-state-done .service-qr-code::after,
.service-full-state-done .service-qr-code span,
.service-full-state-done .service-qr-code span::before,
.service-full-state-done .service-qr-code span::after {
  content: none;
  display: none;
}

.service-full-state-done b {
  width: 116px;
  height: 8px;
  margin-top: 3px;
  background: rgba(122, 80, 112, .18);
}

.service-full-state-done span {
  width: 82px;
  height: 6px;
  background: rgba(122, 80, 112, .10);
}
.service-full-state-done img.service-qr-code {
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 24px;
  background: #fff;
  background-image: none;
  object-fit: contain;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(82, 53, 73, .08), 0 18px 32px rgba(82, 53, 73, .16);
}