:root {
  /* Неоновая цветовая схема 80-х */
  --neon-pink: #ff00ff;
  --neon-blue: #00ffff;
  --neon-green: #00ff00;
  --neon-yellow: #ffff00;
  --neon-purple: #9d00ff;
  --black-light: #0a0a0a;
  --black-dark: #000000;
  --grid-color: rgba(255, 0, 255, 0.1);
  --text-glow: #ffffff;
  --card-bg: rgba(0, 0, 0, 0.7);
  --border-radius: 0;
  --shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

/* SVG background с сеткой и музыкальными элементами 80-х */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid80s' patternUnits='userSpaceOnUse' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23ff00ff' stroke-width='0.5' stroke-opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23000000'/%3E%3Crect width='100%25' height='100%25' fill='url(%23grid80s)'/%3E%3Cg fill='%2300ffff' fill-opacity='0.05'%3E%3C!-- Музыкальные ноты --%3E%3Cpath d='M100,100 L120,80 L140,100 L120,120 Z'/%3E%3Cpath d='M250,200 L270,180 L290,200 L270,220 Z'/%3E%3Ccircle cx='350' cy='300' r='15'/%3E%3Cpath d='M50,300 L70,280 L90,300 L70,320 Z'/%3E%3C/g%3E%3Cg stroke='%2300ff00' stroke-width='1' stroke-opacity='0.1' fill='none'%3E%3C!-- Электрические волны --%3E%3Cpath d='M50,150 Q150,100 250,150 T450,150'/%3E%3Cpath d='M100,250 Q200,200 300,250 T500,250'/%3E%3C/g%3E%3Ctext x='200' y='380' font-family='Courier' font-size='50' fill='%23ff00ff' fill-opacity='0.05' text-anchor='middle'%3E1980s%3C/text%3E%3C/svg%3E");
  background-size: 800px 800px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
}

/* Базовые стили */
body {
  font-family: 'Arial Black', 'Impact', 'Courier New', monospace;
  background-color: var(--black-dark);
  color: var(--text-glow);
  margin: 0;
  padding: 20px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Неоновое свечение для текста */
.neon-text {
  text-shadow: 
    0 0 5px var(--neon-pink),
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-pink),
    0 0 40px var(--neon-pink);
}

/* Контейнеры и карточки в стиле 80-х */
.toptable, .tablebg, .row1, .row2, .row3 {
  background: var(--card-bg);
  border: 2px solid var(--neon-pink);
  border-radius: var(--border-radius);
  box-shadow: 
    var(--shadow),
    inset 0 0 20px rgba(255, 0, 255, 0.2);
  padding: 15px;
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.toptable::before, .tablebg::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    var(--neon-pink),
    var(--neon-blue),
    var(--neon-green),
    var(--neon-yellow),
    var(--neon-purple)
  );
  z-index: -1;
  filter: blur(10px);
  opacity: 0.5;
  animation: neon-border 4s linear infinite;
}

@keyframes neon-border {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.toptable:hover, .tablebg:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 0 25px var(--neon-blue),
    0 0 50px var(--neon-purple);
}

/* Заголовки */
th, td.th {
  background: linear-gradient(
    45deg,
    var(--black-dark),
    var(--neon-purple),
    var(--black-dark)
  );
  color: white;
  font-weight: bold;
  border: 1px solid var(--neon-blue);
  padding: 15px;
  text-align: center;
  text-shadow: 
    0 0 10px var(--neon-blue),
    0 0 20px var(--neon-blue);
  position: relative;
  overflow: hidden;
}

th::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Ссылки */
a {
  color: var(--neon-green);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

a:hover {
  color: var(--neon-yellow);
  text-shadow: 
    0 0 5px var(--neon-yellow),
    0 0 10px var(--neon-yellow);
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--neon-pink);
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

/* Кнопки */
input.button, input.mainoption {
  background: linear-gradient(
    45deg,
    var(--neon-pink),
    var(--neon-purple),
    var(--neon-pink)
  );
  color: white;
  border: 2px solid var(--neon-blue);
  padding: 12px 24px;
  border-radius: 0;
  cursor: pointer;
  font-family: 'Arial Black', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

input.button:hover {
  background: linear-gradient(
    45deg,
    var(--neon-blue),
    var(--neon-green),
    var(--neon-blue)
  );
  border-color: var(--neon-yellow);
  transform: scale(1.05);
  box-shadow: 
    0 0 20px var(--neon-blue),
    0 0 40px var(--neon-green);
}

/* Посты */
.postbody {
  font-size: 14px;
  line-height: 1.6;
  margin: 15px 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-left: 3px solid var(--neon-pink);
}

.quote, .code {
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid var(--neon-green);
  padding: 15px;
  margin: 15px 0;
  position: relative;
}

.quote::before {
  content: '🎸';
  position: absolute;
  left: -20px;
  top: -10px;
  font-size: 24px;
}

.code {
  border-color: var(--neon-blue);
  font-family: 'Courier New', monospace;
  color: var(--neon-green);
}

.code::before {
  content: '💾';
  position: absolute;
  left: -20px;
  top: -10px;
  font-size: 24px;
}

/* Адаптивность */
@media (max-width: 768px) {
  body {
    padding: 10px;
    font-size: 12px;
  }
  
  th, td {
    padding: 10px;
    font-size: 12px;
  }
  
  input.button, input.mainoption {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Анимация загрузки (кассетная лента) */
#cssbar-wrapper {
  background: var(--black-dark);
  border: 2px solid var(--neon-pink);
  padding: 5px;
}

#cssbar-border {
  border: 2px solid var(--neon-blue);
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    var(--neon-pink) 10px,
    var(--neon-pink) 20px
  );
}

#cssbar-line {
  background: linear-gradient(
    90deg,
    transparent,
    var(--neon-green),
    var(--neon-blue),
    var(--neon-purple),
    transparent
  );
  animation: tape-roll 2s linear infinite;
}

@keyframes tape-roll {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Аватарки в стиле 80-х */
.guestavatar {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    45deg,
    var(--neon-pink),
    var(--neon-blue),
    var(--neon-green)
  );
  color: var(--black-dark);
  font-size: 48px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 3px solid var(--neon-yellow);
  box-shadow: 
    0 0 15px var(--neon-pink),
    0 0 30px var(--neon-blue);
  position: relative;
}

.guestavatar::before {
  content: '🎵';
  position: absolute;
  font-size: 20px;
  top: -10px;
  right: -10px;
}

/* Бейджи музыкальных жанров 80-х */
.music-badge {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 5px 5px 0;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  background: var(--black-dark);
}

.badge-synthpop { color: var(--neon-pink); border-color: var(--neon-pink); }
.badge-new-wave { color: var(--neon-blue); border-color: var(--neon-blue); }
.badge-hair-metal { color: var(--neon-yellow); border-color: var(--neon-yellow); }
.badge-hiphop { color: var(--neon-green); border-color: var(--neon-green); }
.badge-disco { color: var(--neon-purple); border-color: var(--neon-purple); }
.badge-rock { color: #ff0000; border-color: #ff0000; }

/* Иконки для разделов */
[class*="synthpop"]::before { content: '🎹 '; }
[class*="newwave"]::before { content: '👨‍🎤 '; }
[class*="metal"]::before { content: '🎸 '; }
[class*="disco"]::before { content: '🕺 '; }
[class*="hiphop"]::before { content: '🎤 '; }
[class*="concerts"]::before { content: '🎪 '; }
[class*="vinyl"]::before { content: '💿 '; }
[class*="cassette"]::before { content: '📼 '; }

/* Анимированные элементы интерфейса */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.blinking {
  animation: blink 1s infinite;
}

/* Визуализатор звука */
.equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 30px;
  margin: 10px 0;
}

.equalizer-bar {
  width: 4px;
  margin: 0 2px;
  background: var(--neon-pink);
  animation: equalize 1.5s ease-in-out infinite;
}

.equalizer-bar:nth-child(2) { animation-delay: 0.1s; background: var(--neon-blue); }
.equalizer-bar:nth-child(3) { animation-delay: 0.2s; background: var(--neon-green); }
.equalizer-bar:nth-child(4) { animation-delay: 0.3s; background: var(--neon-yellow); }
.equalizer-bar:nth-child(5) { animation-delay: 0.4s; background: var(--neon-purple); }

@keyframes equalize {
  0%, 100% { height: 5px; }
  50% { height: 30px; }
}

/* Стиль для цитат известных музыкантов */
.artist-quote {
  background: linear-gradient(
    45deg,
    rgba(255, 0, 255, 0.1),
    rgba(0, 255, 255, 0.1)
  );
  border-left: 5px solid var(--neon-yellow);
  padding: 20px;
  margin: 20px 0;
  font-style: italic;
  position: relative;
}

.artist-quote::before {
  content: '"';
  font-size: 60px;
  color: var(--neon-pink);
  position: absolute;
  left: 10px;
  top: 10px;
  opacity: 0.3;
}

.artist-quote::after {
  content: '"';
  font-size: 60px;
  color: var(--neon-pink);
  position: absolute;
  right: 10px;
  bottom: 10px;
  opacity: 0.3;
}

/* Счетчик как на старом дисплее */
.retro-counter {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--neon-green);
  background: var(--black-dark);
  padding: 5px 10px;
  border: 2px solid var(--neon-blue);
  display: inline-block;
  margin: 5px;
  text-shadow: 0 0 5px var(--neon-green);
}

/* Копирайт в стиле 80-х */
.copyright {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--neon-blue);
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  border-top: 2px solid var(--neon-purple);
  text-shadow: 0 0 5px var(--neon-blue);
}

.copyright::before {
  content: '© 1984-1989 ';
  color: var(--neon-pink);
}