@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Fira+Code:wght@400;500;600;700&display=swap');:root {
  font-family: var(--t-font, system-ui, Avenir, Helvetica, Arial, sans-serif);
  line-height: 1.5;
  font-weight: 400;

  color: var(--t-text, rgba(255, 255, 255, 0.87));
  background-color: var(--t-bg, #181b20);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Глобальные ограничения для адаптивности */
html {
  margin: 0;
  padding: 0;
  min-width: 350px;
  box-sizing: border-box;
  overflow-x: auto;
}

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

a {
  font-weight: 500;
  color: var(--t-accent, #646cff);
  text-decoration: inherit;
}
a:hover {
  color: var(--t-accent-hover, #535bf2);
}

body {
  margin: 0;
  padding: 0;
  min-width: 350px;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: var(--t-radius, 8px);
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: var(--t-bg-tertiary, #1a1a1a);
  color: var(--t-text, #fff);
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: var(--t-accent, #646cff);
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

/* Form elements respect theme */
input, textarea, select {
  background-color: var(--t-input-bg, #23272e);
  color: var(--t-text, #fff);
  border-color: var(--t-input-border, #3a4150);
}

input::placeholder, textarea::placeholder {
  color: var(--t-text-muted, #6b7280);
  opacity: 1;
}

/* Override select option styling */
option {
  background-color: var(--t-bg-secondary, #23272e);
  color: var(--t-text, #fff);
}
/* Глобальные стили для адаптивности и центрирования */
#root {
  width: 100%;
  min-width: 350px;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Основные контейнеры */
.main-layout {
  width: 100%;
  min-width: 350px;
  max-width: 100vw;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

/* Контейнеры с максимальной шириной */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(10px, 3vw, 20px);
  box-sizing: border-box;
}

/* Адаптивные стили */
@media (max-width: 349px) {
  #root, .main-layout, .container {
    min-width: 350px !important;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 clamp(8px, 2vw, 16px);
  }
}

@media (min-width: 1201px) {
  .container {
    max-width: 1200px;
    width: 1200px;
  }
}

/* Предотвращение горизонтального скролла */
html, body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Стили карточек */
.card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Адаптивные изображения */
img {
  max-width: 100%;
  height: auto;
}

/* Адаптивные таблицы */
table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  table {
    font-size: 0.875rem;
  }
}
/* ════════════════════════════════════════════════════════════
   GLOBAL THEME SYSTEM
   3 themes: blue (default dark), matrix (hacker), light
   Performance toggles: no-animations, no-effects, reduced-motion
   ════════════════════════════════════════════════════════════ */

/* ────── BLUE THEME (default) — vibrant gradients & glows ────── */

:root,
[data-theme="blue"] {
  --t-bg:           linear-gradient(135deg, #0a1628 0%, #132040 50%, #1a2d52 100%);
  --t-bg-flat:      #0e1a30;
  --t-bg-secondary: linear-gradient(135deg, #0f1d36 0%, #162a4a 50%, #1c3358 100%);
  --t-bg-secondary-flat: #142540;
  --t-bg-tertiary:  #1e3450;
  --t-bg-hover:     rgba(79, 195, 247, 0.18);
  --t-surface:      rgba(10, 22, 46, 0.75);
  --t-card:         rgba(18, 32, 60, 0.75);

  --t-text:         #e8f0fe;
  --t-text-secondary: #90caf9;
  --t-text-muted:   #7da0c4;
  --t-text-heading: #ffffff;

  --t-accent:       #4fc3f7;
  --t-accent-hover: #81d4fa;
  --t-accent-rgb:   79, 195, 247;
  --t-primary:      #9c27b0;
  --t-primary-hover:#ba68c8;
  --t-primary-rgb:  156, 39, 176;

  --t-success:      #66bb6a;
  --t-error:        #ef5350;
  --t-warning:      #ffa726;

  --t-border:       rgba(79, 195, 247, 0.25);
  --t-border-light: rgba(79, 195, 247, 0.12);
  --t-divider:      rgba(79, 195, 247, 0.1);

  --t-btn-text:     #fff;
  --t-input-bg:     rgba(10, 22, 46, 0.6);
  --t-input-border: rgba(79, 195, 247, 0.3);

  --t-nav-bg:       linear-gradient(135deg, rgba(10, 20, 44, 0.97) 0%, rgba(18, 32, 60, 0.97) 100%);
  --t-nav-active:   linear-gradient(135deg, rgba(79, 195, 247, 0.12) 0%, rgba(156, 39, 176, 0.12) 100%);
  --t-nav-active-gradient: linear-gradient(135deg, #7c4dff 0%, #00b0ff 100%);
  --t-nav-admin-gradient: linear-gradient(135deg, #d32f2f 0%, #ff5252 100%);
  --t-nav-text:     #ffffff;
  --t-nav-muted:    rgba(230,237,243,0.5);

  --t-header-bg:    linear-gradient(135deg, #060e1f 0%, #0e1d3a 50%, #152b4e 100%);
  --t-footer-bg:    linear-gradient(135deg, #060e1f 0%, #0e1d3a 50%, #152b4e 100%);

  --t-font:         system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-font-mono:    'Fira Code', 'Cascadia Code', monospace;

  --t-radius:       12px;
  --t-radius-sm:    8px;
  --t-radius-lg:    20px;

  --t-shadow:       0 4px 24px rgba(0, 0, 0, 0.35), 0 0 8px rgba(79, 195, 247, 0.08);
  --t-shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.45), 0 0 15px rgba(79, 195, 247, 0.1);
  --t-glow:         0 0 15px rgba(79, 195, 247, 0.35);
  --t-glow-accent:  0 0 25px rgba(79, 195, 247, 0.5);
  --t-glow-primary: 0 0 25px rgba(156, 39, 176, 0.5);

  --t-blur:         blur(16px);
  --t-decorative:   radial-gradient(circle at 30% 20%, rgba(79, 195, 247, 0.06) 0%, transparent 50%),
                    radial-gradient(circle at 70% 80%, rgba(156, 39, 176, 0.04) 0%, transparent 50%);

  color-scheme: dark;
}

/* ────── MATRIX THEME ────── */

[data-theme="matrix"] {
  --t-bg:           #0a0a0a;
  --t-bg-flat:      #0a0a0a;
  --t-bg-secondary: #0d0d0d;
  --t-bg-secondary-flat: #0d0d0d;
  --t-bg-tertiary:  #111111;
  --t-bg-hover:     #1a1a1a;
  --t-surface:      #0d0d0d;
  --t-card:         #0d0d0d;

  --t-text:         #b0b0b0;
  --t-text-secondary: #00cc33;
  --t-text-muted:   #555555;
  --t-text-heading: #00ff41;

  --t-accent:       #00ff41;
  --t-accent-hover: #00cc33;
  --t-accent-rgb:   0, 255, 65;
  --t-primary:      #00cc33;
  --t-primary-hover:#00ff41;
  --t-primary-rgb:  0, 204, 51;

  --t-success:      #00ff41;
  --t-error:        #ff0040;
  --t-warning:      #ff9800;

  --t-border:       #1a3a1a;
  --t-border-light: #2a2a2a;
  --t-divider:      #1a1a1a;

  --t-btn-text:     #0a0a0a;
  --t-input-bg:     #111111;
  --t-input-border: #1a3a1a;

  --t-nav-bg:       #0a0a0a;
  --t-nav-active:   rgba(0, 255, 65, 0.08);
  --t-nav-active-gradient: none;
  --t-nav-admin-gradient: none;
  --t-nav-text:     #b0b0b0;
  --t-nav-muted:    #555555;

  --t-header-bg:    #050505;
  --t-footer-bg:    #050505;

  --t-font:         'Share Tech Mono', 'Fira Code', 'Courier New', monospace;
  --t-font-mono:    'Share Tech Mono', 'Fira Code', monospace;

  --t-radius:       2px;
  --t-radius-sm:    2px;
  --t-radius-lg:    2px;

  --t-shadow:       0 0 6px rgba(0, 255, 65, 0.08);
  --t-shadow-lg:    0 0 16px rgba(0, 255, 65, 0.12);
  --t-glow:         0 0 8px rgba(0, 255, 65, 0.15);
  --t-glow-accent:  0 0 12px rgba(0, 255, 65, 0.2);
  --t-glow-primary: 0 0 12px rgba(0, 204, 51, 0.2);

  --t-blur:         none;
  --t-decorative:   none;

  color-scheme: dark;
}

/* ────── LIGHT THEME ────── */

[data-theme="light"] {
  --t-bg:           #f5f5f5;
  --t-bg-flat:      #f5f5f5;
  --t-bg-secondary: #ffffff;
  --t-bg-secondary-flat: #ffffff;
  --t-bg-tertiary:  #e8e8e8;
  --t-bg-hover:     #eeeeee;
  --t-surface:      #ffffff;
  --t-card:         #ffffff;

  --t-text:         #1a1a1a;
  --t-text-secondary: #555555;
  --t-text-muted:   #888888;
  --t-text-heading: #111111;

  --t-accent:       #1976d2;
  --t-accent-hover: #1565c0;
  --t-accent-rgb:   25, 118, 210;
  --t-primary:      #1976d2;
  --t-primary-hover:#1565c0;
  --t-primary-rgb:  25, 118, 210;

  --t-success:      #2e7d32;
  --t-error:        #d32f2f;
  --t-warning:      #ed6c02;

  --t-border:       #d0d0d0;
  --t-border-light: #e0e0e0;
  --t-divider:      #e0e0e0;

  --t-btn-text:     #ffffff;
  --t-input-bg:     #ffffff;
  --t-input-border: #cccccc;

  --t-nav-bg:       #ffffff;
  --t-nav-active:   rgba(25, 118, 210, 0.08);
  --t-nav-active-gradient: none;
  --t-nav-admin-gradient: none;
  --t-nav-text:     #1a1a1a;
  --t-nav-muted:    #888888;

  --t-header-bg:    #ffffff;
  --t-footer-bg:    #fafafa;

  --t-font:         system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-font-mono:    'Fira Code', 'Cascadia Code', monospace;

  --t-radius:       8px;
  --t-radius-sm:    6px;
  --t-radius-lg:    12px;

  --t-shadow:       0 1px 4px rgba(0,0,0,0.08);
  --t-shadow-lg:    0 4px 16px rgba(0,0,0,0.1);
  --t-glow:         none;
  --t-glow-accent:  none;
  --t-glow-primary: none;

  --t-blur:         none;
  --t-decorative:   none;

  color-scheme: light;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL THEMED ELEMENTS
   ════════════════════════════════════════════════════════════ */

body {
  background: var(--t-bg-flat, var(--t-bg)) !important;
  color: var(--t-text) !important;
  font-family: var(--t-font) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
  color: var(--t-text-heading);
}

/* Links */

a {
  color: var(--t-accent);
}

a:hover {
  color: var(--t-accent-hover);
}

/* Inputs */

input, textarea, select {
  background-color: var(--t-input-bg) !important;
  color: var(--t-text) !important;
  border-color: var(--t-input-border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--t-text-muted) !important;
}

option {
  background-color: var(--t-bg-secondary);
  color: var(--t-text);
}

/* Buttons base */

button {
  font-family: var(--t-font);
}

/* Scrollbar */

::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-track { background: var(--t-bg); }

::-webkit-scrollbar-thumb { background: var(--t-border); border-radius: var(--t-radius-sm); }

::-webkit-scrollbar-thumb:hover { background: var(--t-accent); }

/* ════════════════════════════════════════════════════════════
   PERFORMANCE TOGGLES
   ════════════════════════════════════════════════════════════ */

/* Disable ALL animations */

.no-animations *,
.no-animations *::before,
.no-animations *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* Disable visual effects (shadows, blur, text-shadow, gradients on overlays) */

.no-effects * {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* Reduced motion (lighter than no-animations — keeps short transitions) */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* ── Blue theme glow effects (only with effects enabled) ── */

[data-theme="blue"]:not(.no-effects) h1,
[data-theme="blue"]:not(.no-effects) h2 {
  text-shadow: 0 0 15px rgba(79, 195, 247, 0.4), 0 0 30px rgba(79, 195, 247, 0.15), 0 2px 4px rgba(0,0,0,0.3);
}

[data-theme="blue"]:not(.no-effects) h3,
[data-theme="blue"]:not(.no-effects) h4 {
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.25), 0 0 20px rgba(79, 195, 247, 0.1);
}

[data-theme="blue"]:not(.no-effects) a:hover {
  text-shadow: 0 0 12px rgba(79, 195, 247, 0.5);
}

[data-theme="blue"]:not(.no-effects) button:hover {
  box-shadow: 0 0 20px rgba(79, 195, 247, 0.35), 0 4px 15px rgba(0,0,0,0.3) !important;
}

[data-theme="blue"]:not(.no-effects) input:focus,
[data-theme="blue"]:not(.no-effects) textarea:focus,
[data-theme="blue"]:not(.no-effects) select:focus {
  box-shadow: 0 0 15px rgba(79, 195, 247, 0.3), 0 0 4px rgba(79, 195, 247, 0.5) !important;
  border-color: rgba(79, 195, 247, 0.5) !important;
}

/* Blue theme accent line pulse */

@keyframes blue-accent-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

[data-theme="blue"]:not(.no-animations):not(.no-effects) .decorative-line {
  animation: blue-accent-pulse 3s ease-in-out infinite;
}

/* Matrix scan-line effect — only in matrix theme + effects enabled */

[data-theme="matrix"]:not(.no-effects) body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 65, 0.012) 0px,
    rgba(0, 255, 65, 0.012) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Matrix heading glow — only with effects */

[data-theme="matrix"]:not(.no-effects) h1,
[data-theme="matrix"]:not(.no-effects) h2,
[data-theme="matrix"]:not(.no-effects) h3 {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

/* Matrix font import */


/* ============================================================
   MATRIX THEME — Global Admin Panel Styles
   Colors: black backgrounds, Matrix green, red accents, gray/white text
   Font: "Share Tech Mono" for Matrix digital feel
   ============================================================ */
/* Google Fonts: Matrix-style monospace font */
/* ── CSS Custom Properties (Matrix palette) ── */
:root {
  --mx-black:       #0a0a0a;
  --mx-dark:        #0d0d0d;
  --mx-dark-2:      #111111;
  --mx-dark-3:      #161616;
  --mx-dark-4:      #1a1a1a;
  --mx-green:       #00ff41;
  --mx-green-dim:   #00cc33;
  --mx-green-dark:  #003b00;
  --mx-green-soft:  #00e639;
  --mx-red:         #ff0040;
  --mx-red-dim:     #cc0033;
  --mx-gray:        #808080;
  --mx-gray-light:  #aaaaaa;
  --mx-gray-dark:   #333333;
  --mx-white:       #e0e0e0;
  --mx-white-bright:#ffffff;
  --mx-border:      #1a3a1a;
  --mx-border-2:    #2a2a2a;
  --mx-glow:        rgba(0, 255, 65, 0.15);
  --mx-font:        'Share Tech Mono', 'Fira Code', 'Courier New', monospace;
  --mx-font-ui:     'Fira Code', 'Share Tech Mono', 'Courier New', monospace;
}
/* ── Admin Panel Root ── */
.admin-matrix {
  font-family: var(--mx-font-ui) !important;
  background: var(--mx-black) !important;
  color: var(--mx-white) !important;
  letter-spacing: 0.3px;
}
.admin-matrix * {
  font-family: var(--mx-font-ui) !important;
}
/* ── All Headings: uniform Matrix style ── */
.admin-matrix h1,
.admin-matrix h2,
.admin-matrix h3,
.admin-matrix h4,
.admin-matrix h5,
.admin-matrix h6 {
  font-family: var(--mx-font) !important;
  color: var(--mx-green) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400 !important;
  background: none !important;
  background-color: transparent !important;
  border: none;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}
.admin-matrix h1 { font-size: 1.6rem !important; }
.admin-matrix h2 { font-size: 1.3rem !important; }
.admin-matrix h3 { font-size: 1.1rem !important; letter-spacing: 1.5px; }
.admin-matrix h4 { font-size: 1rem !important; }
/* ── Tab Navigation ── */
.admin-matrix .admin-tabs {
  background: var(--mx-dark) !important;
  border-bottom: 1px solid var(--mx-border) !important;
  border-radius: 0 !important;
}
.admin-matrix .admin-tab {
  font-family: var(--mx-font) !important;
  color: var(--mx-gray) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px !important;
  transition: color 0.2s, border-color 0.2s;
  padding: 14px 20px !important;
}
.admin-matrix .admin-tab:hover {
  color: var(--mx-green-dim) !important;
}
.admin-matrix .admin-tab.active {
  color: var(--mx-green) !important;
  border-bottom: 2px solid var(--mx-green) !important;
  background: rgba(0, 255, 65, 0.05) !important;
}
/* ── Tab Content Area ── */
.admin-matrix .admin-content {
  background: var(--mx-black) !important;
  border-radius: 0 !important;
}
/* ── Cards & Sections ── */
.admin-matrix .mx-card,
.admin-matrix [class*="card"],
.admin-matrix [class*="panel"],
.admin-matrix [class*="section"] {
  border: 1px solid var(--mx-border) !important;
  border-radius: 2px !important;
}
/* ── Buttons ── */
.admin-matrix button {
  font-family: var(--mx-font) !important;
  letter-spacing: 0.5px;
  border-radius: 2px !important;
  text-transform: uppercase;
  font-size: 12px !important;
  transition: all 0.15s ease;
  color: var(--mx-white);
}
/* Green buttons need dark text for contrast */
.admin-matrix button[style*="00ff41"],
.admin-matrix button[style*="00cc33"],
.admin-matrix button[style*="BUTTON_SUCCESS"],
.admin-matrix .btn-success,
.admin-matrix .btn-primary {
  color: #0a0a0a !important;
}
.admin-matrix button:hover {
  opacity: 0.85;
}
/* ── Inputs ── */
.admin-matrix input,
.admin-matrix textarea,
.admin-matrix select {
  font-family: var(--mx-font) !important;
  background: var(--mx-dark-2) !important;
  border: 1px solid var(--mx-border) !important;
  color: var(--mx-green-dim) !important;
  border-radius: 2px !important;
  letter-spacing: 0.5px;
}
.admin-matrix input:focus,
.admin-matrix textarea:focus,
.admin-matrix select:focus {
  border-color: var(--mx-green-dark) !important;
  outline: none !important;
}
.admin-matrix input::placeholder,
.admin-matrix textarea::placeholder {
  color: var(--mx-gray-dark) !important;
  font-style: italic;
}
/* ── Tables & Lists ── */
.admin-matrix table {
  border-collapse: collapse;
}
.admin-matrix th {
  font-family: var(--mx-font) !important;
  color: var(--mx-green) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px !important;
  background: var(--mx-dark-2) !important;
  border-bottom: 1px solid var(--mx-border) !important;
}
.admin-matrix td {
  border-bottom: 1px solid var(--mx-dark-3) !important;
  color: var(--mx-gray-light) !important;
}
/* ── Scrollbar: Matrix style ── */
.admin-matrix ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.admin-matrix ::-webkit-scrollbar-track {
  background: var(--mx-dark);
}
.admin-matrix ::-webkit-scrollbar-thumb {
  background: var(--mx-green-dark);
  border-radius: 0;
}
.admin-matrix ::-webkit-scrollbar-thumb:hover {
  background: var(--mx-green-dim);
}
/* ── Badges / Tags ── */
.admin-matrix .mx-badge {
  font-family: var(--mx-font) !important;
  background: var(--mx-dark-3) !important;
  border: 1px solid var(--mx-border) !important;
  color: var(--mx-green) !important;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* ── Status indicators ── */
.admin-matrix .status-online { color: var(--mx-green) !important; }
.admin-matrix .status-offline { color: var(--mx-red) !important; }
.admin-matrix .status-warning { color: #ff9800 !important; }
.admin-matrix .status-muted { color: var(--mx-gray) !important; }
/* ── Matrix scan line effect (subtle) ── */
.admin-matrix::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 65, 0.015) 0px,
    rgba(0, 255, 65, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
}
/* ── Loading spinner override ── */
.admin-matrix .loading-spinner {
  border-color: var(--mx-green-dark) !important;
  border-top-color: var(--mx-green) !important;
}
/* ── Mobile responsive adjustments ── */
@media (max-width: 768px) {
  .admin-matrix .admin-tab {
    font-size: 10px !important;
    letter-spacing: 0.5px;
    padding: 10px 8px !important;
  }
  
  .admin-matrix h1 { font-size: 1.2rem !important; }
  .admin-matrix h2 { font-size: 1.1rem !important; }
  .admin-matrix h3 { font-size: 1rem !important; }
}
c /* DeviceSettingsModal styles */
.device-settings-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100vw !important;
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 20px 0 !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  background-color: transparent !important;
  animation: fadeIn 0.3s ease-out !important;
}

.device-settings-modal-content {
  position: relative !important;
  margin: 20px 0 !important;
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: fit-content !important;
  overflow: visible !important;
  filter: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.action-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform, box-shadow !important;
}

.action-button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.action-button:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98) !important;
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.action-button:disabled {
  animation: gentle-pulse 2s infinite !important;
}

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

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gentle-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 0.8; }
  100% { opacity: 0.6; }
}

@keyframes online-pulse {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { opacity: 1; box-shadow: 0 0 0 4px rgba(76, 175, 80, 0); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
/* src/styles/global.css */
html, body, #root {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background-color: var(--t-bg, #1e1e1e);
  color: var(--t-text, white);
  font-family: var(--t-font, Arial, sans-serif);
}

input, button {
  box-sizing: border-box;
}

/* Анимация загрузки для спиннера */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes radio-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes yt-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes radio-spin-reverse {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes yt-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.0);  border-color: rgba(139,92,246,0.55); }
  50%       { box-shadow: 0 0 14px 4px rgba(139,92,246,0.35); border-color: rgba(167,139,250,0.9); }
}