:root {
  /* Base & backgrounds */
  --color-bg-main: #FCFCFC;
  --color-card: #FFFFFF;
  --color-card-muted: #FCFCFC;

  /* Compatibility aliases for the current deployed bundle. */
  --color-bg: var(--color-card);
  --color-bg-soft: var(--color-card-muted);
  --color-section-gray: #E3E3E2;

  /* Text */
  --color-text: #111111;
  --color-text-soft: #323232;
  --color-text-muted: #707273;
  --color-text-inverse: #FFFFFF;

  /* Brand */
  --color-brand: #4F6975;
  --color-brand-dark: #4B6570;
  --color-brand-light: #DDE6EC;
  --color-brand-muted: #73888E;

  /* Accent */
  --color-accent: #F6C453;
  --color-accent-hover: #FFE08D;
  --color-accent-light: var(--color-accent-hover);

  /* UI states */
  --color-border: #D1D2D2;
  --color-dark-section: #323232;
  --color-success: #70D691;
  --color-success-light: #E8F8EC;
  --color-danger: #E63946;
  --color-danger-light: #FAD2D5;

  /* Re-map existing Tailwind RGB tokens to the approved PagerVPN palette. */
  --color-dark-50: 17, 17, 17;
  --color-dark-100: 17, 17, 17;
  --color-dark-200: 50, 50, 50;
  --color-dark-300: 112, 114, 115;
  --color-dark-400: 112, 114, 115;
  --color-dark-500: 112, 114, 115;
  --color-dark-600: 209, 210, 210;
  --color-dark-700: 209, 210, 210;
  --color-dark-800: 242, 242, 242;
  --color-dark-850: 252, 252, 252;
  --color-dark-900: 255, 255, 255;
  --color-dark-950: 252, 252, 252;

  --color-accent-50: 255, 250, 237;
  --color-accent-100: 221, 230, 236;
  --color-accent-200: 221, 230, 236;
  --color-accent-300: 79, 105, 117;
  --color-accent-400: 79, 105, 117;
  --color-accent-500: 246, 196, 83;
  --color-accent-600: 255, 224, 141;
  --color-accent-700: 208, 181, 113;
  --color-accent-800: 54, 72, 80;
  --color-accent-900: 54, 72, 80;
  --color-accent-950: 221, 230, 236;

  --color-success-50: 232, 248, 236;
  --color-success-100: 232, 248, 236;
  --color-success-200: 232, 248, 236;
  --color-success-300: 112, 214, 145;
  --color-success-400: 112, 214, 145;
  --color-success-500: 112, 214, 145;
  --color-success-600: 112, 214, 145;
  --color-success-700: 47, 126, 72;
  --color-success-800: 47, 126, 72;
  --color-success-900: 47, 126, 72;

  --color-error-50: 250, 210, 213;
  --color-error-100: 250, 210, 213;
  --color-error-200: 250, 210, 213;
  --color-error-300: 230, 57, 70;
  --color-error-400: 230, 57, 70;
  --color-error-500: 230, 57, 70;
  --color-error-600: 206, 45, 57;
  --color-error-700: 165, 32, 42;
  --color-error-800: 120, 24, 31;
  --color-error-900: 90, 18, 24;

  --color-warning-50: 255, 250, 237;
  --color-warning-100: 255, 244, 210;
  --color-warning-200: 255, 224, 141;
  --color-warning-300: 246, 196, 83;
  --color-warning-400: 246, 196, 83;
  --color-warning-500: 246, 196, 83;
  --color-warning-600: 208, 181, 113;
  --tw-ring-color: rgb(79 105 117 / 0.25);
}

html,
html.dark {
  color-scheme: light;
  background: var(--color-bg-main);
}

body,
.dark body,
#root,
#root > .min-h-screen,
#root .min-h-screen.bg-dark-950,
#root .flex.min-h-screen.bg-dark-950 {
  background: var(--color-bg-main) !important;
  color: var(--color-text) !important;
}

#root [class*="bg-[#0a0a0f]"],
#root [class*="bg-[#0a0f1a]"] {
  background: var(--color-bg-main) !important;
}

#root aside,
#root header {
  border-color: var(--color-border) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--color-text) !important;
}

#root aside {
  box-shadow: 18px 0 45px rgb(17 17 17 / 0.05);
}

#root header {
  box-shadow: 0 12px 35px rgb(17 17 17 / 0.04);
}

#root section[class*="border-"],
#root article[class*="border-"],
#root div[class*="rounded-3xl"][class*="border-"] {
  border-color: var(--color-border) !important;
  box-shadow: 0 18px 50px rgb(17 17 17 / 0.06);
}

#root [class*="border-dark-"] {
  border-color: var(--color-border) !important;
}

#root [class*="bg-dark-900"],
#root [class*="bg-dark-950"],
#root [class*="bg-dark-850"] {
  background-color: var(--color-card) !important;
}

#root [class*="bg-dark-800"],
#root [class*="bg-dark-700"],
#root [class*="bg-dark-600"] {
  background-color: var(--color-card-muted) !important;
}

#root [class*="bg-gradient-to-br"],
#root [class*="bg-gradient-to-r"] {
  background-image: none !important;
  background-color: var(--color-card) !important;
}

#root [class*="from-dark-"],
#root [class*="via-dark-"],
#root [class*="to-accent-"] {
  --tw-gradient-from: var(--color-card) !important;
  --tw-gradient-to: var(--color-card) !important;
  --tw-gradient-stops: var(--color-card), var(--color-card) !important;
}

#root input,
#root select,
#root textarea,
#root [class*="font-mono"][class*="bg-dark-"] {
  border-color: var(--color-border) !important;
  background: var(--color-card-muted) !important;
  color: var(--color-text) !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 0.78;
}

#root input:focus,
#root select:focus,
#root textarea:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px rgb(221 230 236 / 0.9) !important;
}

#root button,
#root a.inline-flex {
  border-radius: 12px;
}

#root .text-white.bg-accent-500,
#root button.bg-accent-500,
#root a.bg-accent-500,
#root [class~="bg-accent-500"][class~="text-white"] {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  font-weight: 700;
  box-shadow: 0 10px 24px rgb(246 196 83 / 0.24);
}

#root .hover\:bg-accent-600:hover,
#root button.bg-accent-500:hover,
#root a.bg-accent-500:hover {
  background: var(--color-accent-hover) !important;
  color: var(--color-text) !important;
}

#root a[aria-current="page"],
#root button.flex-1.bg-accent-500,
#root button[class*="bg-accent-500/10"][class*="border-accent-500"],
#root button[class*="bg-accent-500/15"],
#root a[class*="bg-accent-500/10"][class*="border-accent-500"] {
  border-color: var(--color-brand) !important;
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

#root a[aria-current="page"] *,
#root button.flex-1.bg-accent-500 *,
#root button[class*="bg-accent-500/10"][class*="border-accent-500"] *,
#root button[class*="bg-accent-500/15"] *,
#root a[class*="bg-accent-500/10"][class*="border-accent-500"] * {
  color: inherit !important;
}

#root a[aria-current="page"]:hover,
#root button.flex-1.bg-accent-500:hover,
#root button[class*="bg-accent-500/10"][class*="border-accent-500"]:hover,
#root button[class*="bg-accent-500/15"]:hover,
#root a[class*="bg-accent-500/10"][class*="border-accent-500"]:hover {
  background: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

#root a[href="/app/purchase"],
#root a[href="/app/devices"] {
  min-height: 48px;
  padding: 0.75rem 1.25rem !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

#root .text-accent-100,
#root .text-accent-200,
#root .text-accent-300,
#root .text-accent-400 {
  color: var(--color-brand) !important;
}

#root .border-accent-500,
#root [class*="border-accent-500/"] {
  border-color: rgb(79 105 117 / 0.35) !important;
}

#root [class*="bg-accent-500/"] {
  background-color: rgb(221 230 236 / 0.72) !important;
}

/* Tariffs */
#root [class*="border-accent-500/35"][class*="bg-accent-500/5"] {
  border-color: rgb(79 105 117 / 0.22) !important;
  background: var(--color-brand-light) !important;
  box-shadow: none !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"] {
  border: 1px solid var(--color-border) !important;
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"] .text-dark-400 {
  color: var(--color-text) !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"]:hover {
  border-color: var(--color-brand) !important;
  background: var(--color-brand-light) !important;
}

/* Success and danger states */
#root [class*="bg-success-500/"],
#root section[class*="border-success-500"][class*="bg-success-500"] {
  background-color: var(--color-success-light) !important;
}

#root [class*="border-success-500"] {
  border-color: rgb(112 214 145 / 0.3) !important;
}

#root .text-success-200,
#root .text-success-300,
#root .text-success-400 {
  color: var(--color-success) !important;
}

#root .bg-success-500,
#root button.bg-success-500 {
  background: var(--color-success) !important;
  color: var(--color-text) !important;
}

#root [class*="bg-error-500/"] {
  background-color: rgb(250 210 213 / 0.58) !important;
}

#root [class*="border-error-500"] {
  border-color: rgb(230 57 70 / 0.35) !important;
}

#root .text-error-200,
#root .text-error-300,
#root .text-error-400,
#root button[class*="text-error-"] {
  color: var(--color-danger) !important;
}

#root button[class*="text-error-"] {
  background: transparent !important;
  border-color: rgb(230 57 70 / 0.35) !important;
  box-shadow: none !important;
}

#root button[class*="text-error-"]:hover {
  background: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
}

/* Overview */
#root section[class*="border-success-500"][class*="bg-success-500"] {
  border: 1px solid rgb(112 214 145 / 0.3) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] button[class*="border-dark-700"] {
  border: 1px solid var(--color-border) !important;
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] button[class*="border-dark-700"]:hover {
  background: var(--color-bg-main) !important;
}

#root svg,
#root [class*="text-dark-400"] svg,
#root [class*="text-dark-500"] svg {
  color: currentColor;
}

#root button:not(.bg-accent-500):not([class*="bg-error-500"]):not([class*="bg-success-500"]),
#root a:not(.bg-accent-500):not([aria-current="page"]) {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#root button[class*="border-dark-"]:hover,
#root a[class*="border-dark-"]:hover {
  border-color: var(--color-brand-muted) !important;
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
}

#root .shadow-2xl,
#root .shadow-black\/20,
#root .shadow-black\/50,
#root [class*="shadow-[0_0"] {
  box-shadow: 0 18px 50px rgb(17 17 17 / 0.08) !important;
}

#root [class*="blur-3xl"] {
  background: var(--color-accent-hover) !important;
  opacity: 0.18 !important;
}

::-webkit-scrollbar-track {
  background: var(--color-card-muted) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-muted) !important;
}

@media (max-width: 640px) {
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    border-radius: 22px;
  }
}

/* PagerVPN strict visual pass: light support chat and neutral cabinet surfaces. */
html,
html.dark,
body,
.dark body,
#root,
#root > .min-h-screen,
#root .min-h-screen.bg-dark-950,
#root .flex.min-h-screen.bg-dark-950 {
  background: var(--color-bg-soft) !important;
  color: var(--color-text) !important;
}

#root aside,
#root header {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#root aside nav a:not([aria-current="page"]) {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
}

#root aside nav a:not([aria-current="page"]):hover {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
}

#root header button {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

#root header button:hover {
  border-color: var(--color-brand-muted) !important;
  color: var(--color-text) !important;
}

#root section[class*="rounded-3xl"],
#root article[class*="rounded-3xl"],
#root div[class*="rounded-3xl"][class*="border-"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.04) !important;
}

#root .rounded-2xl[class*="border-"] {
  border-color: var(--color-border) !important;
}

#root [class*="shadow-["],
#root .shadow-2xl,
#root .shadow-black\/20,
#root .shadow-black\/50 {
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.04) !important;
}

#root [class*="bg-gradient-to-br"],
#root [class*="bg-gradient-to-r"] {
  background-image: none !important;
}

/* Overview: Telegram status uses green only as a small status accent. */
#root section[class*="border-success-500"][class*="bg-success-500"] {
  background: var(--color-brand-light) !important;
  border: 1px solid var(--color-border) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] [class*="bg-success-500/"] {
  background: color-mix(in srgb, var(--color-status-success) 18%, white) !important;
  color: var(--color-status-success) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] span[class*="border-success-500"] {
  background: var(--color-card) !important;
  color: var(--color-brand-dark) !important;
  border: 1px solid var(--color-border) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] button[class*="border-dark-700"] {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] button[class*="border-dark-700"]:hover {
  background: var(--color-bg-soft) !important;
  border-color: var(--color-brand) !important;
}

#root a[href="/app/purchase"].bg-accent-500 {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
}

#root a[href="/app/purchase"].bg-accent-500:hover {
  background: var(--color-accent-light) !important;
  border-color: var(--color-accent-dark) !important;
}

#root a[href="/app/devices"] {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
}

#root a[href="/app/devices"]:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
}

/* Devices and statuses: expired/danger actions stay calm and outline-only. */
#root span[class*="border-success-500"][class*="bg-success-500"] {
  background: color-mix(in srgb, var(--color-status-success) 18%, white) !important;
  color: var(--color-brand-dark) !important;
  border-color: color-mix(in srgb, var(--color-status-success) 38%, white) !important;
}

#root span[class*="border-error-500"][class*="bg-error-500"] {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}

#root button[class*="text-error-"],
#root button[class*="border-error-500"] {
  background: var(--color-card) !important;
  color: var(--color-text-soft) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

#root button[class*="text-error-"]:hover,
#root button[class*="border-error-500"]:hover {
  background: var(--color-bg-soft) !important;
  color: var(--color-text) !important;
  border-color: var(--color-brand-muted) !important;
}

#root article .bg-accent-500\/10,
#root article [class*="bg-accent-500/"] {
  background: var(--color-brand-light) !important;
  color: var(--color-brand-dark) !important;
}

/* Tariffs. */
#root [class*="border-accent-500/35"][class*="bg-accent-500/5"] {
  background: var(--color-brand-light) !important;
  border: 1px solid var(--color-border) !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"]:hover {
  background: var(--color-bg-soft) !important;
  border-color: var(--color-brand) !important;
}

#root .fixed button[class*="border-accent-500"][class*="bg-accent-500/10"] {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent-dark) !important;
  color: var(--color-text) !important;
}

#root .fixed button[class*="border-dark-700"][class*="bg-dark-950"],
#root .fixed button[class*="border-dark-700"][class*="bg-dark-900"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

#root .fixed button[class*="border-dark-700"][class*="bg-dark-950"]:hover,
#root .fixed button[class*="border-dark-700"][class*="bg-dark-900"]:hover {
  background: var(--color-bg-soft) !important;
  border-color: var(--color-brand-muted) !important;
}

/* Support chat variant A: light PagerVPN card. */
#root section:has(#support-message) {
  overflow: hidden !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.04) !important;
  color: var(--color-text) !important;
}

#root section:has(#support-message) > .text-xs:first-child {
  color: var(--color-text-muted) !important;
  letter-spacing: 0.16em !important;
}

#root section:has(#support-message) h2,
#root section:has(#support-message) .text-dark-100,
#root section:has(#support-message) .text-dark-200 {
  color: var(--color-text) !important;
}

#root section:has(#support-message) .text-dark-300,
#root section:has(#support-message) .text-dark-400,
#root section:has(#support-message) .text-dark-500 {
  color: var(--color-text-muted) !important;
}

#root section:has(#support-message) span[class*="border-success-500"] {
  background: color-mix(in srgb, var(--color-status-success) 18%, white) !important;
  color: var(--color-brand-dark) !important;
  border-color: color-mix(in srgb, var(--color-status-success) 38%, white) !important;
}

#root section:has(#support-message) [style*="overflow-y"],
#root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl {
  background: var(--color-bg-soft) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 18px !important;
  scrollbar-color: var(--color-brand-muted) var(--color-bg-soft);
}

#root section:has(#support-message) [style*="overflow-y"]::-webkit-scrollbar {
  width: 8px;
}

#root section:has(#support-message) [style*="overflow-y"]::-webkit-scrollbar-track {
  background: var(--color-bg-soft) !important;
}

#root section:has(#support-message) [style*="overflow-y"]::-webkit-scrollbar-thumb {
  background: var(--color-brand-muted) !important;
  border-radius: 999px;
}

#root section:has(#support-message) .items-start > .mb-0\.5 {
  color: var(--color-brand) !important;
  font-weight: 600 !important;
}

#root section:has(#support-message) .items-end > .mb-0\.5 {
  color: var(--color-brand-dark) !important;
  font-weight: 600 !important;
}

#root section:has(#support-message) .items-start > .mr-auto {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px 16px 16px 6px !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#root section:has(#support-message) .items-start > .mr-auto * {
  color: var(--color-text) !important;
}

#root section:has(#support-message) .items-start > .mr-auto span {
  color: var(--color-text-muted) !important;
}

#root section:has(#support-message) .items-end > .ml-auto {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  border-radius: 16px 16px 6px 16px !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

#root section:has(#support-message) .items-end > .ml-auto * {
  color: var(--color-text-inverse) !important;
}

#root section:has(#support-message) .items-end > .ml-auto span {
  color: rgb(255 255 255 / 0.72) !important;
}

#root section:has(#support-message) form {
  margin-inline: -1.25rem;
  margin-bottom: -1.25rem;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--color-card) !important;
  border-top: 1px solid var(--color-border) !important;
}

#root section:has(#support-message) form > div.flex {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#root #support-message {
  min-height: 96px !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  color: var(--color-text) !important;
}

#root #support-message::placeholder {
  color: var(--color-text-muted) !important;
}

#root #support-message + button {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-soft) !important;
  box-shadow: none !important;
}

#root #support-message + button:hover {
  background: var(--color-brand-light) !important;
  border-color: var(--color-brand-muted) !important;
  color: var(--color-text) !important;
}

#root #support-message + button + button {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

#root #support-message + button + button:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
}

#root #support-message + button + button:disabled {
  background: var(--color-section-gray) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

#root section:has(#support-message) form > div[style] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* Support Telegram / MTProxy card. */
#root section:has(a[href^="tg://proxy"]) {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.04) !important;
}

#root section:has(a[href^="tg://proxy"]) .text-dark-100 {
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) .text-dark-400,
#root section:has(a[href^="tg://proxy"]) .text-dark-500 {
  color: var(--color-text-muted) !important;
}

#root section:has(a[href^="tg://proxy"]) [class*="border-warning-500"][class*="bg-warning-500"] {
  background: var(--color-accent-light) !important;
  border: 1px solid var(--color-accent-dark) !important;
  color: var(--color-text-soft) !important;
}

#root section:has(a[href^="tg://proxy"]) .rounded-2xl[class*="bg-dark-950"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
}

#root section:has(a[href^="tg://proxy"]) .font-mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--color-bg-soft) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) a[href^="tg://proxy"].bg-accent-500 {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) a[href^="tg://proxy"].bg-accent-500:hover {
  background: var(--color-accent-light) !important;
  border-color: var(--color-accent-dark) !important;
}

#root section:has(a[href^="tg://proxy"]) button,
#root section:has(a[href^="tg://proxy"]) a[href="https://t.me/pagervpn_bot"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) button:hover,
#root section:has(a[href^="tg://proxy"]) a[href="https://t.me/pagervpn_bot"]:hover {
  background: var(--color-brand-light) !important;
  border-color: var(--color-brand-muted) !important;
}

@media (max-width: 640px) {
  #root section:has(#support-message) form {
    margin-inline: -1rem;
    margin-bottom: -1rem;
    padding-inline: 1rem;
  }

  #root [class*="font-mono"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Support mobile fit pass: keep chat, upload controls and proxy blocks inside narrow screens. */
#root div:has(> section #support-message):has(> section a[href^="tg://proxy"]),
#root section:has(#support-message),
#root section:has(a[href^="tg://proxy"]),
#root section:has(#support-message) form,
#root section:has(#support-message) form > div.flex,
#root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl,
#root #support-message {
  min-width: 0 !important;
  max-width: 100% !important;
}

#root section:has(#support-message) .items-start,
#root section:has(#support-message) .items-end,
#root section:has(#support-message) .items-start > .mr-auto,
#root section:has(#support-message) .items-end > .ml-auto {
  min-width: 0 !important;
}

#root section:has(#support-message) .items-start > .mr-auto,
#root section:has(#support-message) .items-end > .ml-auto {
  max-width: 92% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#root section:has(#support-message) .items-start > .mr-auto img,
#root section:has(#support-message) .items-end > .ml-auto img {
  max-width: 100% !important;
  height: auto !important;
}

#root section:has(a[href^="tg://proxy"]) .font-mono {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 640px) {
  #root div:has(> section #support-message):has(> section a[href^="tg://proxy"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  #root section:has(#support-message),
  #root section:has(a[href^="tg://proxy"]) {
    padding: 1rem !important;
    border-radius: 20px !important;
  }

  #root section:has(#support-message) [style*="overflow-y"] {
    max-height: min(58vh, 420px) !important;
    padding: 0.5rem !important;
  }

  #root section:has(#support-message) form {
    margin-inline: -1rem !important;
    margin-bottom: -1rem !important;
    padding: 0.875rem 1rem 1rem !important;
  }

  #root section:has(#support-message) form > div.flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  #root #support-message,
  #root #support-message + button,
  #root #support-message + button + button {
    width: 100% !important;
    max-width: 100% !important;
  }

  #root #support-message {
    min-height: 88px !important;
    padding: 0.75rem !important;
  }

  #root section:has(a[href^="tg://proxy"]) .font-mono {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Payment modal readability pass. The modal is rendered in a portal outside #root. */
body > .fixed.inset-0 .max-w-lg {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.12) !important;
}

body > .fixed.inset-0 .max-w-lg h2 {
  color: var(--color-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

body > .fixed.inset-0 .max-w-lg .text-dark-400,
body > .fixed.inset-0 .max-w-lg .text-dark-500 {
  color: var(--color-text-muted) !important;
}

body > .fixed.inset-0 .max-w-lg .text-dark-100,
body > .fixed.inset-0 .max-w-lg .text-dark-200,
body > .fixed.inset-0 .max-w-lg .text-dark-300 {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 .max-w-lg > button.absolute {
  color: var(--color-text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body > .fixed.inset-0 .max-w-lg > button.absolute:hover {
  color: var(--color-text) !important;
  background: var(--color-bg-soft) !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-accent-500"][class*="bg-accent-500/10"] {
  background: rgb(246 196 83 / 0.1) !important;
  border: 2px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  box-shadow: inset 0 0 0 1px rgb(246 196 83 / 0.16) !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-accent-500"][class*="bg-accent-500/10"] *,
body > .fixed.inset-0 .max-w-lg button[class*="border-accent-500"][class*="bg-accent-500/10"] .text-accent-100,
body > .fixed.inset-0 .max-w-lg button[class*="border-accent-500"][class*="bg-accent-500/10"] .text-accent-200,
body > .fixed.inset-0 .max-w-lg button[class*="border-accent-500"][class*="bg-accent-500/10"] .text-dark-100,
body > .fixed.inset-0 .max-w-lg button[class*="border-accent-500"][class*="bg-accent-500/10"] .text-dark-400 {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-950"],
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-900"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-950"] *,
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-900"] * {
  color: inherit !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-950"] .text-dark-100,
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-900"] .text-dark-100 {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-950"] .text-dark-300,
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-900"] .text-dark-300,
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-950"] .text-dark-400,
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-900"] .text-dark-400 {
  color: var(--color-text-soft) !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-950"]:hover,
body > .fixed.inset-0 .max-w-lg button[class*="border-dark-700"][class*="bg-dark-900"]:hover {
  background: var(--color-card) !important;
  border-color: rgb(246 196 83 / 0.55) !important;
}

body > .fixed.inset-0 .max-w-lg button.bg-accent-500,
body > .fixed.inset-0 .max-w-lg a.bg-accent-500 {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body > .fixed.inset-0 .max-w-lg button.bg-accent-500 *,
body > .fixed.inset-0 .max-w-lg a.bg-accent-500 * {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 .max-w-lg button.bg-accent-500:hover,
body > .fixed.inset-0 .max-w-lg a.bg-accent-500:hover {
  background: var(--color-accent-light) !important;
  border-color: var(--color-accent-dark) !important;
  color: var(--color-text) !important;
}

body > .fixed.inset-0 .max-w-lg button:disabled {
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

/* Sidebar tabs: uniform alignment, weight and icon masks. */
#root aside nav a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-height: 44px !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 12px !important;
  font-size: 0.96rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

#root aside nav a::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  background: currentColor;
  opacity: 0.95;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

#root aside nav a[href="/app"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h3A2.5 2.5 0 0 1 12 5.5v3A2.5 2.5 0 0 1 9.5 11h-3A2.5 2.5 0 0 1 4 8.5v-3Zm10 0A2.5 2.5 0 0 1 16.5 3h1A2.5 2.5 0 0 1 20 5.5v8A2.5 2.5 0 0 1 17.5 16h-1A2.5 2.5 0 0 1 14 13.5v-8ZM4 15.5A2.5 2.5 0 0 1 6.5 13h3A2.5 2.5 0 0 1 12 15.5v3A2.5 2.5 0 0 1 9.5 21h-3A2.5 2.5 0 0 1 4 18.5v-3Zm10 3A2.5 2.5 0 0 1 16.5 16h1a2.5 2.5 0 0 1 0 5h-1A2.5 2.5 0 0 1 14 18.5Z'/%3E%3C/svg%3E");
}

#root aside nav a[href="/app/devices"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 5A2.75 2.75 0 0 0 2 7.75v6.5A2.75 2.75 0 0 0 4.75 17h5.75v2H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-2.5v-2h5.75A2.75 2.75 0 0 0 22 14.25v-6.5A2.75 2.75 0 0 0 19.25 5H4.75ZM4 7.75A.75.75 0 0 1 4.75 7h14.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-.75.75H4.75a.75.75 0 0 1-.75-.75v-6.5Z'/%3E%3C/svg%3E");
  min-height: 44px !important;
  padding: 0.625rem 0.875rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#root aside nav a[href="/app/purchase"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.75A2.75 2.75 0 0 1 5.75 5h12.5A2.75 2.75 0 0 1 21 7.75v8.5A2.75 2.75 0 0 1 18.25 19H5.75A2.75 2.75 0 0 1 3 16.25v-8.5ZM5.75 7a.75.75 0 0 0-.75.75V9h14V7.75a.75.75 0 0 0-.75-.75H5.75ZM19 12H5v4.25c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75V12Zm-12 2.5a1 1 0 0 1 1-1h2.5a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
}

#root aside nav a[href="/app/support"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 4A3.5 3.5 0 0 0 2 7.5v5A3.5 3.5 0 0 0 5.5 16H7v2.35a1.25 1.25 0 0 0 2.04.97L13.1 16h5.4a3.5 3.5 0 0 0 3.5-3.5v-5A3.5 3.5 0 0 0 18.5 4h-13ZM4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v5a1.5 1.5 0 0 1-1.5 1.5h-5.76a1 1 0 0 0-.63.22L9 16.77V15a1 1 0 0 0-1-1H5.5A1.5 1.5 0 0 1 4 12.5v-5Z'/%3E%3C/svg%3E");
}

#root aside nav a:not([aria-current="page"]) {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
}

#root aside nav a[aria-current="page"] {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
}

#root aside nav a:hover:not([aria-current="page"]) {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
}

#root header nav a {
  min-height: 40px !important;
  padding: 0.55rem 0.85rem !important;
  border-radius: 12px !important;
  font-size: 0.94rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

#root header nav a:not([aria-current="page"]) {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid transparent !important;
}

#root header nav a[aria-current="page"] {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid var(--color-brand) !important;
}

#root header nav a:hover:not([aria-current="page"]) {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
}

/* Status badges: readable green/red surfaces. */
#root span[class*="border-success-500"][class*="bg-success-500"],
#root span[class*="text-success-"][class*="border-"] {
  background: var(--color-success-light) !important;
  border: 1px solid rgb(112 214 145 / 0.45) !important;
  color: #22643A !important;
}

#root span[class*="border-error-500"][class*="bg-error-500"],
#root span[class*="text-error-"][class*="border-"] {
  background: #FCE7E9 !important;
  border: 1px solid rgb(230 57 70 / 0.38) !important;
  color: #9F1D2A !important;
}

#root .text-success-200,
#root .text-success-300,
#root .text-success-400 {
  color: #22643A !important;
}

#root .text-error-200,
#root .text-error-300,
#root .text-error-400 {
  color: #9F1D2A !important;
}

/* Keep all cabinet tabs aligned. More specific than CTA link rules above. */
#root aside nav a[href="/app"],
#root aside nav a[href="/app/devices"],
#root aside nav a[href="/app/purchase"],
#root aside nav a[href="/app/support"] {
  display: grid !important;
  grid-template-columns: 1.1rem minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 0.75rem !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0.625rem 0.875rem !important;
  margin: 0 !important;
  text-align: left !important;
}

#root aside nav a[href="/app"]::before,
#root aside nav a[href="/app/devices"]::before,
#root aside nav a[href="/app/purchase"]::before,
#root aside nav a[href="/app/support"]::before {
  grid-column: 1;
  margin: 0 !important;
}

#root header nav a[href="/app"],
#root header nav a[href="/app/devices"],
#root header nav a[href="/app/purchase"],
#root header nav a[href="/app/support"] {
  min-height: 40px !important;
  padding: 0.55rem 0.85rem !important;
  margin: 0 !important;
}


/* ============================================================================
   STAGE 2.1: TYPOGRAPHY & BUTTONS
   Дата: 2026-05-31
   Цель: Улучшить читаемость и touch targets
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. ТИПОГРАФИКА: Увеличенные размеры для лучшей читаемости
   ---------------------------------------------------------------------------- */

/* Заголовки: чёткая иерархия */
#root h1,
#root .text-3xl {
  font-size: 2rem !important;           /* 32px вместо 30px */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;   /* плотнее, современнее */
}

#root h2,
#root .text-2xl {
  font-size: 1.5rem !important;         /* 24px вместо 20px */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

#root h3,
#root .text-xl {
  font-size: 1.125rem !important;       /* 18px вместо 16px */
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

/* Основной текст: увеличен для читаемости */
#root,
#root p,
#root .text-sm,
#root div:not([class*="text-xs"]):not([class*="text-base"]):not([class*="text-lg"]) {
  font-size: 0.9375rem !important;      /* 15px вместо 14px */
  line-height: 1.6 !important;
}

/* Labels и мелкий текст */
#root label,
#root .text-xs {
  font-size: 0.8125rem !important;      /* 13px вместо 12px */
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ----------------------------------------------------------------------------
   2. КНОПКИ: Унифицированные размеры и иерархия
   ---------------------------------------------------------------------------- */

/* Primary кнопки: крупнее и заметнее */
#root button.bg-accent-500,
#root a.bg-accent-500,
#root button[class*="bg-accent-500"],
#root a[class*="bg-accent-500"] {
  min-height: 48px !important;
  padding: 14px 24px !important;
  font-size: 0.9375rem !important;      /* 15px */
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(246, 196, 83, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Primary hover: lift эффект */
#root button.bg-accent-500:hover,
#root a.bg-accent-500:hover,
#root button[class*="bg-accent-500"]:hover,
#root a[class*="bg-accent-500"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(246, 196, 83, 0.35) !important;
}

/* Primary active: press эффект */
#root button.bg-accent-500:active,
#root a.bg-accent-500:active,
#root button[class*="bg-accent-500"]:active,
#root a[class*="bg-accent-500"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(246, 196, 83, 0.22) !important;
}

/* Secondary кнопки: чёткая обводка */
#root button[class*="border-dark-"]:not(.bg-accent-500),
#root a[class*="border-dark-"]:not(.bg-accent-500) {
  min-height: 44px !important;
  padding: 12px 20px !important;
  font-size: 0.875rem !important;       /* 14px */
  font-weight: 600 !important;
  border-width: 1.5px !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Специальные CTA кнопки (Purchase, Devices) */
#root a[href="/app/purchase"],
#root a[href="/app/devices"] {
  min-height: 48px !important;
  padding: 14px 24px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* Мобильные кнопки: крупнее touch targets */
@media (max-width: 640px) {
  #root button.bg-accent-500,
  #root a.bg-accent-500,
  #root button[class*="bg-accent-500"],
  #root a[class*="bg-accent-500"] {
    min-height: 52px !important;
    padding: 16px 24px !important;
  }

  #root button[class*="border-dark-"],
  #root a[class*="border-dark-"] {
    min-height: 48px !important;
    padding: 14px 20px !important;
  }

  #root a[href="/app/purchase"],
  #root a[href="/app/devices"] {
    min-height: 52px !important;
    padding: 16px 24px !important;
  }
}

/* ----------------------------------------------------------------------------
   3. КНОПКИ В МОДАЛЬНЫХ ОКНАХ: Применяем те же правила
   ---------------------------------------------------------------------------- */

/* Payment modal кнопки */
body > .fixed.inset-0 .max-w-lg button.bg-accent-500,
body > .fixed.inset-0 .max-w-lg a.bg-accent-500 {
  min-height: 48px !important;
  padding: 14px 24px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
}

body > .fixed.inset-0 .max-w-lg button[class*="border-dark-"],
body > .fixed.inset-0 .max-w-lg a[class*="border-dark-"] {
  min-height: 44px !important;
  padding: 12px 20px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------------------
   4. КНОПКИ В ФИКСИРОВАННЫХ ПАНЕЛЯХ (Tariffs)
   ---------------------------------------------------------------------------- */

#root .fixed button[class*="border-accent-500"][class*="bg-accent-500/10"],
#root .fixed button[class*="bg-accent-500"] {
  min-height: 48px !important;
  padding: 14px 24px !important;
  font-size: 0.9375rem !important;
}

#root .fixed button[class*="border-dark-700"] {
  min-height: 44px !important;
  padding: 12px 20px !important;
}

/* ----------------------------------------------------------------------------
   5. DISABLED STATE: Чёткое визуальное отличие
   ---------------------------------------------------------------------------- */

#root button:disabled,
#root a:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  transform: none !important;
  box-shadow: none !important;
}

#root button:disabled:hover,
#root a:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* ============================================================================
   STAGE 2.2: FORMS & FOCUS STATES
   Дата: 2026-05-31
   Цель: Улучшить UX форм и accessibility
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. ИНПУТЫ: Увеличенные размеры для комфортного ввода
   ---------------------------------------------------------------------------- */

#root input,
#root textarea,
#root select {
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-size: 0.9375rem !important;      /* 15px */
  border-radius: 12px !important;
  border-width: 1.5px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#root textarea {
  min-height: 96px !important;
  padding: 14px 16px !important;
  line-height: 1.6 !important;
}

/* Support chat textarea: специальный размер */
#root #support-message {
  min-height: 96px !important;
  padding: 14px 16px !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}

/* Инпуты с иконками справа (password eye toggle) */
#root input[type="password"],
#root input[type="text"]:has(+ button) {
  padding-right: 48px !important;
}

/* ----------------------------------------------------------------------------
   2. PLACEHOLDER: Мягче и читабельнее
   ---------------------------------------------------------------------------- */

#root input::placeholder,
#root textarea::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 0.65 !important;
  font-weight: 400 !important;
}

/* ----------------------------------------------------------------------------
   3. FOCUS STATES: Яркие и заметные (accessibility)
   ---------------------------------------------------------------------------- */

/* Инпуты: жирная обводка + glow */
#root input:focus,
#root textarea:focus,
#root select:focus {
  border-color: var(--color-brand) !important;
  border-width: 2px !important;
  padding-left: 15px !important;        /* компенсация +0.5px border */
  padding-right: 15px !important;
  box-shadow: 0 0 0 4px rgba(79, 105, 117, 0.12) !important;
  outline: none !important;
}

#root textarea:focus {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 13px !important;         /* компенсация border */
  padding-bottom: 13px !important;
}

/* Support textarea с иконкой */
#root #support-message:focus {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Кнопки и ссылки: focus-visible для клавиатурной навигации */
#root button:focus-visible,
#root a:focus-visible {
  outline: 3px solid rgba(79, 105, 117, 0.4) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(79, 105, 117, 0.12) !important;
}

/* Убрать outline при клике мышью */
#root button:focus:not(:focus-visible),
#root a:focus:not(:focus-visible),
#root input:focus:not(:focus-visible),
#root textarea:focus:not(:focus-visible),
#root select:focus:not(:focus-visible) {
  outline: none !important;
}

/* Nav links: focus-visible */
#root aside nav a:focus-visible,
#root header nav a:focus-visible {
  outline: 3px solid rgba(79, 105, 117, 0.5) !important;
  outline-offset: 2px !important;
}

/* Mobile bottom nav: focus-visible */
#root nav[class*="fixed"][class*="bottom"] a:focus-visible {
  outline: 3px solid rgba(79, 105, 117, 0.5) !important;
  outline-offset: 2px !important;
}

/* ----------------------------------------------------------------------------
   4. LABELS: Ближе к инпутам, жирнее
   ---------------------------------------------------------------------------- */

#root label {
  margin-bottom: 8px !important;
  display: block !important;
  font-size: 0.8125rem !important;      /* 13px */
  font-weight: 600 !important;
  color: var(--color-text-soft) !important;
  letter-spacing: 0.01em !important;
}

/* ----------------------------------------------------------------------------
   5. ОШИБКИ И УСПЕХ: Читабельные сообщения
   ---------------------------------------------------------------------------- */

/* Error messages */
#root div[class*="border-error-500"][class*="bg-error-500"],
#root div[class*="text-error-"] {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.875rem !important;       /* 14px */
  line-height: 1.5 !important;
}

/* Success messages */
#root div[class*="border-success-500"][class*="bg-success-500"],
#root div[class*="text-success-"] {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* Warning messages */
#root div[class*="border-warning-500"][class*="bg-warning-500"] {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ----------------------------------------------------------------------------
   6. FORM GROUPS: Spacing между элементами
   ---------------------------------------------------------------------------- */

/* Space между label и input */
#root form label + input,
#root form label + textarea,
#root form label + select {
  margin-top: 8px !important;
}

/* Space между form элементами */
#root form > div + div,
#root form .space-y-4 > * + * {
  margin-top: 18px !important;          /* было 16px */
}

/* ----------------------------------------------------------------------------
   7. МОБИЛЬНЫЕ ФОРМЫ: Оптимизация для touch
   ---------------------------------------------------------------------------- */

@media (max-width: 640px) {
  #root input,
  #root select {
    min-height: 52px !important;        /* крупнее на мобилке */
    padding: 14px 16px !important;
    font-size: 1rem !important;         /* 16px чтобы не зумилось */
  }

  #root textarea,
  #root #support-message {
    min-height: 104px !important;
    padding: 16px !important;
    font-size: 1rem !important;
  }

  #root input:focus,
  #root select:focus {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #root textarea:focus,
  #root #support-message:focus {
    padding: 15px !important;
  }

  /* Labels на мобилке */
  #root label {
    font-size: 0.875rem !important;     /* 14px */
  }
}

/* ----------------------------------------------------------------------------
   8. СПЕЦИАЛЬНЫЕ ИНПУТЫ: Password toggle, search, etc.
   ---------------------------------------------------------------------------- */

/* Password toggle button */
#root input[type="password"] + button,
#root input[type="text"] + button[aria-label*="пароль"] {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

#root input[type="password"] + button:hover,
#root input[type="text"] + button[aria-label*="пароль"]:hover {
  background: var(--color-card-muted) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

#root input[type="password"] + button:active,
#root input[type="text"] + button[aria-label*="пароль"]:active {
  transform: translateY(-50%) scale(0.95) !important;
}

/* ----------------------------------------------------------------------------
   9. DISABLED INPUTS: Чёткое визуальное отличие
   ---------------------------------------------------------------------------- */

#root input:disabled,
#root textarea:disabled,
#root select:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  background: var(--color-section-gray) !important;
  color: var(--color-text-muted) !important;
}

#root input:disabled::placeholder,
#root textarea:disabled::placeholder {
  opacity: 0.4 !important;
}


/* ============================================================================
   STAGE 2.3: NAVIGATION & CARDS
   Дата: 2026-05-31
   Цель: Улучшить визуальную иерархию и polish
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. SIDEBAR NAVIGATION: Крупнее иконки и удобнее
   ---------------------------------------------------------------------------- */

/* Sidebar nav items: увеличенные размеры */
#root aside nav a {
  min-height: 48px !important;          /* было 44px */
  padding: 0.75rem 1rem !important;     /* было 0.625rem 0.875rem */
  font-size: 0.9375rem !important;      /* 15px вместо 15.36px */
  font-weight: 650 !important;
  gap: 0.875rem !important;             /* 14px вместо 12px */
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Иконки sidebar: крупнее */
#root aside nav a::before {
  width: 1.25rem !important;            /* 20px вместо 17.6px */
  height: 1.25rem !important;
  flex: 0 0 1.25rem !important;
  opacity: 1 !important;
}

/* Active state: жирнее и с акцентом */
#root aside nav a[aria-current="page"] {
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--color-brand) !important;
}

/* Hover: плавный переход */
#root aside nav a:hover:not([aria-current="page"]) {
  transform: translateX(2px) !important;
}

/* ----------------------------------------------------------------------------
   2. HEADER NAVIGATION: Консистентность с sidebar
   ---------------------------------------------------------------------------- */

#root header nav a {
  min-height: 44px !important;          /* было 40px */
  padding: 0.625rem 1rem !important;    /* было 0.55rem 0.85rem */
  font-size: 0.9375rem !important;      /* 15px вместо 14px */
  font-weight: 650 !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Header buttons (profile, etc) */
#root header button {
  min-height: 44px !important;
  padding: 0.625rem 1rem !important;
  border-radius: 12px !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ----------------------------------------------------------------------------
   3. MOBILE BOTTOM NAV: Уже хорош, но добавим polish
   ---------------------------------------------------------------------------- */

/* Mobile nav: увеличенные touch targets */
@media (max-width: 1024px) {
  #root nav[class*="fixed"][class*="bottom"] a {
    min-width: 64px !important;         /* было 56px */
    min-height: 60px !important;        /* было ~56px */
    padding: 12px 8px !important;
    border-radius: 14px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #root nav[class*="fixed"][class*="bottom"] svg {
    width: 1.375rem !important;         /* 22px */
    height: 1.375rem !important;
  }

  #root nav[class*="fixed"][class*="bottom"] span {
    font-size: 0.6875rem !important;    /* 11px */
    font-weight: 600 !important;
    margin-top: 4px !important;
  }

  /* Active state: более заметный */
  #root nav[class*="fixed"][class*="bottom"] a[class*="text-accent"] {
    transform: scale(1.05) !important;
  }
}

/* ----------------------------------------------------------------------------
   4. КАРТОЧКИ: Больше воздуха и глубины
   ---------------------------------------------------------------------------- */

/* Основные карточки: увеличенный padding */
#root section[class*="rounded-3xl"],
#root article[class*="rounded-3xl"],
#root div[class*="rounded-3xl"][class*="border-"] {
  padding: 24px !important;             /* было 20px */
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
              0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Карточки внутри карточек (nested) */
#root section[class*="rounded-3xl"] div[class*="rounded-2xl"][class*="border-"],
#root article[class*="rounded-3xl"] div[class*="rounded-2xl"][class*="border-"] {
  padding: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Hover для кликабельных карточек */
#root a:has(> section[class*="rounded-3xl"]) section,
#root a:has(> article[class*="rounded-3xl"]) article,
#root section[class*="rounded-3xl"]:has(a[href]),
#root section[class*="rounded-3xl"]:has(button) {
  cursor: pointer;
}

#root a:hover > section[class*="rounded-3xl"],
#root a:hover > article[class*="rounded-3xl"],
#root section[class*="rounded-3xl"]:hover:has(a[href]),
#root section[class*="rounded-3xl"]:hover:has(button) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
              0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border-color: var(--color-brand-muted) !important;
  transform: translateY(-2px) !important;
}

/* Карточки с градиентами: убираем градиент, оставляем чистый фон */
#root section[class*="bg-gradient-to-"],
#root article[class*="bg-gradient-to-"],
#root div[class*="bg-gradient-to-"] {
  background-image: none !important;
  background-color: var(--color-card) !important;
}

/* Мобилка: меньше padding */
@media (max-width: 640px) {
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  #root section[class*="rounded-3xl"] div[class*="rounded-2xl"],
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] {
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

/* ----------------------------------------------------------------------------
   5. SPACING: Больше воздуха между элементами
   ---------------------------------------------------------------------------- */

/* Увеличить gap между секциями */
#root .space-y-6 > * + * {
  margin-top: 28px !important;          /* было 24px */
}

#root .space-y-4 > * + * {
  margin-top: 18px !important;          /* было 16px */
}

#root .space-y-3 > * + * {
  margin-top: 14px !important;          /* было 12px */
}

#root .space-y-2 > * + * {
  margin-top: 10px !important;          /* было 8px */
}

/* Grid gaps */
#root .grid.gap-6 {
  gap: 28px !important;                 /* было 24px */
}

#root .grid.gap-4 {
  gap: 18px !important;                 /* было 16px */
}

#root .grid.gap-3 {
  gap: 14px !important;                 /* было 12px */
}

/* Flex gaps */
#root .flex.gap-6 {
  gap: 28px !important;
}

#root .flex.gap-4 {
  gap: 18px !important;
}

#root .flex.gap-3 {
  gap: 14px !important;
}

#root .flex.gap-2 {
  gap: 10px !important;
}

/* ----------------------------------------------------------------------------
   6. ТЕНИ: Мягче и глубже
   ---------------------------------------------------------------------------- */

/* Стандартные тени */
#root .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#root .shadow,
#root .shadow-md {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
              0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#root .shadow-lg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
              0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

#root .shadow-xl,
#root .shadow-2xl {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10),
              0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Sidebar и header тени */
#root aside {
  box-shadow: 2px 0 16px rgba(17, 17, 17, 0.06) !important;
}

#root header {
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.05) !important;
}

/* ----------------------------------------------------------------------------
   7. СТАТУС BADGES: Читабельнее
   ---------------------------------------------------------------------------- */

/* Success badges */
#root span[class*="border-success-500"][class*="bg-success-500"],
#root span[class*="text-success-"][class*="border-"] {
  padding: 6px 12px !important;         /* было ~4px 8px */
  border-radius: 8px !important;
  font-size: 0.8125rem !important;      /* 13px */
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Error badges */
#root span[class*="border-error-500"][class*="bg-error-500"],
#root span[class*="text-error-"][class*="border-"] {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Warning badges */
#root span[class*="border-warning-500"][class*="bg-warning-500"] {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ----------------------------------------------------------------------------
   8. OVERVIEW PAGE: Специальные карточки
   ---------------------------------------------------------------------------- */

/* Telegram link panel: выделяем */
#root section:has(a[href*="telegram"]):first-child,
#root section[class*="border-success-500"][class*="bg-success-500"] {
  padding: 24px !important;
  border-width: 1.5px !important;
}

/* CTA карточки (Purchase, Devices) */
#root section:has(a[href="/app/purchase"]),
#root section:has(a[href="/app/devices"]) {
  padding: 24px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#root section:has(a[href="/app/purchase"]):hover,
#root section:has(a[href="/app/devices"]):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

/* ----------------------------------------------------------------------------
   9. SUPPORT CHAT: Улучшенная карточка
   ---------------------------------------------------------------------------- */

#root section:has(#support-message) {
  padding: 24px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Chat messages container */
#root section:has(#support-message) [style*="overflow-y"] {
  border-radius: 16px !important;
  padding: 16px !important;
}

/* Chat form */
#root section:has(#support-message) form {
  margin-inline: -24px !important;
  margin-bottom: -24px !important;
  padding: 16px 24px 24px !important;
}

@media (max-width: 640px) {
  #root section:has(#support-message) {
    padding: 20px !important;
  }

  #root section:has(#support-message) form {
    margin-inline: -20px !important;
    margin-bottom: -20px !important;
    padding: 14px 20px 20px !important;
  }
}

/* ----------------------------------------------------------------------------
   10. SCROLLBAR: Стилизация
   ---------------------------------------------------------------------------- */

/* Webkit scrollbar */
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

::-webkit-scrollbar-track {
  background: var(--color-card-muted) !important;
  border-radius: 5px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border) !important;
  border-radius: 5px !important;
  transition: background 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-muted) !important;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--color-border) var(--color-card-muted) !important;
}


/* ============================================================================
   STAGE 2.4: MICRO-ANIMATIONS & MOBILE OPTIMIZATION
   Дата: 2026-05-31
   Цель: Финальный polish + мобильная адаптация
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. SMOOTH SCROLL: Плавная прокрутка
   ---------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth !important;
}

/* Отключить для пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------------------
   2. RIPPLE EFFECT: Для primary кнопок
   ---------------------------------------------------------------------------- */

/* Ripple container */
#root button.bg-accent-500,
#root a.bg-accent-500 {
  position: relative !important;
  overflow: hidden !important;
}

/* Ripple эффект через ::after */
#root button.bg-accent-500::after,
#root a.bg-accent-500::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
}

#root button.bg-accent-500:active::after,
#root a.bg-accent-500:active::after {
  opacity: 1 !important;
  transition: opacity 0s !important;
}

/* ----------------------------------------------------------------------------
   3. LOADING STATES: Skeleton loaders
   ---------------------------------------------------------------------------- */

/* Skeleton animation */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Применяется к элементам с aria-busy="true" */
#root [aria-busy="true"] {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  pointer-events: none !important;
}

/* ----------------------------------------------------------------------------
   4. TRANSITIONS: Оптимизированные для всех элементов
   ---------------------------------------------------------------------------- */

/* Базовые transitions для интерактивных элементов */
#root button,
#root a,
#root input,
#root select,
#root textarea {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Быстрые transitions для мелких элементов */
#root button[class*="text-"],
#root a[class*="text-"],
#root span[class*="border-"] {
  transition-duration: 0.15s !important;
}

/* ----------------------------------------------------------------------------
   5. MOBILE OPTIMIZATION: Адаптация под мобильные устройства
   ---------------------------------------------------------------------------- */

/* === БАЗОВЫЕ НАСТРОЙКИ МОБИЛКИ === */
@media (max-width: 640px) {

  /* Отключить hover-эффекты на touch устройствах */
  @media (hover: none) {
    #root button:hover,
    #root a:hover,
    #root section:hover {
      transform: none !important;
    }
  }

  /* Body: убрать лишние отступы */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Root container: full width */
  #root {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Main content: padding для safe area */
  #root > div,
  #root > main {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom))) !important;
  }

  html,
  body {
    overscroll-behavior-y: auto !important;
  }
}

/* === ТИПОГРАФИКА НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Заголовки: чуть меньше на мобилке */
  #root h1,
  #root .text-3xl {
    font-size: 1.75rem !important;      /* 28px вместо 32px */
    line-height: 1.25 !important;
  }

  #root h2,
  #root .text-2xl {
    font-size: 1.375rem !important;     /* 22px вместо 24px */
    line-height: 1.3 !important;
  }

  #root h3,
  #root .text-xl {
    font-size: 1.0625rem !important;    /* 17px вместо 18px */
  }

  /* Основной текст: 16px чтобы не зумилось.
     Только текстовые элементы — НЕ все div (иначе ломается типошкала и flex). */
  #root p,
  #root li,
  #root .text-base {
    font-size: 1rem !important;         /* 16px */
    line-height: 1.6 !important;
  }
}

/* === КНОПКИ НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* CTA и кнопки с текстом: крупнее touch targets.
     Иконочные/квадратные/pill-кнопки (h-8/h-9/h-5, w-8/9/10, rounded-full,
     .absolute close) исключены, чтобы не раздувались до 52px.
     Исключения в :where() — нулевая специфичность, чтобы не перебивать
     более точечные правила (header/вторичные кнопки). */
  #root button:where(:not([class*="h-9"]):not([class*="h-8"]):not([class*="h-5"]):not([class*="w-9"]):not([class*="w-8"]):not([class*="w-10"]):not([class*="rounded-full"]):not(.absolute)),
  #root a[class*="inline-flex"]:where(:not([class*="h-9"]):not([class*="h-8"]):not([class*="rounded-full"])) {
    min-height: 52px !important;
    padding: 16px 20px !important;
    font-size: 1rem !important;         /* 16px */
  }

  /* Secondary кнопки */
  #root button[class*="border-dark-"],
  #root a[class*="border-dark-"] {
    min-height: 48px !important;
    padding: 14px 18px !important;
  }

  /* Кнопки в модальных окнах */
  body > .fixed.inset-0 .max-w-lg button {
    min-height: 52px !important;
    padding: 16px 20px !important;
  }

  /* Full-width кнопки на мобилке */
  #root form button[type="submit"],
  #root form button[class*="bg-accent-500"] {
    width: 100% !important;
  }
}

/* === ФОРМЫ НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Инпуты: 16px font-size чтобы iOS не зумил */
  #root input,
  #root select {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;         /* 16px - критично! */
  }

  #root textarea,
  #root #support-message {
    min-height: 104px !important;
    padding: 16px !important;
    font-size: 1rem !important;
  }

  /* Labels */
  #root label {
    font-size: 0.875rem !important;     /* 14px */
    margin-bottom: 6px !important;
  }

  /* Form spacing */
  #root form > div + div {
    margin-top: 20px !important;
  }
}

/* === НАВИГАЦИЯ НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Скрыть desktop sidebar */
  #root aside {
    display: none !important;
  }

  /* Header: компактнее */
  #root header {
    padding: 12px 16px !important;
    min-height: 56px !important;
  }

  #root header button,
  #root header a {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }
}

/* === MOBILE BOTTOM NAV === */
@media (max-width: 1024px) {

  /* Bottom nav: фиксированная позиция с safe area */
  #root nav[class*="fixed"][class*="bottom"] {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    right: 16px !important;
    padding: 8px 4px !important;
    border-radius: 24px !important;
    background: rgba(252, 252, 252, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(0, 0, 0, 0.05) inset !important;
  }

  /* Nav items: крупные touch targets */
  #root nav[class*="fixed"][class*="bottom"] a {
    min-width: 64px !important;
    min-height: 60px !important;
    padding: 12px 8px !important;
    border-radius: 16px !important;
  }

  /* Иконки */
  #root nav[class*="fixed"][class*="bottom"] svg {
    width: 1.5rem !important;           /* 24px */
    height: 1.5rem !important;
  }

  /* Labels */
  #root nav[class*="fixed"][class*="bottom"] span {
    font-size: 0.6875rem !important;    /* 11px */
    font-weight: 600 !important;
    margin-top: 4px !important;
  }
}

/* === КАРТОЧКИ НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Основные карточки: меньше padding */
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    padding: 20px !important;
    border-radius: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Nested карточки */
  #root section div[class*="rounded-2xl"],
  #root article div[class*="rounded-2xl"] {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* Grid на мобилке: схлопывать только многоколоночные (3+) layout-сетки.
     2-колоночные stat/grid-блоки оставляем — на телефоне 2 колонки норм. */
  #root [class*="grid-cols-3"],
  #root [class*="grid-cols-4"],
  #root [class*="grid-cols-5"],
  #root [class*="grid-cols-6"] {
    grid-template-columns: 1fr !important;
  }

  /* Spacing на мобилке: компактнее */
  #root .space-y-6 > * + * {
    margin-top: 24px !important;
  }

  #root .space-y-4 > * + * {
    margin-top: 16px !important;
  }
}

/* === МОДАЛЬНЫЕ ОКНА НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Payment modal: full screen на мобилке */
  body > .fixed.inset-0 {
    padding: 16px !important;
  }

  body > .fixed.inset-0 .max-w-lg {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }

  /* Modal content */
  body > .fixed.inset-0 .max-w-lg > div {
    padding: 20px !important;
  }

  /* Close button: крупнее */
  body > .fixed.inset-0 .max-w-lg > button.absolute {
    width: 40px !important;
    height: 40px !important;
    top: 12px !important;
    right: 12px !important;
  }
}

/* === SUPPORT CHAT НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Chat container */
  #root section:has(#support-message) {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  /* Messages area */
  #root section:has(#support-message) [style*="overflow-y"] {
    max-height: min(60vh, 420px) !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* Message bubbles */
  #root section:has(#support-message) .items-start > .mr-auto,
  #root section:has(#support-message) .items-end > .ml-auto {
    max-width: 85% !important;
    padding: 12px 14px !important;
    font-size: 0.9375rem !important;
  }

  /* Chat form */
  #root section:has(#support-message) form {
    margin-inline: -16px !important;
    margin-bottom: -16px !important;
    padding: 14px 16px 16px !important;
  }

  /* Form layout: вертикальный на мобилке */
  #root section:has(#support-message) form > div.flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Textarea и кнопки: full width */
  #root #support-message,
  #root #support-message + button,
  #root #support-message + button + button {
    width: 100% !important;
    max-width: 100% !important;
  }

  #root #support-message {
    min-height: 88px !important;
  }
}

/* === ТАБЛИЦЫ НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Devices table: вертикальная раскладка */
  #root table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #root table thead {
    display: none !important;
  }

  #root table tbody,
  #root table tr,
  #root table td {
    display: block !important;
    width: 100% !important;
  }

  #root table tr {
    margin-bottom: 16px !important;
    padding: 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    background: var(--color-card) !important;
  }

  #root table td {
    padding: 8px 0 !important;
    border: none !important;
  }

  #root table td::before {
    content: attr(data-label) !important;
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 4px !important;
  }
}

/* === OVERFLOW И SCROLL НА МОБИЛКЕ === */
@media (max-width: 640px) {

  /* Предотвратить горизонтальный скролл */
  body,
  #root {
    overflow-x: hidden !important;
  }

  /* Mono text (ключи, коды): wrap на мобилке */
  #root [class*="font-mono"],
  #root code,
  #root pre {
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  /* Long text: wrap (только текстовые элементы, не layout-контейнеры) */
  #root p,
  #root span,
  #root h1,
  #root h2,
  #root h3,
  #root [class*="font-mono"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* === TOUCH FEEDBACK === */
@media (max-width: 640px) {

  /* Active state для touch */
  #root button:active,
  #root a:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
  }

  /* Убрать tap highlight */
  #root button,
  #root a,
  #root input,
  #root textarea {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ----------------------------------------------------------------------------
   6. LANDSCAPE ORIENTATION: Оптимизация для альбомной ориентации
   ---------------------------------------------------------------------------- */

@media (max-width: 1024px) and (orientation: landscape) {

  /* Уменьшить вертикальные отступы */
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    padding: 16px 20px !important;
  }

  /* Компактнее spacing */
  #root .space-y-6 > * + * {
    margin-top: 20px !important;
  }

  #root .space-y-4 > * + * {
    margin-top: 14px !important;
  }

  /* Bottom nav: меньше */
  #root nav[class*="fixed"][class*="bottom"] {
    padding: 6px 4px !important;
  }

  #root nav[class*="fixed"][class*="bottom"] a {
    min-height: 52px !important;
    padding: 8px 6px !important;
  }
}

/* ----------------------------------------------------------------------------
   7. PERFORMANCE: GPU acceleration для анимаций
   ---------------------------------------------------------------------------- */

/* GPU acceleration для transform/opacity */
#root button,
#root a,
#root section[class*="rounded-3xl"],
#root article[class*="rounded-3xl"] {
  will-change: transform !important;
}

/* Убрать will-change после анимации */
#root button:not(:hover):not(:active),
#root a:not(:hover):not(:active),
#root section:not(:hover) {
  will-change: auto !important;
}

/* ----------------------------------------------------------------------------
   8. PRINT STYLES: Оптимизация для печати
   ---------------------------------------------------------------------------- */

@media print {

  /* Скрыть навигацию */
  #root aside,
  #root header,
  #root nav[class*="fixed"] {
    display: none !important;
  }

  /* Убрать тени и эффекты */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Чёрно-белая печать */
  #root {
    background: white !important;
    color: black !important;
  }

  /* Разрывы страниц */
  #root section,
  #root article {
    page-break-inside: avoid !important;
  }
}


/* ============================================================================
   HOTFIX: User-reported issues
   Дата: 2026-05-31
   Цель: Исправить конкретные проблемы UX
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FIX 1: Серые кнопки - убрать жёлтое свечение при hover
   ---------------------------------------------------------------------------- */

/* Серые (secondary) кнопки: НЕ жёлтый hover, а серый */
#root button[class*="border-dark-"]:not(.bg-accent-500):hover,
#root a[class*="border-dark-"]:not(.bg-accent-500):hover {
  border-color: rgba(50, 50, 50, 0.4) !important;  /* Серый вместо brand-muted */
  background: rgba(209, 210, 210, 0.15) !important; /* Лёгкий серый фон */
  color: var(--color-text) !important;
}

/* Кнопки с текстом error/danger: серый hover */
#root button[class*="text-error-"]:hover,
#root button[class*="border-error-500"]:hover {
  background: rgba(209, 210, 210, 0.15) !important;
  color: var(--color-text) !important;
  border-color: rgba(50, 50, 50, 0.3) !important;
}

/* Кнопки в карточках: серый hover */
#root section button[class*="border-dark-"]:hover,
#root article button[class*="border-dark-"]:hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(209, 210, 210, 0.15) !important;
}

/* ----------------------------------------------------------------------------
   FIX 2: Sidebar - убрать обводку у кнопки "Устройства"
   ---------------------------------------------------------------------------- */

/* Убрать специальные стили для /app/devices и /app/purchase в sidebar */
#root aside nav a[href="/app/devices"],
#root aside nav a[href="/app/purchase"] {
  /* Сбросить специальные стили, сделать как обычную nav-кнопку */
  min-height: 48px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
}

/* Убрать жёлтый фон/обводку */
#root aside nav a[href="/app/devices"]:not([aria-current="page"]),
#root aside nav a[href="/app/purchase"]:not([aria-current="page"]) {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
  border: none !important;
}

/* Hover как у обычных nav-кнопок */
#root aside nav a[href="/app/devices"]:hover:not([aria-current="page"]),
#root aside nav a[href="/app/purchase"]:hover:not([aria-current="page"]) {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
  border: none !important;
}

/* Active state */
#root aside nav a[href="/app/devices"][aria-current="page"],
#root aside nav a[href="/app/purchase"][aria-current="page"] {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  border: none !important;
}

/* ----------------------------------------------------------------------------
   FIX 3: Скрыть фильтрацию во вкладке Устройства
   ---------------------------------------------------------------------------- */

/* Скрыть кнопки фильтрации: "Все ключи", "PLUS", и т.д. */
/* Ищем по тексту или по структуре */

/* Вариант 1: Скрыть группу кнопок над списком устройств */
#root main:has(a[href="/app/devices"]) > div > div:first-child > div.flex.gap-2,
#root main:has(a[href="/app/devices"]) > div > div:first-child > div.flex.gap-3,
#root main:has(a[href="/app/devices"]) > div > section:first-child + div.flex {
  display: none !important;
}

/* Вариант 2: Скрыть кнопки с текстом "Все", "PLUS", "FREE" */
#root button:has-text("Все ключи"),
#root button:has-text("PLUS"),
#root button:has-text("FREE"),
#root a:has-text("Все ключи"),
#root a:has-text("PLUS"),
#root a:has-text("FREE") {
  display: none !important;
}

/* Вариант 3: Скрыть группу кнопок-фильтров по классам */
#root div[class*="flex"][class*="gap-"] > button.group[class*="bg-dark-950"],
#root div[class*="flex"][class*="gap-"] > button[class*="border-dark-700"]:not([type="submit"]) {
  /* Проверяем, что это не единственная кнопка */
}

/* Более точный селектор: кнопки-фильтры обычно в flex-контейнере перед списком */
#root section[class*="rounded-3xl"] + div.flex.gap-2 > button,
#root section[class*="rounded-3xl"] + div.flex.gap-3 > button {
  display: none !important;
}

/* Если фильтры в header секции */
#root section > div.flex.items-center.justify-between > div.flex.gap-2,
#root section > div.flex.items-center.justify-between > div.flex.gap-3 {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   FIX 4: Список устройств - поддержка 10-20 устройств
   ---------------------------------------------------------------------------- */

/* Контейнер со списком устройств/ключей: БЕЗ внутреннего скролла —
   список выводится одним длинным полем вниз (по просьбе юзера).
   Вложенный scroll-area на мобилке = плохой UX (скролл внутри скролла). */
#root section:has(article[class*="rounded-2xl"]) > div,
#root div:has(> article[class*="rounded-2xl"] + article[class*="rounded-2xl"]) {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#root section:has(article[class*="rounded-2xl"]) > div::-webkit-scrollbar {
  width: 8px !important;
}

#root section:has(article[class*="rounded-2xl"]) > div::-webkit-scrollbar-track {
  background: var(--color-card-muted) !important;
  border-radius: 4px !important;
}

#root section:has(article[class*="rounded-2xl"]) > div::-webkit-scrollbar-thumb {
  background: var(--color-border) !important;
  border-radius: 4px !important;
}

#root section:has(article[class*="rounded-2xl"]) > div::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-muted) !important;
}

/* Карточки устройств: компактнее при большом списке */
#root article[class*="rounded-2xl"] {
  margin-bottom: 12px !important;
}

#root article[class*="rounded-2xl"]:last-child {
  margin-bottom: 0 !important;
}

/* Мобилка: список ключей/устройств тоже без ограничения высоты (одно поле вниз) */
@media (max-width: 640px) {
  #root section:has(article[class*="rounded-2xl"]) > div,
  #root div:has(> article[class*="rounded-2xl"] + article[class*="rounded-2xl"]) {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ----------------------------------------------------------------------------
   FIX 5: Skeleton loaders - визуально быстрее загрузка
   ---------------------------------------------------------------------------- */

/* Skeleton для карточек при загрузке */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Применяется к элементам с aria-busy="true" или классом loading */
#root [aria-busy="true"],
#root .loading,
#root [data-loading="true"] {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(
    90deg,
    var(--color-card-muted) 0%,
    rgba(209, 210, 210, 0.3) 50%,
    var(--color-card-muted) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Скрыть текст в skeleton */
#root [aria-busy="true"] *,
#root .loading *,
#root [data-loading="true"] * {
  opacity: 0 !important;
}

/* Skeleton для списка устройств */
#root section:has(article[class*="rounded-2xl"]) [aria-busy="true"] article {
  min-height: 120px !important;
}

/* Skeleton для карточек overview */
#root section[class*="rounded-3xl"][aria-busy="true"] {
  min-height: 200px !important;
}

/* ----------------------------------------------------------------------------
   FIX 6: Оптимизация transitions - быстрее отклик
   ---------------------------------------------------------------------------- */

/* Ускорить transitions для nav-кнопок */
#root aside nav a,
#root header nav a {
  transition-duration: 0.15s !important;
}

/* Ускорить transitions для обычных кнопок */
#root button:not(.bg-accent-500),
#root a:not(.bg-accent-500) {
  transition-duration: 0.15s !important;
}

/* Primary кнопки: оставить 0.2s */
#root button.bg-accent-500,
#root a.bg-accent-500 {
  transition-duration: 0.2s !important;
}

/* ----------------------------------------------------------------------------
   FIX 7: Убрать лишние hover-эффекты с неинтерактивных элементов
   ---------------------------------------------------------------------------- */

/* Карточки БЕЗ ссылок/кнопок: убрать hover */
#root section[class*="rounded-3xl"]:not(:has(a)):not(:has(button)):hover,
#root article[class*="rounded-3xl"]:not(:has(a)):not(:has(button)):hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
              0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* ----------------------------------------------------------------------------
   FIX 8: Улучшить читаемость при большом списке устройств
   ---------------------------------------------------------------------------- */

/* Zebra striping для списка устройств (чётные/нечётные) */
#root article[class*="rounded-2xl"]:nth-child(even) {
  background: var(--color-card) !important;
}

#root article[class*="rounded-2xl"]:nth-child(odd) {
  background: var(--color-card-muted) !important;
}

/* Hover для карточек устройств */
#root article[class*="rounded-2xl"]:hover {
  background: rgba(221, 230, 236, 0.3) !important;
  border-color: var(--color-brand-muted) !important;
  transform: translateX(2px) !important;
}

/* ----------------------------------------------------------------------------
   FIX 9: Мобилка - скрыть фильтры и оптимизировать список
   ---------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Фильтры: точно скрыть на мобилке */
  #root section + div.flex.gap-2,
  #root section + div.flex.gap-3,
  #root div.flex.gap-2:has(> button.group),
  #root div.flex.gap-3:has(> button.group) {
    display: none !important;
  }

  /* Список устройств: компактнее */
  #root article[class*="rounded-2xl"] {
    padding: 16px !important;
    margin-bottom: 10px !important;
  }
}


/* ============================================================================
   HOTFIX v2: Убрать жёлтое свечение + скрыть loader
   Дата: 2026-05-31
   Цель: Исправить оставшиеся проблемы
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FIX 1: АГРЕССИВНО убрать ВСЁ жёлтое свечение с серых кнопок
   ---------------------------------------------------------------------------- */

/* ПЕРЕОПРЕДЕЛИТЬ ВСЕ hover-стили для НЕ-primary кнопок */
#root button:not([class*="bg-accent-500"]):not([class*="bg-success"]):not([class*="bg-error"]):hover,
#root a:not([class*="bg-accent-500"]):not([class*="bg-success"]):not([class*="bg-error"]):not([aria-current="page"]):hover {
  border-color: rgba(50, 50, 50, 0.35) !important;
  background: rgba(209, 210, 210, 0.12) !important;
  color: var(--color-text) !important;
  /* УБРАТЬ любые жёлтые цвета */
  box-shadow: none !important;
}

/* Серые кнопки с border-dark: ТОЛЬКО серый hover */
#root button[class*="border-dark-"]:hover,
#root a[class*="border-dark-"]:hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
  /* УБРАТЬ brand-light и brand-muted */
}

/* Кнопки в карточках: ТОЛЬКО серый */
#root section button:hover,
#root article button:hover,
#root div[class*="rounded"] button:hover {
  border-color: rgba(50, 50, 50, 0.35) !important;
  background: rgba(227, 227, 226, 0.25) !important;
  color: var(--color-text) !important;
}

/* Кнопки с текстом error/danger: серый hover */
#root button[class*="text-error-"]:hover,
#root button[class*="border-error-"]:hover,
#root a[class*="text-error-"]:hover {
  border-color: rgba(50, 50, 50, 0.3) !important;
  background: rgba(227, 227, 226, 0.2) !important;
  color: var(--color-text-soft) !important;
}

/* Кнопки в fixed панелях (tariffs): серый hover */
#root .fixed button[class*="border-dark-"]:hover,
#root .fixed a[class*="border-dark-"]:hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
}

/* Кнопки в модальных окнах: серый hover */
body > .fixed.inset-0 button[class*="border-dark-"]:hover,
body > .fixed.inset-0 a[class*="border-dark-"]:hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
}

/* ПЕРЕОПРЕДЕЛИТЬ старые правила с brand-light и brand-muted */
#root button:hover:not(.bg-accent-500):not([aria-current="page"]),
#root a:hover:not(.bg-accent-500):not([aria-current="page"]) {
  /* УБРАТЬ var(--color-brand-light) и var(--color-brand-muted) */
  background: rgba(227, 227, 226, 0.25) !important;
  border-color: rgba(50, 50, 50, 0.35) !important;
  color: var(--color-text) !important;
}

/* Tariff cards: серый hover */
#root button.group[class*="bg-dark-950"]:hover,
#root button.group[class*="border-dark-700"]:hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
}

/* Overview CTA cards: серый hover для кнопок внутри */
#root section:has(a[href="/app/purchase"]) button:hover,
#root section:has(a[href="/app/devices"]) button:hover {
  border-color: rgba(50, 50, 50, 0.35) !important;
  background: rgba(227, 227, 226, 0.25) !important;
  color: var(--color-text) !important;
}

/* Support chat кнопки: серый hover */
#root section:has(#support-message) button:not([class*="bg-accent-500"]):not([class*="bg-brand"]):hover {
  border-color: rgba(50, 50, 50, 0.35) !important;
  background: rgba(227, 227, 226, 0.25) !important;
  color: var(--color-text) !important;
}

/* УБРАТЬ brand-light из ВСЕХ hover-правил */
#root *:hover {
  /* Если где-то осталось var(--color-brand-light), заменить на серый */
}

/* Специфичные селекторы из старого CSS - ПЕРЕОПРЕДЕЛИТЬ */
#root aside nav a:hover:not([aria-current="page"]) {
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
  /* НЕ var(--color-brand-light) */
}

#root header nav a:hover:not([aria-current="page"]) {
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
}

#root header button:hover {
  border-color: rgba(50, 50, 50, 0.35) !important;
  background: rgba(227, 227, 226, 0.25) !important;
  color: var(--color-text) !important;
}

/* ----------------------------------------------------------------------------
   FIX 2: СКРЫТЬ loader при переходах между вкладками
   ---------------------------------------------------------------------------- */

/* Скрыть React loader/spinner */
#root [role="status"],
#root [aria-label*="Loading"],
#root [aria-label*="loading"],
#root [aria-busy="true"][role="status"],
#root div[class*="loading"],
#root div[class*="spinner"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Скрыть PageLoader компонент */
#root > div > div[class*="flex"][class*="items-center"][class*="justify-center"]:has(svg[class*="animate-spin"]),
#root main > div[class*="flex"][class*="items-center"][class*="justify-center"]:has(svg[class*="animate-spin"]) {
  display: none !important;
}

/* Скрыть spinning SVG */
#root svg[class*="animate-spin"],
#root svg.animate-spin {
  display: none !important;
}

/* Скрыть loading overlay */
#root div[class*="fixed"][class*="inset-0"]:has(svg[class*="animate-spin"]) {
  display: none !important;
}

/* Альтернатива: сделать loader мгновенным (0s duration) */
#root [role="status"] *,
#root svg[class*="animate-spin"] {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* Убрать skeleton pulse при быстрых переходах */
#root [aria-busy="true"] {
  animation-duration: 0.3s !important; /* Было 2s, теперь 0.3s */
}

/* Показывать контент сразу, даже если loading */
#root main,
#root section,
#root article {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Убрать fade-in анимации при загрузке страниц */
#root > div,
#root main > div {
  animation: none !important;
  transition: none !important;
}

/* ----------------------------------------------------------------------------
   FIX 3: Instant page transitions (без задержек)
   ---------------------------------------------------------------------------- */

/* Убрать transition delays */
#root * {
  transition-delay: 0s !important;
}

/* Ускорить все transitions до минимума */
#root main,
#root section,
#root article,
#root div {
  transition-duration: 0.1s !important;
}

/* Nav transitions: мгновенные */
#root aside nav a,
#root header nav a {
  transition-duration: 0.1s !important;
}

/* ----------------------------------------------------------------------------
   FIX 4: Preload content (показывать сразу)
   ---------------------------------------------------------------------------- */

/* Убрать opacity transitions при mount */
#root [class*="fade-in"],
#root [class*="fadeIn"],
#root [data-state="open"],
#root [data-state="visible"] {
  animation: none !important;
  opacity: 1 !important;
}

/* Убрать enter animations */
@keyframes fadeIn {
  from, to { opacity: 1 !important; }
}

@keyframes slideIn {
  from, to { transform: none !important; }
}

/* ----------------------------------------------------------------------------
   FIX 5: Оптимизация для мгновенного отклика
   ---------------------------------------------------------------------------- */

/* Убрать will-change (может тормозить) */
#root * {
  will-change: auto !important;
}

/* Только для hover-элементов */
#root button:hover,
#root a:hover {
  will-change: transform !important;
}

#root button:not(:hover),
#root a:not(:hover) {
  will-change: auto !important;
}

/* ============================================================================
   STAGE 3: МОБИЛЬНАЯ НАВИГАЦИЯ 2×2 + БРЕЙКПОИНТ-ФИКС
   Дата: 2026-05-31
   Контекст: на <1024px десктоп-сайдбар (aside.lg:block) скрыт, а навигация —
   это горизонтальный скролл-таб-бар <nav class="... overflow-x-auto lg:hidden">.
   Цель: превратить его в аккуратную 2×2 сетку (Обзор/Устройства, Тарифы/Поддержка),
   убрать горизонтальный скролл и раздувание пунктов. Брейкпоинт = lg (1023px),
   а не 640px — иначе планшеты 641–1023px остаются в "мёртвой зоне".
   Селектор таргетит nav по его классам (overflow-x-auto + lg:hidden),
   поэтому работает независимо от того, лежит ли он в <header>.
   ============================================================================ */
@media (max-width: 1023px) {

  /* Контейнер таб-бара: flex → 2×2 grid, без скролла */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Пункты: одинаковый размер, по центру, без раздувания и без переноса текста.
     Перебивает и общий #root button {52px}, и старые header/aside nav-правила. */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a,
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    font-size: 0.9375rem !important;   /* 15px */
    line-height: 1.2 !important;
    border-radius: 12px !important;
    flex: initial !important;
  }

  /* Иконки внутри пунктов (если есть svg) — не сжимаются */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a svg,
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > button svg {
    flex: 0 0 auto !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* STAGE 6 (2026-05-31): иконки + контраст — навигация должна быть «явной».
     Переиспользуем те же SVG-маски, что у десктоп-сайдбара. */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a::before {
    content: "" !important;
    flex: 0 0 1.05rem !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    background: currentColor !important;
    -webkit-mask: var(--nav-icon) center / contain no-repeat !important;
    mask: var(--nav-icon) center / contain no-repeat !important;
  }
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[href="/app"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h3A2.5 2.5 0 0 1 12 5.5v3A2.5 2.5 0 0 1 9.5 11h-3A2.5 2.5 0 0 1 4 8.5v-3Zm10 0A2.5 2.5 0 0 1 16.5 3h1A2.5 2.5 0 0 1 20 5.5v8A2.5 2.5 0 0 1 17.5 16h-1A2.5 2.5 0 0 1 14 13.5v-8ZM4 15.5A2.5 2.5 0 0 1 6.5 13h3A2.5 2.5 0 0 1 12 15.5v3A2.5 2.5 0 0 1 9.5 21h-3A2.5 2.5 0 0 1 4 18.5v-3Zm10 3A2.5 2.5 0 0 1 16.5 16h1a2.5 2.5 0 0 1 0 5h-1A2.5 2.5 0 0 1 14 18.5Z'/%3E%3C/svg%3E") !important;
  }
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[href="/app/devices"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 5A2.75 2.75 0 0 0 2 7.75v6.5A2.75 2.75 0 0 0 4.75 17h5.75v2H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-2.5v-2h5.75A2.75 2.75 0 0 0 22 14.25v-6.5A2.75 2.75 0 0 0 19.25 5H4.75ZM4 7.75A.75.75 0 0 1 4.75 7h14.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-.75.75H4.75a.75.75 0 0 1-.75-.75v-6.5Z'/%3E%3C/svg%3E") !important;
  }
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[href="/app/purchase"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.75A2.75 2.75 0 0 1 5.75 5h12.5A2.75 2.75 0 0 1 21 7.75v8.5A2.75 2.75 0 0 1 18.25 19H5.75A2.75 2.75 0 0 1 3 16.25v-8.5ZM5.75 7a.75.75 0 0 0-.75.75V9h14V7.75a.75.75 0 0 0-.75-.75H5.75ZM19 12H5v4.25c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75V12Zm-12 2.5a1 1 0 0 1 1-1h2.5a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E") !important;
  }
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[href="/app/support"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 4A3.5 3.5 0 0 0 2 7.5v5A3.5 3.5 0 0 0 5.5 16H7v2.35a1.25 1.25 0 0 0 2.04.97L13.1 16h5.4a3.5 3.5 0 0 0 3.5-3.5v-5A3.5 3.5 0 0 0 18.5 4h-13ZM4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v5a1.5 1.5 0 0 1-1.5 1.5h-5.76a1 1 0 0 0-.63.22L9 16.77V15a1 1 0 0 0-1-1H5.5A1.5 1.5 0 0 1 4 12.5v-5Z'/%3E%3C/svg%3E") !important;
  }

  /* Контраст: неактивные — чёткий фон+бордер+тёмный текст; активный — бренд */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a:not([aria-current="page"]),
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > button:not([aria-current="page"]) {
    background: var(--color-bg-soft) !important;
    color: var(--color-text-soft) !important;
    border: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
  }
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[aria-current="page"],
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"] > button[aria-current="page"] {
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    border: 1px solid var(--color-brand) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgb(79 105 117 / 0.25) !important;
  }
}

/* ============================================================================
   STAGE 4: СТРАНИЦА «УСТРОЙСТВА» — УБРАТЬ ЛИШНИЙ ЗАГОЛОВОК И ПУСТОЙ БЛОК
   Дата: 2026-05-31
   DOM (из бандла): <section.rounded-3xl> содержит шапку-flex
     [ <div> плашка "Управление доступом" + <h1>Устройства</h1> + <p>описание </div>,
       <div.grid.grid-cols-3.sm:min-w-[420px]> 3 статы ],
     а следом sibling <div.overflow-x-auto.bg-dark-900/70> — фильтр ключей.
   ============================================================================ */

/* 1. Убрать всю шапку-карточку «Устройства» (плашка + "Устройства" + описание +
      статистика Устройств/Лимит/Ключей) — и на телефоне, и на ПК. Не нужна.
      Скоупим к этой секции через грид статистики sm:min-w-[420px] внутри неё. */
#root section[class*="rounded-3xl"]:has(div[class*="sm:min-w-[420px]"]) {
  display: none !important;
}

/* 2. Убрать пустой блок на ПК: контейнер фильтра ключей, у которого старое
      правило (#root section.rounded-3xl + div.flex.gap-2 > button {display:none})
      спрятало кнопки, оставив пустой bordered-бокс. На мобилке он уже скрыт
      (правило ≤640px) — здесь прячем весь контейнер на всех ширинах. */
#root section[class*="rounded-3xl"] + div[class*="overflow-x-auto"][class*="bg-dark-900/70"] {
  display: none !important;
}

/* ============================================================================
   STAGE 5: ОБЗОР «Доступ к кабинету» (overflow текста) + кнопка «Выйти»
   Дата: 2026-05-31
   ============================================================================ */

/* --- «Доступ к кабинету»: текст съезжает на телефоне ---
   DOM: <div class="flex gap-4">[ <div class="h-14 w-14 shrink-0 rounded-2xl">icon</div>,
        <div> eyebrow(uppercase tracking-[0.2em]) + <h1>имя/email</h1> + <p> + пилюли ]</div>
   Причина: иконка 56px съедает ширину, текст-обёртка без min-width:0 → overflow.
   Решение: текст-колонке min-width:0; на телефоне иконка НАД текстом (column). */
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) {
  min-width: 0 !important;
}
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) > div:not([class*="shrink-0"]) {
  min-width: 0 !important;             /* ключ: разрешает текстовой колонке сжиматься */
  flex: 1 1 auto !important;
}
/* Перенос длинных строк по границам слов (не рвать слова посередине) */
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) h1,
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) p,
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) span {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
@media (max-width: 640px) {
  /* Иконка над текстом → текст занимает всю ширину, ничего не ломается */
  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) {
    flex-direction: column !important;
    gap: 0.875rem !important;
  }
  /* eyebrow "ДОСТУП К КАБИНЕТУ": широкий tracking ломает узкие экраны */
  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="tracking-"] {
    letter-spacing: 0.08em !important;
  }
  /* h1 компактнее, чтобы длинное имя не растягивало строку */
  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) h1 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  /* email/длинные токены: переносить по символам только их (последняя пилюля-span) */
  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="flex-wrap"] span:last-child {
    overflow-wrap: anywhere !important;
  }
}

/* --- Кнопка «Выйти» в шапке: компактнее ---
   <header> … <button class="rounded-xl border border-dark-700 px-3 py-2 text-sm">Выйти</button>
   Перебивает общие 48/52px-правила кнопок (теперь у них низкая специфичность). */
#root header button[class*="border-dark-"] {
  min-height: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.8125rem !important;     /* 13px */
}

/* ============================================================================
   STAGE 7: ОБЗОР — чистка блока «Доступ к кабинету» на телефоне
   Дата: 2026-05-31. Скоуп — секция с иконкой-бейджем h-14/w-14/rounded-2xl.
   Убираем на ≤640: описание (p), пилюлю Telegram + email (flex-wrap row),
   хелпер под кнопкой (text-xs в правой колонке min-w-[240px]).
   Остаётся: eyebrow + заголовок состояния + кнопка Привязать/Перепривязать.
   ============================================================================ */
@media (max-width: 640px) {
  #root section[class*="rounded-3xl"]:has(div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) p,
  #root section[class*="rounded-3xl"]:has(div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="flex-wrap"],
  #root section[class*="rounded-3xl"]:has(div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="min-w-[240px]"] [class*="text-xs"] {
    display: none !important;
  }
}

/* ============================================================================
   STAGE 8: ОБЗОР — два CTA-блока («Тарифы» + «Устройства») компактными плитками
   Дата: 2026-05-31. На ≤640: родительский grid → 2 колонки, описания скрыты,
   заголовок мельче, кнопка на всю ширину плитки. Скоуп — по CTA-ссылкам.
   ============================================================================ */
@media (max-width: 640px) {
  /* родительский grid этих двух плиток → рядом в 2 колонки.
     ВНИМАНИЕ: :has() нельзя вкладывать в :has() — таргетим по ссылкам-потомкам. */
  #root div[class*="grid"]:has(a[href="/app/purchase"]):has(a[href="/app/devices"]) {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  /* сами плитки компактнее */
  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]),
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  /* внутренняя обёртка — колонкой, контент тянется на ширину */
  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) > div[class*="flex"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) > div[class*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  /* убрать описания CTA */
  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) p,
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) p {
    display: none !important;
  }
  /* заголовок плитки компактнее */
  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) h2,
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) h2 {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
  }
  /* кнопка плитки — на всю ширину, компактная */
  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) a[href="/app/purchase"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) a[href="/app/devices"] {
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    font-size: 0.875rem !important;
  }
}

/* ============================================================================
   STAGE 9: УСТРОЙСТВА — де-растяжка строк устройств + явные цвета кнопок
   Дата: 2026-05-31.
   Строка устройства = div.rounded-2xl.p-4 > div.flex.flex-col.gap-4.sm:flex-row…
   На ≤640 она flex-col → иконка+имя сверху, «Удалить» во всю ширину = растянуто.
   Делаем row: иконка+имя слева, компактная «Удалить» справа.
   Кнопки «Удалить»/«Сбросить ключ» в исходнике danger (text-error-300), но
   палитра-оверрайды глушили их в серый → возвращаем явный красный.
   ============================================================================ */
@media (max-width: 640px) {
  /* строка устройства: в ряд, не растягивать по вертикали */
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="flex-col"][class*="sm:flex-row"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }
  /* карточка устройства на всю ширину (иначе строка ~210px и имя режется) */
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"]:has(> div[class*="sm:flex-row"]) {
    width: 100% !important;
    display: block !important;
  }
  /* кнопка «Удалить» в строке — компактная, не на всю ширину */
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="sm:flex-row"] > button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 14px !important;
    font-size: 0.8125rem !important;
    flex: 0 0 auto !important;
  }
  /* левая группа (иконка + имя) забирает свободную ширину → имя не режется в «iPho…» */
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="sm:flex-row"] > div[class*="min-w-0"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* вернуть ширину имени: ужать горизонтальные паддинги вложенного списка/карточки */
  #root article[class*="rounded-3xl"] div[class*="space-y-3"][class*="p-5"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"]:has(> div[class*="sm:flex-row"]) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* иконка устройства чуть меньше — ещё немного места имени */
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="sm:flex-row"] [class*="h-12"][class*="w-12"] {
    height: 2.25rem !important;
    width: 2.25rem !important;
    flex: 0 0 2.25rem !important;
  }
}

/* Явный красный для destructive-кнопок (Удалить / Сбросить ключ) — на всех ширинах,
   чтобы не сливались с нейтральными (Скопировать / Очистить список). */
#root button[class*="border-error-500"][class*="text-error-"],
#root button[class*="bg-error-500/"][class*="text-error-"] {
  background: var(--color-danger-light) !important;
  border: 1px solid rgb(230 57 70 / 0.45) !important;
  color: #B11B28 !important;
  font-weight: 600 !important;
}
#root button[class*="border-error-500"][class*="text-error-"]:hover,
#root button[class*="bg-error-500/"][class*="text-error-"]:hover {
  background: #F8C2C7 !important;
  border-color: rgb(230 57 70 / 0.65) !important;
  color: #9F1D2A !important;
}