:root {
  color-scheme: light;
  --nav: #061a36;
  --nav-2: #0c274c;
  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f8fbff;
  --ink: #071d3a;
  --muted: #667790;
  --line: #dfe7f1;
  --line-strong: #cbd8e7;
  --blue: #1e7df0;
  --blue-2: #0f63d8;
  --blue-soft: #ecf5ff;
  --orange: #ff7417;
  --orange-soft: #fff4e8;
  --red: #e34646;
  --shadow: 0 18px 45px rgba(15, 37, 68, 0.09);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 1180px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(30, 125, 240, 0.24);
  outline-offset: 2px;
}

svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.front-shell {
  min-height: 100vh;
}

.front-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(90deg, var(--nav), var(--nav-2));
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(6, 26, 54, 0.18);
}

.nav-inner {
  display: grid;
  grid-template-columns: 245px minmax(520px, 1fr) auto;
  align-items: center;
  gap: 28px;
  width: min(calc(100% - 72px), 1780px);
  min-height: 84px;
  margin: 0 auto;
}

.brand,
.nav-menu,
.nav-actions,
.wallet-pill,
.rate-pill,
.user-pill {
  display: flex;
  align-items: center;
}

.brand {
  gap: 14px;
  color: #ffffff;
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.brand strong {
  font-size: 28px;
  font-weight: 900;
}

.nav-menu {
  gap: 12px;
  align-self: stretch;
}

.nav-menu button {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.nav-menu button.active {
  color: #ffffff;
}

.nav-menu button.active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--blue);
  content: "";
}

.nav-actions {
  gap: 16px;
  justify-content: flex-end;
  white-space: nowrap;
}

.wallet-pill,
.rate-pill,
.user-pill {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.wallet-pill {
  gap: 9px;
  padding: 0 10px 0 14px;
}

.wallet-pill b,
.wallet-pill strong,
.rate-pill,
.user-pill {
  font-weight: 900;
}

.wallet-pill b {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.wallet-pill strong {
  font-size: 18px;
}

.wallet-pill button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.rate-pill {
  gap: 8px;
  padding: 0 18px;
}

.rate-pill strong {
  margin-left: 6px;
  color: #ffffff;
}

.user-pill {
  gap: 8px;
  padding: 0 14px;
  border: 0;
  color: #ffffff;
}

.user-pill span {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-page {
  width: min(calc(100% - 72px), 1780px);
  margin: 0 auto;
  padding: 32px 0 54px;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px;
  margin: 0 78px 24px;
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.step:not(:last-child)::after {
  position: absolute;
  top: 24px;
  right: -26px;
  width: 58px;
  height: 2px;
  background: #cdd6e2;
  content: "";
}

.step b {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #b6c0ce;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.step.active b {
  background: var(--blue);
}

.step strong,
.step small {
  display: block;
}

.step strong {
  font-size: 18px;
  font-weight: 900;
}

.step small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.purchase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 26px;
  align-items: start;
}

.flow-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.flow-card,
.checkout-card,
.recent-card,
.faq-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.flow-card {
  padding: 22px;
}

.section-title {
  display: grid;
  grid-template-columns: auto minmax(280px, 430px);
  gap: 20px;
  align-items: center;
  margin-bottom: 18px;
}

.section-title.simple {
  grid-template-columns: 1fr auto;
}

.section-title h2,
.checkout-card h2,
.panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.section-title span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.inline-search {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: #8b99ad;
}

.inline-search.compact {
  max-width: 320px;
  justify-self: end;
}

[data-catalog-preview="services"] .section-title { display:flex; flex-wrap:wrap; gap:12px; }
[data-catalog-preview="services"] .section-title h2 { flex-shrink:0; }
[data-catalog-preview="services"] .inline-search { flex:1 1 160px; min-width:0; }
.service-categories { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.service-categories button { padding:7px 9px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.service-categories button[aria-pressed="true"] { color:var(--ink); border-bottom-color:currentColor; font-weight:700; }
.service-categories button:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.catalog-toolbar > .service-categories { flex-basis:100%; }

.inline-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-weight: 800;
}

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

.country-grid,
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.choice-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 22px rgba(15, 37, 68, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.choice-card:hover {
  border-color: rgba(30, 125, 240, 0.45);
  box-shadow: 0 14px 32px rgba(15, 37, 68, 0.08);
  transform: translateY(-1px);
}

.choice-card.selected {
  border-color: var(--blue);
  background: linear-gradient(180deg, #ffffff, #f2f8ff);
  box-shadow: 0 14px 34px rgba(30, 125, 240, 0.13);
}

.check-mark {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 0 var(--radius) 0 var(--radius);
  background: var(--blue);
  color: #ffffff;
}

.service-card {
  display: grid;
  justify-items: center;
  min-height: 112px;
  padding: 16px 14px 12px;
  text-align: center;
}

.service-card .service-icon {
  width: 34px;
  height: 34px;
}

.service-card strong,
.choice-card strong {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 900;
}

.service-card small,
.country-card small,
.supplier-card small,
.more-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.service-card em,
.country-card em {
  margin-top: 8px;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.more-card {
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: #f8fbff;
  color: var(--muted);
  text-align: center;
}

.more-card strong {
  color: var(--ink);
}

.country-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 16px;
}

.country-card em {
  grid-column: 2;
  margin-top: 2px;
  color: var(--blue);
}

.more-country {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 16px;
  border-style: dashed;
  background: #f8fbff;
}

.service-icon,
.flag-icon,
.flag-emoji {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.flag-icon {
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(7, 29, 58, 0.08);
}

.flag-emoji {
  display: grid;
  place-items: center;
  background: #ffffff;
  font-size: 30px;
  line-height: 1;
}

.supplier-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 145px;
}

.supplier-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 14px;
}

.supplier-logo,
.mini-logo {
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #1673f2, #113e91);
  color: #ffffff;
  font-weight: 900;
}

.supplier-logo {
  width: 44px;
  height: 44px;
}

.supplier-main {
  min-width: 0;
}

.supplier-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.supplier-meta b {
  color: var(--blue);
  font-size: 16px;
}

.supplier-meta small,
.summary-line em {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
}

.more-supplier {
  grid-template-columns: 34px minmax(0, 1fr);
  border-style: dashed;
  background: #f8fbff;
  color: var(--muted);
}

.safe-note,
.checkout-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #8a96a8;
  font-size: 13px;
  font-weight: 800;
}

.checkout-column {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.checkout-card {
  padding: 24px;
}

.summary-list {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.summary-line {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.summary-line:last-child {
  border-bottom: 0;
}

.summary-line small {
  color: var(--muted);
  font-weight: 800;
}

.summary-line strong {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 16px;
}

.summary-line .service-icon,
.summary-line .flag-icon,
.summary-line .flag-emoji {
  width: 28px;
  height: 28px;
}

.mini-logo {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.price-list {
  display: grid;
  gap: 15px;
  margin: 24px 0 0;
}

.price-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.price-list dt {
  color: var(--muted);
  font-weight: 800;
}

.price-list dd {
  margin: 0;
  font-weight: 900;
}

.price-list .price-main {
  color: var(--orange);
  font-size: 30px;
  line-height: 1;
}

.confirm-button {
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ff8a22, var(--orange));
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 14px 25px rgba(255, 116, 23, 0.28);
}

.order-head,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.order-head span {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.order-head .waiting {
  background: var(--orange-soft);
  color: var(--orange);
}

.order-head .ok {
  background: var(--blue-soft);
  color: var(--blue);
}

.order-head .cancelled {
  background: #fff0f0;
  color: var(--red);
}

.order-service {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.order-service .service-icon {
  width: 34px;
  height: 34px;
}

.order-service strong,
.order-service small {
  display: block;
}

.order-service small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.order-service small .flag-icon,
.order-service small .flag-emoji {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}

.field-title {
  display: block;
  margin: 20px 0 9px;
  color: var(--muted);
  font-weight: 900;
}

.copy-box,
.sms-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  min-height: 50px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
}

.copy-box strong,
.sms-box span {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 900;
}

.sms-box span {
  color: var(--muted);
  font-size: 15px;
}

.sms-box.received span {
  color: var(--ink);
  font-size: 20px;
}

.copy-box button,
.sms-box button {
  border: 0;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.countdown {
  margin-top: 16px;
}

.countdown span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.countdown i {
  display: block;
  height: 9px;
  margin-top: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 72%, #d8e2ee 72%);
}

.order-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.order-actions button {
  min-height: 48px;
  border-radius: var(--radius);
  font-weight: 900;
}

.order-actions button:first-child {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--ink);
}

.order-actions button:last-child {
  border: 0;
  background: var(--blue);
  color: #ffffff;
}

.recent-card,
.faq-card,
.trust-card {
  padding: 24px;
}

.panel-head {
  margin-bottom: 16px;
}

.panel-head button,
.text-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  height: 54px;
  border-top: 1px solid var(--line);
  color: #334760;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 900;
}

td {
  font-weight: 800;
}

td .service-icon,
td .flag-icon,
td .flag-emoji {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
}

.faq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #334760;
  font-weight: 900;
  text-align: left;
}

.trust-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.trust-card h2 {
  margin: 0 0 2px;
  font-size: 22px;
  line-height: 1.2;
}

.trust-card div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.trust-card div span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue);
}

.trust-card strong,
.trust-card small {
  display: block;
}

.trust-card strong {
  font-size: 14px;
  font-weight: 900;
}

.trust-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.support-fab {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 35;
  display: flex;
  gap: 8px;
  justify-content: center;
  place-items: center;
  width: 132px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(30, 125, 240, 0.28);
}

.support-fab b { position:absolute; top:-7px; right:-7px; min-width:22px; padding:3px; background:#c62c46; border-radius:12px; font-size:12px; }
.support-fab b[hidden] { display:none; }
.modal-panel.ticket-panel { width:min(840px,calc(100vw - 32px)); height:min(750px,calc(100dvh - 32px)); padding:0; gap:0; grid-template-rows:auto minmax(0,1fr); overflow:hidden; border-radius:8px; }
.modal-panel.ticket-panel .modal-head { margin:0; padding:22px 24px; }
.ticket-panel .modal-support { min-height:0; padding:0; overflow:hidden; }
.ticket-workspace { display:flex; flex-direction:column; height:100%; min-height:0; padding:0 24px 20px; gap:14px; }
.ticket-toolbar { display:flex; align-items:center; gap:8px; flex-shrink:0; padding:14px 0; border-bottom:1px solid #e0e7ee; }
.ticket-workspace button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; border:1px solid #d5e0eb; border-radius:6px; padding:8px 12px; background:#fff; color:#23374f; font-size:14px; }
.ticket-workspace button[aria-current] { background:#eaf3ff; border-color:#90b9f4; color:#1263cb; }
.ticket-workspace button:disabled { opacity:.5; cursor:not-allowed; }
.ticket-workspace button.modal-primary { color:#fff; background:#1671e8; border-color:#1671e8; }
.ticket-workspace button.ticket-refresh { margin-left:auto; width:40px; padding:8px; }
.ticket-workspace svg { width:18px; height:18px; flex-shrink:0; }
.ticket-filter { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ticket-filter label { display:flex; align-items:center; gap:8px; }
.ticket-workspace input,.ticket-workspace select,.ticket-workspace textarea { border:1px solid #ccd8e5; border-radius:6px; background:#fff; color:#172d48; padding:10px 12px; font:inherit; min-width:0; max-width:100%; }
.ticket-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.ticket-list { display:flex; flex-direction:column; }
.ticket-workspace .ticket-list-item { flex-shrink:0; display:flex; justify-content:space-between; text-align:left; width:100%; border:0; border-bottom:1px solid #e5ebf2; border-radius:0; padding:17px 0; gap:12px; }
.ticket-list-item>span:first-child { flex:1; min-width:0; }
.ticket-list-item strong { display:block; overflow-wrap:anywhere; font-size:15px; }
.ticket-list-item small { display:block; margin-top:7px; color:#62738a; font-size:12px; }
.ticket-badge { display:inline-flex; align-items:center; flex-shrink:0; padding:4px 8px; border:1px solid transparent; border-radius:5px; font-size:12px; white-space:nowrap; font-weight:600; }
.ticket-pending { color:#8c5b09; background:#fff7e5; border-color:#f2dcaa; }
.ticket-processing { color:#125bac; background:#edf5ff; border-color:#bfd8f7; }
.ticket-waiting_user { color:#8a3ea2; background:#f8effb; border-color:#e4cbed; }
.ticket-resolved { color:#087747; background:#eaf8f0; border-color:#b6e4cd; }
.ticket-closed { color:#586677; background:#eff2f5; border-color:#d6dde5; }
.ticket-unread-dot { display:inline-block; width:8px; height:8px; background:#d4324f; border-radius:50%; margin-right:7px; }
.ticket-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:#65758b; flex-shrink:0; }
.ticket-form { display:flex; flex-direction:column; gap:18px; }
.ticket-form label { display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; }
.ticket-form textarea { min-height:180px; resize:vertical; }
.ticket-hint { color:#64758b; font-size:13px; margin:0; line-height:1.6; }
.ticket-empty { padding:30px 10px; text-align:center; color:#718095; }
.ticket-error { margin:0; padding:10px 12px; background:#fff0f1; color:#a62035; border:1px solid #efc1c9; border-radius:6px; font-size:14px; overflow-wrap:anywhere; }
.ticket-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-shrink:0; }
.ticket-detail-head h3 { margin:4px 0 0; font-size:18px; overflow-wrap:anywhere; }
.ticket-conversation { background:#f6f8fb; padding:14px; border-block:1px solid #e0e7ee; }
.ticket-message { padding:14px 0; border-bottom:1px solid #e0e7ee; }
.ticket-message:last-child { border-bottom:0; }
.ticket-message header { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
.ticket-message time { color:#6b7b8d; font-size:12px; }
.ticket-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0 0; font-size:14px; line-height:1.7; }
.ticket-message-admin strong { color:#1263cb; }
.ticket-message-system { color:#64758b; }
.ticket-reply { display:flex; gap:10px; flex-shrink:0; align-items:flex-end; }
.ticket-reply textarea { flex:1; min-height:72px; height:80px; max-height:130px; resize:vertical; }
.ticket-reply button { width:auto; margin:0; flex-shrink:0; }
.ticket-reply .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:600px) {
  .support-fab { right:14px; bottom:16px; width:116px; font-size:13px; }
  .modal-panel.ticket-panel:not(.account-panel) { padding:0; width:calc(100vw - 16px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); gap:0; }
  .modal-panel.ticket-panel:not(.account-panel) .modal-head { margin:0; padding:14px; }
  .ticket-workspace { padding:0 14px 14px; gap:10px; }
  .ticket-workspace button { font-size:13px; padding:8px; }
  .ticket-list-item>svg { display:none; }
  .ticket-detail-head h3 { font-size:16px; }
  .ticket-reply { flex-wrap:wrap; }
  .ticket-reply textarea { flex-basis:100%; }
  .ticket-reply button { margin-left:auto; }
}

.front-toast {
  position: fixed;
  top: auto;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 30px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 18px;
  max-width: min(440px, calc(100vw - 32px));
  overflow-wrap: anywhere;
  line-height: 1.5;
  pointer-events: none;
  border: 1px solid #cfe0f5;
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--blue);
  box-shadow: var(--shadow);
  font-weight: 900;
}

.auth-error { margin:0; padding:10px 12px; border:1px solid #efb9b9; border-radius:6px; color:#ad2424; background:#fff2f2; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.auth-error[hidden] { display:none; }
.auth-error:focus { outline:2px solid #e79797; outline-offset:2px; }
@media(max-width:600px) { .front-toast { top:auto; right:16px; } }

.sms-spinner { display:inline-block; width:14px; height:14px; margin-right:8px; border:2px solid #cbd5df; border-top-color:#2563eb; border-radius:50%; animation:sms-spin 1s linear infinite; vertical-align:middle; }
@keyframes sms-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .sms-spinner { animation:none; } }
.sms-success { display:flex; align-items:center; gap:8px; color:#15803d; font-weight:700; }
.sms-success svg { width:20px; height:20px; flex:none; }
.sms-body { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; color:#374151; }
.sms-box button { white-space:normal; }
.catalog-row-label small { display:block; white-space:normal; overflow-wrap:anywhere; font-size:12px; font-weight:400; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 42px;
  background: rgba(6, 26, 54, 0.42);
  backdrop-filter: blur(8px);
}

.modal-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 18px;
  width: min(1180px, calc(100vw - 84px));
  max-height: calc(100vh - 84px);
  padding: 24px;
  border: 1px solid rgba(223, 231, 241, 0.92);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(6, 26, 54, 0.26);
}

.modal-head {
  position: sticky;
  top: -24px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: -24px -24px 0;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(223, 231, 241, 0.88);
  border-radius: 12px 12px 0 0;
  background: #ffffff;
}

.modal-head strong,
.modal-head small {
  display: block;
}

.modal-head strong {
  font-size: 24px;
  font-weight: 900;
}

.modal-head small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid #b7d6ff;
  border-radius: var(--radius);
  background: #eef6ff;
  color: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 132, 230, 0.12);
}

.modal-close svg {
  width: 21px;
  height: 21px;
  stroke-width: 3;
}

.modal-search {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: #8b99ad;
}

.modal-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}

.modal-grid {
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 2px 4px 6px 2px;
}

.modal-services {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.modal-countries {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modal-suppliers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-grid .service-card {
  min-height: 118px;
}

.modal-grid .country-card,
.modal-grid .supplier-card {
  min-height: 82px;
}

.modal-grid .supplier-card {
  grid-template-columns: 46px minmax(0, 1fr) 104px;
}

.modal-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 34px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.auth-panel {
  width: min(520px, calc(100vw - 84px));
}

.account-panel { width: min(1080px, calc(100vw - 32px)); }

.medium-panel {
  width: min(760px, calc(100vw - 84px));
}

.wide-panel {
  width: min(1280px, calc(100vw - 84px));
}

.modal-body {
  overflow: auto;
  min-height: 0;
}

.auth-layout,
.recharge-modal,
.support-modal {
  display: grid;
  gap: 16px;
}

.account-modal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  min-height: 520px;
}

.account-side {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f7fbff, #ffffff);
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--blue);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.account-side strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}

.account-side small,
.account-side span {
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.account-side span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue);
}

.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid #ffd5d5;
  border-radius: var(--radius);
  background: #fff5f5;
  color: #d73a3a;
  font-weight: 900;
}

.account-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

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

.account-tabs button,
.account-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: #40546d;
  font-weight: 900;
}

.account-tabs button.active {
  border-color: #8dc3ff;
  background: #eef6ff;
  color: var(--blue);
}

.account-content {
  overflow: auto;
  min-height: 0;
}

.account-loading {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: var(--muted);
  font-weight: 900;
}

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

.profile-card {
  display: grid;
  gap: 8px;
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.profile-card small,
.profile-card span {
  color: var(--muted);
  font-weight: 800;
}

.profile-card strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
}

.account-info-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

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

.ok-text {
  color: #1c9b62;
}

.api-create-form,
.password-form {
  display: grid;
  gap: 14px;
}

.api-create-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 180px;
  align-items: end;
}

.api-create-form label,
.password-form label {
  display: grid;
  gap: 8px;
  color: #334760;
  font-weight: 900;
}

.api-create-form input,
.password-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 800;
}

.generated-key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #ffd9b8;
  border-radius: var(--radius);
  background: #fff7ef;
}

.generated-key strong {
  color: #a34c00;
}

.generated-key code {
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.generated-key button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.api-key-table {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.api-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.api-key-row span,
.api-key-row span small {
  display: grid;
  gap: 4px;
}

.api-key-row small {
  color: var(--muted);
  font-weight: 800;
}

.api-key-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: #40546d;
  font-weight: 900;
}

.api-key-row em {
  justify-self: end;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e9fbf2;
  color: #13965b;
  font-style: normal;
  font-weight: 900;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.auth-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.auth-tabs button.active {
  background: #ffffff;
  color: var(--blue);
  box-shadow: 0 8px 18px rgba(15, 37, 68, 0.08);
}

.auth-form,
.support-modal {
  display: grid;
  gap: 14px;
}

.auth-form label,
.support-modal label {
  display: grid;
  gap: 8px;
  color: #334760;
  font-weight: 900;
}

.auth-form input,
.support-modal select,
.support-modal textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 800;
}

.support-modal textarea {
  min-height: 110px;
  padding-top: 12px;
  resize: vertical;
}

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.auth-options label {
  display: flex;
  grid-template-columns: auto;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.auth-options input {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  accent-color: var(--blue);
}

.auth-options button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
}

.modal-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ff8a22, var(--orange));
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 14px 25px rgba(255, 116, 23, 0.22);
}

.modal-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.summary-cards div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.summary-cards small,
.summary-cards strong {
  display: block;
}

.summary-cards small {
  color: var(--muted);
  font-weight: 800;
}

.summary-cards strong {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 900;
}

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

.amount-grid button {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.amount-grid button.active {
  border-color: var(--blue);
  background: var(--blue-soft);
}

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

.amount-grid strong {
  font-size: 22px;
  font-weight: 900;
}

.amount-grid small {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
}

.payment-box {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.payment-box h3 {
  margin: 0 0 4px;
}

.payment-box label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.help-modal {
  display: grid;
  gap: 10px;
}

.help-modal details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.help-modal summary {
  padding: 14px 16px;
  font-weight: 900;
  cursor: pointer;
}

.help-modal p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
}

.api-key-box,
.endpoint-list div {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.api-key-box {
  grid-template-columns: 42px auto minmax(0, 1fr) auto;
  margin-bottom: 14px;
  padding: 14px;
}

.api-key-box span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue);
}

.api-key-box code,
.endpoint-list code {
  padding: 8px 10px;
  border-radius: 6px;
  background: #ffffff;
  color: #1c3555;
  font-weight: 900;
}

.api-key-box button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 900;
}

.endpoint-list {
  display: grid;
  gap: 10px;
}

.endpoint-list div {
  grid-template-columns: 72px minmax(260px, auto) minmax(0, 1fr);
  padding: 12px;
}

.endpoint-list b {
  color: var(--blue);
}

.endpoint-list span {
  color: var(--muted);
  font-weight: 800;
}

.sms-detail-modal {
  display: grid;
  gap: 14px;
}

.sms-code {
  display: grid;
  place-items: center;
  min-height: 90px;
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 38px;
  font-weight: 900;
}

.sms-detail-modal p,
.sms-detail-modal li {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
}

@media (max-width: 1360px) {
  html {
    min-width: 1024px;
  }

  .nav-inner,
  .wizard-page {
    width: min(calc(100% - 36px), 1260px);
  }

  .nav-inner {
    grid-template-columns: 220px 1fr;
  }

  .nav-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-bottom: 12px;
  }

  .stepper {
    margin-right: 20px;
    margin-left: 20px;
  }

  .purchase-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .service-grid,
  .country-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .checkout-column {
    position: static;
  }
}
/* Growth controls share the account surface without changing the purchase layout. */
.referral-share { display:flex; align-items:flex-end; gap:12px; margin-bottom:22px; }
.referral-share label { display:flex; flex:1; min-width:0; flex-direction:column; gap:8px; }
.referral-share input { width:100%; min-width:0; }
.referral-share button { min-height:40px; white-space:nowrap; }
.incentive-content { display:grid; gap:18px; min-width:0; }
.incentive-content .referral-share { margin-bottom:0; }
.incentive-balances { grid-template-columns:repeat(2,minmax(0,1fr)); }
.incentive-balances .profile-card { border-radius:8px; min-height:105px; }
.incentive-balances .profile-card strong { font-size:22px; overflow-wrap:anywhere; }
.incentive-balances .profile-card:nth-child(3) { background:#eef5ff; border-color:#bed4f4; }
.incentive-balances .profile-card:nth-child(4) { background:#fff8e8; border-color:#eadab0; }
.incentive-rules { border-block:1px solid var(--line); padding:14px 0; }
.incentive-rules h3,.finance-heading h3 { margin:0; font-size:16px; }
.incentive-rules p,.finance-alert p { margin:8px 0 0; font-size:13px; line-height:1.7; }
.finance-form,.finance-form fieldset { display:grid; gap:16px; min-width:0; }
.finance-form fieldset { border:0; margin:0; padding:0; }
.finance-form label { display:grid; gap:7px; min-width:0; font-size:14px; }
.finance-form input:not([type=checkbox]),.finance-form select,.incentive-content .referral-share input { width:100%; min-width:0; min-height:42px; padding:9px 11px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); font:inherit; }
.finance-form small { color:var(--muted); line-height:1.6; }
.convert-form { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.finance-form .finance-consent { display:flex; align-items:flex-start; line-height:1.6; }
.finance-consent input { flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; }
.finance-actions,.finance-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.finance-actions button,.finance-heading button,.finance-empty button,.finance-table button,.referral-share button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); font:inherit; }
.finance-actions button.modal-primary { background:var(--blue); color:#fff; }
.finance-actions svg,.finance-heading svg,.finance-empty svg,.finance-form button svg,.referral-share button svg { flex:0 0 auto; width:18px; height:18px; }
.finance-form button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.finance-alert { margin:0; padding:12px; border-left:3px solid #aa7612; background:#fff8e8; color:#654b12; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.finance-alert [data-finance-retry] { display:inline-flex; align-items:center; gap:7px; min-height:40px; margin-top:10px; padding:8px 12px; border:1px solid #aa7612; border-radius:6px; background:#fff; color:#654b12; font:inherit; }
.finance-alert [data-finance-retry] svg { width:18px; height:18px; }
.finance-alert [data-finance-retry]:disabled { opacity:.5; cursor:not-allowed; }
.finance-section { display:grid; gap:14px; min-width:0; }
.finance-empty { padding:22px 0; color:var(--muted); line-height:1.7; }
.finance-table-scroll { max-width:100%; overflow:auto; }
.finance-table { width:100%; min-width:580px; border-collapse:collapse; font-size:13px; text-align:left; }
.finance-table th { padding:10px; color:var(--muted); background:#f5f7fa; font-weight:600; }
.finance-table td { max-width:220px; padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.6; overflow-wrap:anywhere; }
.finance-table td small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.finance-section .catalog-pager { flex-wrap:wrap; }
.account-panel .account-modal { min-height:0; }
.account-panel,.modal-panel:has(.modal-withdraw) { grid-template-rows:auto minmax(0,1fr); }
.account-panel .modal-account { min-height:0; overflow:auto; }
.account-panel .account-tabs button { padding:8px; font-size:13px; overflow-wrap:anywhere; }
.account-panel .account-tabs svg { flex:0 0 auto; width:18px; height:18px; }
.modal-withdraw { min-height:0; overflow:auto; }
.incentive-content button:disabled,.finance-section button:disabled,.finance-form button:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:760px) {
  .account-panel .account-modal { grid-template-columns:minmax(0,1fr); }
  .account-panel .account-side { padding:12px; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:8px; }
  .account-panel .account-avatar { width:40px; height:40px; font-size:20px; grid-row:span 2; }
  .account-panel .account-side strong { font-size:16px; overflow-wrap:anywhere; }
  .account-panel .account-side small { grid-column:2; }
  .account-panel .account-side span { grid-column:3; grid-row:1; }
  .account-panel .logout-button { grid-column:3; margin:0; font-size:12px; }
  .account-panel .account-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .convert-form { grid-template-columns:minmax(0,1fr); }
  .finance-form .finance-actions button { flex:1 1 140px; }
}
.article-nav { color:inherit; font-weight:700; text-decoration:none; padding:12px 0; }
@media(max-width:600px){.referral-share{flex-direction:column;align-items:stretch;}}
/* Live catalog layout: independent bounded dialogs and channel/operator separation. */
.channel-bar { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:0 0 24px; padding:16px 0; border-bottom:1px solid var(--line); }
.channel-segments { display:flex; flex-wrap:wrap; gap:8px; }
.channel-segments button { display:flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid var(--line-strong); border-radius:6px; background:white; color:var(--ink); }
.channel-segments button.active { border-color:var(--blue); color:var(--blue); background:#edf5ff; }
.channel-segments button[data-channel] { position:relative; }
.channel-segments button[data-channel]:has(.channel-recommend-badge) { padding-top:15px; }
.channel-segments .channel-recommend-badge { position:absolute; right:-1px; top:-9px; padding:2px 7px; border-radius:7px 7px 7px 0; background:linear-gradient(120deg,#ff922e,#f45432); color:#fff; font-size:10px; line-height:16px; font-weight:800; box-shadow:0 2px 6px #f4543226; }
.channel-switch-symbol { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:var(--blue); background:#edf5ff; margin:0 auto 18px; }
.channel-switch-panel p { line-height:1.8; }
.channel-switch-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:22px; }
.channel-segments small { color:var(--muted); font-size:12px; max-width:220px; }
.catalog-message { margin:12px 0; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.catalog-message[role=alert] { color:#b42318; }
.catalog-note { margin:12px 0 0; font-size:12px; color:var(--muted); }
.catalog-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.catalog-pager button { border:1px solid var(--line-strong); background:#fff; color:var(--blue); border-radius:6px; padding:8px 14px; }
.catalog-dialog { height:min(760px,calc(100dvh - 48px)); grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.catalog-dialog .modal-body { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; gap:14px; min-height:0; padding:0; }
.catalog-scroll { overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.catalog-scroll .modal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; align-content:start; }
.catalog-scroll .supplier-card { grid-template-columns:36px minmax(0,1fr); }
.catalog-scroll .supplier-meta { grid-column:2; }
.catalog-dialog { max-height:calc(100dvh - 48px); border-radius:8px; }
.catalog-dialog .modal-head { position:static; min-width:0; }
.catalog-dialog .modal-head strong { font-size:20px; }
.catalog-toolbar { display:grid; gap:10px; min-width:0; }
.catalog-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.catalog-controls label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.catalog-controls select { height:36px; min-width:64px; max-width:100%; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); padding:0 6px; font:inherit; }
.catalog-view { display:flex; gap:2px; margin-right:auto; }
.catalog-view button { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--muted); }
.catalog-view button[aria-pressed="true"] { background:var(--blue-soft); border-color:var(--blue); color:var(--blue); }
.catalog-view svg { width:18px; height:18px; }
.catalog-scroll { min-width:0; min-height:0; }
.catalog-scroll .catalog-list { grid-template-columns:minmax(0,1fr); gap:6px; }
.catalog-scroll .catalog-row { display:grid; grid-template-columns:28px minmax(0,1fr) 100px 100px; align-items:center; justify-items:start; gap:10px; min-height:54px; padding:10px 12px; text-align:left; border-radius:6px; }
.catalog-row-icon { display:grid; place-items:center; width:28px; height:28px; }
.catalog-row-icon .service-icon,.catalog-row-icon .flag-icon,.catalog-row-icon svg { width:28px; height:28px; margin:0; }
.catalog-row-label { display:block; justify-self:start; width:100%; min-width:0; text-align:left; overflow:hidden; }
.catalog-row-label strong { display:block; margin:0; min-width:0; font-size:14px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-row-stock,.catalog-row-price { justify-self:end; min-width:0; max-width:100%; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-row-stock { font-size:12px; color:var(--muted); }
.catalog-row-price { font-size:14px; font-weight:800; color:var(--blue); }
.catalog-dialog .catalog-pager { flex-wrap:nowrap; gap:6px; font-size:13px; min-width:0; }
.catalog-dialog .catalog-pager button { flex-shrink:0; }
.catalog-dialog .catalog-pager span { text-align:center; }
.choice-card:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:600px) {
 .catalog-controls { gap:8px; }
 .catalog-controls label { gap:4px; font-size:12px; }
 .catalog-controls select { padding:0 3px; }
 .catalog-scroll .catalog-row { grid-template-columns:24px minmax(0,1fr) 62px 70px; gap:8px; padding:10px 8px; }
 .catalog-row-icon,.catalog-row-icon .service-icon,.catalog-row-icon .flag-icon,.catalog-row-icon svg { width:24px; height:24px; }
 .catalog-row-label strong,.catalog-row-price { font-size:13px; }
}
.generic-icon { display:inline-grid; place-items:center; color:var(--blue); flex-shrink:0; }
.generic-icon svg { width:28px; height:28px; }
.more-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-width:0; }
.more-card small { width:auto; white-space:normal; text-align:center; }
.supplier-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.supplier-card { min-width:0; grid-template-columns:32px minmax(0,1fr); gap:10px; padding:14px; align-items:start; }
.supplier-card .supplier-logo { width:32px; height:32px; }
.supplier-card .supplier-main { min-width:0; }
.supplier-success-label { display:inline-block; white-space:nowrap; }
.supplier-card .supplier-main strong { font-size:14px; line-height:1.4; }
.supplier-card .supplier-meta { grid-column:1 / -1; justify-self:end; }
.supplier-main strong, .choice-card strong { overflow-wrap:anywhere; }
.live-table-scroll { overflow-x:auto; max-width:100%; }
.live-table-scroll table { min-width:640px; }
.live-table-scroll td small { display:block; color:var(--muted); margin-top:4px; }
.order-reference { overflow-wrap:anywhere; color:var(--muted); font-size:12px; }
.order-service small { overflow-wrap:anywhere; }
.sms-box span { white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.quote-confirm { display:grid; gap:16px; max-width:520px; margin:0 auto; }
.quote-confirm>strong { font-size:32px; color:var(--blue); }
.quote-confirm p { line-height:1.6; overflow-wrap:anywhere; }
button:disabled { cursor:not-allowed; opacity:.5; }
@media(min-width:1361px) and (max-width:1700px) {
 .nav-inner { grid-template-columns:180px minmax(0,1fr) auto; gap:14px; }
 .brand strong { font-size:24px; }
 .nav-menu { gap:4px; }
 .nav-menu button, .article-nav { padding-right:8px; padding-left:8px; font-size:14px; }
 .nav-actions { gap:8px; font-size:14px; }
 .rate-pill { padding:0 10px; }
}
@media(max-width:1100px) {
 .supplier-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .catalog-scroll .modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .modal-backdrop { padding:12px; }
 .catalog-dialog { width:calc(100vw - 24px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); padding:16px; }
 .catalog-dialog .modal-head { margin:-16px -16px 0; padding:16px; }
 .catalog-scroll .modal-grid { grid-template-columns:minmax(0,1fr); }
 .supplier-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .channel-segments button { flex-wrap:wrap; }
}
@media(max-width:1000px) {
 html { min-width:0; }
 .front-topbar { position:static; }
 .nav-inner { width:calc(100% - 32px); grid-template-columns:minmax(0,1fr); gap:12px; padding:14px 0; }
 .nav-menu { overflow-x:auto; min-height:44px; min-width:0; }
 .nav-menu button, .nav-menu .article-nav { flex-shrink:0; }
 .nav-actions { justify-content:flex-start; flex-wrap:wrap; gap:8px; }
 .wizard-page { width:calc(100% - 32px); padding-top:16px; }
 .stepper { margin:0 0 20px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
 .stepper .step::after { display:none; }
 .step b { width:36px; height:36px; font-size:20px; }
 .step strong { font-size:14px; }
 .step small { font-size:12px; }
 .purchase-grid { grid-template-columns:minmax(0,1fr); }
 .flow-card, .checkout-card, .recent-card { padding:16px; }
 .flow-stack { grid-template-columns:minmax(0,1fr); }
 .flow-card, .recent-card, .checkout-column { min-width:0; }
 .section-title { grid-template-columns:minmax(0,1fr); gap:12px; }
 .inline-search, .inline-search.compact { width:100%; max-width:none; }
 .service-grid, .country-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .service-card { min-height:140px; }
 .country-card { grid-template-columns:28px minmax(0,1fr); gap:8px; }
 .country-card em { grid-column:1 / -1; }
 .supplier-card { grid-template-columns:32px minmax(0,1fr); gap:8px; }
 .supplier-meta { grid-column:2; }
 .supplier-logo { width:32px; height:32px; }
 .modal-panel:not(.catalog-dialog) { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
 .account-layout { grid-template-columns:minmax(0,1fr); }
 .api-key-box { flex-wrap:wrap; }
 .endpoint-list code { overflow-wrap:anywhere; }
}
.site-footer {
  margin-top:40px;
  background:var(--surface);
  border-top:1px solid var(--line);
  color:var(--ink);
}
.site-footer-inner { width:min(calc(100% - 72px),1780px); margin:0 auto; }
.site-footer-main { display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(2,minmax(180px,1fr)); gap:64px; padding:40px 0 32px; }
.site-footer-main > * { min-width:0; }
.site-footer-brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.site-footer-brand img { width:48px; height:48px; object-fit:contain; flex-shrink:0; }
.site-footer-brand span { display:grid; gap:4px; }
.site-footer-brand strong { font-size:24px; line-height:1.2; }
.site-footer-brand small, .site-footer-identity p { font-size:13px; line-height:1.7; color:var(--muted); }
.site-footer-identity p { margin:16px 0; }
.site-footer-support { display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--blue-2); font-weight:600; }
.site-footer-support svg { width:18px; height:18px; flex-shrink:0; }
.site-footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.site-footer-links h2 { margin:0 0 10px; font-size:14px; line-height:24px; }
.site-footer-links button, .site-footer-links a, .site-footer-bottom nav button { border:0; background:none; color:var(--muted); padding:8px 0; font-size:14px; line-height:20px; text-align:left; text-decoration:none; overflow-wrap:anywhere; }
.site-footer a:hover, .site-footer button:hover { color:var(--blue-2); }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.site-footer-bottom { border-top:1px solid var(--line); display:flex; align-items:center; gap:32px; padding:18px 80px 18px 0; }
.site-footer-bottom > small { color:var(--muted); font-size:12px; }
.site-footer-bottom nav { display:flex; flex-wrap:wrap; gap:8px 24px; margin-left:auto; }
.site-footer-bottom nav button { font-size:12px; }
.site-footer-top { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--muted); }
.site-footer-top svg { width:18px; height:18px; }
.site-footer-information { display:grid; gap:24px; }
.site-footer-information h3 { margin:0 0 8px; font-size:16px; }
.site-footer-information p { margin:0; color:var(--muted); line-height:1.85; overflow-wrap:anywhere; }
@media(max-width:1000px) {
  .site-footer-inner { width:calc(100% - 32px); }
  .site-footer-main { gap:32px; grid-template-columns:minmax(210px,1.3fr) repeat(2,minmax(130px,1fr)); }
}
@media(max-width:650px) {
  .site-footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding:28px 0; }
  .site-footer-identity { grid-column:1 / -1; }
  .site-footer-bottom { flex-wrap:wrap; gap:12px; padding-right:0; padding-bottom:80px; }
  .site-footer-bottom nav { order:3; flex-basis:100%; margin-left:0; gap:4px 20px; }
  .site-footer-top { margin-left:auto; }
  .site-footer-links button, .site-footer-links a { min-height:44px; }
}

.order-badge { display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border-radius:5px; font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap; }
.order-badge-success { color:#167447; background:#e5f5ec; }
.order-badge-failure { color:#b33240; background:#fff0f0; }
.order-badge-pending { color:#946009; background:#fff4d9; }
.order-message { color:var(--muted); font-size:14px; line-height:1.7; }
.refund-confirmed { color:#167447; font-size:13px; line-height:1.6; }
.refund-confirmed svg { width:16px; height:16px; vertical-align:middle; }
.purchase-notice { margin-top:14px; padding:12px; border-left:3px solid #d79b28; background:#fff8e9; color:#705018; line-height:1.65; font-size:14px; overflow-wrap:anywhere; }
.purchase-notice p { margin:0 0 10px; }
.order-actions { display:flex; flex-wrap:wrap; gap:8px; }
.order-actions button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; flex:1 1 130px; }
.order-actions svg,.sms-box svg { width:16px; height:16px; }
.wallet-pill [data-balance],.recharge-balance strong { font-variant-numeric:tabular-nums; min-width:76px; }
.recharge-balance { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 0 18px; border-bottom:1px solid var(--line); }
.recharge-balance span { display:inline-flex; align-items:center; gap:8px; color:var(--muted); }
.recharge-balance strong { color:#168354; font-size:26px; }
.recharge-modal .redeem-label { display:block; font-size:14px; font-weight:700; margin-bottom:-8px; }
#redeem-code { display:block; width:100%; min-height:160px; max-height:280px; resize:vertical; padding:16px; border:1px solid #c8d1dd; border-radius:8px; background:#f8fafc; color:var(--ink); font:15px/1.8 ui-monospace,Consolas,monospace; transition:border-color .15s,box-shadow .15s; }
#redeem-code:focus { outline:none; border-color:#2879d8; box-shadow:0 0 0 3px #2879d821; background:#fff; }
#redeem-code:disabled { opacity:.7; }
.redeem-results { font-size:14px; line-height:1.7; color:#ac3341; overflow-wrap:anywhere; }
.redeem-results:empty { display:none; }
.redeem-success { color:#167447; }
.recharge-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.recharge-actions .modal-primary { flex:1 1 180px; display:flex; align-items:center; justify-content:center; gap:8px; }
.cdk-purchase-link { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:6px; color:var(--blue); text-decoration:none; font-weight:600; }
.recharge-actions svg { width:18px; height:18px; }
.redemption-confetti { position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden; }
.redemption-confetti i { position:absolute; top:20%; left:var(--x); width:7px; height:12px; background:var(--color); opacity:0; animation:redeem-confetti 1.5s var(--delay) ease-out forwards; }
@keyframes redeem-confetti { 0% { opacity:1; transform:translate(0,-35px) rotate(0); } 100% { opacity:0; transform:translate(var(--drift),420px) rotate(440deg); } }

.modal-panel.account-panel { width:min(1080px,calc(100vw - 32px)); height:min(720px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); padding:0; gap:0; border-radius:8px; overflow:hidden; grid-template-rows:auto minmax(0,1fr); }
.account-panel .modal-head { position:static; margin:0; padding:18px 24px; border-radius:0; }
.account-panel .modal-head strong { font-size:21px; }
.account-panel .modal-account { overflow:hidden; padding:0; }
.account-panel .account-modal { height:100%; min-height:0; grid-template-columns:210px minmax(0,1fr); gap:0; }
.account-panel .account-side { display:flex; flex-direction:column; align-items:stretch; gap:14px; min-height:0; padding:20px 14px 14px; border:0; border-right:1px solid var(--line); border-radius:0; background:#f6f8fa; }
.account-identity { display:grid; gap:8px; padding:0 8px 10px; }
.account-panel .account-avatar { width:42px; height:42px; border-radius:8px; font-size:21px; }
.account-panel .account-identity strong { font-size:16px; overflow-wrap:anywhere; }
.account-panel .account-identity small { font-size:12px; }
.account-panel .account-identity [data-balance] { display:block; width:auto; padding:0; color:#167447; background:none; font-size:17px; font-variant-numeric:tabular-nums; }
.account-panel .account-tabs { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
.account-panel .account-tabs button { justify-content:flex-start; min-height:38px; padding:8px 10px; border-color:transparent; border-radius:6px; font-weight:600; background:transparent; }
.account-panel .account-tabs button.active { background:#e7eefb; color:#245ab7; }
.account-panel .account-tabs .account-tab-label,.account-panel .logout-button .account-tab-label { display:inline; padding:0; border-radius:0; background:transparent; color:inherit; font-size:13px; font-weight:600; }
.account-panel .logout-button { flex-shrink:0; margin: auto 0 0; padding:8px; min-height:38px; border-color:#e4c5c9; border-radius:6px; }
.account-panel .account-main { min-height:0; gap:0; grid-template-rows:auto minmax(0,1fr); }
.account-section-title { margin:0; padding:22px 24px 16px; border-bottom:1px solid var(--line); font-size:18px; line-height:1.5; }
.account-panel .account-content { padding:22px 24px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.account-panel .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-panel .profile-card { border-radius:6px; }
.account-panel .profile-grid:not(.incentive-balances) { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.account-panel .profile-grid:not(.incentive-balances) .profile-card { padding:14px; gap:6px; }
.account-panel .profile-grid:not(.incentive-balances) .profile-card small { font-size:14px; line-height:1.5; }
.account-panel .profile-grid:not(.incentive-balances) .profile-card strong { font-size:28px; line-height:1.3; }
.account-panel .profile-grid:not(.incentive-balances) .profile-card span { font-size:12px; line-height:1.6; }
.account-panel .api-key-row span { min-width:0; overflow-wrap:anywhere; }
.account-panel .api-create-form label,.account-panel input { min-width:0; }
@media(max-width:1000px) {
  .account-panel .profile-grid:not(.incentive-balances) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .account-panel .modal-head { padding:14px 16px; gap:12px; }
  .account-panel .modal-head small { font-size:12px; }
  .account-panel .account-modal { grid-template-columns:62px minmax(0,1fr); }
  .account-panel .account-side { padding:14px 7px 10px; gap:12px; }
  .account-identity { padding:0; display:flex; justify-content:center; }
  .account-panel .account-identity strong,.account-panel .account-identity small,.account-panel .account-identity [data-balance] { display:none; }
  .account-panel .account-avatar { width:36px; height:36px; }
  .account-panel .account-tabs { grid-template-columns:minmax(0,1fr); }
  .account-panel .account-tabs button { justify-content:center; height:42px; padding:8px; }
  .account-panel .account-tabs .account-tab-label,.account-panel .logout-button .account-tab-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .account-panel .logout-button { margin-top:auto; min-height:42px; }
  .account-section-title { padding:16px; font-size:17px; }
  .account-panel .account-content { padding:16px 12px; }
  .account-panel .profile-grid { gap:8px; }
  .account-panel .profile-card { padding:12px; }
  .account-panel .profile-card strong { font-size:24px; }
  .account-panel .account-actions { flex-wrap:wrap; }
  .account-panel .account-actions,.account-panel .api-create-form,.account-panel .generated-key { grid-template-columns:minmax(0,1fr); }
  .account-panel .api-key-row { grid-template-columns:minmax(0,1fr) auto; padding:10px; gap:8px; }
  .account-panel .api-key-row > span:first-child { grid-column:1 / -1; }
}
@media(max-height:620px) {
  .account-panel .account-identity { display:none; }
  .account-panel .account-side { gap:6px; padding-top:8px; }
  .account-panel .account-tabs { gap:2px; }
  .account-panel .account-tabs button { min-height:30px; height:30px; padding:5px 8px; }
  .account-panel .modal-head { padding-top:10px; padding-bottom:10px; }
  .account-panel .modal-head small { display:none; }
}
@media(prefers-reduced-motion:reduce) { .redemption-confetti { display:none; } #redeem-code { transition:none; } }

.catalog-art-wrap { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
[data-catalog-preview="services"] .service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(min-width:1600px) {
  [data-catalog-preview="services"] .service-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
.service-card .catalog-service-art { transform:scale(1.25); }
.catalog-row .catalog-service-art { transform:none; }
.catalog-row .catalog-flag-art { transform:scale(.75); }
.flag-icon.catalog-art-wrap { width:28px; height:28px; }
.catalog-art-wrap .catalog-flag-art { transform:scale(.875); }
.cdk-purchase-link:disabled { color:var(--muted); background:#f1f3f5; cursor:not-allowed; }
.order-state { position:relative; isolation:isolate; }
.order-active { border-color:#6faac7; box-shadow:0 3px 14px #277c9b14; }
.order-active .order-head h2 { color:#146b80; }
@property --order-border-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.order-active::before {
  content:""; position:absolute; inset:-1px; padding:2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--order-border-angle),transparent 0deg 235deg,#83bdd0 275deg,#279a97 310deg,transparent 350deg);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude;
  animation:order-border-travel 9s linear infinite;
}
@keyframes order-border-travel { to { --order-border-angle:360deg; } }
.order-head { flex-wrap:wrap; gap:10px; }
.copy-box strong,.sms-box span { min-width:0; overflow-wrap:anywhere; padding:12px; }
.order-service > span,.summary-line strong { min-width:0; overflow-wrap:anywhere; }
.choice-card strong,.choice-card em { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.choice-card.selected { background:#ecf7fa; border-color:#288e9d; box-shadow:inset 0 0 0 1px #288e9d; }
.modal-panel:has(.modal-recharge),.modal-panel:has(.modal-sms-detail),.modal-panel:has(.modal-api),.modal-panel:has(.modal-invitation) { grid-template-rows:auto minmax(0,1fr); }
.modal-recharge,.modal-sms-detail,.modal-invitation { min-height:0; overflow:auto; }
.recharge-actions > * { min-width:0; max-width:100%; }
.invitation-launcher { position:fixed; left:24px; bottom:24px; z-index:35; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:10px 16px; border:1px solid #b84437; border-radius:8px; color:#fff; background:#c94738; box-shadow:0 6px 18px #ad372530; font-size:14px; font-weight:600; }
.invitation-launcher:hover { background:#af3528; }
.invitation-launcher span { display:grid; gap:2px; text-align:left; }
.invitation-launcher strong { font-size:15px; }
.invitation-launcher small { font-size:12px; font-weight:400; }
.invitation-launcher:focus-visible { outline:2px solid #287e71; outline-offset:3px; }
.invitation-activity { min-width:0; color:var(--ink); }
.invitation-launcher svg,.invitation-activity svg { width:18px; height:18px; flex-shrink:0; }
.invitation-activity p { margin:0 0 14px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.invitation-actions { display:grid; gap:4px; padding:16px 0 0; }
.invitation-actions button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:46px; padding:10px 14px; border:0; border-radius:6px; font-size:15px; font-weight:600; }
.invitation-actions .invite-share-primary { background:#176fe3; color:#fff; }
.invitation-actions .invite-share-primary:hover { background:#105ac0; }
.invitation-actions .invite-details-link { min-height:34px; padding:8px; background:none; color:#62738a; font-size:12px; font-weight:400; }
.invitation-actions .invite-details-link svg { width:14px; height:14px; }
.invitation-actions button:disabled { color:#7b899a; background:#e9eef4; }
.invitation-panel { width:520px; max-width:calc(100vw - 32px); padding:20px; gap:0; border-radius:8px; max-height:calc(100dvh - 40px); }
.invitation-panel .modal-head { margin:-20px -20px 0; padding:14px 20px; background:#fff; border-radius:8px 8px 0 0; }
.invitation-panel .modal-head small { display:none; }
.invitation-panel .modal-head strong { color:#263a55; font-size:15px; font-weight:650; }
.invitation-panel .modal-close { width:32px; height:32px; background:none; color:#6a788a; border:0; box-shadow:none; }
.invitation-panel .modal-close:hover { background:#edf2f7; }
.invitation-panel .modal-close:focus-visible { outline:2px solid #176fe3; outline-offset:2px; }
.invitation-panel .modal-close svg { width:19px; height:19px; stroke-width:2; }
.invitation-panel .modal-invitation { padding:0; }
.invitation-hero { padding:22px 0 20px; text-align:left; border-bottom:1px solid #e5ebf2; }
.invitation-eyebrow { color:#62738a; font-size:12px; }
.invitation-hero h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:8px 0 8px; color:#172d49; font-size:24px; font-weight:700; line-height:1.4; }
.invitation-hero h2 span { color:#dc4b31; font-size:52px; font-weight:750; line-height:1.15; white-space:nowrap; }
.invitation-hero h2 small { margin-left:4px; font-size:22px; font-weight:600; }
.invitation-hero p { margin:6px 0 12px; color:#52657d; font-size:14px; }
.invitation-benefits { display:flex; flex-wrap:wrap; gap:14px; color:#176c55; font-size:12px; }
.invitation-benefits span { display:inline-flex; align-items:center; gap:4px; }
.invitation-benefits svg { width:13px; height:13px; stroke-width:2; }
.invitation-offers { padding:6px 0 0; }
.invitation-offer { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 0; }
.invitation-offer + .invitation-offer { border-top:1px solid #eff2f6; }
.invitation-offer-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; background:#eaf2ff; color:#2374de; }
.invitation-offer-icon.commission-icon { background:#eaf6f0; color:#258062; }
.invitation-offer h3 { margin:0 0 4px; font-size:14px; font-weight:600; color:#293c56; }
.invitation-offer p { margin:0; font-size:12px; line-height:1.7; color:#708198; }
.invitation-offer p strong { color:#3c536e; font-weight:600; }
.invitation-offer-value { text-align:right; color:#2467c4; font-size:23px; line-height:1.4; white-space:nowrap; }
.invitation-offer-value small { margin-left:3px; font-size:11px; font-weight:400; }
.invitation-offer-value.commission-value { color:#22765b; }
.invitation-limit { display:block; color:#738096; font-size:11px; line-height:1.7; }
.invitation-offers .invitation-limit { margin:4px 0 12px; font-size:11px; }
.invitation-details { border-block:1px solid #e5ebf2; }
.invitation-details summary { display:flex; align-items:center; justify-content:space-between; min-height:40px; color:#63748a; cursor:pointer; list-style:none; font-size:12px; }
.invitation-details summary::-webkit-details-marker { display:none; }
.invitation-details summary svg { width:14px; height:14px; }
.invitation-details[open] summary svg { transform:rotate(180deg); }
.invitation-explanation { margin:0; }
.invitation-unavailable { padding-top:12px; color:#6b778a; }
.invitation-rule { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:16px 0; border-top:1px solid #e3e9e6; }
.invitation-rule h4 { margin:0 0 8px; color:#243e32; font-size:15px; }
.reward-step { color:#a44e3f; font-size:13px; font-weight:700; line-height:23px; }
.invitation-rule p { margin:5px 0 0; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.invitation-rule .reward-example { padding-left:10px; border-left:3px solid #83b4a1; color:#215f48; }
.invitation-rule .reward-fine { color:#67766e; font-size:12px; }
.invitation-panel:has(.consumption-hero) { width:560px; border-radius:18px; padding:24px; }
.invitation-panel:has(.consumption-hero) .modal-head { margin:-24px -24px 0; padding:16px 24px; border-radius:18px 18px 0 0; }
.consumption-hero { padding:24px 0 20px; border:0; }
.consumption-hero .invitation-eyebrow { color:#2167ca; font-size:13px; font-weight:700; letter-spacing:1px; }
.consumption-hero h2 { display:block; font-size:32px; font-weight:850; line-height:1.45; margin:10px 0 12px; }
.consumption-hero h2 span { color:#176fe3; font-size:66px; font-weight:850; letter-spacing:-2px; }
.consumption-hero h2 small { font-size:34px; }
.consumption-hero .invitation-benefits { gap:8px 14px; color:#375775; }
.invitation-example { padding:16px 18px; background:#f0f6ff; border:1px solid #dce9ff; border-radius:12px; }
.invitation-example > div:first-child { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; color:#60758f; font-size:12px; }
.invitation-example > div:first-child strong { color:#254c80; font-size:14px; }
.invitation-equation { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px; margin-top:14px; text-align:center; }
.invitation-equation span { display:grid; gap:5px; }
.invitation-equation b { color:#24476f; font-size:28px; font-weight:800; white-space:nowrap; }
.invitation-equation b small { font-size:13px; margin-left:3px; }
.invitation-equation span > small { font-size:11px; color:#6e8098; }
.invitation-equation i { color:#7b91ae; font-style:normal; font-size:20px; }
.invitation-equation .invitation-example-earned b { color:#176fe3; }
.invitation-activity .invitation-plain-rule { margin:14px 0 0; font-size:12px; color:#66758b; line-height:1.7; }
.invitation-share-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.invitation-share-buttons button { min-height:48px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; font-size:14px; font-weight:700; transition:background .15s,transform .15s; }
.invitation-share-buttons .invite-share-primary { background:#176fe3; color:white; border:1px solid #176fe3; }
.invitation-share-buttons .invite-copy-link { background:#eef5ff; color:#185ab8; border:1px solid #d2e2fa; }
.invitation-share-buttons button:active { transform:translateY(1px); }
.invitation-share-buttons button:focus-visible { outline:3px solid #9cbffc; outline-offset:2px; }
.invitation-share-buttons button:disabled { opacity:.55; cursor:wait; }
.invitation-link-label { display:grid; gap:5px; margin:8px 0; color:#758399; font-size:11px; }
.invitation-link-label input { width:100%; min-width:0; padding:8px 10px; font-size:12px; color:#496381; border:1px solid #dce5f1; border-radius:7px; background:#f9fbfe; }
.invitation-panel .invitation-details { border-bottom:0; margin-top:8px; }
.referral-campaign-heading { margin:0 0 16px; }
.referral-campaign-heading strong { color:#176fe3; font-size:23px; font-weight:800; }
.referral-campaign-heading p { color:#728299; margin:7px 0; font-size:13px; }
@media(max-width:420px) {
  .invitation-panel:has(.consumption-hero) { padding:18px; max-width:calc(100vw - 24px); }
  .invitation-panel:has(.consumption-hero) .modal-head { margin:-18px -18px 0; padding:12px 18px; }
  .consumption-hero { padding-top:16px; }
  .consumption-hero h2 { font-size:27px; }
  .consumption-hero h2 span { font-size:57px; }
  .invitation-equation { gap:5px; }
  .invitation-equation b { font-size:25px; }
  .invitation-example { padding:13px; }
}
@media(prefers-reduced-motion:reduce) { .invitation-share-buttons button { transition:none; } }
.front-shell { padding-bottom:80px; }
@media(max-width:600px) {
  .nav-inner { grid-template-columns:max-content minmax(0,1fr); gap:8px; padding:12px 0; }
  .nav-inner > .brand { grid-column:1; grid-row:1; gap:8px; }
  .nav-inner .brand-mark { width:36px; height:36px; flex-basis:36px; }
  .nav-inner .brand strong { font-size:22px; white-space:nowrap; }
  .nav-actions { display:contents; }
  .nav-actions .user-pill { grid-column:2; grid-row:1; min-width:0; min-height:38px; width:100%; padding:0 8px; gap:6px; justify-content:center; font-size:13px; }
  .nav-actions .user-pill span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .nav-menu { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; overflow:visible; }
  .nav-menu button,.nav-menu .article-nav { min-width:0; min-height:36px; justify-content:center; padding:6px 2px; font-size:13px; white-space:normal; overflow-wrap:anywhere; }
  .nav-actions .wallet-pill { grid-column:1 / -1; grid-row:3; min-width:0; min-height:40px; justify-content:space-between; }
  .nav-actions .wallet-pill strong { overflow-wrap:anywhere; white-space:normal; }
  .nav-actions .rate-pill { grid-column:1 / -1; grid-row:4; justify-content:flex-start; min-height:24px; padding:0; border:0; background:none; font-size:12px; }
  [data-catalog-preview="services"] .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .invitation-launcher { left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); padding:8px 12px; min-height:54px; }
  .invitation-panel { max-width:calc(100vw - 24px); }
  .invitation-hero { padding:18px 0; }
  .invitation-hero h2 { font-size:22px; }
  .invitation-hero h2 span { font-size:44px; }
  .invitation-offer { column-gap:8px; }
  .invitation-offer h3 { font-size:13px; }
  .invitation-offer-value { font-size:20px; }
  .invitation-benefits { gap:10px; }
  .copy-box,.sms-box { grid-template-columns:minmax(0,1fr) 74px; }
  .copy-box strong { font-size:16px; }
  .recharge-actions { align-items:stretch; }
  .recharge-actions > * { flex:1 1 100%; }
  .recharge-balance { flex-wrap:wrap; gap:8px; }
  .modal-head > span { min-width:0; overflow-wrap:anywhere; }
  .modal-close { flex-shrink:0; }
}
@media(max-height:500px) {
  .modal-backdrop { padding:8px; }
  .modal-panel:not(.account-panel) { max-height:calc(100dvh - 16px); padding:16px; gap:12px; }
  .modal-panel:not(.account-panel) .modal-head { margin:-16px -16px 0; padding:12px 16px; }
  #redeem-code { min-height:84px; }
}
@media(prefers-reduced-motion:reduce) { .order-active::before { animation:none; --order-border-angle:45deg; } }
/* Keep the verification input usable on narrow phones. */
.email-code-row { display:flex; gap:10px; align-items:stretch; min-width:0; }
.email-code-row input { flex:1; min-width:0; width:0; }
.email-code-row button { flex:0 0 112px; padding:8px; border:1px solid #bfd4ef; border-radius:6px; background:#edf5ff; color:#1765ce; font:inherit; font-size:14px; }
.email-code-row button:disabled { opacity:.65; cursor:not-allowed; }
.sms-title-row { display:flex; align-items:center; gap:8px; margin-top:18px; margin-bottom:8px; }
.sms-title-row .field-title { margin:0; }
.sms-sound-toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:5px; border:1px solid #d7e5f5; border-radius:7px; background:#f4f8ff; color:#2378e8; cursor:pointer; }
.sms-sound-toggle[aria-pressed="false"] { color:#8494ab; background:#f6f8fb; }
.sms-sound-toggle:hover { border-color:#7cafef; background:#eaf3ff; }
.sms-sound-toggle:focus-visible { outline:2px solid #2378e8; outline-offset:2px; }
.sms-sound-toggle svg { width:18px; height:18px; }

.ticket-refund-card{padding:14px 16px;border:1px solid #f2d4a7;border-radius:12px;background:#fff9ee;color:#604014;overflow-wrap:anywhere}.ticket-refund-card p{margin:8px 0;font-size:13px;line-height:1.6}.ticket-refund-card label{margin-top:12px}.ticket-refund-card input{width:100%;box-sizing:border-box}