:root {
  /* Матричная цветовая схема */
  --matrix-green: #00ff00;
  --matrix-dark-green: #00cc00;
  --matrix-bright-green: #33ff33;
  --matrix-black: #000000;
  --matrix-dark-gray: #0a0a0a;
  --matrix-gray: #1a1a1a;
  --matrix-light-gray: #333333;
  --matrix-text: #ffffff;
  --matrix-accent: #00ffff;
  --matrix-red: #ff0033;
}

/* SVG background в виде матричного кода */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='matrix' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='rotate(0)'%3E%3Crect width='40' height='40' fill='%23000000'/%3E%3Cg font-family='Courier' font-size='16' fill='%23003300'%3E%3Ctext x='5' y='15'%3E0%3C/text%3E%3Ctext x='25' y='35'%3E1%3C/text%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23matrix)'/%3E%3Cg font-family='Courier' font-size='18' fill='%2300ff00' opacity='0.1'%3E%3C!-- Матричный дождь кода --%3E%3Ctext x='50' y='100'%3E10101010%3C/text%3E%3Ctext x='200' y='250'%3E01100110%3C/text%3E%3Ctext x='400' y='400'%3E11001100%3C/text%3E%3Ctext x='600' y='150'%3E00110011%3C/text%3E%3Ctext x='300' y='500'%3E01010101%3C/text%3E%3C/g%3E%3Cg stroke='%2300cc00' stroke-width='0.5' stroke-opacity='0.05' fill='none'%3E%3C!-- Сетка --%3E%3Cpath d='M0,0 L800,600'/%3E%3Cpath d='M800,0 L0,600'/%3E%3Cpath d='M400,0 L400,600'/%3E%3Cpath d='M0,300 L800,300'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1600px 1200px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
}

body {
  scrollbar-3dlight-color: var(--matrix-light-gray);
  scrollbar-arrow-color: var(--matrix-green);
  scrollbar-darkshadow-color: var(--matrix-dark-gray);
  scrollbar-face-color: var(--matrix-gray);
  scrollbar-highlight-color: var(--matrix-text);
  scrollbar-shadow-color: var(--matrix-gray);
  scrollbar-track-color: var(--matrix-dark-gray);
  background-color: var(--matrix-black);
  color: var(--matrix-text);
  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Анимация мерцания как в терминале */
@keyframes terminal-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    transparent 95%,
    rgba(0, 255, 0, 0.1) 100%
  );
  pointer-events: none;
  z-index: 1000;
  animation: terminal-blink 2s infinite;
}

font, th, td, p {
  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
  font-size: 14px;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

a:link, a:active, a:visited {
  color: var(--matrix-green);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

a:hover {
  color: var(--matrix-accent);
  text-decoration: none;
}

a:hover::after {
  content: ']';
  position: absolute;
  right: -10px;
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--matrix-green),
    transparent
  );
  margin: 20px 0;
}

.forumline {
  font-size: none;
  border: 2px solid var(--matrix-green);
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
  margin: 15px 0;
  padding: 15px;
  position: relative;
  overflow: hidden;
}

.forumline::before {
  content: '>';
  position: absolute;
  left: 5px;
  top: 5px;
  color: var(--matrix-green);
  font-weight: bold;
}

td.row1, td.row2, td.row3 {
  background-color: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(0, 255, 0, 0.2);
  padding: 12px;
  transition: all 0.3s ease;
  position: relative;
}

td.row1:hover, td.row2:hover, td.row3:hover {
  background-color: rgba(0, 255, 0, 0.1);
  border-color: var(--matrix-green);
  transform: translateX(5px);
}

td.rowpic {
  background: linear-gradient(
    90deg,
    rgba(0, 255, 0, 0.2),
    transparent
  );
  border-right: 3px solid var(--matrix-green);
  position: relative;
}

td.rowpic::before {
  content: '💻';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

th, th.thHead, th.thSides, th.thTop, th.thLeft, th.thRight, th.thBottom, th.thCornerL, th.thCornerR {
  color: var(--matrix-black);
  font-weight: bold;
  font-size: 14px;
  background: linear-gradient(
    135deg,
    var(--matrix-green),
    var(--matrix-dark-green),
    var(--matrix-green)
  );
  height: 30px;
  padding: 0 15px;
  border: 2px outset var(--matrix-light-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

th::before {
  content: '$';
  position: absolute;
  left: 10px;
  color: var(--matrix-black);
  font-weight: bold;
}

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 0, 0.3),
    rgba(0, 204, 0, 0.3)
  );
  height: 32px;
  padding: 0 15px;
  border: 1px solid var(--matrix-green);
  color: var(--matrix-text);
  font-weight: bold;
}

td.catHead {
  font-size: 14px;
}

td.row3Right, td.spaceRow {
  background-color: rgba(51, 51, 51, 0.8);
  border: 1px solid rgba(0, 255, 0, 0.3);
}

.maintitle, h1, h2, h3 {
  color: var(--matrix-green);
  font-weight: bold;
  font-size: 24px;
  font-family: 'Courier New', 'Monaco', monospace;
  text-decoration: none;
  margin: 25px 0 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--matrix-green);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px var(--matrix-green);
  position: relative;
}

.maintitle::before, h1::before, h2::before, h3::before {
  content: '~/';
  color: var(--matrix-accent);
  margin-right: 10px;
}

h2 {
  font-size: 20px;
  border-left: 5px solid var(--matrix-green);
  padding-left: 15px;
  border-bottom: none;
}

h3 {
  font-size: 18px;
  color: var(--matrix-accent);
}

.gen, .genmed, .gensmall {
  color: var(--matrix-text);
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.3);
}

.gen { font-size: 14px; }
.genmed { font-size: 13px; }
.gensmall { font-size: 12px; }

a.gen, a.genmed, a.gensmall {
  color: var(--matrix-bright-green);
  text-decoration: none;
}

a.gen:hover, a.genmed:hover, a.gensmall:hover {
  color: var(--matrix-accent);
}

.mainmenu {
  font-size: 16px;
  color: var(--matrix-green);
}

a.mainmenu {
  color: var(--matrix-accent);
}

a.mainmenu:hover {
  color: var(--matrix-green);
}

.cattitle {
  color: var(--matrix-green);
  font-weight: bold;
  font-size: 15px;
}

a.cattitle {
  color: var(--matrix-bright-green);
}

a.cattitle:hover {
  color: var(--matrix-accent);
}

.forumlink {
  color: var(--matrix-accent);
  font-weight: bold;
  font-size: 15px;
}

a.forumlink {
  color: var(--matrix-green);
}

a.forumlink:hover {
  color: var(--matrix-bright-green);
}

.nav {
  color: var(--matrix-text);
  font-weight: bold;
  font-size: 13px;
  background-color: rgba(0, 255, 0, 0.1);
  padding: 8px 12px;
  border-left: 3px solid var(--matrix-green);
  margin: 10px 0;
  display: inline-block;
}

a.nav {
  color: var(--matrix-bright-green);
}

a.nav:hover {
  color: var(--matrix-accent);
}

.topictitle {
  color: var(--matrix-accent);
  font-weight: bold;
  font-size: 14px;
}

a.topictitle:link, a.topictitle:visited {
  color: var(--matrix-bright-green);
}

a.topictitle:hover {
  color: var(--matrix-green);
}

.name {
  color: var(--matrix-green);
  font-size: 14px;
  font-weight: bold;
}

.name::before {
  content: '👤 ';
}

.postdetails {
  color: var(--matrix-light-gray);
  font-size: 11px;
  font-style: italic;
}

.postbody {
  font-size: 14px;
  line-height: 1.6;
  background-color: rgba(26, 26, 26, 0.8);
  padding: 20px;
  border: 1px solid rgba(0, 255, 0, 0.3);
  margin: 15px 0;
  position: relative;
}

.postbody::before {
  content: '>>>';
  position: absolute;
  left: -20px;
  top: 10px;
  color: var(--matrix-green);
  font-weight: bold;
}

a.postlink:link, a.postlink:visited {
  color: var(--matrix-bright-green);
}

a.postlink:hover {
  color: var(--matrix-accent);
}

.code {
  color: var(--matrix-green);
  font-size: 13px;
  font-family: 'Courier New', 'Consolas', monospace;
  border: 2px solid var(--matrix-green);
  background-color: rgba(0, 0, 0, 0.9);
  padding: 20px;
  margin: 20px 0;
  overflow-x: auto;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.code::before {
  content: '📁 script.js';
  display: block;
  font: bold 12px 'Courier New', monospace;
  color: var(--matrix-accent);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--matrix-green);
}

.code .keyword { color: #ff79c6; }
.code .string { color: #f1fa8c; }
.code .comment { color: #6272a4; }
.code .function { color: #50fa7b; }
.code .number { color: #bd93f9; }

.quote {
  color: var(--matrix-text);
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Courier New', monospace;
  border: 2px solid var(--matrix-accent);
  background-color: rgba(0, 255, 255, 0.1);
  padding: 20px;
  margin: 20px 0;
  border-left: 5px solid var(--matrix-accent);
  position: relative;
}

.quote::before {
  content: '💬';
  position: absolute;
  left: -15px;
  top: -15px;
  background: var(--matrix-black);
  border: 2px solid var(--matrix-accent);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.copyright {
  color: var(--matrix-light-gray);
  font-size: 12px;
  font-family: 'Courier New', monospace;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  border-top: 1px solid var(--matrix-green);
}

a.copyright {
  color: var(--matrix-green);
}

a.copyright:hover {
  color: var(--matrix-accent);
}

input, textarea, select {
  color: var(--matrix-green);
  font: bold 13px 'Courier New', monospace;
  border: 2px solid var(--matrix-green);
  background-color: var(--matrix-black);
  padding: 10px 12px;
  margin: 5px 0;
  transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--matrix-accent);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

input.post, textarea.post, select {
  background-color: var(--matrix-black);
  color: var(--matrix-green);
}

input {
  text-indent: 2px;
}

input.button, input.mainoption, input.liteoption {
  color: var(--matrix-black);
  font-size: 13px;
  font-family: 'Courier New', monospace;
  background: linear-gradient(
    135deg,
    var(--matrix-green),
    var(--matrix-dark-green)
  );
  border: 2px outset var(--matrix-light-gray);
  padding: 12px 24px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

input.button:hover, input.mainoption:hover, input.liteoption:hover {
  background: linear-gradient(
    135deg,
    var(--matrix-accent),
    #00cccc
  );
  color: var(--matrix-black);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

input.mainoption {
  font-weight: bold;
}

input.liteoption {
  font-weight: normal;
}

.helpline {
  background-color: rgba(0, 255, 0, 0.1);
  border: 1px solid var(--matrix-green);
}

/* Пагинация */
.pgbutt a {
  font-family: 'Courier New', monospace;
  padding-top: 2px;
  padding-bottom: 2px;
  text-decoration: none;
  border: 1px solid var(--matrix-green);
  padding: 8px 12px;
  margin: 5px 1px 0 0;
  border-radius: 0;
  background-color: rgba(0, 255, 0, 0.1);
  color: var(--matrix-green);
  transition: all 0.3s ease;
}

.pgbutt a:hover {
  border: 1px solid var(--matrix-accent);
  background-color: rgba(0, 255, 255, 0.2);
  color: var(--matrix-accent);
  transform: translateY(-2px);
}

/* QR-код */
#qr img {
  width: 35px;
  height: 35px;
  position: fixed;
  right: 15px;
  top: 15px;
  border: 2px solid var(--matrix-green);
  padding: 3px;
  background-color: var(--matrix-black);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  transition: all 0.3s ease;
  z-index: 1000;
}

#qr img:hover {
  width: 200px;
  height: 200px;
  border-color: var(--matrix-accent);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}

/* Аватар для гостей */
.guestavatar {
  width: 120px;
  height: 120px;
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--matrix-green),
    var(--matrix-black),
    var(--matrix-green)
  );
  color: var(--matrix-black);
  font-size: 50px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 3px solid var(--matrix-green);
  position: relative;
  overflow: hidden;
}

.guestavatar::before {
  content: '👨‍💻';
  position: absolute;
  font-size: 40px;
}

/* Меню администрации */
#nav8, #nav8 ul, #nav8 li {
  margin: 0;
  padding: 0;
  border: 0;
}

#nav8, #nav8 ul {
  background: rgba(0, 255, 0, 0.1);
}

#nav8 {
  border-spacing: 0;
  position: relative;
  z-index: 50;
  width: 100%;
  border: 2px solid var(--matrix-green);
}

#nav8 ul {
  position: absolute;
  display: none;
  background: var(--matrix-black);
  border: 2px solid var(--matrix-green);
  overflow: hidden;
}

#nav8 td:hover ul {
  display: block;
}

#nav8 ul li {
  list-style: none;
}

#nav8 a {
  display: block;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--matrix-green);
  font-weight: bold;
  transition: all 0.2s ease;
}

#nav8 ul a {
  padding: 10px 15px;
  text-align: left;
}

#nav8 td:hover, #nav8 li:hover {
  background: rgba(0, 255, 0, 0.2);
}

#nav8 td:hover a, #nav8 li:hover a {
  color: var(--matrix-accent);
}

/* Индикатор загрузки */
#cssbar-wrapper {
  width: 300px;
  height: 19px;
  position: absolute;
  left: 50%;
}

#cssbar-border {
  border: 3px solid var(--matrix-green);
  height: 100%;
  width: 100%;
  position: relative;
  left: -50%;
  top: -50%;
  padding: 4px 3px;
  background-color: var(--matrix-black);
}

#cssbar-whitespace {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#cssbar-line {
  background: linear-gradient(
    90deg,
    transparent,
    var(--matrix-green),
    var(--matrix-accent),
    var(--matrix-green),
    transparent
  );
  position: absolute;
  height: 100%;
  width: 100%;
  animation: matrix-flow 4s linear infinite;
}

@keyframes matrix-flow {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Бейджи языков программирования */
.code-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 0;
  font: bold 12px 'Courier New', monospace;
  margin-left: 8px;
  border: 1px solid;
  background-color: var(--matrix-black);
}

.badge-js { color: #f0db4f; border-color: #f0db4f; }
.badge-python { color: #306998; border-color: #306998; }
.badge-java { color: #007396; border-color: #007396; }
.badge-cpp { color: #00599c; border-color: #00599c; }
.badge-php { color: #777bb4; border-color: #777bb4; }
.badge-ruby { color: #cc342d; border-color: #cc342d; }
.badge-go { color: #00add8; border-color: #00add8; }
.badge-rust { color: #dea584; border-color: #dea584; }

/* Иконки для разделов */
[class*="javascript"]::before { content: '🟨 '; }
[class*="python"]::before { content: '🐍 '; }
[class*="java"]::before { content: '☕ '; }
[class*="c++"]::before { content: '⚙️ '; }
[class*="web"]::before { content: '🌐 '; }
[class*="mobile"]::before { content: '📱 '; }
[class*="database"]::before { content: '🗄️ '; }
[class*="algorithm"]::before { content: '🧮 '; }

/* Адаптивность */
@media (max-width: 768px) {
  body {
    padding: 10px;
    font-size: 13px;
  }
  
  .maintitle, h1, h2, h3 {
    font-size: 20px;
  }
  
  h2 {
    font-size: 18px;
  }
  
  .forumline {
    padding: 10px;
    margin: 10px 0;
  }
  
  th, td.cat, td.catHead, td.catBottom {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  #qr img {
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
  }
  
  .guestavatar {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }
}

/* Эффект матричного дождя для заголовков */
@keyframes matrix-rain {
  0% { text-shadow: 0 0 10px var(--matrix-green); }
  50% { text-shadow: 0 0 20px var(--matrix-bright-green), 0 0 30px var(--matrix-green); }
  100% { text-shadow: 0 0 10px var(--matrix-green); }
}

.matrix-title {
  animation: matrix-rain 3s infinite;
}

/* Консольный курсор */
.cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background-color: var(--matrix-green);
  animation: cursor-blink 1s infinite;
  margin-left: 2px;
}

/* Стиль для ошибок */
.error {
  color: var(--matrix-red);
  border-left: 5px solid var(--matrix-red);
  padding-left: 15px;
  background-color: rgba(255, 0, 51, 0.1);
}

/* Стиль для успешных операций */
.success {
  color: var(--matrix-green);
  border-left: 5px solid var(--matrix-green);
  padding-left: 15px;
  background-color: rgba(0, 255, 0, 0.1);
}

/* Счетчик как в терминале */
.terminal-counter {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--matrix-green);
  background-color: var(--matrix-black);
  padding: 5px 10px;
  border: 1px solid var(--matrix-green);
  display: inline-block;
  margin: 5px;
}

.terminal-counter::before {
  content: '$ ';
  color: var(--matrix-accent);
}