:root {
  --sand-light: #f5e9d9; /* Светлый песок */
  --sand-medium: #e6d5b8;
  --sand-dark: #d4b483;
  --ocean-blue: #1e90ff; /* Яркий океанский синий */
  --ocean-deep: #0077be;
  --sky-blue: #87ceeb;
  --sun-yellow: #ffd700;
  --coral: #ff7f50;
  --palm-green: #228b22;
  --text-sand: #5d4037;
  --text-ocean: #003366;
  --border-sand: #d4b483;
  --border-ocean: #1e90ff;
}

/* SVG background с пляжной тематикой */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='600' height='400' viewBox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sandGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f5e9d9' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23e6d5b8' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='oceanGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231e90ff' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%230077be' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='70%25' fill='url(%23sandGrad)'/%3E%3Crect y='280' width='100%25' height='120%25' fill='url(%23oceanGrad)'/%3E%3Cg fill='%23ffd700' fill-opacity='0.1'%3E%3C!-- Солнце --%3E%3Ccircle cx='500' cy='80' r='40'/%3E%3C/g%3E%3Cg fill='%23228b22' fill-opacity='0.05'%3E%3C!-- Пальмы --%3E%3Cpath d='M100,150 Q120,50 140,150 Q130,100 100,150'/%3E%3Cpath d='M400,180 Q420,80 440,180 Q430,130 400,180'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff7f50' stroke-width='1' stroke-opacity='0.08'%3E%3C!-- Волны --%3E%3Cpath d='M0,280 Q150,260 300,280 T600,280'/%3E%3Cpath d='M0,300 Q150,290 300,300 T600,300'/%3E%3Cpath d='M0,320 Q150,310 300,320 T600,320'/%3E%3C/g%3E%3Cg fill='%23ff7f50' fill-opacity='0.06'%3E%3C!-- Ракушки --%3E%3Ccircle cx='50' cy='200' r='10'/%3E%3Ccircle cx='200' cy='250' r='8'/%3E%3Ccircle cx='350' cy='220' r='12'/%3E%3Ccircle cx='550' cy='240' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1200px 800px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
}

body {
  color: var(--text-sand);
  background-color: var(--sand-light);
  font-family: 'Segoe UI', 'Verdana', 'Arial', sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--ocean-blue) var(--sand-light);
}

/* Кастомный скроллбар в пляжном стиле */
::-webkit-scrollbar {
  width: 12px;
  background: var(--sand-light);
}

::-webkit-scrollbar-track {
  background: var(--sand-light);
  border: 2px solid var(--border-sand);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--ocean-blue), var(--ocean-deep));
  border: 2px solid var(--sand-light);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--ocean-deep), var(--sky-blue));
}

font, th, td, p {
  font-family: 'Segoe UI', 'Verdana', 'Arial', sans-serif;
  color: var(--text-sand);
}

a:link, a:active, a:visited {
  color: var(--ocean-blue);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: all 0.3s ease;
}

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

a:hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--ocean-blue), var(--coral));
  border-radius: 1px;
}

hr {
  border: none;
  height: 3px;
  background: linear-gradient(to right, 
    transparent, 
    var(--border-sand), 
    var(--ocean-blue), 
    var(--border-sand), 
    transparent);
  margin: 25px 0;
}

.bodyline, .forumline {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--border-sand);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(212, 180, 131, 0.2);
  margin: 15px 0;
  position: relative;
  overflow: hidden;
}

.bodyline::before, .forumline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--ocean-blue), var(--sun-yellow), var(--coral));
}

td.row1, td.row2, td.row3, td.rowpic {
  border-right: 1px solid var(--border-sand);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--border-sand);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 12px;
  transition: all 0.3s ease;
}

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

td.row2 {
  background-color: rgba(245, 233, 217, 0.6);
}

td.row3 {
  background-color: rgba(230, 213, 184, 0.4);
}

td.row1:hover, td.row2:hover {
  background-color: rgba(30, 144, 255, 0.1);
  transform: translateX(3px);
}

td.rowpic {
  background: linear-gradient(90deg, rgba(30, 144, 255, 0.1), transparent);
  position: relative;
}

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

th, th.1, th.thHead, th.thSides, th.thTop, th.thLeft, th.thRight, th.thBottom, th.thCornerL, th.thCornerR {
  color: white;
  font-size: 15px;
  font-weight: bold;
  border-right: 1px solid var(--ocean-deep);
  border-top: 1px solid var(--sky-blue);
  border-bottom: 1px solid var(--ocean-deep);
  border-left: 1px solid var(--sky-blue);
  background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-deep));
  height: 35px;
  padding: 0 15px;
  text-align: center;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
}

th::before {
  content: '??';
  position: absolute;
  left: 15px;
  opacity: 0.8;
}

td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
  border-right: 1px solid var(--border-sand);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--border-sand);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, var(--sand-medium), var(--sand-dark));
  height: 32px;
  padding: 0 15px;
  font-weight: bold;
  color: var(--text-sand);
}

td.catHead {
  font-size: 14px;
  background: linear-gradient(135deg, var(--sand-dark), var(--sand-medium));
}

td.row3Right, td.spaceRow {
  border-right: 1px solid var(--border-sand);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--border-sand);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, rgba(230, 213, 184, 0.4), rgba(255, 255, 255, 0.9));
}

.maintitle, h1, h2 {
  font-weight: bold;
  font-size: 26px;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  text-decoration: none;
  line-height: 130%;
  color: var(--text-ocean);
  margin: 1.5em 0 1em 0;
  padding-bottom: 10px;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, var(--ocean-blue), var(--sun-yellow), var(--coral)) 1;
  position: relative;
}

.maintitle::after, h1::after, h2::after {
  content: '???';
  position: absolute;
  right: 0;
  font-size: 24px;
  opacity: 0.6;
}

h2 {
  font-size: 22px;
  border-left: 4px solid var(--ocean-blue);
  padding-left: 15px;
  border-bottom: none;
}

.gen, .genmed, .gensmall {
  color: var(--text-sand);
  font-family: 'Segoe UI', sans-serif;
}

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

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

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

.mainmenu {
  font-size: 18px;
  color: var(--ocean-deep);
  font-weight: bold;
}

a.mainmenu {
  text-decoration: none;
  color: var(--ocean-blue);
}

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

.cattitle {
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0px;
  color: var(--ocean-deep);
}

a.cattitle {
  text-decoration: none;
  color: var(--ocean-deep);
}

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

.code, .quote {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 14px;
  color: var(--text-sand);
  border-right: 1px solid var(--border-sand);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--border-sand);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, rgba(245, 233, 217, 0.8), rgba(255, 255, 255, 0.9));
  padding: 20px;
  margin: 15px 0;
  border-radius: 8px;
  position: relative;
}

.code {
  border-left: 4px solid var(--ocean-blue);
}

.code::before {
  content: '?? Пляжный кодекс';
  display: block;
  font: bold 12px 'Segoe UI', sans-serif;
  color: var(--ocean-blue);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted var(--border-sand);
}

.quote {
  border-left: 4px solid var(--coral);
  font-style: italic;
}

.quote::before {
  content: '??';
  position: absolute;
  left: -15px;
  top: -15px;
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid var(--coral);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

input, textarea, select {
  color: var(--text-sand);
  font: normal 13px 'Segoe UI', Verdana, sans-serif;
  border-right: 1px solid var(--border-sand);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--border-sand);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin: 5px 0;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ocean-blue);
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.2);
}

.pgbutt a {
  font-family: 'Segoe UI', sans-serif;
  text-decoration: none;
  border: 2px solid var(--border-sand);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 233, 217, 0.8));
  padding: 8px 15px;
  margin: 5px 3px 0 0;
  border-radius: 6px;
  color: var(--ocean-blue);
  font-weight: 600;
  transition: all 0.2s ease;
}

.pgbutt a:hover {
  border-color: var(--ocean-blue);
  background: linear-gradient(135deg, rgba(30, 144, 255, 0.1), rgba(255, 255, 255, 0.9));
  transform: translateY(-2px);
}

/* Пляжные бейджи */
.beach-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
}

.badge-surfer {
  background: linear-gradient(135deg, var(--ocean-blue), var(--ocean-deep));
  color: white;
}
.badge-surfer::before { content: '??'; }

.badge-swimmer {
  background: linear-gradient(135deg, var(--sky-blue), #87cefa);
  color: white;
}
.badge-swimmer::before { content: '??'; }

.badge-tan {
  background: linear-gradient(135deg, var(--sun-yellow), #ffec8b);
  color: var(--text-sand);
}
.badge-tan::before { content: '??'; }

.badge-beachcomber {
  background: linear-gradient(135deg, var(--sand-dark), var(--sand-medium));
  color: white;
}
.badge-beachcomber::before { content: '??'; }

.badge-volleyball {
  background: linear-gradient(135deg, var(--coral), #ff6347);
  color: white;
}
.badge-volleyball::before { content: '??'; }

/* Иконки для разделов */
[class*="surfing"]::before { content: '?? '; }
[class*="swimming"]::before { content: '?? '; }
[class*="sunbathing"]::before { content: '?? '; }
[class*="beach"]::before { content: '??? '; }
[class*="ocean"]::before { content: '?? '; }
[class*="sand"]::before { content: '?? '; }
[class*="volleyball"]::before { content: '?? '; }
[class*="resort"]::before { content: '??? '; }

/* Анимация волн */
@keyframes wave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

.wave-animation {
  animation: wave 3s ease-in-out infinite;
}

/* Статусы пляжного дня */
.weather-sunny { color: var(--sun-yellow); background: rgba(255, 215, 0, 0.1); padding: 3px 8px; border-radius: 4px; }
.weather-cloudy { color: #a9a9a9; background: rgba(169, 169, 169, 0.1); padding: 3px 8px; border-radius: 4px; }
.weather-rainy { color: #4682b4; background: rgba(70, 130, 180, 0.1); padding: 3px 8px; border-radius: 4px; }

/* Адаптивность */
@media (max-width: 768px) {
  body {
    padding: 10px;
    font-size: 16px;
  }
  
  .maintitle, h1 {
    font-size: 22px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  .bodyline, .forumline {
    margin: 10px 0;
    border-radius: 8px;
  }
  
  th, td.cat, td.catHead, td.catBottom {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Эффект отражения на воде */
.water-reflection {
  position: relative;
}

.water-reflection::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(to bottom, 
    rgba(30, 144, 255, 0.2), 
    transparent);
  border-radius: 50%;
  filter: blur(2px);
}

/* Температура воды */
.water-temp {
  font: bold 14px 'Courier New', monospace;
  color: var(--ocean-blue);
  background: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid var(--ocean-blue);
  display: inline-block;
}

.water-temp::after {
  content: '°C';
  margin-left: 2px;
  font-size: 0.8em;
}

/* Копирайт в пляжном стиле */
.copyright {
  font: 12px 'Segoe UI', sans-serif;
  color: var(--text-sand);
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  border-top: 2px solid var(--border-sand);
}

.copyright::before {
  content: '???';
  margin-right: 5px;
}

/* Панель навигации */
.beach-nav {
  background: linear-gradient(135deg, var(--ocean-blue), var(--sky-blue));
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  box-shadow: 0 4px 6px rgba(30, 144, 255, 0.2);
}

.beach-nav a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.beach-nav a::before {
  content: '??';
  margin-right: 5px;
}

.beach-nav a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}