:root {
  /* Американская строительная цветовая схема */
  --usa-red: #b22234;
  --usa-blue: #3c3b6e;
  --usa-white: #ffffff;
  --construction-yellow: #ffd700;
  --construction-orange: #ff8c00;
  --concrete-gray: #a9a9a9;
  --steel-gray: #71797e;
  --safety-green: #228b22;
  --text-dark: #1a1a1a;
  --text-light: #f5f5f5;
}

/* 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='500' viewBox='0 0 800 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3C!-- Американский флаг --%3E%3Cpattern id='usaStripes' patternUnits='userSpaceOnUse' width='60' height='38'%3E%3Crect width='60' height='19' fill='%23b22234'/%3E%3Crect y='19' width='60' height='19' fill='%23ffffff'/%3E%3C/pattern%3E%3C/defs%3E%3C!-- Синяя часть флага --%3E%3Crect width='320' height='266' fill='%233c3b6e' fill-opacity='0.8'/%3E%3C!-- Полосы --%3E%3Crect x='320' width='480' height='500' fill='url(%23usaStripes)' fill-opacity='0.7'/%3E%3C!-- Строительные элементы --%3E%3Cg fill='%23ffd700' fill-opacity='0.15'%3E%3C!-- Краны --%3E%3Crect x='50' y='300' width='20' height='100'/%3E%3Crect x='40' y='300' width='40' height='10'/%3E%3C!-- Дома --%3E%3Cpath d='M600,350 L650,300 L700,350 Z'/%3E%3Crect x='620' y='350' width='60' height='50'/%3E%3C!-- Инструменты --%3E%3Crect x='200' y='400' width='40' height='10' rx='2'/%3E%3Crect x='500' y='200' width='30' height='30' rx='3'/%3E%3C/g%3E%3C!-- Звезды --%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpolygon points='80,50 85,65 100,65 88,75 93,90 80,80 67,90 72,75 60,65 75,65'/%3E%3Cpolygon points='160,100 165,115 180,115 168,125 173,140 160,130 147,140 152,125 140,115 155,115'/%3E%3Cpolygon points='240,150 245,165 260,165 248,175 253,190 240,180 227,190 232,175 220,165 235,165'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1600px 1000px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}

body {
  color: var(--text-dark);
  background-color: var(--usa-white);
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  position: relative;
  border-left: 10px solid var(--usa-red);
  border-right: 10px solid var(--usa-blue);
}

/* Кастомный скроллбар в американском стиле */
::-webkit-scrollbar {
  width: 14px;
  background: var(--usa-white);
}

::-webkit-scrollbar-track {
  background: repeating-linear-gradient(
    45deg,
    var(--usa-white),
    var(--usa-white) 10px,
    var(--usa-red) 10px,
    var(--usa-red) 20px
  );
  border: 2px solid var(--usa-blue);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--usa-red),
    var(--usa-white),
    var(--usa-blue)
  );
  border: 2px solid var(--construction-yellow);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    var(--usa-blue),
    var(--usa-white),
    var(--usa-red)
  );
}

font, th, td, p {
  font-family: 'Arial', 'Helvetica', sans-serif;
  color: var(--text-dark);
}

a:link, a:active, a:visited {
  color: var(--usa-blue);
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--usa-red);
  text-decoration: none;
  border-bottom: 2px solid var(--usa-red);
  transform: translateX(3px);
}

hr {
  border: none;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    var(--usa-red),
    var(--usa-red) 30px,
    var(--usa-white) 30px,
    var(--usa-white) 60px,
    var(--usa-blue) 60px,
    var(--usa-blue) 90px
  );
  margin: 25px 0;
}

.bodyline {
  background-color: var(--usa-white);
  border: 5px double var(--usa-blue);
  padding: 20px;
  margin: 20px 0;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
}

.bodyline::before {
  content: '🇺🇸';
  position: absolute;
  top: -15px;
  left: -15px;
  font-size: 24px;
  background: var(--usa-white);
  border: 2px solid var(--usa-red);
  padding: 5px;
  border-radius: 50%;
}

.forumline {
  background-color: rgba(255, 255, 255, 0.95);
  border: 3px solid var(--usa-red);
  border-left: 10px solid var(--usa-blue);
  margin: 15px 0;
  padding: 15px;
  box-shadow: 3px 3px 10px rgba(178, 34, 52, 0.2);
}

td.row1, td.row2, td.row3, td.rowpic {
  border-right: 2px solid var(--usa-red);
  border-top: 2px solid var(--usa-white);
  border-bottom: 2px solid var(--usa-red);
  border-left: 2px solid var(--usa-white);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  transition: all 0.3s ease;
}

td.row1 {
  background-color: rgba(255, 255, 255, 0.95);
}

td.row2 {
  background-color: rgba(240, 248, 255, 0.9);
}

td.row3 {
  background-color: rgba(255, 248, 220, 0.8);
}

td.row1:hover, td.row2:hover {
  background-color: rgba(60, 59, 110, 0.1);
  transform: translateX(5px);
}

td.rowpic {
  background: linear-gradient(90deg, rgba(60, 59, 110, 0.2), transparent);
  border-right: 5px solid var(--usa-blue);
  position: relative;
}

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

th, th.1, th.thHead, th.thSides, th.thTop, th.thLeft, th.thRight, th.thBottom, th.thCornerL, th.thCornerR {
  color: var(--usa-white);
  font-size: 18px;
  font-weight: bold;
  border: 3px outset var(--construction-yellow);
  background: linear-gradient(
    135deg,
    var(--usa-blue),
    var(--usa-red),
    var(--usa-blue)
  );
  height: 40px;
  padding: 0 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  position: relative;
}

th::before, th::after {
  content: '⭐';
  color: var(--construction-yellow);
  margin: 0 10px;
}

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
  border: 2px solid var(--usa-red);
  background: linear-gradient(
    135deg,
    var(--usa-red),
    var(--construction-orange),
    var(--usa-red)
  );
  height: 35px;
  padding: 0 20px;
  font-weight: bold;
  color: var(--usa-white);
  text-transform: uppercase;
  letter-spacing: 1px;
}

td.catHead {
  font-size: 16px;
  background: linear-gradient(
    135deg,
    var(--usa-blue),
    var(--usa-red),
    var(--usa-blue)
  );
}

td.row3Right, td.spaceRow {
  border: 2px solid var(--construction-yellow);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.1),
    rgba(255, 255, 255, 0.9)
  );
}

.maintitle, h1, h2 {
  font-weight: bold;
  font-size: 32px;
  font-family: "Impact", "Arial Black", sans-serif;
  text-decoration: none;
  line-height: 120%;
  color: var(--usa-blue);
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 5px solid;
  border-image: linear-gradient(
    to right,
    var(--usa-red),
    var(--usa-white),
    var(--usa-blue)
  ) 1;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}

.maintitle::after, h1::after, h2::after {
  content: '🇺🇸';
  position: absolute;
  right: 0;
  font-size: 28px;
}

h2 {
  font-size: 26px;
  border-left: 8px solid var(--usa-red);
  padding-left: 20px;
  border-bottom: none;
}

.gen, .genmed, .gensmall {
  color: var(--text-dark);
  font-family: "Arial", sans-serif;
}

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

a.gen, a.genmed, a.gensmall {
  color: var(--usa-blue);
  text-decoration: none;
}

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

.mainmenu {
  font-size: 20px;
  color: var(--usa-blue);
  font-family: "Impact", sans-serif;
  text-transform: uppercase;
}

a.mainmenu {
  color: var(--usa-red);
}

a.mainmenu:hover {
  color: var(--usa-blue);
}

.cattitle {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--usa-blue);
  text-transform: uppercase;
}

a.cattitle {
  color: var(--usa-red);
}

a.cattitle:hover {
  color: var(--usa-blue);
}

.forumlink {
  font-weight: bold;
  font-size: 18px;
  color: var(--usa-blue);
}

a.forumlink {
  color: var(--usa-red);
}

a.forumlink:hover {
  color: var(--construction-yellow);
}

.nav {
  font-weight: bold;
  font-size: 16px;
  color: var(--usa-white);
  background-color: var(--usa-blue);
  padding: 10px 20px;
  border: 2px solid var(--usa-red);
  margin: 10px 0;
  display: inline-block;
}

a.nav:hover {
  background-color: var(--usa-red);
  border-color: var(--usa-blue);
}

.topictitle {
  font-weight: bold;
  font-size: 18px;
  color: var(--usa-blue);
}

a.topictitle:hover {
  color: var(--usa-red);
}

.name {
  font-size: 16px;
  color: var(--usa-blue);
  font-weight: bold;
}

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

.postdetails {
  font-size: 12px;
  color: var(--steel-gray);
  font-style: italic;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  border-radius: 3px;
  display: inline-block;
  margin: 5px 0;
}

.postbody {
  font-size: 16px;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border: 2px solid var(--usa-red);
  border-left: 10px solid var(--usa-blue);
  margin: 15px 0;
}

a.postlink:hover {
  color: var(--usa-red);
}

.code {
  font-family: "Courier New", "Consolas", monospace;
  font-size: 14px;
  color: var(--text-dark);
  border: 3px solid var(--usa-blue);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(240, 248, 255, 0.9)
  );
  padding: 20px;
  margin: 20px 0;
  border-left: 10px solid var(--usa-red);
  position: relative;
}

.code::before {
  content: '📐 Blueprint';
  display: block;
  font: bold 14px "Arial", sans-serif;
  color: var(--usa-blue);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--usa-red);
}

.quote {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  color: var(--text-dark);
  border: 3px solid var(--construction-yellow);
  background: linear-gradient(
    135deg,
    rgba(255, 248, 220, 0.9),
    rgba(255, 255, 255, 0.9)
  );
  padding: 20px;
  margin: 20px 0;
  border-left: 10px solid var(--usa-red);
  font-style: italic;
  position: relative;
}

.quote::before {
  content: '💬';
  position: absolute;
  left: -15px;
  top: -15px;
  background: var(--usa-white);
  border: 2px solid var(--usa-red);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

input, textarea, select {
  color: var(--text-dark);
  font: bold 14px "Arial", sans-serif;
  border: 3px inset var(--usa-blue);
  background: var(--usa-white);
  padding: 12px 15px;
  margin: 8px 0;
  transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  outline: 3px solid var(--construction-yellow);
  border: 3px outset var(--usa-red);
  background-color: rgba(255, 215, 0, 0.1);
}

input.post, textarea.post, select {
  background-color: var(--usa-white);
}

input {
  text-indent: 2px;
}

input.mainoption, input.liteoption {
  border: 3px outset var(--usa-red);
  background: linear-gradient(
    135deg,
    var(--usa-blue),
    var(--usa-red),
    var(--usa-blue)
  );
  color: var(--usa-white);
  font-weight: bold;
  padding: 15px 30px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

input.mainoption:hover, input.liteoption:hover {
  background: linear-gradient(
    135deg,
    var(--usa-red),
    var(--usa-blue),
    var(--usa-red)
  );
  border: 3px inset var(--usa-red);
  transform: translateY(2px);
}

.helpline {
  border: 2px solid var(--safety-green);
  background: linear-gradient(
    135deg,
    rgba(34, 139, 34, 0.1),
    rgba(255, 255, 255, 0.9)
  );
}

/* Пагинация */
.pgbutt a {
  font-family: "Arial", sans-serif;
  text-decoration: none;
  border: 2px solid var(--usa-blue);
  background: linear-gradient(
    135deg,
    var(--usa-white),
    rgba(178, 34, 52, 0.1)
  );
  padding: 10px 20px;
  margin: 5px 3px 0 0;
  border-radius: 0;
  color: var(--usa-blue);
  font-weight: bold;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.pgbutt a:hover {
  border-color: var(--usa-red);
  background: linear-gradient(
    135deg,
    var(--usa-red),
    rgba(255, 255, 255, 0.9)
  );
  color: var(--usa-white);
  transform: translateY(-2px);
}

/* QR-код в американском стиле */
#qr img {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 20px;
  top: 20px;
  border: 3px solid var(--usa-red);
  padding: 3px;
  background: var(--usa-white);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

#qr img:hover {
  width: 200px;
  height: 200px;
  border: 5px solid var(--usa-blue);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

/* Аватар для гостей */
.guestavatar {
  width: 120px;
  height: 120px;
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--usa-red),
    var(--usa-white),
    var(--usa-blue)
  );
  color: var(--usa-blue);
  font-size: 50px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--construction-yellow);
  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: linear-gradient(
    135deg,
    var(--usa-blue),
    var(--usa-red)
  );
}

#nav8 {
  border-spacing: 0;
  position: relative;
  z-index: 50;
  width: 100%;
  border: 3px solid var(--construction-yellow);
  overflow: hidden;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

#nav8 ul {
  position: absolute;
  display: none;
  background: var(--usa-white);
  border: 3px solid var(--usa-blue);
  overflow: hidden;
}

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

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

#nav8 a {
  display: block;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  color: var(--usa-white);
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

#nav8 ul a {
  padding: 10px 20px;
  text-align: left;
  color: var(--usa-blue);
}

#nav8 td:hover, #nav8 li:hover {
  background: var(--construction-yellow);
}

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

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

#cssbar-border {
  border: 3px solid var(--usa-blue);
  height: 100%;
  width: 100%;
  position: relative;
  left: -50%;
  top: -50%;
  padding: 4px 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--usa-white),
    var(--usa-white) 10px,
    var(--usa-red) 10px,
    var(--usa-red) 20px
  );
}

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

#cssbar-line {
  background: linear-gradient(
    90deg,
    var(--usa-blue),
    var(--usa-white),
    var(--usa-red)
  );
  position: absolute;
  height: 100%;
  width: 100%;
  animation: cssbar-slide 4s steps(40) infinite;
}

@keyframes cssbar-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Строительные бейджи США */
.usa-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 15px;
  border-radius: 4px;
  font: bold 12px "Arial", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 10px;
  border: 2px outset var(--construction-yellow);
}

.badge-contractor {
  background: linear-gradient(135deg, var(--usa-blue), #2a2a5e);
  color: white;
}
.badge-contractor::before { content: '🏗️'; }

.badge-union {
  background: linear-gradient(135deg, var(--usa-red), #8b0000);
  color: white;
}
.badge-union::before { content: '🤝'; }

.badge-architect {
  background: linear-gradient(135deg, var(--construction-yellow), #daa520);
  color: var(--text-dark);
}
.badge-architect::before { content: '📐'; }

.badge-engineer {
  background: linear-gradient(135deg, var(--concrete-gray), #5a5a5a);
  color: white;
}
.badge-engineer::before { content: '⚙️'; }

.badge-safety {
  background: linear-gradient(135deg, var(--safety-green), #006400);
  color: white;
}
.badge-safety::before { content: '⚠️'; }

/* Адаптивность */
@media (max-width: 768px) {
  body {
    padding: 10px;
    font-size: 14px;
    border-left: 5px solid var(--usa-red);
    border-right: 5px solid var(--usa-blue);
  }
  
  .maintitle, h1, h2 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  .bodyline {
    padding: 15px;
    margin: 10px 0;
  }
  
  th, td.cat, td.catHead, td.catBottom {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  #qr img {
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }
  
  .guestavatar {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }
}

/* Иконки для американских строительных разделов */
[class*="american"]::before { content: '🇺🇸 '; }
[class*="construction"]::before { content: '🏗️ '; }
[class*="building"]::before { content: '🏢 '; }
[class*="contractor"]::before { content: '👷 '; }
[class*="permit"]::before { content: '📋 '; }
[class*="safety"]::before { content: '⚠️ '; }
[class*="tools"]::before { content: '🔧 '; }
[class*="materials"]::before { content: '🧱 '; }

/* Эффект строительной площадки */
@keyframes construction-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.construction-alert {
  animation: construction-flash 2s infinite;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(178, 34, 52, 0.2));
  padding: 10px;
  border: 3px solid var(--construction-yellow);
  margin: 15px 0;
}

/* Копирайт в американском стиле */
.copyright {
  font: 12px "Arial", sans-serif;
  color: var(--usa-blue);
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  border-top: 3px solid;
  border-image: linear-gradient(
    to right,
    var(--usa-red),
    var(--usa-white),
    var(--usa-blue)
  ) 1;
}

.copyright::before {
  content: '© USA ';
  color: var(--usa-red);
  font-weight: bold;
}