*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Arial',sans-serif;
  color:#fff;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:url('bg.jpg') center center / cover fixed no-repeat;
}
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(10,8,5,0.55);
  z-index:0;
  pointer-events:none;
}
nav,header,main,footer{position:relative;z-index:1}
nav{
  background:rgba(20,15,10,0.75);
  border-bottom:1px solid rgba(255,160,60,0.3);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}
nav a{
  display:inline-block;
  padding:14px 16px;
  color:rgba(255,220,160,0.7);
  text-decoration:none;
  font-size:clamp(0.75em,2.3vw,0.9em);
  transition:color 0.2s,background 0.2s;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
nav a:hover,nav a.active{
  color:#ffb347;
  background:rgba(255,140,30,0.15);
}
header{
  text-align:center;
  padding:40px 15px 20px;
}
header h1{
  font-size:clamp(1.6em,7vw,3.5em);
  color:#fff;
  text-shadow:0 2px 20px rgba(255,120,30,0.8);
  letter-spacing:3px;
  text-transform:uppercase;
  line-height:1.2;
  font-family:'Arial Black',sans-serif;
}
header p{
  font-size:clamp(0.85em,3vw,1.1em);
  color:rgba(255,220,160,0.8);
  margin-top:8px;
  font-style:italic;
}
main{
  flex:1;
  max-width:960px;
  width:100%;
  margin:20px auto;
  padding:0 15px;
}
.glass{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,160,60,0.25);
  border-radius:16px;
}
.empty{text-align:center;padding:80px 20px;color:rgba(255,255,255,0.3);font-size:1.2em}
.empty .icon{font-size:4em;margin-bottom:20px}
.slider-wrap{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  border:1px solid rgba(255,160,60,0.3);
  touch-action:pan-y;
}
.slides{display:flex;transition:transform 0.4s ease}
.slide{min-width:100%;background:#111}
.slide img{width:100%;max-height:70vh;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none}
.btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,140,30,0.7);
  border:none;
  color:#fff;
  font-size:clamp(1.2em,4vw,2em);
  width:clamp(36px,8vw,50px);
  height:clamp(36px,8vw,50px);
  cursor:pointer;
  border-radius:50%;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(8px);
}
.btn:active{background:rgba(255,100,0,0.9)}
.btn-left{left:8px}.btn-right{right:8px}
.dots{text-align:center;margin-top:12px}
.dot{
  display:inline-block;
  width:10px;height:10px;
  background:rgba(255,255,255,0.3);
  border-radius:50%;
  margin:0 4px;
  cursor:pointer;
  transition:background 0.3s,transform 0.2s;
}
.dot.active{background:#ffb347;transform:scale(1.3)}
.counter{text-align:center;color:rgba(255,255,255,0.4);font-size:0.85em;margin-top:6px}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
  gap:10px;
  margin-top:10px;
}
.gallery-grid img{
  width:100%;
  border-radius:12px;
  cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s;
  border:1px solid rgba(255,160,60,0.2);
  object-fit:cover;
  aspect-ratio:4/3;
}
.gallery-grid img:hover{
  transform:scale(1.03);
  box-shadow:0 8px 24px rgba(255,120,30,0.4);
  border-color:rgba(255,160,60,0.6);
}
.loading{text-align:center;padding:40px;color:rgba(255,255,255,0.4)}
.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:1000;flex-direction:column;justify-content:center;align-items:center}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:12px;border:1px solid rgba(255,160,60,0.4);object-fit:contain}
.lightbox-close{position:fixed;top:12px;right:15px;cursor:pointer;color:#fff;background:rgba(255,140,30,0.85);border:none;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;z-index:1001;font-size:1.3em}
.lightbox-counter{color:rgba(255,255,255,0.5);font-size:0.85em;margin-top:10px}
.lightbox-nav{display:flex;gap:20px;margin-top:14px}
.lightbox-nav button{background:rgba(255,140,30,0.8);border:none;color:#fff;font-size:1.5em;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.lightbox-nav button:active{background:rgba(255,100,0,0.9)}
.visit-counter{color:rgba(255,255,255,0.3);font-size:0.8em;margin-top:8px}
.visit-counter span{color:#ffb347}
footer{
  text-align:center;
  padding:25px 15px;
  color:rgba(255,255,255,0.3);
  font-size:clamp(0.7em,2.5vw,0.85em);
  border-top:1px solid rgba(255,160,60,0.15);
  margin-top:auto;
  background:rgba(10,8,5,0.5);
  backdrop-filter:blur(10px);
}
footer span{color:#ffb347}

.top-nav{position:sticky;top:0;z-index:10;background:rgba(20,15,8,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,160,60,0.2);padding:0 20px}
.top-nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.top-nav-left,.top-nav-right{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.top-nav a{display:inline-block;padding:22px 15px;color:rgba(255,220,160,0.65);text-decoration:none;font-size:clamp(0.6em,1.2vw,0.75em);transition:color 0.2s;white-space:nowrap;text-transform:uppercase;letter-spacing:0.5px;font-family:'Arial Black',sans-serif;-webkit-tap-highlight-color:transparent}
.top-nav a:hover,.top-nav a.active{color:#ffb347}
.top-nav-center{text-align:center;padding:12px 20px 8px;flex:2;min-width:200px}
.top-nav-center a{padding:0!important;display:block!important}
.top-nav-center h1{font-size:1.3em;color:#fff;font-family:'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:3px;text-shadow:0 2px 15px rgba(255,120,30,0.6);line-height:1.1}
.top-nav-center p{font-size:0.65em;color:rgba(255,200,120,0.6);letter-spacing:3px;text-transform:uppercase;margin-top:1px}

/* Мобильная версия */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:15px;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:24px;height:2px;background:#ffb347;border-radius:2px;transition:all 0.3s}
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,8,5,0.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:20px;display:flex;opacity:0;pointer-events:none;transition:opacity 0.3s}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{color:rgba(255,220,160,0.8);text-decoration:none;font-size:1.4em;font-family:'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;transition:color 0.2s,transform 0.3s,opacity 0.3s;-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(20px)}
.mobile-menu a:hover{color:#ffb347}
.mobile-close{position:absolute;top:20px;right:20px;background:none;border:none;color:#ffb347;font-size:2em;cursor:pointer}

@media(max-width:700px){
  .top-nav-left,.top-nav-right{display:none}
  .burger{display:flex}
  .top-nav-inner{justify-content:space-between}
  .top-nav-center{padding:10px 0;flex:1}
  .dashboard{grid-template-columns:1fr!important;padding:0 10px}
  .col-right{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .slide img{max-height:50vw}
}
@media(max-width:480px){
  .col-right{grid-template-columns:1fr}
}

/* Мобильная версия */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:15px;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:24px;height:2px;background:#ffb347;border-radius:2px;transition:all 0.3s}
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(10,8,5,0.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:20px;display:flex;opacity:0;pointer-events:none;transition:opacity 0.3s}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{color:rgba(255,220,160,0.8);text-decoration:none;font-size:1.4em;font-family:'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;transition:color 0.2s,transform 0.3s,opacity 0.3s;-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(20px)}
.mobile-menu a:hover{color:#ffb347}
.mobile-close{position:absolute;top:20px;right:20px;background:none;border:none;color:#ffb347;font-size:2em;cursor:pointer}

@media(max-width:700px){
  .top-nav-left,.top-nav-right{display:none}
  .burger{display:flex}
  .top-nav-inner{justify-content:space-between}
  .top-nav-center{padding:10px 0;flex:1}
  .dashboard{grid-template-columns:1fr!important;padding:0 10px}
  .col-right{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .slide img{max-height:50vw}
}
@media(max-width:480px){
  .col-right{grid-template-columns:1fr}
}

.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu.open a:nth-child(2){transition-delay:0.05s}
.mobile-menu.open a:nth-child(3){transition-delay:0.1s}
.mobile-menu.open a:nth-child(4){transition-delay:0.15s}
.mobile-menu.open a:nth-child(5){transition-delay:0.2s}
.mobile-menu.open a:nth-child(6){transition-delay:0.25s}
.mobile-menu.open a:nth-child(7){transition-delay:0.3s}
.mobile-menu{transition:opacity 0.3s}
.mobile-menu:not(.open){opacity:0;pointer-events:none}
.mobile-menu.open{opacity:1}

@media(max-width:480px){
  .top-nav a{padding:10px 6px;font-size:0.6em;letter-spacing:0}
  .top-nav-center h1{font-size:0.85em;letter-spacing:1px}
  .top-nav-center p{font-size:0.55em;letter-spacing:1px}
  .top-nav-center{padding:6px 5px}
}

@media(max-width:700px){
  .chat-app{height:calc(100vh - 80px)}
  .sidebar.open{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;background:rgba(10,8,5,0.98)}
  .chat-area{height:100%}
  .messages{height:calc(100% - 130px)}
}

/* === АНИМАЦИИ === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dashboard .col-left,
.dashboard .col-center,
.dashboard .col-right {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.dashboard .col-left   { animation-delay: 0.1s; }
.dashboard .col-center { animation-delay: 0.25s; }
.dashboard .col-right  { animation-delay: 0.4s; }
.dashboard .link-card:nth-child(1) { animation-delay: 0.35s; }
.dashboard .link-card:nth-child(2) { animation-delay: 0.42s; }
.dashboard .link-card:nth-child(3) { animation-delay: 0.49s; }
.dashboard .link-card:nth-child(4) { animation-delay: 0.56s; }
.dashboard .link-card:nth-child(5) { animation-delay: 0.63s; }
.dashboard .link-card:nth-child(6) { animation-delay: 0.70s; }
#particles-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}