<!-- КИБЕРПАНК ПЛЕЕР: СТИЛИ CSS -->


 /* Изоляция стилей от глобального шаблона сайта */
  .cyber-player-wrapper,
  .cyber-player-wrapper ~ div,
  .cyber-player-wrapper * { 
    box-sizing: border-box; 
    font-family: 'Orbitron', 'Segoe UI', Arial, sans-serif !important;
  }
 
   /* Измените этот блок в вашем CSS на странице */
  .cyber-player-wrapper {
    width: 100%;
    max-width: 950px;
    margin: 5px auto;
    display: block;
    position: relative;
    
    /* ФИКС: Делаем выступающую чёрную подложку тонкой — ровно 6 пикселей */
    padding: 6px !important; 
    background: #000000 !important; /* Наглухо красим эту тонкую рамочку в чёрный */
    border: none !important;
  }



  /* Анимации неона, синей пульсации и 3D-эффекта дрожания (глэтч) */
  @keyframes synchronizedNeon {
    0% {
      border-color: #00f0ff;
      color: #00f0ff;
      text-shadow: 0 0 5px #00f0ff;
      box-shadow: 0 0 10px #00f0ff, inset 0 0 5px rgba(0, 240, 255, 0.2);
    }
    50% {
      border-color: #00ff66;
      color: #00ff66;
      text-shadow: 0 0 8px #00ff66;
      box-shadow: 0 0 15px #00ff66, inset 0 0 8px rgba(0, 255, 102, 0.3);
    }
    100% {
      border-color: #00f0ff;
      color: #00f0ff;
      text-shadow: 0 0 5px #00f0ff;
      box-shadow: 0 0 10px #00f0ff, inset 0 0 5px rgba(0, 240, 255, 0.2);
    }
  }

  @keyframes activeHeavyBluePulse {
    0% {
      color: #0055ff;
      border-color: #0044ee;
      text-shadow: 0 0 4px rgba(0, 85, 255, 0.6); 
      box-shadow: 0 0 8px rgba(0, 68, 238, 0.5), inset 0 0 4px rgba(0, 68, 238, 0.3);
    }
    50% {
      color: #0033cc;
      border-color: #0022aa;
      text-shadow: 0 0 2px rgba(0, 51, 204, 0.4);
      box-shadow: 0 0 5px rgba(0, 34, 170, 0.3), inset 0 0 2px rgba(0, 34, 170, 0.2);
    }
    100% {
      color: #0055ff;
      border-color: #0044ee;
      text-shadow: 0 0 4px rgba(0, 85, 255, 0.6);
      box-shadow: 0 0 8px rgba(0, 68, 238, 0.5), inset 0 0 4px rgba(0, 68, 238, 0.3);
    }
  }

  @keyframes cyberMatrixJitter {
    0% { transform: translate(1.5px, -1px); }
    15% { transform: translate(-2px, 1.5px); }
    30% { transform: translate(2px, -2px); }
    45% { transform: translate(-1.5px, 2px); }
    60% { transform: translate(2.5px, -1px); }
    75% { transform: translate(-2px, -1.5px); }
    90% { transform: translate(1px, 2px); }
    100% { transform: translate(0, 0); }
  }

  /* Верхняя основная панель, Кнопки управления и Системный лейбл */
  .cyber-bar-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000000 !important;
    border: 2px solid #00f0ff;
    padding: 8px 20px;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 100;
    animation: synchronizedNeon 6s infinite ease-in-out;
  }

  .bar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .bar-btn {
    background: transparent !important;
    border: 1px solid currentColor;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    cursor: pointer;
    text-transform: uppercase;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease, border-color 0.2s ease;
  }

  #bar-play { font-weight: 900; padding: 4px 16px; }

  .bar-btn:hover {
    animation: cyberMatrixJitter 0.12s infinite steps(1) !important;
    background: rgba(0, 240, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: #00f0ff !important;
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff !important;
    box-shadow: 0 0 20px #00f0ff, inset 0 0 10px rgba(0, 240, 255, 0.5) !important;
  }

  .bar-btn.loop-active {
    color: #00ff66 !important;
    border-color: #00ff66 !important;
    background: rgba(0, 255, 102, 0.1) !important;
    text-shadow: 0 0 10px #00ff66 !important;
    box-shadow: 0 0 12px #00ff66, inset 0 0 4px rgba(0, 255, 102, 0.4) !important;
  }
 
  .bar-btn.loop-active:hover {
    animation: cyberMatrixJitter 0.12s infinite steps(1) !important;
    background: rgba(0, 255, 102, 0.25) !important;
    color: #ffffff !important;
    border-color: #00ff66 !important;
    text-shadow: 0 0 10px #00ff66, 0 0 20px #00ff66 !important;
    box-shadow: 0 0 20px #00ff66, inset 0 0 10px rgba(0, 255, 102, 0.6) !important;
  }

  .bar-btn:active { transform: scale(0.95); }

  .cyber-sys-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-left: 15px;
    white-space: nowrap;
    user-select: none;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid transparent;
    color: #44444d;
    background: transparent !important;
  }

   /* === ОБЪЕДИНЯЕМ НАСТРОЙКИ В ОДИН БЛОК === */
  /* Теперь обе надписи имеют абсолютно одинаковые параметры, шрифты и скорость */
  .cyber-sys-label.sys-active,
  .decryption-status-label {
    animation: activeHeavyBluePulse 5s infinite ease-in-out !important;
  }


  /* Интерактивный таймлайн дорожки и выезжающий текстовый терминал */
  .bar-progress-block {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin-left: 20px;
    gap: 10px;
  }

  .bar-time {
    font-size: 10px;
    color: #666677;
    min-width: 35px;
    text-align: center;
    line-height: 1;
  }

  .bar-progress-container {
    background: #111115;
    border: 1px solid #222233;
    height: 6px;
    flex-grow: 1;
    cursor: pointer;
    position: relative;
  }

  .bar-progress-bar {
    background: linear-gradient(90deg, #00f0ff, #00ff66);
    width: 0%;
    height: 100%;
    box-shadow: 0 0 8px #00ff66;
    transition: width 0.1s linear;
  }

  .cyber-sub-bar {
    width: 96%;
    margin: 0 auto;
    height: 0px; 
    background: #050508 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    overflow: hidden;
    position: relative;
    z-index: 50;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top: none;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cyber-sub-bar.sub-active {
    height: 52px;
    animation: synchronizedNeon 6s infinite ease-in-out;
  }

  .decryption-center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    text-align: center;
    gap: 4px;
    padding: 0 10px;
    overflow: hidden;
    color: inherit;
  }

  .sub-btn {
    height: 26px;
    padding: 0 10px;
    font-size: 9px;
    flex-shrink: 0;
  }

  /* ========================================================================
     ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ВЫЕЗЖАЮЩЕЙ СТРОКИ
     ======================================================================== */
  
  /* Верхняя строка: Синий цвет, синий неон и медленная пульсация (12 секунд) */
  .decryption-status-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    user-select: none;
    
    /* Принудительно включаем синюю пульсацию, как у AUDIO_STREAM.SYS */
  /*  animation: activeHeavyBluePulse 6s infinite ease-in-out !important;*/
  }

  /* Нижняя строка: имя трека остается в общем ядовитом стиле (зелено-бирюзовый неон) */
  .decryption-status-filename {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
    
    /* Возвращаем этой строке общую синхронную анимацию плеера */
    animation: synchronizedNeon 6s infinite ease-in-out !important;
  }

  /* ========================================================================
     ОРАНЖЕВАЯ ТРЕВОГА ПРИ БУФЕРИЗАЦИИ (ЗАГРУЗКЕ) ТРЕКА
     ======================================================================== */
  
  /* Анимация плавного оранжевого мерцания бортового компьютера */
  @keyframes activeHeavyOrangePulse {
    0% {
      color: #ff5500;
      border-color: #dd4400;
      text-shadow: 0 0 5px #ff5500; 
      box-shadow: 0 0 8px rgba(255, 85, 0, 0.4), inset 0 0 4px rgba(255, 85, 0, 0.2);
    }
    50% {
      color: #cc3300;
      border-color: #aa2200;
      text-shadow: 0 0 2px rgba(204, 51, 0, 0.5);
      box-shadow: 0 0 4px rgba(170, 34, 0, 0.3), inset 0 0 2px rgba(170, 34, 0, 0.1);
    }
    100% {
      color: #ff5500;
      border-color: #dd4400;
      text-shadow: 0 0 5px #ff5500;
      box-shadow: 0 0 8px rgba(255, 85, 0, 0.4), inset 0 0 4px rgba(255, 85, 0, 0.2);
    }
  }

  /* Класс, который JavaScript временно включит индикатору во время загрузки */
  .cyber-sys-label.sys-loading {
    animation: activeHeavyOrangePulse 2s infinite ease-in-out !important; /* Быстрая пульсация 2 секунды */
    padding: 4px 16px !important; /* Немного расширяем рамку под длинный текст */
  }
  /* ========================================================================
     СТИЛЬ ДЛЯ ОРАНЖЕВОЙ ПЕЧАТИ СТРОКИ ДЕШИФРОВКИ
     ======================================================================== */
  
  /* Этот класс JavaScript временно повесит на строку, пока буквы печатаются */
  .decryption-status-label.typing-orange {
    animation: none !important; /* Отключаем синюю пульсацию на время печати */
    color: #ff5500 !important;   /* Ядовито-оранжевый цвет букв */
    text-shadow: 0 0 8px #ff5500, 0 0 15px #ff5500 !important; /* Мощный оранжевый неон */
  }