/* Final visual layer: shared typography, surfaces and interaction states. */
:root {
  --ui-text: #f6f6f7;
  --ui-muted: #aaaab2;
  --ui-surface: #27282c;
  --ui-surface-raised: #303137;
  --ui-primary: #f1eee8;
  --ui-primary-text: #202126;
  --ui-border: #45464c;
  --ui-shadow: 0 12px 30px #0003;
  --ui-marker: #f6f6f7;
  --ui-radius-card: 22px;
  --ui-radius-button: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif;
  font-synthesis: none;
}

html[data-theme="light"] {
  --ui-text: #202126;
  --ui-muted: #686a73;
  --ui-surface: #fff;
  --ui-surface-raised: #f3f3f1;
  --ui-primary: #28292e;
  --ui-primary-text: #fff;
  --ui-border: #d8d9dd;
  --ui-shadow: 0 12px 28px #26293812;
  --ui-marker: #202126;
}

body, button, input, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.app-shell { color: var(--ui-text); }
.page-title { font-size: clamp(25px, 6vw, 31px); font-weight: 720; line-height: 1.12; letter-spacing: -.035em; margin-bottom: 15px; }
.dialog-heading h2 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.page-lead, .dialog p { font-size: 13px; line-height: 1.5; }

/* Consistent, quiet button treatment. */
.button, .wallet-chip, .home-bonus-open {
  font-weight: 650;
  letter-spacing: -.012em;
  box-shadow: none;
}
.button { min-height: 46px; border-radius: var(--ui-radius-button); background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text); font-size: 14px; line-height: 1.25; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease; }
.button.secondary { background: var(--ui-surface-raised); border-color: var(--ui-border); color: var(--ui-text); }
.button.tertiary { background: transparent; border-color: var(--ui-border); color: var(--ui-text); }
.button:not(:disabled):active { transform: scale(.987); }
.button:disabled { cursor: default; }
.profile-chip, .wallet-chip { min-height: 42px; border-radius: 16px; }
.profile-name { font-size: 13px; font-weight: 650; }
.wallet-chip { background: var(--ui-primary); color: var(--ui-primary-text); border: 1px solid transparent; font-size: 13px; padding-inline: 16px; }
.tabs { background: #28292e; border-color: var(--ui-border); border-radius: 34px; box-shadow: 0 10px 24px #0005; backdrop-filter: none; }
.tabs::before { background: var(--ui-primary); border-radius: 28px; transition: transform .26s cubic-bezier(.25,.8,.25,1); will-change: auto; }
.tabs button { min-height: 44px; font-size: 11px; font-weight: 550; line-height: 1.1; gap: 2px; transition: color .18s ease, transform .18s ease; }
.tabs button.active { color: var(--ui-primary-text); font-weight: 680; }
.tabs button:active { transform: scale(.98); }
.tabs button.tab-bump .tab-icon { animation: none; }
.tabs::before { box-shadow: 0 2px 9px #0003; }

/* Home cards use the same spacing and type scale in both themes. */
.home-service-hero {
  color: var(--ui-text);
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: 0 8px 22px #0002;
  padding: 19px;
}
.home-service-heading { gap: 16px; margin-bottom: 19px; }
.home-service-mark { width: 66px; height: 66px; background: var(--ui-surface-raised); border: 1px solid var(--ui-border); box-shadow: none; }
.home-service-mark img { width: 43px; height: 43px; }
.home-service-heading strong { color: var(--ui-text); font-size: 20px; font-weight: 700; line-height: 1.12; }
.home-service-heading small { color: var(--ui-muted); font-size: 13px; line-height: 1.35; margin-top: 5px; }
.home-buy-button { min-height: 51px; background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text); font-size: 15px; font-weight: 680; padding-inline: 18px; }
.home-locations { color: var(--ui-muted); border-color: var(--ui-border); font-size: 12px; line-height: 1.3; gap: 9px; padding-top: 15px; margin-top: 15px; }
.home-locations .flag-icon { width: 28px; height: 28px; }
.home-shortcuts { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius-card); box-shadow: 0 8px 22px #0002; }
.home-shortcuts button { color: var(--ui-text); border-color: var(--ui-border); }
.home-shortcuts strong { font-size: 14px; font-weight: 670; line-height: 1.25; }
.home-shortcuts small { color: var(--ui-muted); font-size: 12px; line-height: 1.35; }
.home-shortcuts b { color: var(--ui-muted); }
.home-bonus-card { background: var(--ui-surface-raised); border-color: var(--ui-border); border-radius: var(--ui-radius-card); box-shadow: 0 8px 22px #0002; }
.home-bonus-card::before { display: none; }
.home-bonus-card:active { background: #383a40; }
.home-bonus-symbol { background: var(--ui-primary); color: var(--ui-primary-text); box-shadow: none; }
.home-bonus-copy strong { font-size: 15px; font-weight: 680; }
.home-bonus-copy small { font-size: 12px; }
.home-bonus-open { background: var(--ui-primary); color: var(--ui-primary-text); font-size: 12px; }

.subscription-card, .gift-action-card, .gift-row, .referral-hero, .referral-menu,
.tariff-tile, .countries-card, .checkout-summary, .payment-methods,
.menu-group, .wallet-hero, .manage-summary {
  border-radius: var(--ui-radius-card);
}
.subscription-card, .gift-action-card, .gift-row, .referral-hero, .referral-menu,
.tariff-tile, .countries-card, .checkout-summary, .payment-methods, .dialog {
  border-color: var(--ui-border);
}
.buy-hero, .gift-banner, .referral-hero, .subscription-card,
.manage-summary, .promo-hero, .wallet-hero { background: var(--ui-surface); }
.bonus-menu-entry { background: var(--ui-surface-raised) !important; border-color: var(--ui-border) !important; }
.tariff-tile, .gift-action-card, .countries-card { transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.tariff-tile:active, .gift-action-card:active, .countries-card:active { transform: scale(.992); }
.menu-group>button, .manage-menu button { font-size: 13px !important; font-weight: 570; }
.menu-copy strong, .payment-methods strong { font-size: 13px; font-weight: 650; }
.subscription-compact .subscription-title strong { font-size: 15px; }
.subscription-compact-meta { font-size: 11px; }
.subscription-compact-meta>b { font-size: 11px; }

/* The wheel is identified by a single pointer; no frame surrounds the center. */
.bonus-center-marker, html[data-theme="light"] .bonus-center-marker {
  top: 0;
  bottom: auto;
  width: 22px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bonus-center-marker::before, html[data-theme="light"] .bonus-center-marker::before {
  top: 0;
  left: 50%;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--ui-marker);
  filter: drop-shadow(0 1px 2px #0008);
}
.bonus-reel-window>i { display: none !important; }

/* Complete the light theme, including the top account row and home panels. */
html[data-theme="light"] body { background: radial-gradient(circle at 50% -10%, #fff, #f5f5f7 47%, #f0f0f2); }
html[data-theme="light"] .account-bar { color: var(--ui-text); }
html[data-theme="light"] .profile-chip, html[data-theme="light"] .wallet-chip {
  background: #fff;
  color: var(--ui-text);
  border-color: var(--ui-border);
  box-shadow: 0 3px 12px #2225360d;
}
html[data-theme="light"] .profile-arrow { color: #737680; }
html[data-theme="light"] .home-service-hero {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  box-shadow: 0 10px 26px #25263412;
}
html[data-theme="light"] .home-service-heading strong { color: var(--ui-text); }
html[data-theme="light"] .home-service-heading small, html[data-theme="light"] .home-locations { color: var(--ui-muted); }
html[data-theme="light"] .home-service-mark { background: var(--ui-surface-raised); box-shadow: none; }
html[data-theme="light"] .home-service-mark img,
html[data-theme="light"] .menu-footer img { filter: invert(1); }
html[data-theme="light"] .home-buy-button { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text); }
html[data-theme="light"] .home-locations { border-color: #dedee3; }
html[data-theme="light"] .home-shortcuts { background: #fff; border-color: var(--ui-border); }
html[data-theme="light"] .home-shortcuts button { color: var(--ui-text); border-color: #e7e7eb; }
html[data-theme="light"] .home-shortcuts button:active { background: #f3f3f5; }
html[data-theme="light"] .home-shortcuts small, html[data-theme="light"] .home-shortcuts b { color: var(--ui-muted); }
html[data-theme="light"] .home-shortcut-icon { background: #f0f0f2; color: #292a30; }
html[data-theme="light"] .home-bonus-card { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); box-shadow: 0 8px 22px #25263412; }
html[data-theme="light"] .home-bonus-card:active { background: #e9e9e7; }
html[data-theme="light"] .home-bonus-symbol { background: var(--ui-primary); color: var(--ui-primary-text); box-shadow: none; }
html[data-theme="light"] .home-bonus-card small { color: var(--ui-muted); }
html[data-theme="light"] .home-bonus-open { background: var(--ui-primary); color: var(--ui-primary-text); }
html[data-theme="light"] .tabs { background: #fff; border-color: #d5d6dc; box-shadow: 0 10px 24px #25263414; }
html[data-theme="light"] .tabs::before { background: var(--ui-primary); box-shadow: 0 2px 8px #24242b20; }
html[data-theme="light"] .tabs button:not(.active) { color: #6c6e77; }
html[data-theme="light"] .tabs button.active { color: #fff; }
html[data-theme="light"] .button { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text); }
html[data-theme="light"] .button.secondary { background: var(--ui-surface-raised); border-color: var(--ui-border); color: var(--ui-text); }
html[data-theme="light"] .button.tertiary { background: transparent; border-color: var(--ui-border); color: var(--ui-text); }
html[data-theme="light"] .buy-hero, html[data-theme="light"] .gift-banner,
html[data-theme="light"] .referral-hero, html[data-theme="light"] .subscription-card,
html[data-theme="light"] .manage-summary, html[data-theme="light"] .promo-hero,
html[data-theme="light"] .wallet-hero { background: var(--ui-surface); }
html[data-theme="light"] .bonus-menu-entry { background: var(--ui-surface-raised) !important; border-color: var(--ui-border) !important; }
html[data-theme="light"] .bonus-reel-window { background: #ececef; border-color: #d7d8dd; }
@keyframes mini-paw-iridescent-light {
  0%, 100% { opacity: .72; filter: invert(1) brightness(.82) drop-shadow(0 0 2px #0001); }
  50% { opacity: 1; filter: invert(1) brightness(1.15) drop-shadow(0 0 10px #0004); }
}
html[data-theme="light"] .mini-loader-paw img { animation-name: mini-paw-iridescent-light; }

/* Support screenshots remain visible in the thread and before submission. */
.support-photo-pick { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; min-height: 38px; padding: 8px 13px; border: 1px solid var(--ui-border); border-radius: 12px; color: var(--ui-text) !important; font-size: 12px !important; font-weight: 600; cursor: pointer; }
.support-photo-pick>span:first-child { font-size: 19px; line-height: 1; }
.support-photo-preview { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px; border: 1px solid var(--ui-border); border-radius: 13px; }
.support-photo-preview[hidden] { display: none; }
.support-photo-preview img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.support-photo-preview span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-muted); font-size: 11px; }
.support-message-photo { display: block; margin-top: 9px; border-radius: 11px; overflow: hidden; }
.support-message-photo img { display: block; max-width: min(100%, 250px); max-height: 300px; object-fit: contain; border-radius: 11px; }
html[data-theme="light"] .support-photo-pick { background: #f7f7f9; }

@media (hover:hover) {
  .button:not(:disabled):hover, .wallet-chip:hover { filter: brightness(.93); }
  .home-shortcuts button:hover, .menu-group>button:hover { background: #ffffff0a; }
  html[data-theme="light"] .home-shortcuts button:hover,
  html[data-theme="light"] .menu-group>button:hover { background: #f3f3f6; }
}
@media (max-width: 370px) {
  .home-shortcuts strong { font-size: 13px; }
  .home-shortcuts small { font-size: 11px; }
  .home-bonus-copy strong { font-size: 14px; }
  .tabs button { font-size: 10px; }
}
@media (max-height: 720px) {
  .home-service-hero { padding: 14px; }
  .home-service-heading { gap: 12px; margin-bottom: 12px; }
  .home-service-mark { width: 54px; height: 54px; }
  .home-service-mark img { width: 35px; height: 35px; }
  .home-service-heading strong { font-size: 18px; }
  .home-service-heading small { font-size: 12px; }
  .home-buy-button { min-height: 44px; font-size: 13px; }
  .home-locations { padding-top: 10px; margin-top: 10px; font-size: 11px; }
  .home-locations .flag-icon { width: 23px; height: 23px; }
  .home-shortcuts small, .home-bonus-copy small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tariff-tile, .gift-action-card, .countries-card, .button, .tabs::before, .tabs button { transition: none; }
}

/* v41: one neutral visual system for every Mini App screen. */
:root {
  --ui-bg: #1d1d1f;
  --ui-text: #ffffff;
  --ui-muted: #98989e;
  --ui-surface: #2c2c2e;
  --ui-surface-raised: #38383b;
  --ui-primary: #f1f0ed;
  --ui-primary-text: #18181a;
  --ui-border: #3a3a3c;
  --ui-separator: #3a3a3c;
  --ui-nav: #29292b;
  --ui-input: #232325;
  --ui-shadow: none;
  --ui-radius-card: 22px;
  --ui-radius-button: 17px;
  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --motion-slow: 250ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  color-scheme: dark;
  font-family: var(--tg-theme-font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif);
}
html[data-theme="light"] {
  --ui-bg: #f5f5f4;
  --ui-text: #1d1d1f;
  --ui-muted: #6e6e73;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ececed;
  --ui-primary: #242426;
  --ui-primary-text: #ffffff;
  --ui-border: #e2e2e4;
  --ui-separator: #e8e8ea;
  --ui-nav: #ffffff;
  --ui-input: #f3f3f4;
  color-scheme: light;
}
html, body, html[data-theme="light"] body { background: var(--ui-bg); color: var(--ui-text); }
html, body { max-width: 100%; overflow-x: clip; }
button, input, textarea { font-family: inherit; }
button { touch-action: manipulation; }
.app-shell { color: var(--ui-text); padding-inline: 18px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
#screen { min-width: 0; }
.page-title { font-size: clamp(24px, 6vw, 26px); font-weight: 680; line-height: 1.16; letter-spacing: -.035em; margin: 10px 0 16px; }
.page-lead, .dialog p { font-size: 14px; line-height: 1.48; color: var(--ui-muted); }
.page-back { color: var(--ui-muted); font-size: 13px; min-height: 35px; }
.section-title h2, .gift-list-title, .wallet-section-title strong { font-size: 16px; font-weight: 650; }
.dialog-heading h2 { font-size: 20px; font-weight: 680; }
.dialog-heading button { width: 34px; height: 34px; background: var(--ui-surface-raised); color: var(--ui-muted); }

/* Shared surfaces and separators. */
.home-service-hero, .home-shortcuts, .home-bonus-card, .subscription-card,
.tariff-tile, .countries-card, .gift-brand-card, .gift-action-card, .gift-row,
.referral-hero, .referral-levels, .referral-menu, .referral-list, .referral-conditions,
.menu-account, .menu-group, .manage-summary, .manage-metrics>span, .manage-menu,
.devices-list, .wallet-hero, .wallet-history-link, .promo-hero, .support-form,
.support-ticket, .checkout-summary, .payment-methods, .bonus-stock-item,
.active-discount, .empty-card, .info-card, .plan-card, .sub-card {
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-card);
  box-shadow: none;
}
.home-shortcuts, .menu-group, .manage-menu, .referral-menu, .referral-levels,
.referral-list, .devices-list, .payment-methods { overflow: hidden; }
.home-shortcuts button, .menu-group>button, .menu-theme, .manage-menu button,
.referral-menu>button, .referral-level, .referral-person, .referral-history-row,
.device-row, .payment-methods button, .transaction-row { border-color: var(--ui-separator) !important; }
.home-shortcuts button:last-child, .menu-group>button:last-child,
.manage-menu button:last-child, .referral-menu>button:last-child,
.referral-level:last-child, .payment-methods button:last-child { border-bottom: 0 !important; }
.home-service-hero, .home-bonus-card, .referral-hero, .wallet-hero, .promo-hero,
.subscription-card, .tariff-tile, .bonus-reel-window, .bonus-reel-card,
.manage-summary, .gift-banner, .buy-hero, .gift-choice, .gift-intro {
  background-image: none !important;
}
.home-service-hero, .home-shortcuts, .home-bonus-card { margin-bottom: 12px; }
.home-service-hero { padding: 18px; }
.home-service-heading { margin-bottom: 16px; gap: 13px; }
.home-service-mark { width: 58px; height: 58px; background: var(--ui-surface-raised); border: 0; box-shadow: none; }
.home-service-mark img { width: 39px; height: 39px; }
.home-service-heading strong { font-size: 18px; font-weight: 650; }
.home-service-heading small { font-size: 13px; color: var(--ui-muted); }
.home-buy-button { min-height: 50px; justify-content: center; font-size: 17px; font-weight: 680; text-align: center; }
.home-locations { border-color: var(--ui-separator); color: var(--ui-muted); font-size: 12px; margin-top: 14px; padding-top: 14px; }
.home-locations .flag-icon { width: 27px; height: 27px; }
.flag-icon { box-shadow: 0 0 0 1px var(--ui-border); }
.home-shortcuts button { min-height: 69px; padding: 11px 15px; color: var(--ui-text); }
.home-shortcuts strong { font-size: 15px; font-weight: 620; }
.home-shortcuts small { font-size: 12px; color: var(--ui-muted); }
.home-shortcut-icon { background: var(--ui-surface-raised); color: var(--ui-text); }
.home-bonus-card { min-height: 76px; margin-top: 0; padding: 12px 14px; }
.home-bonus-symbol { width: 48px; height: 48px; border-radius: 14px; background: var(--ui-surface-raised); color: var(--ui-text); }
.home-bonus-symbol svg { width: 36px; height: 36px; }
.home-bonus-copy strong { font-size: 15px; font-weight: 650; }
.home-bonus-copy small { font-size: 12px; color: var(--ui-muted); }
.home-bonus-open { background: var(--ui-primary); color: var(--ui-primary-text); font-size: 12px; font-weight: 650; }

/* Buttons, controls and touch feedback. */
.button, .wallet-chip, .home-buy-button, .home-bonus-open,
.menu-account>button, .gift-choice button, .referral-link>button {
  background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text);
  border-radius: var(--ui-radius-button); box-shadow: none;
  font-size: 14px; font-weight: 650;
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard);
}
.button { min-height: 48px; }
.button.secondary, .button.tertiary, .subscription-secondary button,
.gift-row-actions button:first-child { background: var(--ui-surface-raised); border-color: transparent; color: var(--ui-text); }
.button:disabled { background: var(--ui-surface-raised); border-color: transparent; color: var(--ui-muted); opacity: 1; }
.wallet-chip { min-height: 42px; }
.profile-chip { background: var(--ui-surface); color: var(--ui-text); border-color: transparent; box-shadow: none; }
.profile-pic:not(.has-photo) { background: var(--ui-surface-raised); color: var(--ui-text); }
.profile-name { font-size: 13px; font-weight: 620; }
.profile-arrow { color: var(--ui-muted); }
button:not(:disabled):active { transform: scale(.98); }
.home-shortcuts button:active, .menu-group>button:active, .manage-menu button:active,
.referral-menu>button:active, .payment-methods button:active { background: var(--ui-surface-raised); }
.home-bonus-card:active { background: var(--ui-surface-raised); }

/* A smaller floating navigation rail with generous individual hit areas. */
.tabs, html[data-theme="light"] .tabs {
  width: min(calc(100% - 28px), 500px); height: 62px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 5px; border: 1px solid var(--ui-border); border-radius: 32px;
  background: var(--ui-nav); box-shadow: 0 8px 24px #0002; backdrop-filter: none;
}
.tabs::before, html[data-theme="light"] .tabs::before {
  left: 5px; top: 5px; width: calc((100% - 10px)/4); height: calc(100% - 10px);
  border-radius: 27px; background: var(--ui-primary); box-shadow: none;
  transition: transform var(--motion-normal) var(--ease-standard);
}
.tabs button, html[data-theme="light"] .tabs button { min-height: 50px; color: var(--ui-muted); font-size: 11px; font-weight: 500; gap: 1px; }
.tabs button.active, html[data-theme="light"] .tabs button.active { color: var(--ui-primary-text); font-weight: 620; }
.tab-icon svg { width: 21px; height: 21px; }

/* Subscriptions and management. */
.subscription-card.subscription-compact { padding: 15px 16px; margin-bottom: 10px; }
.subscription-compact .subscription-title strong { font-size: 16px; font-weight: 650; }
.subscription-compact .status, .status, html[data-theme="light"] .status {
  background: var(--ui-surface-raised); color: var(--ui-text);
  border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 600;
}
.status::before, html[data-theme="light"] .status::before { background: currentColor; opacity: .75; }
.subscription-compact-meta { color: var(--ui-muted); border-color: var(--ui-separator); font-size: 12px; gap: 8px; }
.subscription-compact-meta>b { color: var(--ui-text); font-size: 12px; font-weight: 600; }
.manage-summary { padding: 14px; }
.manage-summary strong { font-size: 16px; font-weight: 650; }
.manage-summary>b { background: var(--ui-surface-raised); color: var(--ui-text); font-size: 11px; font-weight: 600; }
.manage-metrics>span { background: var(--ui-surface-raised); padding: 12px; }
.manage-metrics small { color: var(--ui-muted); font-size: 12px; }
.manage-metrics strong { font-size: 14px; }
.manage-actions button { border-radius: 16px; }
.manage-actions button>strong { font-size: 12px !important; font-weight: 600; }
.manage-menu button { font-size: 14px !important; font-weight: 550; }
.manage-menu button>i { background: var(--ui-surface-raised); color: var(--ui-text); }
.devices-heading>span { color: var(--ui-muted); font-size: 12px; border-color: var(--ui-border); }
.device-row small, .devices-empty small { font-size: 12px; color: var(--ui-muted); }

/* Prices and selection. */
.tariff-grid { gap: 10px; }
.tariff-tile { min-height: 166px; padding: 16px; border: 1px solid transparent; }
.tariff-top { min-height: 42px; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; column-gap: 6px; row-gap: 5px; }
.tariff-tile.featured { background: var(--ui-surface); border-color: transparent; }
.tariff-tile.selected, html[data-theme="light"] .tariff-tile.selected {
  background: var(--ui-surface-raised); border-color: var(--ui-primary); box-shadow: inset 0 0 0 1px var(--ui-primary); transform: none;
}
.tariff-tile:hover, .tariff-tile:focus-visible { transform: none; border-color: var(--ui-muted); }
.tariff-tile.selected:hover, .tariff-tile.selected:focus-visible { border-color: var(--ui-primary); }
.tariff-duration { flex: none; color: var(--ui-text); font-size: 14px; font-weight: 550; white-space: nowrap; }
.tariff-price, .tariff-tile strong.tariff-price { font-size: clamp(23px, 6vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; margin: 16px 0 7px; white-space: normal; overflow-wrap: anywhere; }
.tariff-price del { font-size: 12px; color: var(--ui-muted); }
.tariff-meta, .tariff-chevron { font-size: 12px; color: var(--ui-muted); }
.tariff-tile.selected .tariff-chevron { color: var(--ui-text); font-weight: 650; }
.tariff-saving, .tariff-saving.promo, html[data-theme="light"] .tariff-saving {
  background: var(--ui-surface-raised) !important; color: var(--ui-text) !important;
  border-radius: 8px; font-size: 11px; font-weight: 600; padding: 5px 7px;
}
.tariff-tile.selected .tariff-saving { background: var(--ui-surface) !important; }
.countries-card { padding: 14px; }
.countries-card strong { font-size: 15px; }
.countries-card small { font-size: 12px; color: var(--ui-muted); }
.countries-icon { background: var(--ui-surface-raised); color: var(--ui-text); }
.purchase-bar, html[data-theme="light"] .purchase-bar { background: var(--ui-bg); bottom: calc(77px + env(safe-area-inset-bottom)); padding-top: 10px; }
.purchase-bar .button { min-height: 50px; box-shadow: none; }

/* Gifts, referrals and bonus wheel. */
.gift-brand-card>img { height: auto; aspect-ratio: 16/7.5; }
.gift-brand-card>div { background: var(--ui-surface); color: var(--ui-text); }
.gift-list-title { font-size: 16px; color: var(--ui-muted); }
.gift-action-card, .gift-row { padding: 13px 15px; }
.gift-action-card strong, .gift-row strong, .referral-hero strong { font-size: 16px; font-weight: 620; }
.gift-action-card small, .gift-row small, .referral-hero small { color: var(--ui-muted); font-size: 12px; }
.gift-action-icon, .gift-row .gift-symbol.small, .referral-hero>span,
.gift-empty>span, .gift-emblem, .gift-choice-icon { background: var(--ui-surface-raised); color: var(--ui-text); box-shadow: none; }
.gift-choice button, html[data-theme="light"] .gift-choice button { background: var(--ui-primary); color: var(--ui-primary-text); }
.gift-tab-icon, .tabs button.active .gift-tab-icon { background: var(--ui-surface-raised); color: var(--ui-text); box-shadow: none; }
.gift-row-actions button { background: var(--ui-primary); color: var(--ui-primary-text); border-color: transparent; }
.referral-hero { margin-bottom: 17px; }
.referral-link { background: var(--ui-surface-raised); border-color: transparent; color: var(--ui-text); font-size: 13px; }
.referral-link-head>strong { font-size: 14px; }
.referral-level strong, .referral-menu strong, .referral-person strong { font-size: 14px; font-weight: 600; }
.referral-level small, .referral-level em, .referral-person small,
.referral-history-row small, .referral-level-compact small { color: var(--ui-muted); font-size: 12px; }
.referral-level>b { font-size: 20px; font-weight: 650; }
.referral-stats span { background: var(--ui-surface-raised); border: 0; }
.referral-stats strong { font-size: 22px; }
.referral-stats small { font-size: 12px; color: var(--ui-muted); }
.referral-level-note, .referral-level-explainer, .referral-alias-help { font-size: 12px; color: var(--ui-muted); }
.referral-alias-preview { background: var(--ui-input); border-color: var(--ui-border); color: var(--ui-muted); font-size: 12px; }
.bonus-dialog .dialog-heading { margin-bottom: 2px; }
.bonus-hero { padding: 4px 8px 14px; }
.bonus-orbit { background: var(--ui-surface-raised); color: var(--ui-text); box-shadow: none; }
.bonus-hero h3 { font-size: 18px; font-weight: 650; }
.bonus-hero p { color: var(--ui-muted) !important; font-size: 12px; }
.bonus-reel-window { background: var(--ui-surface-raised); border: 0; border-radius: 17px; }
.bonus-reel-window::before, .bonus-reel-window::after { display: none; }
.bonus-reel-card { background: var(--ui-surface); color: var(--ui-text); border: 0; border-radius: 14px; box-shadow: none; }
.bonus-reel-card.target { background: var(--ui-surface); border-color: transparent; box-shadow: none; }
.bonus-reel-card.landed { background: var(--ui-surface); border-color: transparent; box-shadow: inset 0 0 0 2px var(--ui-primary); }
.bonus-reel-card small { font-size: 11px; color: var(--ui-muted); }
.bonus-center-marker::before { border-top-color: var(--ui-text); }
.bonus-spin-result { color: var(--ui-muted); font-size: 12px; }
.bonus-stock-item { padding: 12px; }
.bonus-stock-item strong { font-size: 14px; }
.bonus-stock-item small { font-size: 12px; color: var(--ui-muted); }
.bonus-stock-icon { background: var(--ui-surface-raised); color: var(--ui-text); }
.bonus-stock-item.selected { border-color: var(--ui-primary); box-shadow: inset 0 0 0 1px var(--ui-primary); }
.bonus-empty, .bonus-wheel-note { color: var(--ui-muted) !important; font-size: 12px !important; }
.bonus-stock-heading h3 { font-size: 16px; }
.bonus-stock-heading>span, .active-discount>small { color: var(--ui-muted); font-size: 12px; }
.bonus-win small, .bonus-win span { font-size: 12px; }

/* Settings, wallet, support, fields and the sheet. */
.dialog-layer:not([hidden]) { background: #0009; }
.dialog, html[data-theme="light"] .dialog { width: min(100%, 560px); background: var(--ui-bg); border: 0; border-radius: 24px 24px 0 0; color: var(--ui-text); max-height: calc(94dvh - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.menu-group>button, .menu-theme, .manage-menu button { color: var(--ui-text); min-height: 54px; font-size: 14px !important; font-weight: 550; }
.menu-copy strong, .payment-methods strong { font-size: 14px; font-weight: 600; }
.menu-copy small, .payment-methods small { color: var(--ui-muted); font-size: 12px; }
.menu-icon { color: var(--ui-text); }
.menu-account>button { min-height: 44px; }
.theme-switch { background: var(--ui-surface-raised); }
.theme-switch button { color: var(--ui-muted); font-size: 12px; }
.theme-switch button.chosen { background: var(--ui-primary); color: var(--ui-primary-text); box-shadow: none; }
.wallet-hero small { color: var(--ui-muted); font-size: 12px; }
.wallet-hero strong { font-size: 28px; font-weight: 700; }
.wallet-hero>span, .promo-hero>span { background: var(--ui-surface-raised); color: var(--ui-text); }
.wallet-section-title small { color: var(--ui-muted); font-size: 12px; }
.wallet-history-link span { font-size: 14px; font-weight: 600; }
.support-form { padding: 15px; }
.support-form label, .support-topic-label { color: var(--ui-muted); font-size: 12px; }
.support-form input, .support-form textarea, .support-reply-form textarea,
.promo-field input, .amount-field input { background: var(--ui-input); border: 1px solid var(--ui-border); color: var(--ui-text); border-radius: 13px; font-size: 14px; }
.support-form input:focus, .support-form textarea:focus, .support-reply-form textarea:focus,
.promo-field input:focus, .amount-field input:focus { border-color: var(--ui-muted); box-shadow: none; }
.support-topic { background: var(--ui-surface-raised); border-color: transparent; color: var(--ui-text); font-size: 12px; }
.support-topic.selected { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text); transform: none; }
.support-ticket strong { font-size: 14px; }
.support-ticket>p, .support-ticket section p { font-size: 13px !important; }
.support-ticket>div>span, .support-ticket section small { font-size: 11px; }
.support-ticket footer small, .support-ticket footer b { font-size: 11px; }
.support-message p { font-size: 13px !important; }
.support-message small { font-size: 11px; }
.support-thread .dialog-heading h2 { font-size: 16px; }
.support-thread .dialog-heading small, .support-closed,
.support-close-button, .support-archive-button { font-size: 12px; }
.support-reply-form textarea { font-size: 14px; }
.promo-hero small, .promo-note { color: var(--ui-muted) !important; font-size: 12px !important; }
.notice { background: var(--ui-surface); color: var(--ui-muted); border: 0; }

html[data-theme="light"] .home-service-hero, html[data-theme="light"] .home-shortcuts,
html[data-theme="light"] .home-bonus-card, html[data-theme="light"] .subscription-card,
html[data-theme="light"] .tariff-tile, html[data-theme="light"] .gift-action-card,
html[data-theme="light"] .gift-row, html[data-theme="light"] .referral-hero,
html[data-theme="light"] .referral-levels, html[data-theme="light"] .referral-menu,
html[data-theme="light"] .referral-list, html[data-theme="light"] .wallet-hero,
html[data-theme="light"] .promo-hero, html[data-theme="light"] .manage-summary,
html[data-theme="light"] .manage-metrics>span, html[data-theme="light"] .devices-list,
html[data-theme="light"] .support-form, html[data-theme="light"] .support-ticket,
html[data-theme="light"] .bonus-stock-item, html[data-theme="light"] .active-discount {
  background: var(--ui-surface); border-color: transparent; color: var(--ui-text); box-shadow: none;
}
html[data-theme="light"] .tariff-tile.featured { background: var(--ui-surface); border-color: transparent; }
html[data-theme="light"] .home-service-mark, html[data-theme="light"] .home-shortcut-icon,
html[data-theme="light"] .home-bonus-symbol, html[data-theme="light"] .gift-action-icon,
html[data-theme="light"] .gift-row .gift-symbol.small,
html[data-theme="light"] .referral-hero>span,
html[data-theme="light"] .manage-menu button>i { background: var(--ui-surface-raised); color: var(--ui-text); }
html[data-theme="light"] .home-bonus-open, html[data-theme="light"] .wallet-chip,
html[data-theme="light"] .button { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-text); }
html[data-theme="light"] .button.secondary, html[data-theme="light"] .button.tertiary { background: var(--ui-surface-raised); border-color: transparent; color: var(--ui-text); }
html[data-theme="light"] .profile-chip { background: var(--ui-surface); border-color: transparent; color: var(--ui-text); box-shadow: none; }
html[data-theme="light"] .home-shortcuts button, html[data-theme="light"] .menu-group>button,
html[data-theme="light"] .manage-menu button { color: var(--ui-text); border-color: var(--ui-separator); }
html[data-theme="light"] .subscription-compact-meta { border-color: var(--ui-separator); color: var(--ui-muted); }
html[data-theme="light"] .subscription-compact-meta>b { color: var(--ui-text); }
html[data-theme="light"] .tariff-saving, html[data-theme="light"] .tariff-saving.promo { background: var(--ui-surface-raised) !important; color: var(--ui-text) !important; }
html[data-theme="light"] .tariff-tile.selected { background: var(--ui-surface-raised); border-color: var(--ui-primary); }
html[data-theme="light"] .support-form input, html[data-theme="light"] .support-form textarea,
html[data-theme="light"] .support-reply-form textarea { background: var(--ui-input); border-color: var(--ui-border); color: var(--ui-text); }
html[data-theme="light"] .bonus-reel-window { background: var(--ui-surface-raised); border: 0; }
html[data-theme="light"] .bonus-reel-card { background: var(--ui-surface); border: 0; color: var(--ui-text); }

@media (prefers-reduced-motion: no-preference) {
  .dialog-layer:not([hidden]) { animation: ui-shade-in var(--motion-normal) var(--ease-out) both; }
  .dialog-layer:not([hidden]) .dialog { animation: ui-sheet-in var(--motion-slow) var(--ease-out) both; }
  @keyframes ui-shade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ui-sheet-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
  .dialog-layer.dialog-exit { pointer-events: none; animation: ui-shade-out var(--motion-fast) var(--ease-standard) both; }
  .dialog-layer.dialog-exit .dialog { animation: ui-sheet-out var(--motion-fast) var(--ease-standard) both; }
  @keyframes ui-shade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ui-sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98) translateY(6px); } }
}
@media (max-width: 370px) {
  .app-shell { padding-inline: 14px; }
  .home-service-hero { padding: 14px; }
  .home-buy-button { font-size: 16px; }
  .home-shortcuts button { padding: 10px 12px; }
  .home-shortcuts strong { font-size: 13px; }
  .home-shortcuts small { font-size: 11px; }
  .home-bonus-open { font-size: 11px; }
  .tariff-tile { padding: 13px; }
  .tariff-price, .tariff-tile strong.tariff-price { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}