:root {
  --bg-primary: rgba(255,255,255,0.12);
  --accent: #00ff88;
  --accent2: #ff6b6b;
  --accent3: #4ecdc4;
  --text-primary: #ffffff;
  --glass: rgba(255,255,255,0.12);
}

* {box-sizing:border-box;margin:0;padding:0;}
html {scroll-behavior:smooth;} /* ПЛАВНАЯ ПРОКРУТКА */

body {
  font-family: 'Roboto', system-ui, sans-serif;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(240,248,255,0.15) 100%),
              url('backgroundbanner.png') center/cover no-repeat fixed;
  background-blend-mode: overlay;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden; /* БЕЗ ГРИЗОВ */
  touch-action: manipulation; /* MOBILE ЛАГФИКС */
  -webkit-overflow-scrolling: touch; /* iOS ПЛАВНОСТЬ */
}

/* ДЕСКТОП */
.wrapper {max-width:1400px;margin:auto;padding:1.5rem;}
/* ИСПРАВЬТЕ .header и .logo */
.header {
  display:flex;justify-content:space-between;align-items:center;
  background: var(--glass); backdrop-filter:blur(25px);
  padding:1.5rem 2rem; /* УМЕНЬШИЛИ ОТСТУПЫ */
  border-radius:20px; margin-bottom:3rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.2);
  gap:1rem; /* МЕЖДУ ЭЛЕМЕНТАМИ */
}

.logo {
  display:flex; align-items:center; gap:0.5rem;
  font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:900;
}
.logo-img {
  width:clamp(40px, 8vw, 60px); height:clamp(40px, 8vw, 60px); /* АДАПТИВНЫЙ РАЗМЕР */
  border-radius:12px; object-fit:cover;
  margin:0 !important; padding:0; /* УБИРАЕМ ВСЕ ОТСТУПЫ */
}
.logo-text {
  background:linear-gradient(45deg,var(--accent),#00cc66);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.header-links {display:flex;gap:1rem;flex-wrap:wrap;}

/* МОБИЛЬНЫЕ ЭКРАНЫ */
@media (max-width: 768px) {
  .wrapper {padding:1rem;}
  .header {
    flex-direction:column; gap:1rem; padding:1.5rem;
    text-align:center; border-radius:20px;
  }
  .logo {font-size:2.5rem;}
  .header-links {justify-content:center;}
  
  .star-container {
    width:90vw; height:90vw; max-width:400px; max-height:400px;
    padding:2rem; margin:2rem auto;
  }
  .star-point {
    width:80px; height:80px; font-size:0.9rem;
  }
  .star-inner {padding:0.8rem; font-size:0.95rem;}
  
  .banners {padding:1.5rem; margin:1rem;}
  .banner-slots {grid-template-columns:1fr; gap:1rem;}
}

@media (max-width: 480px) {
  .star-point {width:70px; height:70px;}
  .star-inner {font-size:0.85rem; padding:0.6rem;}
}

/* СТАР-Лейаут */
.star-dashboard {display:grid;place-items:center;padding:1rem;}
.star-container {
  position:relative; width:800px; height:800px; max-width:95vw; max-height:95vh;
  background: rgba(255,255,255,0.08); border-radius:50%; padding:4rem;
  backdrop-filter:blur(20px); border:2px solid rgba(0,255,136,0.3);
}

.star-point {
  position:absolute; width:150px; height:150px;
  background:var(--glass); border:3px solid transparent;
  border-radius:25px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:900; font-size:1.1rem;
  transition:all 0.6s ease-out; box-shadow:0 8px 25px rgba(0,0,0,0.3);
}
.star-inner {
  color: var(--text-primary); text-align:center; padding:1.5rem;
  font-size:1.2rem; line-height:1.3;
}

.center {top:50%;left:50%;transform:translate(-50%,-50%);}
.p1 {top:5%;right:5%;}
.p2 {top:15%;right:40%;}
.p3 {top:45%;right:55%;}
.p4 {bottom:30%;right:20%;}
.p5 {bottom:35%;left:10%;}

/* АНИМАЦИЯ */
@keyframes spinAndGlow {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.3) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}
@keyframes rainbowBorder {
  0%, 100% { box-shadow: 0 0 20px #00ff88; }
  25% { box-shadow: 0 0 20px #ff6b6b; }
  50% { box-shadow: 0 0 20px #4ecdc4; }
  75% { box-shadow: 0 0 20px #ffe66d; }
}

.star-point:hover {
  animation: spinAndGlow 1s ease-in-out, rainbowBorder 2s infinite;
  background: rgba(255,255,255,0.25) !important;
  border-image: linear-gradient(45deg, #00ff88, #ff6b6b, #4ecdc4, #ffe66d) 1 !important;
}

/* КНОПКИ ШАПКИ */
.admin-btn,.details-btn {
  padding:1rem 2rem; background:var(--glass); border:2px solid var(--accent);
  border-radius:50px; color:var(--text-primary); font-weight:700;
  text-decoration:none; transition:all 0.3s; white-space:nowrap;
}
.details-btn {background:var(--accent); color:#000;}

/* БАННЕРЫ + POPUP */
.banners {padding:3rem;background:var(--glass);border-radius:25px;margin-top:3rem;}
.banner-slots {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;}

.popup {
  position:fixed; top:0; left:0; width:100%; height:100%; 
  background:rgba(0,0,0,0.85); z-index:10000; display:flex;
  align-items:center; justify-content:center; padding:1rem;
  backdrop-filter:blur(10px); animation:popupIn 0.3s ease-out;
}
.popup-content {
  background:var(--glass); padding:2.5rem; border-radius:25px;
  max-width:90vw; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5); width:100%; max-width:500px;
  animation:popupContent 0.4s ease-out;
}
@keyframes popupIn {from{opacity:0;} to{opacity:1;}}
@keyframes popupContent {from{transform:scale(0.7) translateY(50px); opacity:0;} to{transform:scale(1) translateY(0); opacity:1;}}

.popup h3 {margin-bottom:1.5rem; color:var(--accent);}
.popup-link,.popup-phone {display:inline-block; margin:0.5rem 1rem 0.5rem 0; padding:0.75rem 1.5rem; background:var(--accent); color:#000; text-decoration:none; border-radius:25px;}
.popup-close {width:100%; padding:1rem; margin-top:1.5rem; background:transparent; border:2px solid var(--accent); color:var(--accent); font-weight:700; border-radius:25px; cursor:pointer;}
/* TOOLTIP - ПРАВИЛЬНЫЙ */
.tooltip {
  position:fixed; 
  background:rgba(0,0,0,0.92); backdrop-filter:blur(15px);
  padding:0.8rem 1.2rem; border-radius:12px; color:white;
  font-size:0.9rem; max-width:280px; white-space:nowrap;
  pointer-events:none; z-index:9999; opacity:0;
  transform:translateY(10px); transition:all 0.25s ease;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
  border:1px solid rgba(0,255,136,0.3);
}
.tooltip.active {
  opacity:1; transform:translateY(-5px);
}

/* СТАР-ПОИНКТЫ БЕЗ ::after */
.star-point::after { display:none !important; }
.banner {
  background:rgba(255,255,255,0.15); padding:2rem; border-radius:20px;
  cursor:pointer; transition:all 0.3s; color:var(--text-primary);
  border:2px solid transparent; position:relative; overflow:hidden;
}
.banner.clickable:hover {
  background:rgba(0,255,136,0.2); transform:translateY(-8px);
  border-color:var(--accent); box-shadow:0 15px 40px rgba(0,255,136,0.3);
}
.banner::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  transition:left 0.5s; 
}
.banner.clickable:hover::after { left:100%; 
    /* 1. ТЕКСТ В ШАПКЕ - БЕЗ ИЗМЕНЕНИЯ РАЗМЕРОВ */
.header-subtitle {
  position:absolute; bottom:-1.2rem; left:50%; transform:translateX(-50%);
  font-size:0.75rem; color:#ffffff; background:rgba(0,0,0,0.85);
  padding:0.3rem 1rem; border-radius:20px; font-weight:500;
  white-space:nowrap; box-shadow:0 4px 15px rgba(0,0,0,0.4);
  letter-spacing:0.5px; border:1px solid rgba(0,255,136,0.3);
}

/* 2. БАННЕРЫ - КОМПАКТНЫЕ КАРТИНКИ */
.banner-img {
  width:100%; height:120px; object-fit:cover; border-radius:12px;
  margin-bottom:1rem; display:block;
}
.banner h4 {font-size:1.1rem; margin-bottom:0.5rem;}
.banner p {font-size:0.9rem; line-height:1.4; margin-bottom:0;}

}
/* POPUP - ПРАВИЛЬНЫЙ ЛЭЙАУТ */
.popup-content {
  background:var(--glass); padding:2.5rem; border-radius:25px;
  max-width:90vw; max-height:90vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,0.6); width:100%; max-width:550px;
  animation:popupContent 0.4s ease-out; position:relative;
}
.popup-desc {
  margin:1.5rem 0 2rem 0; line-height:1.6; font-size:1.1rem; 
  background:rgba(255,255,255,0.1); padding:1.2rem; border-radius:15px;
}
.popup-actions {
  display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0;
}
.popup-phone-group {
  display:flex; gap:1rem; flex-wrap:wrap;
}
.popup-link, .popup-phone, .popup-copy {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:1rem 1.8rem; background:var(--accent); color:#000;
  text-decoration:none; border-radius:25px; font-weight:600;
  transition:all 0.3s; white-space:nowrap;
}
.popup-copy {background:#ff6b6b; border:none; cursor:pointer;}
.popup-link:hover, .popup-phone:hover, .popup-copy:hover {
  transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,255,136,0.4);
}
.popup-map {
  margin:2rem 0; background:rgba(255,255,255,0.05); 
  border-radius:16px; overflow:hidden; padding:1rem;
}
.popup-close {
  width:100%; padding:1.2rem; margin-top:2rem; 
  background:transparent; border:2px solid var(--accent); 
  color:var(--accent); font-weight:700; border-radius:25px; 
  cursor:pointer; transition:all 0.3s; font-size:1.1rem;
}
.popup-close:hover {background:var(--accent); color:#000; transform:translateY(-2px);}
.popup-full-img img {
  width:100%; height:200px; object-fit:contain !important;
  border-radius:12px; background:rgba(255,255,255,0.05);
  display:block; margin:0 auto;
}
.popup-phone-group {
  display:flex; gap:0.8rem; flex-wrap:wrap; align-items:center;
}
/* МОБИЛЬНАЯ ВЕРСИЯ - КАРТОЧКИ В СПИСКЕ */
@media (max-width: 768px) {
  .wrapper {padding:1rem;}
  .header {flex-direction:column; gap:1rem; padding:1.5rem; text-align:center;}
  
  /* ★ КАРТОЧКИ БЕЗ ФОНА ★ */
  .star-dashboard {
    display:flex; flex-direction:column; gap:1rem; padding:1.5rem;
    background:rgba(0,0,0,0.9) !important; /* ЧЁРНЫЙ ФОН */
    border-radius:20px; margin:1rem 0;
    backdrop-filter:none !important; /* БЕЗ РАЗМЫТИЯ */
  }
  
  .star-container {
    display:contents !important; width:100% !important; height:auto !important;
    background:none !important; border:none !important; padding:0 !important;
    box-shadow:none !important; border-radius:0 !important;
  }
  
  .star-point {
    position:static !important; width:100% !important; height:75px !important;
    margin:0 !important; background:transparent !important;
    border:2px solid var(--accent) !important; /* ТОЛЬКО РАМКА */
    border-radius:16px !important; font-size:1rem !important;
    box-shadow:0 6px 20px rgba(0,0,0,0.4) !important;
    animation:none !important; transform:none !important;
    left:auto !important; top:auto !important; right:auto !important;
  }
  
  .star-inner {padding:1rem; text-align:center;}
  
  .banners {padding:1.5rem; margin:1rem;}
  .banner-slots {grid-template-columns:1fr; gap:1rem;}
}


@media (max-width: 480px) {
  .star-point {height:70px;}
  .star-inner {font-size:0.95rem; padding:0.8rem;}
}