@import url('https://fonts.cdnfonts.com/css/sf-pro-display');

/* ==========================================================================
   Tsar VPN - Full UI Design System (Sota Theme)
   ========================================================================== */

[hidden] {
  display: none !important;
}

/* Auth Page Styling */
.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #FFFFFF;
  color: #0F172A;
  padding: 24px 16px;
  align-items: center;
  justify-content: center;
}

.auth-page-shell {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-bottom: 8px;
}

.auth-page-header .auth-page-logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1;
}

.auth-back-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sota-text-gray);
  transition: color 0.2s;
}

.auth-back-button:hover {
  color: #D97706;
}

.auth-page-logo-wrap img {
  height: 32px;
  width: auto;
}

.auth-card {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 28px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.app-auth-brand-badge {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid var(--sota-card-border);
}

.app-auth-brand-badge img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.app-auth-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0F172A;
  margin-bottom: 6px;
  text-align: center;
}

.app-auth-subtitle {
  font-size: 14px;
  color: var(--sota-text-gray);
  text-align: center;
  line-height: 1.45;
  margin-bottom: 24px;
}

.auth-tabs {
  display: flex;
  width: 100%;
  background: #F1F5F9;
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--sota-card-border);
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--sota-text-gray);
  transition: all 0.2s ease;
}

.auth-tab.active {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form[hidden] {
  display: none !important;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sota-text-gray);
}

.field input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid var(--sota-card-border);
  color: #0F172A;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.field input:focus {
  border-color: #0F172A;
  background: #FFFFFF;
}

.auth-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  background-color: var(--sota-yellow);
  color: #000000;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 6px;
}

.auth-submit-btn:hover {
  background-color: var(--sota-yellow-hover);
}

.auth-error-msg {
  font-size: 13px;
  color: #DC2626;
  background: #FEF2F2;
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid #FCA5A5;
}

.auth-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  color: var(--sota-text-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sota-card-border);
}

.auth-divider span {
  padding: 0 12px;
}

.auth-social-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid var(--sota-card-border);
  color: #0F172A;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-social-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.text-link {
  background: none;
  border: none;
  color: #2563EB;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.text-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Cabinet Page Styling (App Style)
   ========================================================================== */
.app-cabinet-container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 16px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
  background-color: #FFFFFF;
  color: #0F172A;
}

.app-cabinet-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  min-height: 44px;
}

.app-cabinet-header .auth-back-button {
  position: relative;
  z-index: 2;
}

.app-cabinet-header .app-cabinet-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1;
}

.app-cabinet-brand img {
  height: 32px;
  width: auto;
}

.app-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.app-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid var(--sota-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.2s;
}

.app-icon-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.app-cabinet-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Profile Card */
.app-profile-card {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 22px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.app-avatar-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sota-yellow) 0%, #E5BB00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1C1C1C;
  flex-shrink: 0;
}

.app-profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.app-profile-name {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
}

.app-profile-email {
  font-size: 13px;
  color: var(--sota-text-gray);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Hero Subscription Card (Crown design) */
.app-hero-sub-card {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 28px;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.app-hero-sub-card img[data-crown-img] {
  transition: transform 0.3s ease;
}

.app-hero-sub-card:hover img[data-crown-img] {
  transform: scale(1.03);
}

/* Support Card with King Avatar */
.app-support-card {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: background-color 0.2s, transform 0.15s, border-color 0.2s;
  cursor: pointer;
}

.app-support-card:hover {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-2px);
}

/* Subscription Card */
.app-subscription-card {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 26px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.app-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-sub-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sota-text-gray);
}

.app-status-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.15);
  color: var(--sota-status-green);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.app-sub-days {
  font-size: 32px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.1;
}

.app-sub-meta {
  font-size: 13px;
  color: var(--sota-text-gray);
}

.app-sub-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: var(--sota-yellow);
  color: #000000;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.app-sub-btn:hover {
  background-color: var(--sota-yellow-hover);
}

/* Key Card */
.app-key-card {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 26px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.app-key-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-section-kicker {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sota-text-gray);
}

.app-copy-btn {
  background: #F8FAFC;
  border: 1px solid var(--sota-card-border);
  color: #D97706;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.app-copy-btn:hover {
  background: #F1F5F9;
}

.app-key-code {
  font-family: monospace;
  font-size: 13px;
  color: #334155;
  background: #F8FAFC;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--sota-card-border);
  word-break: break-all;
  max-height: 72px;
  overflow-y: auto;
}

.app-connect-vpn-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: #0F172A;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.app-connect-vpn-btn:hover {
  background: #1E293B;
}

/* Quick Actions & Navigation */
.app-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.app-action-tile {
  background-color: #FFFFFF;
  border: 1px solid var(--sota-card-border);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: #0F172A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.2s;
}

.app-action-tile:hover {
  background-color: #F8FAFC;
  transform: translateY(-2px);
  border-color: #CBD5E1;
}

.app-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #FFFBEB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.app-tile-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
}

.app-tile-sub {
  font-size: 12px;
  color: var(--sota-text-gray);
}

/* Bottom Nav Bar (Hidden in favor of Mobile Drawer) */
.app-bottom-nav {
  display: none !important;
}

/* App Mobile Drawer (SOTA Style) */
.app-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.app-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.app-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 320px;
  background: #FFFFFF;
  border-right: 1px solid var(--sota-card-border);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.app-drawer.open {
  transform: translateX(0);
}

.drawer-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 24px 16px;
  overflow-y: auto;
  box-sizing: border-box;
}

.drawer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-nav-item.active-capsule {
  background: #F1F5F9;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
}

.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #0F172A;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.active-capsule .drawer-nav-link {
  flex: 1;
  font-weight: 600;
}

.drawer-nav-link:hover {
  background: #F8FAFC;
}

.drawer-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #0F172A;
}

.drawer-close-btn {
  background: none;
  border: none;
  color: #64748B;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.15s ease;
}

.drawer-close-btn:hover {
  color: #0F172A;
}

.drawer-logout-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: none;
  border: none;
  color: #0F172A;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  border-radius: 12px;
  margin-top: auto;
  transition: background-color 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

.drawer-logout-btn:hover {
  background: #FEF2F2;
  color: #DC2626;
}

.drawer-logout-btn:hover .drawer-icon {
  color: #DC2626;
}

/* Remove glow on buttons & hide recurrent container */
.btn,
.btn-yellow,
.btn-white,
.btn-black,
.hero-btn,
.app-sub-btn,
.auth-submit-btn,
.app-connect-vpn-btn,
.app-icon-btn,
.app-action-tile {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

[data-recurrent-info-container] {
  display: none !important;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0F172A;
  border: 1px solid var(--sota-card-border);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 100;
  white-space: nowrap;
}

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

/* ==========================================================================
   Payment / Tariffs Styling (Matches Photo 1:1)
   ========================================================================== */
.tariffs-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: -6px 0 14px 0;
  padding: 0 4px;
  box-sizing: border-box;
}

.tariffs-hero-text {
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}

.tariffs-hero-title {
  margin: 0;
  font-size: clamp(23px, 6.4vw, 29px);
  font-weight: 800;
  color: #1E2024;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tariffs-hero-img-wrap {
  flex-shrink: 0;
  width: 205px;
  max-width: 54%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.tariffs-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.06));
}

.tariffs-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.tariff-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFFFFF;
  border: 1.5px solid #EBECEF;
  border-radius: 22px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.tariff-card:hover {
  border-color: #DDE0E6;
}

.tariff-card.selected {
  border: 2px solid #F5A623;
  box-shadow: 0 4px 18px rgba(245, 166, 35, 0.12);
}

/* Badges */
.tariff-badge-tag {
  position: absolute;
  top: -11px;
  right: 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9px;
  line-height: 1.2;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tariff-badge-tag.tag-trial {
  background: #F7B928;
  color: #1E2024;
}

.tariff-badge-tag.tag-discount {
  background: #FF7E1D;
  color: #FFFFFF;
}

.tariff-badge-tag.tag-forever {
  background: #F7B928;
  color: #1E2024;
}

/* Left column */
.tariff-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.tariff-title {
  font-size: 18px;
  font-weight: 800;
  color: #1E2024;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tariff-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: #8E929B;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right column */
.tariff-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.tariff-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.tariff-price-main {
  font-size: 21px;
  font-weight: 800;
  color: #FF9615;
  line-height: 1.2;
}

.tariff-price-sub {
  font-size: 13px;
  font-weight: 500;
  color: #8E929B;
  line-height: 1.35;
}

/* Radio button */
.tariff-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #D5D7DC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #FFFFFF;
  transition: border-color 0.15s ease;
}

.tariff-card.selected .tariff-radio {
  border-color: #FF9615;
}

.tariff-radio-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF9615;
}

.tariff-card.selected .tariff-radio-dot {
  display: block;
}

/* Checkout Summary Card */
.tariff-checkout-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
  border: 1.5px solid #EBECEF;
  border-radius: 24px;
  padding: 20px 22px;
  margin-top: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.tariff-checkout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tariff-checkout-label {
  font-size: 16px;
  font-weight: 600;
  color: #74777C;
}

.tariff-checkout-price {
  font-size: 28px;
  font-weight: 900;
  color: #FF9615;
  letter-spacing: -0.02em;
}

.tariff-pay-button {
  width: 100%;
  padding: 18px 24px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 700;
  background: #FF9615;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 20px rgba(255, 150, 21, 0.32);
  transition: all 0.15s ease;
}

.tariff-pay-button:hover {
  background: #F08805;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 150, 21, 0.4);
}

.tariff-pay-button:active {
  transform: translateY(0);
}

.tariff-checkout-note {
  font-size: 12.5px;
  font-weight: 500;
  color: #9EA0A5;
  text-align: center;
  margin: 0;
}

/* App Cabinet Brand with 3D Crown Image */
.app-cabinet-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.app-cabinet-brand-img {
  height: 28px;
  width: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
  flex-shrink: 0;
  display: block;
}

.app-cabinet-brand-text {
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #0F172A;
  line-height: 1;
  white-space: nowrap;
}

.app-cabinet-brand-text .app-cabinet-brand-vpn {
  color: var(--sota-yellow);
}

@media (max-width: 420px) {
  .app-cabinet-container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 380px) {
  .app-cabinet-header .auth-back-button span,
  .auth-page-header .auth-back-button span {
    display: none;
  }
}

/* ==========================================================================
   Setup & Instructions System (Tsar Style - 1 to 1 feature parity with Krab)
   ========================================================================== */
.setup-panel {
  text-align: center;
  padding: 8px 0 24px;
}

.setup-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(247, 209, 23, 0.12);
  border: 1px solid rgba(247, 209, 23, 0.25);
  color: var(--sota-yellow);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.setup-hero-icon svg {
  width: 32px;
  height: 32px;
}

.setup-panel h1 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.setup-panel > p {
  font-size: 14px;
  color: var(--sota-text-gray);
  margin: 0 0 24px;
  line-height: 1.45;
}

.setup-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.setup-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1.5px solid var(--sota-card-border);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.setup-choice span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.setup-choice span b {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
}

.setup-choice span small {
  font-size: 13px;
  color: var(--sota-text-muted);
}

.setup-choice > svg {
  width: 24px;
  height: 24px;
  color: var(--sota-text-muted);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.setup-choice:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.setup-choice.active {
  border-color: #EAB308;
  background: #FEFCE8;
}

.setup-choice.active > svg {
  color: #D97706;
}

.platform-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.platform-picker button {
  min-height: 48px;
  border-radius: 14px;
  border: 1.5px solid var(--sota-card-border);
  background: #FFFFFF;
  color: var(--sota-text-gray);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.platform-picker button:hover {
  border-color: #CBD5E1;
  color: #0F172A;
  background: #F8FAFC;
}

.platform-picker button.active {
  border-color: #EAB308;
  color: #D97706;
  background: #FEFCE8;
  font-weight: 700;
}

.platform-picker button:last-child {
  grid-column: 1 / -1;
}

.setup-next {
  width: 100%;
  margin-top: 8px;
}

/* Instructions Panel */
.instruction-panel {
  text-align: left;
  padding: 4px 0 24px;
}

.instruction-panel h1 {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.instruction-muted {
  font-size: 14px;
  color: var(--sota-text-gray);
  margin: 0 0 18px;
}

.client-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.client-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #FFFFFF;
  border-radius: 18px;
  border: 1.5px solid var(--sota-card-border);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.client-choice:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.client-choice span b {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  display: block;
}

.client-choice span small {
  font-size: 12px;
  color: var(--sota-text-muted);
  display: block;
  margin-top: 2px;
}

.client-choice svg {
  width: 18px;
  height: 18px;
  opacity: 0;
  color: #D97706;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.client-choice.active {
  border-color: #EAB308;
  background: #FEFCE8;
}

.client-choice.active svg {
  opacity: 1;
}

.subscription-key {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px 20px;
  border: 1px solid var(--sota-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.subscription-key span {
  min-width: 0;
}

.subscription-key b {
  font-size: 11px;
  font-weight: 800;
  color: #D97706;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

.subscription-key code {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.incy-fallback, .happ-fallback {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.incy-fallback b, .happ-fallback b {
  font-size: 14px;
  font-weight: 700;
  color: #92400E;
  display: block;
  margin-bottom: 4px;
}

.incy-fallback p, .happ-fallback p {
  font-size: 13px;
  color: #78350F;
  margin: 0 0 12px;
  line-height: 1.45;
}

.incy-fallback-actions, .happ-fallback-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.instruction-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: instruction-step;
}

.instruction-steps li {
  counter-increment: instruction-step;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--sota-card-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.instruction-steps li > div:before {
  content: counter(instruction-step);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.instruction-steps b {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  display: block;
  margin-bottom: 4px;
}

.instruction-steps p {
  font-size: 13.5px;
  color: var(--sota-text-gray);
  margin: 0;
  line-height: 1.5;
}

.button.primary-button {
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--sota-yellow);
  color: #000000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

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

.button.quiet-button {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1px solid var(--sota-card-border);
  color: #0F172A;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.button.quiet-button:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.button.quiet-button.full {
  width: 100%;
}

/* ==========================================================================
   Tsar VPN - Onboarding & Auth White Theme (Exact match to Photo 1 & 3)
   ========================================================================== */
body.tsar-onboarding-page {
  background-color: #FFFFFF !important;
  color: #0F172A;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow-x: hidden;
}

.tsar-onboarding-shell {
  width: 100%;
  max-width: 440px;
  padding: 16px 16px 6px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
  margin: 0 auto;
}

/* Top Nav */
.tsar-top-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 2px;
}

.tsar-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.tsar-crown-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.tsar-brand-text {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #0F172A;
}

.tsar-brand-yellow {
  color: #EAB308;
}

.tsar-support-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  color: #0F172A;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
}

.tsar-support-pill:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
  transform: translateY(-1px);
}

/* King Hero */
.tsar-hero-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  margin-top: 0px;
  margin-bottom: 6px;
  z-index: 1;
  pointer-events: none;
}

.tsar-king-img {
  width: 100%;
  max-width: 280px;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.06));
}

/* Onboarding Card (Photo 1) */
.tsar-onboarding-card {
  width: 100%;
  background: #FFFFFF;
  border-radius: 28px;
  padding: 24px 20px 22px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
  transition: all 0.25s ease;
}

.tsar-main-heading {
  font-size: 25px;
  line-height: 1.18;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.4px;
  margin: 0 0 18px 0;
  text-align: left;
}

@media (min-width: 480px) {
  .tsar-main-heading {
    font-size: 27px;
  }
}

/* Feature Pills List */
.tsar-pills-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tsar-feature-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  padding: 5px 14px 5px 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tsar-pill-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tsar-pill-icon-wrap.icon-green {
  background: #DCFCE7;
}

.tsar-pill-icon-wrap.icon-slate {
  background: #EEF2FF;
}

.tsar-pill-icon-wrap.icon-blue {
  background: #E0F2FE;
}

.tsar-pill-icon-wrap.icon-orange {
  background: #FFEDD5;
}

.tsar-pill-icon-wrap.icon-pink {
  background: #FCE7F3;
}

.tsar-pill-text {
  font-size: 14.5px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.2;
}

/* Big Dark Email CTA Button */
.tsar-email-cta-btn {
  width: 100%;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  border-radius: 18px;
  padding: 10px 16px 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 18px;
  min-height: 56px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  transition: all 0.15s ease;
}

.tsar-email-cta-btn:hover {
  background: #1E293B;
  transform: translateY(-1px);
}

.tsar-email-cta-btn:active {
  transform: scale(0.98);
}

.tsar-cta-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Auth View Inside Card */
.tsar-back-to-benefits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 14px;
  transition: color 0.15s;
}

.tsar-back-to-benefits:hover {
  color: #0F172A;
}

.tsar-onboarding-card .field label {
  color: #374151;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}

.tsar-onboarding-card .field input {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
  border-radius: 14px;
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}

.tsar-onboarding-card .field input:focus {
  border-color: #0F172A;
  background: #FFFFFF;
  outline: none;
}

.tsar-onboarding-card .auth-tabs {
  background: #F1F5F9;
  border-radius: 12px;
  padding: 3px;
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.tsar-onboarding-card .auth-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.tsar-onboarding-card .auth-tab.active {
  background: #FFFFFF;
  color: #0F172A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tsar-onboarding-card .auth-submit-btn {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 14px;
  font-weight: 700;
  min-height: 48px;
  border: none;
  font-size: 15px;
  width: 100%;
  cursor: pointer;
  margin-top: 10px;
}

.tsar-onboarding-card .auth-submit-btn:hover {
  background: #1E293B;
}

.tsar-onboarding-card .auth-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 18px 0;
}

.tsar-onboarding-card .auth-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #E2E8F0;
  top: 50%;
  z-index: 1;
}

.tsar-onboarding-card .auth-divider span {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  padding: 0 10px;
  color: #94A3B8;
  font-size: 13px;
}

.tsar-onboarding-card .auth-social-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  border-radius: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

.tsar-onboarding-card .auth-social-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.tsar-onboarding-card .text-link {
  color: #2563EB;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

/* Ticker Marquee Bottom (Photo 3) */
.tsar-marquee-bottom {
  width: 100%;
  overflow: hidden;
  padding: 16px 0 20px 0;
  margin-top: auto;
  background: transparent;
  user-select: none;
  position: relative;
}

.tsar-marquee-bottom:hover .tsar-marquee-track {
  animation-play-state: paused;
}

.tsar-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: tsarTickerScroll 35s linear infinite;
}

@keyframes tsarTickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.tsar-ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F1F3F5;
  color: #374151;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #E5E7EB;
}

@media (max-height: 750px) {
  .tsar-king-img {
    max-height: 190px;
  }
  .tsar-main-heading {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .tsar-onboarding-card {
    padding: 20px 16px 18px 16px;
  }
}




/* ==========================================================================
   Tsar VPN - Exact Design System Additions (Matching Image 2 Mockup)
   ========================================================================== */

/* Dark Drawer Theme (#292C31) */
.app-drawer {
  background: #292C31 !important;
  color: #FFFFFF !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.drawer-content {
  background: #292C31 !important;
  color: #FFFFFF !important;
}

.drawer-nav-item.active-capsule {
  background: rgba(255, 157, 22, 0.15) !important;
  border-radius: 14px !important;
}

.drawer-nav-link {
  color: #FFFFFF !important;
  font-weight: 500;
}

.drawer-nav-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FF9D16 !important;
}

.active-capsule .drawer-nav-link {
  color: #FF9D16 !important;
  font-weight: 700 !important;
}

.drawer-icon {
  color: inherit !important;
}

.drawer-close-btn {
  color: #A6A9B0 !important;
}

.drawer-close-btn:hover {
  color: #FFFFFF !important;
}

.drawer-logout-btn {
  color: #A6A9B0 !important;
}

.drawer-logout-btn:hover {
  color: #FF863D !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Cabinet Page Container */
.cabinet-page-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 20px 48px;
  min-height: 100vh;
  background-color: var(--tsar-bg, #F7F7F5);
  color: var(--tsar-text, #1E2024);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .cabinet-page-container {
    max-width: 860px;
  }
}

.cabinet-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
}

.cabinet-top-user {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--tsar-border, #E8E8E5);
  padding: 6px 14px 6px 8px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cabinet-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #292C31;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.cabinet-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cabinet-user-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E2024;
}

.cabinet-user-email {
  font-size: 11.5px;
  color: #74777C;
}

/* Main Hero Subscription Card (Image 2) */
.cabinet-hero-sub-card {
  background: #FFFFFF;
  border: 1px solid var(--tsar-border, #E8E8E5);
  border-radius: 28px;
  padding: 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

@media (max-width: 600px) {
  .cabinet-hero-sub-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 24px 20px;
  }
}

.cabinet-hero-sub-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.cabinet-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 700;
  background: #EAF8F0;
  color: #35B86B;
}

.cabinet-status-badge.expired {
  background: #FCECEC;
  color: #E85D5D;
}

.cabinet-sub-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1E2024;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .cabinet-sub-title {
    font-size: 28px;
  }
}

.cabinet-sub-desc {
  font-size: 14px;
  color: #74777C;
  line-height: 1.4;
}

.cabinet-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}

.btn-sub-dark {
  background: #292C31;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sub-dark:hover {
  background: #363A41;
  transform: translateY(-1px);
}

.btn-sub-white {
  background: #FFFFFF;
  color: #1E2024;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid #E8E8E5;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sub-white:hover {
  background: #F8F8F6;
  border-color: #D6D6D2;
  transform: translateY(-1px);
}

.cabinet-hero-mascot {
  width: 130px;
  height: 130px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08));
}

@media (max-width: 600px) {
  .cabinet-hero-mascot {
    align-self: center;
    width: 120px;
    height: 120px;
  }
}

/* 4 Stat Cards Row (Image 2) */
.cabinet-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .cabinet-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 20px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: #1E2024;
  transition: all 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border-color: #D6D6D2;
}

.stat-bubble {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-bubble.orange {
  background: #FFF0D6;
  color: #FF9D16;
}

.stat-bubble.blue {
  background: #EAF5FC;
  color: #3B9FE8;
}

.stat-bubble.purple {
  background: #F0EDFF;
  color: #7357E8;
}

.stat-bubble.green {
  background: #EAF8F0;
  color: #35B86B;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-label {
  font-size: 11.5px;
  font-weight: 500;
  color: #74777C;
}

.stat-val {
  font-size: 18px;
  font-weight: 800;
  color: #1E2024;
  line-height: 1.2;
}

.stat-val.status-green-text {
  font-size: 13.5px;
  color: #35B86B;
}

.stat-sub {
  font-size: 11px;
  color: #9EA0A5;
}

.stat-chevron {
  font-size: 18px;
  font-weight: 700;
  color: #9EA0A5;
  margin-left: auto;
}

/* Tsar Dark Key Capsule */
.tsar-key-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.tsar-key-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tsar-key-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #292C31;
  color: #FFFFFF;
  border-radius: 16px;
  padding: 8px 10px 8px 16px;
  gap: 12px;
}

.tsar-key-code {
  font-family: monospace;
  font-size: 13px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.tsar-key-copy-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.tsar-key-copy-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Recommend Banner Widget (Image 2) */
.cabinet-recommend-card {
  background: #292C31;
  border-radius: 20px;
  padding: 18px 20px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease;
}

.cabinet-recommend-card:hover {
  transform: translateY(-2px);
}

/* Legal Dialog / Password Dialog Styling */
.legal-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 90vw;
}

.legal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}

.legal-dialog-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E5;
  border-radius: 28px;
  padding: 32px 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.legal-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.legal-dialog-head h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1E2024;
}

.legal-dialog-head button {
  background: none;
  border: none;
  color: #74777C;
  cursor: pointer;
  padding: 4px;
}

.legal-lead {
  font-size: 14px;
  color: #74777C;
  line-height: 1.45;
  margin-bottom: 20px;
}

.password-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.form-error {
  font-size: 13px;
  color: #E85D5D;
  background: #FCECEC;
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 8px;
}

/* ==========================================================================
   Tsar Cabinet 1:1 Design (Matches Screenshot media_1791047506198.jpg)
   ========================================================================== */
/* Tsar Cabinet 1:1 Mobile Theme (Matching Exact Design) */
body.tsar-cabinet-body {
  background-color: #0E131E !important;
  color: #0F172A !important;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cabinet-phone-shell {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-color: #0E131E;
  min-height: 100vh;
  position: relative;
}

/* Top Dark Header Bar */
.cabinet-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  background-color: #0E131E;
  box-sizing: border-box;
}

.cabinet-top-logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.cabinet-top-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.cabinet-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1C2333;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
  padding: 0;
}

.top-circle-btn:hover {
  background: #252F44;
}

.bell-orange-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF9500;
  border: 1.5px solid #0E131E;
}

/* Main Light Sheet with Rounded Top Corners */
.cabinet-main-sheet {
  background: #F4F6F8;
  border-radius: 28px 28px 0 0;
  padding: 18px 16px 85px;
  min-height: calc(100vh - 68px);
  box-sizing: border-box;
}

/* Active Subscription Hero Card */
.cabinet-hero-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.cabinet-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  width: 100%;
}

.status-shield-box {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #E8F9EE;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cabinet-status-row.expired .status-shield-box {
  background: #FEE2E2;
  color: #DC2626;
}

.status-text-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #16A34A;
  background: #E8F9EE;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-block;
  line-height: 1.2;
}

.cabinet-status-row.expired .status-text-pill {
  background: #FEE2E2;
  color: #DC2626;
}

.cabinet-plan-name {
  font-size: 19px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.cabinet-plan-expiry {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 16px;
}

.cabinet-hero-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.btn-hero-dark {
  background: #19202E;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-hero-dark:hover {
  background: #232C3D;
  transform: translateY(-1px);
}

.btn-hero-light {
  background: #FFFFFF;
  color: #0F172A;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E2E8F0;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-hero-light:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

/* 2x2 Stats Grid */
.cabinet-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.cabinet-stat-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 16px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

.cabinet-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.stat-circle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 12px;
}

.stat-circle.orange {
  background: #FF9500;
  color: #FFFFFF;
}

.stat-circle.blue {
  background: #00A3FF;
  color: #FFFFFF;
}

.stat-circle.purple {
  background: #8B5CF6;
  color: #FFFFFF;
}

.stat-circle.slate {
  background: #64748B;
  color: #FFFFFF;
}

.stat-title {
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  margin-top: 0;
  margin-bottom: 4px;
}

.stat-number {
  font-size: clamp(19px, 5vw, 22px);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
}

.stat-status-text {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 2px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-status-text.green {
  color: #16A34A;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #16A34A;
  display: inline-block;
}

.stat-foot {
  font-size: 12px;
  color: #94A3B8;
  margin-top: 2px;
}

/* Fixed Bottom Navigation (3 items) */
.cabinet-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #FFFFFF;
  border-top: 1px solid #ECEEF2;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  max-width: 440px;
  margin: 0 auto;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02);
}

.cabinet-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: #8E95A3;
  font-size: 11px;
  font-weight: 600;
  transition: color 0.15s ease;
  flex: 1;
  text-align: center;
  padding: 6px 0;
}

.cabinet-tab-item svg {
  display: block;
}

.cabinet-tab-item.active {
  color: #FF8A00;
  font-weight: 700;
}

/* Quick Access Section */
.cabinet-quick-section {
  margin-top: 22px;
}

.quick-heading {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 10px 0;
}

.quick-card-list {
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.quick-item {
  display: flex;
  align-items: center;
  padding: 15px 18px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  position: relative;
}

.quick-item:not(:last-child) {
  border-bottom: 1px solid #F1F5F9;
}

.quick-item:hover {
  background: #F8FAFC;
}

.quick-icon-box {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F172A;
  margin-right: 14px;
  flex-shrink: 0;
}

.quick-info {
  flex: 1;
  min-width: 0;
}

.quick-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.quick-subtitle {
  font-size: 13px;
  color: #64748B;
  margin-top: 2px;
}

.quick-chevron {
  font-size: 20px;
  font-weight: 600;
  color: #94A3B8;
  margin-left: 10px;
  line-height: 1;
}

/* ==========================================================================
   Desktop / PC Responsive Enhancements (min-width: 769px)
   Leaves Mobile (<= 768px) 100% untouched!
   ========================================================================== */
.desktop-only,
.cabinet-hero-king-img,
.cabinet-desktop-nav {
  display: none !important;
}

@media (min-width: 769px) {
  /* Hide mobile-only elements */
  .cabinet-bottom-nav,
  .mobile-only {
    display: none !important;
  }

  /* Show desktop-only elements */
  .desktop-only {
    display: flex !important;
  }

  /* 1. Cabinet Container on PC */
  body.tsar-cabinet-body {
    background-color: #F8F9FA !important;
  }

  .cabinet-phone-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 60px;
    background-color: transparent;
  }

  /* Desktop Header */
  .cabinet-top-header {
    background: #FFFFFF;
    border-radius: 20px;
    margin: 20px 0 24px 0;
    padding: 16px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #ECEEF2;
  }

  .cabinet-desktop-nav {
    display: flex !important;
    align-items: center;
    gap: 26px;
    margin-left: 36px;
    flex: 1;
  }

  .cabinet-nav-link {
    font-size: 15px;
    font-weight: 600;
    color: #64748B;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .cabinet-nav-link:hover,
  .cabinet-nav-link.active {
    color: #FF8A00;
  }

  .top-circle-btn {
    background: #F1F5F9;
    color: #0F172A;
    border: 1px solid #E2E8F0;
  }

  .top-circle-btn:hover {
    background: #E2E8F0;
  }

  .bell-orange-dot {
    border-color: #FFFFFF;
  }

  /* 2. Main Sheet on PC */
  .cabinet-main-sheet {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 3. Hero Card on PC */
  .cabinet-hero-card {
    padding: 36px 42px;
    border-radius: 28px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.03);
    border: 1px solid #ECEEF2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 220px;
    position: relative;
    overflow: hidden;
  }

  .cabinet-hero-left {
    flex: 1;
    max-width: 620px;
    z-index: 2;
  }

  .cabinet-hero-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    z-index: 1;
    margin-right: 12px;
  }

  .cabinet-hero-king-img {
    height: 200px;
    width: auto;
    object-fit: contain;
    display: block !important;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
  }

  .cabinet-plan-name {
    font-size: 28px;
    margin: 8px 0 6px 0;
  }

  .cabinet-plan-expiry {
    font-size: 15px;
    margin-bottom: 0;
  }

  .cabinet-hero-buttons {
    display: flex;
    gap: 14px;
    max-width: 380px;
    margin-top: 20px;
  }

  .btn-hero-dark,
  .btn-hero-light {
    padding: 13px 24px;
    font-size: 14.5px;
    border-radius: 14px;
  }

  /* 4. Stat Cards on PC (1x4 Row) */
  .cabinet-grid-2x2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
  }

  .cabinet-stat-card {
    padding: 22px;
    border-radius: 22px;
    border: 1px solid #ECEEF2;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.025);
  }

  .stat-circle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .stat-title {
    font-size: 14px;
  }

  .stat-number {
    font-size: 25px;
  }

  .stat-foot {
    font-size: 13px;
  }

  /* 5. Quick Access on PC (3 Columns Grid) */
  .cabinet-quick-section {
    margin-top: 28px;
  }

  .quick-card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow: visible;
  }

  .quick-item {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #ECEEF2;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.025);
    padding: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .quick-item:not(:last-child) {
    border-bottom: 1px solid #ECEEF2;
  }

  .quick-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border-color: #CBD5E1;
    background: #FFFFFF;
  }

  .quick-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    margin-right: 0;
    margin-bottom: 4px;
  }

  .quick-title {
    font-size: 16px;
  }

  .quick-subtitle {
    font-size: 13.5px;
  }

  .quick-chevron {
    display: none;
  }

  /* 6. General Subpages on PC */
  .app-cabinet-container {
    max-width: 1040px;
    padding: 24px 32px 60px;
    background: transparent;
  }

  .app-cabinet-header {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 16px 28px;
    border: 1px solid #ECEEF2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;
  }

  /* 7. Tariffs / Payment on PC (Checkout 2-columns layout) */
  .tariffs-pc-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: start;
    width: 100%;
  }

  .tariffs-grid {
    gap: 14px;
  }

  .tariffs-pc-checkout-sticky {
    position: sticky;
    top: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .tariff-checkout-card {
    margin-top: 0;
  }

  /* 8. Devices Page 2-column layout on PC */
  body[data-page="devices"] .app-cabinet-main,
  body[data-app-page="devices"] .app-cabinet-main {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: start;
  }
  body[data-page="devices"] .app-cabinet-main > div:first-child,
  body[data-app-page="devices"] .app-cabinet-main > div:first-child {
    grid-column: 1 / -1;
  }

  /* 9. Referrals Page 2-column layout on PC */
  body[data-page="referrals"] .app-cabinet-main,
  body[data-app-page="referrals"] .app-cabinet-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  body[data-page="referrals"] .app-cabinet-main > div:first-child,
  body[data-app-page="referrals"] .app-cabinet-main > div:first-child,
  body[data-page="referrals"] .app-cabinet-main > section:first-of-type,
  body[data-app-page="referrals"] .app-cabinet-main > section:first-of-type {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Tsar VPN - 1:1 iOS Design System (Screens 1, 2, 3, 4)
   ========================================================================== */

body.tsar-cabinet-new {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #FFFFFF !important;
  color: #0E1322 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
}

@media (min-width: 769px) {
  body.tsar-cabinet-new {
    background-color: #F8F9FB !important;
  }
}

.cabinet-new-viewport {
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 16px 18px 130px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .cabinet-new-viewport {
    margin: 24px auto;
    min-height: calc(100vh - 48px);
    border-radius: 36px;
    box-shadow: 0 16px 60px rgba(14, 19, 34, 0.08), 0 2px 10px rgba(14, 19, 34, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
  }
}

/* Header */
.tsar-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 48px;
  margin-bottom: 16px;
}

.tsar-head-logo-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.tsar-head-logo-pill:hover {
  transform: translateX(-50%) scale(1.03);
}

.tsar-head-logo-pill:active {
  transform: translateX(-50%) scale(0.97);
}

.tsar-head-brand-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}

.tsar-head-mail-btn {
  position: relative;
  margin-left: auto;
  width: 46px;
  height: 46px;
  background-color: #FFFFFF;
  border: 1.2px solid #EDF0F5;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E1322;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s, background-color 0.15s;
}

.tsar-head-mail-btn:active {
  transform: scale(0.95);
  background-color: #F8F9FA;
}

.tsar-mail-red-dot {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  background-color: #EF4444;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.4);
}

/* Gauge Semicircle Section */
.tsar-gauge-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.tsar-gauge-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsar-gauge-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tsar-gauge-center {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.tsar-gauge-number {
  font-size: 68px;
  font-weight: 800;
  color: #0E1322;
  line-height: 0.95;
  letter-spacing: -2px;
}

.tsar-gauge-subtext {
  font-size: 13px;
  font-weight: 700;
  color: #4A5568;
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-transform: uppercase;
}

/* Status Pill Badge */
.tsar-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #FFF6ED;
  border-radius: 999px;
  padding: 10px 20px;
  margin-top: 8px;
  box-shadow: 0 1px 3px rgba(255, 122, 0, 0.06);
}

.tsar-status-seal-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tsar-status-badge-text {
  font-size: 14.5px;
  font-weight: 600;
  color: #0E1322;
  white-space: nowrap;
}

/* Primary Action Button (Продлить доступ) */
.tsar-primary-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(180deg, #FF8300 0%, #FF7200 100%);
  color: #FFFFFF;
  border-radius: 22px;
  padding: 9px 10px 9px 24px;
  margin-bottom: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.28);
  box-sizing: border-box;
  transition: transform 0.15s, box-shadow 0.15s;
}

.tsar-primary-btn:active {
  transform: scale(0.985);
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.22);
}

.tsar-primary-btn-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #FFFFFF;
}

.tsar-primary-btn-crown-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Gray Cards (Как настроить VPN? & Ключ доступа) */
.tsar-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #F4F5F8;
  border-radius: 20px;
  padding: 14px 14px 14px 22px;
  margin-bottom: 14px;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s, transform 0.15s;
}

.tsar-card-item:active {
  background-color: #EAECEF;
  transform: scale(0.99);
}

.tsar-card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #0E1322;
  letter-spacing: -0.2px;
}

.tsar-card-key-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  max-width: calc(100% - 64px);
}

.tsar-card-key-link {
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0E1322;
}

.tsar-card-key-protocol {
  color: #E11D48;
  font-weight: 600;
}

.tsar-card-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  margin-left: 12px;
  color: #0E1322;
}

/* Floating Bottom Navigation Bar */
.tsar-bottom-nav-bar {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  max-width: 400px;
  height: 64px;
  background-color: #FFFFFF;
  border-radius: 36px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 4px;
  z-index: 950;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.tsar-nav-tab {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E1322;
  text-decoration: none;
  cursor: pointer;
  border-radius: 28px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.15s;
}

.tsar-nav-tab * {
  pointer-events: none;
}

.tsar-nav-tab:active {
  opacity: 0.6;
}

.tsar-nav-tab.active .tsar-nav-capsule {
  width: 68px;
  height: 44px;
  background-color: #0E1322;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

/* Modals System */
.tsar-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(14, 19, 34, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: tsarFadeIn 0.2s ease-out;
}

.tsar-modal-backdrop[hidden] {
  display: none !important;
}

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

/* Screen 4: Device Picker Modal */
.device-picker-card {
  width: 100%;
  max-width: 350px;
  background-color: #FFFFFF;
  border-radius: 30px;
  padding: 28px 20px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  box-sizing: border-box;
  animation: tsarScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tsarScaleUp {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.device-picker-title {
  font-size: 23px;
  font-weight: 800;
  color: #0E1322;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}

.device-picker-subtitle {
  font-size: 14.5px;
  color: #374151;
  margin: 0 0 22px;
  line-height: 1.35;
  padding: 0 8px;
}

.device-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.device-tile-btn {
  background-color: #EEF2F6;
  border: none;
  border-radius: 18px;
  padding: 22px 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.device-tile-btn:active {
  background-color: #E2E8F0;
  transform: scale(0.96);
}

.device-tile-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #0E1322;
  letter-spacing: -0.2px;
}

.device-picker-close-btn {
  width: 100%;
  background-color: #EEF2F6;
  border: none;
  border-radius: 18px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #0E1322;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.device-picker-close-btn:active {
  background-color: #E2E8F0;
  transform: scale(0.98);
}

/* Screens 2 & 3: 3-Step Instruction Modal */
.instruction-modal-wrap {
  width: 100%;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.instruction-float-close-btn {
  width: 44px;
  height: 44px;
  background-color: #FFFFFF;
  border: none;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0E1322;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s;
}

.instruction-float-close-btn:active {
  transform: scale(0.92);
}

.instruction-modal-card {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 30px;
  padding: 24px 20px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  animation: tsarScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.inst-step-counter {
  font-size: 14px;
  font-weight: 600;
  color: #8F94A6;
  margin-bottom: 16px;
}

.inst-visual-box {
  background-color: #EEF2F6;
  border-radius: 20px;
  padding: 18px;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.inst-step-heading {
  font-size: 20px;
  font-weight: 800;
  color: #0E1322;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.3px;
}

/* Step 1 Store Button */
.inst-store-button {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #EEF2F6;
  border-radius: 18px;
  padding: 6px 16px 6px 6px;
  text-decoration: none;
  box-sizing: border-box;
  gap: 14px;
  transition: background-color 0.15s;
}

.inst-store-button:active {
  background-color: #E2E8F0;
}

.inst-store-icon-tile {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background-color: #007AFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
}

.inst-store-button-label {
  font-size: 16px;
  font-weight: 700;
  color: #0E1322;
}

/* Step 2 Key Copy Button */
.inst-key-copy-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #EEF2F6;
  border: none;
  border-radius: 18px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #0E1322;
  cursor: pointer;
  transition: background-color 0.15s;
}

.inst-key-copy-button:active {
  background-color: #E2E8F0;
}

/* Modal Bottom Navigation Bar */
.inst-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.inst-nav-back-btn {
  width: 58px;
  height: 58px;
  background-color: #EEF2F6;
  border: none;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0E1322;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s, transform 0.15s;
}

.inst-nav-back-btn:active {
  background-color: #E2E8F0;
  transform: scale(0.95);
}

.inst-nav-next-btn {
  flex: 1;
  height: 58px;
  background-color: #0E1322;
  border: none;
  border-radius: 24px;
  padding: 0 10px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}

.inst-nav-next-btn:active {
  transform: scale(0.98);
}

.inst-nav-next-chevron-box {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

/* Mockups inside Instructions */
.mockup-app-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 240px;
}

.mockup-app-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF9900 0%, #FF6600 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mockup-key-container {
  width: 250px;
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Desktop / PC Responsive Enhancements (min-width: 769px)
   Leaves mobile (<= 768px) 100% UNTOUCHED!
   ========================================================================== */
.tsar-desktop-nav,
.tsar-desktop-user-pill,
.tsar-desktop-stats-row {
  display: none !important;
}

@media (min-width: 769px) {
  body.tsar-cabinet-new {
    background-color: #F8F9FB !important;
    padding: 24px 20px 48px;
    box-sizing: border-box;
  }

  .cabinet-new-viewport {
    width: 100%;
    max-width: 1040px;
    min-height: auto;
    margin: 0 auto;
    padding: 28px 36px 48px;
    border-radius: 32px;
    box-shadow: 0 16px 50px rgba(14, 19, 34, 0.05), 0 2px 10px rgba(14, 19, 34, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  /* Desktop Header */
  .tsar-head-bar {
    height: auto;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F0F2F5;
  }

  .tsar-head-left {
    display: flex;
    align-items: center;
  }

  .tsar-head-logo-pill {
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
  .tsar-head-logo-pill:hover {
    transform: scale(1.03) !important;
  }
  .tsar-head-logo-pill:active {
    transform: scale(0.97) !important;
  }
  .tsar-head-brand-img {
    height: 44px;
  }

  .tsar-desktop-nav {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
  }

  .tsar-desktop-nav-link {
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #64748B;
    border-radius: 20px;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
  }

  .tsar-desktop-nav-link:hover {
    color: #0E1322;
    background-color: #F1F5F9;
  }

  .tsar-desktop-nav-link.active {
    color: #FFFFFF;
    background-color: #0E1322;
  }

  .tsar-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .tsar-desktop-user-pill {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background-color: #F1F5F9;
    padding: 6px 10px 6px 16px;
    border-radius: 20px;
  }

  .tsar-desktop-user-email {
    font-size: 13.5px;
    font-weight: 700;
    color: #0E1322;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tsar-desktop-logout-btn {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: color 0.15s, transform 0.15s;
  }

  .tsar-desktop-logout-btn:hover {
    color: #EF4444;
    transform: scale(1.05);
  }

  /* Hide mobile bottom floating bar on desktop */
  .tsar-bottom-nav-bar {
    display: none !important;
  }

  /* Desktop Two-Column Dashboard Grid */
  .tsar-cabinet-dashboard-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 36px;
    align-items: start;
  }

  .tsar-dashboard-col-left {
    display: flex;
    flex-direction: column;
    background: #F8F9FB;
    border-radius: 26px;
    padding: 24px 22px 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .tsar-dashboard-col-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .tsar-dashboard-col-right .tsar-card-item {
    margin-bottom: 0;
  }

  .tsar-desktop-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
  }

  .tsar-stat-chip {
    background: #F4F5F8;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.03);
  }

  .tsar-stat-chip-label {
    font-size: 13px;
    font-weight: 600;
    color: #74777C;
  }

  .tsar-stat-chip-val {
    font-size: 18px;
    font-weight: 800;
    color: #0E1322;
  }
}

/* Interactive Swipe to Open Slider (Screen 2) */
.inst-swipe-slider {
  position: relative;
  width: 100%;
  height: 64px;
  background-color: #EEF2F6;
  border-radius: 32px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
  box-sizing: border-box;
}

.inst-swipe-slider.is-dragging {
  cursor: grabbing;
}

.inst-swipe-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  border-radius: 32px;
  background: linear-gradient(90deg, rgba(0, 122, 255, 0.18), rgba(0, 122, 255, 0.38));
  pointer-events: none;
  transition: width 0.05s linear;
}

.inst-swipe-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity 0.2s ease;
  padding-left: 54px;
  padding-right: 16px;
  box-sizing: border-box;
}

.inst-swipe-text {
  font-size: 15px;
  font-weight: 700;
  color: #0E1322;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inst-swipe-chevrons {
  font-size: 18px;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: -2px;
  animation: tsarSwipeShimmer 1.6s infinite ease-in-out;
}

@keyframes tsarSwipeShimmer {
  0%, 100% {
    opacity: 0.35;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(5px);
    color: #0E1322;
  }
}

.inst-swipe-thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 54px;
  height: 54px;
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  will-change: transform;
}

.inst-swipe-slider.is-dragging .inst-swipe-thumb {
  cursor: grabbing;
}

.inst-swipe-thumb .inst-store-icon-tile {
  width: 54px;
  height: 54px;
  border-radius: 27px;
}

/* ==========================================================================
   Tsar Settings (Account) 1:1 Design (Screenshot 1 media_1791423407401.png)
   ========================================================================== */
.tsar-settings-main-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 90px 16px;
  display: flex;
  justify-content: center;
}

.tsar-settings-page-card {
  width: 100%;
  max-width: 500px;
  background: #FFFFFF;
  border-radius: 28px;
  padding: 24px 20px 28px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.tsar-settings-title {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 16px 0;
  letter-spacing: -0.4px;
}

/* Settings Account Box (3 rows) */
.settings-acc-box {
  background: #EDF0F5;
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.settings-acc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.settings-acc-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.settings-acc-label {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.settings-acc-value {
  font-size: 15px;
  color: #0F172A;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-all;
}

.settings-btn-extend {
  background: #0E1322;
  color: #FFFFFF !important;
  border-radius: 9999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.settings-btn-extend:hover {
  opacity: 0.85;
}

.settings-check-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0E1322;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-tg-btn {
  background: #0088CC;
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.settings-tg-btn:hover {
  opacity: 0.9;
}

.settings-acc-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 14px 0;
}

/* Settings Navigation Menu Items */
.settings-menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.settings-menu-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 18px;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.15s ease;
}
.settings-menu-tile:hover {
  background: #F1F5F9;
}

.settings-menu-tile-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settings-tile-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.settings-menu-tile-title {
  font-size: 16px;
  font-weight: 600;
  color: #0F172A;
}

.settings-chevron-right {
  color: #94A3B8;
  flex-shrink: 0;
}

/* Information Section */
.settings-info-section {
  margin-top: 24px;
}

.settings-section-subtitle {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 12px 0;
}

.settings-logout-btn {
  background: none;
  border: none;
  color: #64748B;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  transition: color 0.15s ease;
}
.settings-logout-btn:hover {
  color: #EF4444;
}

/* Promo Modal */
.promo-modal-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.promo-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 6px 0;
}

.promo-modal-subtitle {
  font-size: 14px;
  color: #64748B;
  margin: 0 0 16px 0;
}

.promo-input-wrap {
  margin-bottom: 12px;
}

.promo-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1.5px solid #CBD5E1;
  border-radius: 12px;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  outline: none;
  transition: border-color 0.15s ease;
}
.promo-input:focus {
  border-color: #FF7A00;
}

.promo-msg {
  font-size: 13px;
  margin: 6px 0 12px 0;
}
.promo-msg.error {
  color: #EF4444;
}
.promo-msg.success {
  color: #10B981;
}

.promo-actions {
  display: flex;
  gap: 10px;
}

.promo-submit-btn {
  flex: 1;
  background: #0E1322;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.promo-cancel-btn {
  flex: 1;
  background: #F1F5F9;
  color: #64748B;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Tsar Tariffs 1:1 Design (Screenshot 2 media_1791423382675.png)
   ========================================================================== */
.tsar-payment-main-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 90px 16px;
  display: flex;
  justify-content: center;
}

.tsar-payment-page-card {
  width: 100%;
  max-width: 500px;
  background: #FFFFFF;
  border-radius: 28px;
  padding: 20px 20px 28px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.tariff-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tariff-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #0E1322;
  transition: background 0.15s ease;
}
.tariff-back-btn:hover {
  background: #E2E8F0;
}

.tariff-center-brand-pill {
  position: relative;
  background: #0E1322;
  border-radius: 9999px;
  padding: 6px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tariff-brand-pill-text {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
}

.tariff-crown-tilt-img {
  position: absolute;
  right: -8px;
  top: -10px;
  width: 24px;
  height: 24px;
  transform: rotate(20deg);
  object-fit: contain;
}

.tariff-top-bar-placeholder {
  width: 40px;
  height: 40px;
}

.tariff-titles-wrap {
  margin-bottom: 20px;
}

.tariff-main-title {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.tariff-main-subtitle {
  font-size: 14px;
  color: #64748B;
  margin: 0;
  font-weight: 500;
}

.tariffs-list-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.tariff-option-card {
  display: flex;
  align-items: center;
  background: #F8FAFC;
  border: 1.5px solid transparent;
  border-radius: 18px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}
.tariff-option-card:hover {
  background: #F1F5F9;
}
.tariff-option-card.selected {
  background: #FFFFFF;
  border-color: #FF7A00;
  box-shadow: 0 4px 16px rgba(255, 122, 0, 0.08);
}

.tariff-opt-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 14px;
  transition: border-color 0.15s ease;
}
.tariff-option-card.selected .tariff-opt-radio {
  border-color: #FF7A00;
}

.tariff-opt-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease;
}
.tariff-option-card.selected .tariff-opt-radio-dot {
  background: #FF7A00;
}

.tariff-opt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tariff-opt-title {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
}

.tariff-opt-sub {
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
}

.tariff-opt-price {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  white-space: nowrap;
  margin-left: 12px;
  transition: color 0.15s ease;
}
.tariff-option-card.selected .tariff-opt-price {
  color: #FF7A00;
}

/* Badges */
.tariff-opt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  width: fit-content;
}

.badge-popular {
  background: #FFE8DB;
  color: #EA580C;
}

.badge-save {
  background: #DCFCE7;
  color: #16A34A;
}

.badge-icon-pct {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #16A34A;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-best {
  background: #EEF2FF;
  color: #4F46E5;
}
.badge-best svg {
  fill: #4F46E5;
}

.badge-forever {
  background: #F3E8FF;
  color: #9333EA;
}

.badge-icon-inf {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* Bottom CTA */
.tariff-cta-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tariff-orange-pay-btn {
  width: 100%;
  background: #FF6B00;
  color: #FFFFFF;
  border: none;
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.tariff-orange-pay-btn:hover {
  background: #E66000;
}
.tariff-orange-pay-btn:active {
  transform: scale(0.98);
}
.tariff-trust-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #64748B;
  font-weight: 500;
  text-align: center;
}

/* Mobile Specific Layout for Settings & Tariffs (1:1 with Screenshots 1 & 2) */
@media (max-width: 768px) {
  body.tsar-cabinet-new {
    display: block !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .cabinet-new-viewport {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  body[data-app-page="settings"] .tsar-head-bar,
  body[data-app-page="payment"] .tsar-head-bar {
    display: none !important;
  }
  .tsar-settings-main-wrap,
  .tsar-payment-main-wrap {
    padding: 6px 0 100px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tsar-settings-page-card,
  .tsar-payment-page-card {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tariff-top-bar {
    margin-top: 4px;
    margin-bottom: 24px;
  }
  .tsar-settings-title {
    margin-top: 4px;
    margin-bottom: 20px;
    font-size: 28px;
  }
}