﻿:root {
  --travel-blue: #1e90ff; /* Яркий синий как небо и океан */
  --travel-green: #32cd32; /* Зеленый пальм */
  --travel-sand: #f5deb3; /* Цвет песка */
  --travel-sun: #ffd700; /* Солнечный желтый */
  --travel-orange: #ff8c00; /* Закатный оранжевый */
  --travel-light: #f0f8ff; /* Светлый фон */
  --travel-dark: #2e4a62; /* Темно-синий */
  --travel-text: #2c3e50; /* Темный текст */
  --travel-accent: #00ced1; /* Бирюзовый акцент */
}

/* 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' viewBox='0 0 800 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2387ceeb' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%231e90ff' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='sand' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f5deb3' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%23deb887' stop-opacity='0.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='70%25' fill='url(%23sky)'/%3E%3Crect y='420' width='100%25' height='180' fill='url(%23sand)'/%3E%3Cg fill='%2332cd32' fill-opacity='0.3'%3E%3C!-- Пальмы --%3E%3Cpath d='M150,300 Q180,100 210,300 Q190,200 150,300'/%3E%3Cpath d='M450,250 Q480,80 510,250 Q490,150 450,250'/%3E%3Cpath d='M650,320 Q680,120 710,320 Q690,220 650,320'/%3E%3C/g%3E%3Cg fill='%23ffd700' fill-opacity='0.2'%3E%3C!-- Солнце --%3E%3Ccircle cx='700' cy='100' r='50'/%3E%3C/g%3E%3Cg fill='%231e90ff' fill-opacity='0.15'%3E%3C!-- Волны --%3E%3Cpath d='M0,420 Q100,410 200,420 T400,420 T600,420 T800,420'/%3E%3Cpath d='M0,440 Q100,430 200,440 T400,440 T600,440 T800,440'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3C!-- Облака --%3E%3Ccircle cx='100' cy='150' r='20'/%3E%3Ccircle cx='130' cy='140' r='25'/%3E%3Ccircle cx='160' cy='150' r='20'/%3E%3Ccircle cx='300' cy='200' r='15'/%3E%3Ccircle cx='320' cy='190' r='20'/%3E%3Ccircle cx='340' cy='200' r='15'/%3E%3C/g%3E%3Cg fill='%2300ced1' fill-opacity='0.1'%3E%3C!-- Чайки --%3E%3Cpath d='M200,100 Q220,80 240,100' stroke='%2300ced1' stroke-width='2' fill='none'/%3E%3Cpath d='M500,150 Q520,130 540,150' stroke='%2300ced1' stroke-width='2' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1600px 1200px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}

BODY {
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  SCROLLBAR-FACE-COLOR: var(--travel-sand);
  background: var(--travel-light);
  PADDING-BOTTOM: 0px;
  MARGIN: 6px;
  FONT: 14px 'Segoe UI', 'Verdana', 'Arial', sans-serif;
  SCROLLBAR-HIGHLIGHT-COLOR: var(--travel-blue);
  SCROLLBAR-SHADOW-COLOR: var(--travel-sand);
  COLOR: var(--travel-text);
  SCROLLBAR-3DLIGHT-COLOR: var(--travel-green);
  SCROLLBAR-ARROW-COLOR: var(--travel-orange);
  PADDING-TOP: 0px;
  SCROLLBAR-TRACK-COLOR: var(--travel-light);
  SCROLLBAR-DARKSHADOW-COLOR: var(--travel-sand);
  min-height: 100vh;
  position: relative;
}

/* Кастомный скроллбар в тропическом стиле */
::-webkit-scrollbar {
  width: 12px;
  background: var(--travel-light);
}

::-webkit-scrollbar-track {
  background: var(--travel-light);
  border: 2px solid var(--travel-green);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--travel-blue), var(--travel-accent));
  border: 2px solid var(--travel-orange);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--travel-orange), var(--travel-sun));
}

FONT {
  FONT: 14px 'Segoe UI', 'Verdana', sans-serif;
}

TH {
  FONT: 14px 'Segoe UI', 'Verdana', sans-serif;
}

TD {
  FONT: 14px 'Segoe UI', 'Verdana', sans-serif;
}

P {
  FONT: 14px 'Segoe UI', 'Verdana', sans-serif;
  margin: 20px;
  line-height: 1.6;
}

.code_td {
  FONT-SIZE: 14px;
  COLOR: var(--travel-text);
  FONT-FAMILY: 'Consolas', 'Courier New', monospace;
}

.php_td {
  FONT-SIZE: 14px;
  COLOR: var(--travel-text);
  FONT-FAMILY: 'Consolas', 'Courier New', monospace;
}

.q_td {
  FONT-SIZE: 14px;
  COLOR: var(--travel-text);
  FONT-FAMILY: 'Consolas', 'Courier New', monospace;
}

.quote_td {
  FONT-SIZE: 14px;
  COLOR: var(--travel-text);
  FONT-FAMILY: 'Georgia', 'Times New Roman', serif;
}

.code_table {
  BORDER-RIGHT: var(--travel-blue) 2px solid;
  BORDER-TOP: var(--travel-blue) 2px solid;
  FONT-SIZE: 14px;
  BORDER-LEFT: var(--travel-blue) 2px solid;
  WIDTH: 95%;
  BORDER-BOTTOM: var(--travel-blue) 2px solid;
  FONT-FAMILY: 'Consolas', 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 15px;
}

.php_table {
  BORDER-RIGHT: var(--travel-green) 2px solid;
  BORDER-TOP: var(--travel-green) 2px solid;
  FONT-SIZE: 14px;
  BORDER-LEFT: var(--travel-green) 2px solid;
  WIDTH: 95%;
  BORDER-BOTTOM: var(--travel-green) 2px solid;
  FONT-FAMILY: 'Consolas', 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 15px;
}

.q_table {
  BORDER-RIGHT: var(--travel-orange) 2px solid;
  BORDER-TOP: var(--travel-orange) 2px solid;
  FONT-SIZE: 14px;
  BORDER-LEFT: var(--travel-orange) 2px solid;
  WIDTH: 95%;
  BORDER-BOTTOM: var(--travel-orange) 2px solid;
  FONT-FAMILY: 'Consolas', 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 15px;
}

.quote_table {
  BORDER-RIGHT: var(--travel-accent) 2px solid;
  BORDER-TOP: var(--travel-accent) 2px solid;
  FONT-SIZE: 14px;
  BORDER-LEFT: var(--travel-accent) 2px solid;
  WIDTH: 95%;
  BORDER-BOTTOM: var(--travel-accent) 2px solid;
  FONT-FAMILY: 'Georgia', 'Times New Roman', serif;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 15px;
}

.gensmall {
  FONT-SIZE: 13px;
  color: var(--travel-dark);
}

TD.genmed {
  FONT-SIZE: 14px;
  color: var(--travel-text);
}

.genmed {
  FONT-SIZE: 14px;
  color: var(--travel-text);
}

.explaintitle {
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
  COLOR: var(--travel-orange);
}

A:link {
  COLOR: var(--travel-blue);
  TEXT-DECORATION: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border-bottom: 1px dotted transparent;
  padding-bottom: 1px;
}

A:active {
  COLOR: var(--travel-orange);
  TEXT-DECORATION: none;
}

A:visited {
  COLOR: var(--travel-accent);
  TEXT-DECORATION: none;
}

A:hover {
  COLOR: var(--travel-orange);
  TEXT-DECORATION: none;
  border-bottom: 2px solid var(--travel-orange);
}

A.postlink {
  COLOR: var(--travel-blue);
  TEXT-DECORATION: none;
}

.topictitle {
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
}

A.topictitle:visited {
  COLOR: var(--travel-accent);
}

A.topictitle:hover {
  COLOR: var(--travel-orange);
}

.forumlink {
  font-weight: bold;
  color: var(--travel-blue);
}

.name {
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
  color: var(--travel-orange);
}

.name::before {
  content: '👤 ';
}

HR {
  BORDER-RIGHT: var(--travel-blue) 0px solid;
  BORDER-TOP: var(--travel-sand) 2px solid;
  BORDER-LEFT: var(--travel-sand) 0px solid;
  BORDER-BOTTOM: var(--travel-sand) 0px solid;
  HEIGHT: 0px;
  margin: 25px 0;
}

TD.cat, TD.catHead, TD.catSides, TD.catLeft, TD.catRight, TD.catBottom {
  FONT-WEIGHT: bold;
  BACKGROUND: linear-gradient(135deg, var(--travel-blue), var(--travel-accent));
  TEXT-INDENT: 8px;
  LETTER-SPACING: 1px;
  HEIGHT: 35px;
  color: white;
  border: 2px solid var(--travel-orange);
  border-radius: 8px 8px 0 0;
  position: relative;
}

TD.cat::before, TD.catHead::before {
  content: '🌴';
  margin-right: 10px;
}

.row1 {
  BACKGROUND: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--travel-sand);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.row2 {
  BACKGROUND: rgba(240, 248, 255, 0.9);
  border: 2px solid var(--travel-sand);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.row3 {
  BACKGROUND: rgba(245, 222, 179, 0.3);
  border: 2px solid var(--travel-sand);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.helpline {
  BACKGROUND: rgba(30, 144, 255, 0.1);
  border: 2px dashed var(--travel-blue);
  border-radius: 6px;
  padding: 12px;
}

.row1:hover, .row2:hover, .row3:hover {
  background: rgba(255, 215, 0, 0.1);
  transform: translateX(5px);
  border-color: var(--travel-orange);
}

TD.spacerow {
  BACKGROUND: linear-gradient(to right, var(--travel-blue), var(--travel-accent), var(--travel-blue));
  height: 3px;
  border: none;
}

TD.rowpic {
  BACKGROUND: linear-gradient(90deg, rgba(30, 144, 255, 0.2), rgba(255, 255, 255, 0.9));
  border-right: 5px solid var(--travel-orange);
  position: relative;
}

TD.rowpic::before {
  content: '✈️';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  opacity: 0.5;
}

TH {
  PADDING-RIGHT: 15px;
  PADDING-LEFT: 15px;
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, var(--travel-orange), var(--travel-sun));
  COLOR: white;
  WHITE-SPACE: nowrap;
  HEIGHT: 32px;
  TEXT-ALIGN: center;
  border-radius: 8px;
  border: 3px outset var(--travel-sand);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

TH::before {
  content: '📍';
  margin-right: 10px;
}

.bodyline {
  BORDER-RIGHT: var(--travel-blue) 3px solid;
  BORDER-TOP: var(--travel-blue) 3px solid;
  BACKGROUND: rgba(255, 255, 255, 0.95);
  BORDER-LEFT: var(--travel-blue) 3px solid;
  BORDER-BOTTOM: var(--travel-blue) 3px solid;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 5px 5px 15px rgba(30, 144, 255, 0.2);
  position: relative;
}

.bodyline::before {
  content: '🌍';
  position: absolute;
  top: -15px;
  left: -15px;
  font-size: 24px;
  background: white;
  border: 2px solid var(--travel-blue);
  padding: 5px;
  border-radius: 50%;
}

.forumline {
  BORDER-RIGHT: var(--travel-green) 2px solid;
  BORDER-TOP: var(--travel-green) 2px solid;
  BACKGROUND: rgba(255, 255, 255, 0.9);
  BORDER-LEFT: var(--travel-green) 2px solid;
  BORDER-BOTTOM: var(--travel-green) 2px solid;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}

.maintitle {
  FONT: bold 28px/120% 'Segoe UI', 'Verdana', sans-serif;
  COLOR: var(--travel-blue);
  TEXT-DECORATION: none;
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, var(--travel-blue), var(--travel-accent), var(--travel-green)) 1;
  position: relative;
}

.maintitle::after {
  content: '🌴';
  position: absolute;
  right: 0;
  font-size: 28px;
}

H1 {
  FONT: bold 28px/120% 'Segoe UI', 'Verdana', sans-serif;
  COLOR: var(--travel-orange);
  TEXT-DECORATION: none;
  margin: 30px 0 20px;
}

H2, h3 {
  FONT: bold 22px/180% 'Segoe UI', 'Verdana', sans-serif;
  TEXT-DECORATION: none;
  color: var(--travel-green);
  border-left: 5px solid var(--travel-orange);
  padding-left: 15px;
  margin: 25px 0 15px;
}

.subtitle {
  FONT: bold 22px/180% 'Segoe UI', 'Verdana', sans-serif;
  TEXT-DECORATION: none;
  color: var(--travel-accent);
}

.nav {
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
  color: var(--travel-blue);
  background: rgba(30, 144, 255, 0.1);
  padding: 10px 15px;
  border-radius: 6px;
  border-left: 4px solid var(--travel-orange);
  margin: 10px 0;
  display: inline-block;
}

.postbody {
  FONT-SIZE: 15px;
  LINE-HEIGHT: 1.6;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid var(--travel-sand);
  margin: 15px 0;
}

.postdetails {
  FONT-SIZE: 13px;
  COLOR: var(--travel-dark);
  font-style: italic;
  background: rgba(245, 222, 179, 0.3);
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  margin: 5px 0;
}

.quote {
  BORDER-RIGHT: var(--travel-orange) 2px solid;
  BORDER-TOP: var(--travel-orange) 2px solid;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.9));
  BORDER-LEFT: var(--travel-orange) 2px solid;
  COLOR: var(--travel-text);
  LINE-HEIGHT: 1.5;
  BORDER-BOTTOM: var(--travel-orange) 2px solid;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  border-left: 6px solid var(--travel-orange);
  position: relative;
}

.quote::before {
  content: '💬';
  position: absolute;
  left: -15px;
  top: -15px;
  background: white;
  border: 2px solid var(--travel-orange);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.code {
  BORDER-RIGHT: var(--travel-blue) 2px solid;
  PADDING-RIGHT: 15px;
  BORDER-TOP: var(--travel-blue) 2px solid;
  PADDING-LEFT: 15px;
  BACKGROUND: rgba(255, 255, 255, 0.95);
  PADDING-BOTTOM: 15px;
  FONT: 14px 'Consolas', 'Courier New', monospace;
  BORDER-LEFT: var(--travel-blue) 2px solid;
  COLOR: var(--travel-text);
  PADDING-TOP: 15px;
  BORDER-BOTTOM: var(--travel-blue) 2px solid;
  border-radius: 8px;
  margin: 20px 0;
}

.code::before {
  content: '📝 Travel Notes';
  display: block;
  font: bold 13px 'Segoe UI', sans-serif;
  color: var(--travel-blue);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--travel-sand);
}

.errorline {
  BORDER-RIGHT: var(--travel-orange) 2px solid;
  BORDER-TOP: var(--travel-orange) 2px solid;
  BACKGROUND: rgba(255, 140, 0, 0.1);
  BORDER-LEFT: var(--travel-orange) 2px solid;
  BORDER-BOTTOM: var(--travel-orange) 2px solid;
  border-radius: 6px;
  padding: 15px;
}

FORM {
  DISPLAY: inline;
}

INPUT {
  FONT: 14px 'Segoe UI', 'Verdana', sans-serif;
  color: var(--travel-text);
}

SELECT {
  BACKGROUND: white;
  FONT: 13px 'Segoe UI', 'Verdana', sans-serif;
  border: 2px solid var(--travel-blue);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--travel-text);
  margin: 5px 0;
}

INPUT.post, TEXTAREA.post {
  BORDER-RIGHT: var(--travel-blue) 2px solid;
  BORDER-TOP: var(--travel-blue) 2px solid;
  PADDING-LEFT: 12px;
  BACKGROUND: white;
  PADDING-BOTTOM: 10px;
  FONT: 14px 'Segoe UI', 'Verdana', sans-serif;
  BORDER-LEFT: var(--travel-blue) 2px solid;
  BORDER-BOTTOM: var(--travel-blue) 2px solid;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 5px 0;
  transition: all 0.3s ease;
}

INPUT.post:focus, TEXTAREA.post:focus {
  outline: 2px solid var(--travel-orange);
  border-color: var(--travel-orange);
}

INPUT.button {
  BORDER-RIGHT: var(--travel-orange) 2px solid;
  BORDER-TOP: var(--travel-orange) 2px solid;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, var(--travel-orange), var(--travel-sun));
  BORDER-LEFT: var(--travel-orange) 2px solid;
  BORDER-BOTTOM: var(--travel-orange) 2px solid;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px outset var(--travel-sun);
}

INPUT.button:hover {
  background: linear-gradient(135deg, var(--travel-sun), var(--travel-orange));
  border: 3px inset var(--travel-sun);
  transform: translateY(2px);
}

INPUT.liteoption {
  BORDER-RIGHT: var(--travel-blue) 2px solid;
  BORDER-TOP: var(--travel-blue) 2px solid;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, var(--travel-blue), var(--travel-accent));
  BORDER-LEFT: var(--travel-blue) 2px solid;
  BORDER-BOTTOM: var(--travel-blue) 2px solid;
  border-radius: 8px;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

INPUT.liteoption:hover {
  background: linear-gradient(135deg, var(--travel-accent), var(--travel-blue));
}

.fakebut {
  BORDER-RIGHT: var(--travel-green) 2px solid;
  BORDER-TOP: var(--travel-green) 2px solid;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, var(--travel-green), #2e8b57);
  BORDER-LEFT: var(--travel-green) 2px solid;
  BORDER-BOTTOM: var(--travel-green) 2px solid;
  border-radius: 8px;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

INPUT.catbutton {
  BORDER-RIGHT: var(--travel-accent) 2px solid;
  BORDER-TOP: var(--travel-accent) 2px solid;
  FONT-SIZE: 13px;
  BACKGROUND: linear-gradient(135deg, var(--travel-accent), #20b2aa);
  BORDER-LEFT: var(--travel-accent) 2px solid;
  BORDER-BOTTOM: var(--travel-accent) 2px solid;
  border-radius: 8px;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

INPUT.mainoption {
  BORDER-RIGHT: var(--travel-orange) 3px solid;
  BORDER-TOP: var(--travel-orange) 3px solid;
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, var(--travel-orange), #ff4500);
  BORDER-LEFT: var(--travel-orange) 3px solid;
  BORDER-BOTTOM: var(--travel-orange) 3px solid;
  border-radius: 8px;
  padding: 15px 30px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 3px outset var(--travel-sun);
}

A.but {
  COLOR: var(--travel-blue);
  TEXT-DECORATION: none;
}

A.but:hover {
  COLOR: var(--travel-orange);
  TEXT-DECORATION: none;
}

A.but:visited {
  COLOR: var(--travel-accent);
  TEXT-DECORATION: none;
}

.topbkg {
  BACKGROUND: linear-gradient(135deg, var(--travel-blue), var(--travel-accent));
  height: 140px;
  font-size: 14px;
  line-height: 140%;
  font-weight: bold;
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px;
  text-align: center;
}

.topnav {
  BORDER-RIGHT: var(--travel-green) 0px solid;
  BORDER-TOP: var(--travel-green) 2px solid;
  FONT-SIZE: 14px;
  BACKGROUND: linear-gradient(135deg, rgba(50, 205, 50, 0.2), rgba(255, 255, 255, 0.9));
  BORDER-LEFT: var(--travel-green) 0px solid;
  COLOR: var(--travel-green);
  BORDER-BOTTOM: var(--travel-green) 2px solid;
  WHITE-SPACE: nowrap;
  HEIGHT: 28px;
  border-radius: 6px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.admin {
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
}

.mod {
  FONT-WEIGHT: bold;
  FONT-SIZE: 14px;
}

.admin {
  COLOR: var(--travel-orange);
}

A.admin {
  COLOR: var(--travel-orange);
}

A.admin:visited {
  COLOR: #ff8c00;
}

.mod {
  COLOR: var(--travel-green);
}

A.mod {
  COLOR: var(--travel-green);
}

A.mod:visited {
  COLOR: #228b22;
}

A.admin:hover {
  COLOR: #ff4500;
}

A.mod:hover {
  COLOR: #32cd32;
}

IMG {
  BORDER-RIGHT: 0px solid;
  BORDER-TOP: 0px solid;
  BORDER-LEFT: 0px solid;
  BORDER-BOTTOM: 0px solid;
  border-radius: 8px;
}

.copyright {
  FONT-SIZE: 12px;
  COLOR: var(--travel-dark);
  FONT-FAMILY: 'Segoe UI', sans-serif;
  LETTER-SPACING: -1px;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  border-top: 2px solid var(--travel-sand);
}

A.copyright {
  COLOR: var(--travel-blue);
  TEXT-DECORATION: none;
}

A.copyright:hover {
  COLOR: var(--travel-orange);
  TEXT-DECORATION: underline;
}

/* Пагинация */
.pgbutt a {
  font-family: 'Segoe UI', sans-serif;
  padding-top: 6px;
  padding-bottom: 6px;
  text-decoration: none;
  border: 2px solid var(--travel-blue);
  background: white;
  padding: 8px 16px;
  margin: 5px 3px 0 0;
  border-radius: 6px;
  color: var(--travel-blue);
  font-weight: 600;
  transition: all 0.3s ease;
}

.pgbutt a:hover {
  border: 2px solid var(--travel-orange);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), white);
  color: var(--travel-orange);
  transform: translateY(-2px);
}

/* QR-код */
#qr img {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 15px;
  top: 15px;
  border: 2px solid var(--travel-orange);
  padding: 3px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 1000;
}

#qr img:hover {
  width: 200px;
  height: 200px;
  border: 3px solid var(--travel-blue);
  box-shadow: 5px 5px 20px rgba(30, 144, 255, 0.4);
}

/* Аватар для гостей */
.guestavatar {
  width: 120px;
  height: 120px;
  text-align: center;
  background: linear-gradient(135deg, var(--travel-blue), var(--travel-accent));
  color: white;
  font-size: 50px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--travel-orange);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
  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(--travel-blue), var(--travel-accent));
}

#nav8 {
  border-spacing: 0;
  position: relative;
  z-index: 50;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--travel-orange);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

#nav8 ul {
  position: absolute;
  display: none;
  background: white;
  border: 2px solid var(--travel-blue);
  border-radius: 8px;
  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: white;
  font-weight: 600;
  transition: all 0.2s ease;
}

#nav8 ul a {
  padding: 10px 15px;
  text-align: left;
  color: var(--travel-blue);
}

#nav8 td:hover, #nav8 li:hover {
  background: rgba(255, 255, 255, 0.2);
}

#nav8 td:hover a, #nav8 li:hover a {
  color: var(--travel-orange);
}

/* Индикатор загрузки */
#cssbar-wrapper {
  width: 300px;
  height: 25px;
  position: absolute;
  left: 50%;
}

#cssbar-border {
  border: 3px solid var(--travel-blue);
  height: 100%;
  width: 100%;
  position: relative;
  left: -50%;
  top: -50%;
  padding: 4px 3px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

#cssbar-whitespace {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#cssbar-line {
  background: linear-gradient(
    90deg,
    transparent,
    var(--travel-blue),
    var(--travel-accent),
    var(--travel-green),
    transparent
  );
  position: absolute;
  height: 100%;
  width: 100%;
  animation: cssbar-slide 4s linear infinite;
  border-radius: 8px;
}

@keyframes cssbar-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Бейджи направлений путешествий */
.travel-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font: bold 12px 'Segoe UI', sans-serif;
  margin-left: 8px;
}

.badge-beach {
  background: linear-gradient(135deg, var(--travel-blue), var(--travel-accent));
  color: white;
}
.badge-beach::before { content: '🏖️'; }

.badge-mountain {
  background: linear-gradient(135deg, #8b4513, #a0522d);
  color: white;
}
.badge-mountain::before { content: '🏔️'; }

.badge-city {
  background: linear-gradient(135deg, #696969, #808080);
  color: white;
}
.badge-city::before { content: '🏙️'; }

.badge-culture {
  background: linear-gradient(135deg, var(--travel-orange), #ff4500);
  color: white;
}
.badge-culture::before { content: '🎭'; }

.badge-adventure {
  background: linear-gradient(135deg, var(--travel-green), #228b22);
  color: white;
}
.badge-adventure::before { content: '🧗'; }

/* Иконки для разделов */
[class*="beach"]::before { content: '🏖️ '; }
[class*="mountain"]::before { content: '🏔️ '; }
[class*="city"]::before { content: '🏙️ '; }
[class*="culture"]::before { content: '🎭 '; }
[class*="adventure"]::before { content: '🧗 '; }
[class*="cruise"]::before { content: '🚢 '; }
[class*="photography"]::before { content: '📸 '; }
[class*="food"]::before { content: '🍜 '; }

/* Адаптивность */
@media (max-width: 768px) {
  BODY {
    margin: 5px;
    font-size: 13px;
  }
  
  .maintitle, H1 {
    font-size: 22px;
  }
  
  H2, h3 {
    font-size: 18px;
  }
  
  .bodyline {
    padding: 15px;
    margin: 10px 0;
  }
  
  TH, TD.cat, TD.catHead, TD.catBottom {
    padding: 10px;
    font-size: 13px;
  }
  
  #qr img {
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }
  
  .guestavatar {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }
}

/* Эффект волн */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.wave-animation {
  animation: wave 3s ease-in-out infinite;
}

/* Стиль для рекомендаций */
.recommendation {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.9));
  border: 2px solid var(--travel-orange);
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  position: relative;
}

.recommendation::before {
  content: '⭐';
  position: absolute;
  left: -15px;
  top: -15px;
  background: white;
  border: 2px solid var(--travel-orange);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Счетчик стран */
.country-counter {
  font-family: 'Consolas', monospace;
  font-size: 14px;
  color: var(--travel-blue);
  background: white;
  padding: 5px 10px;
  border: 2px solid var(--travel-green);
  border-radius: 4px;
  display: inline-block;
  margin: 5px;
}

.country-counter::after {
  content: ' стран';
  color: var(--travel-dark);
  font-size: 0.9em;
}

/* Копирайт в стиле путешествий */
.copyright::before {
  content: '🌍 ';
  color: var(--travel-green);
}