.player-tags{grid-column:1/-1;text-align:center;color:#e6e6e6;font-size:12px;opacity:.9}
/* Базовая тема: красно-чёрные тона, стилистика винила */
:root{--bg:#0a0a0a;--bg-soft:#121212;--fg:#e8e8e8;--muted:#bdbdbd;--primary:#e10600;--primary-dark:#a30400;--accent:#ff2d2d;--ring:#2a2a2a;--gap:16px;--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.6);--font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';--player-h:96px;--tabbar-h:62px;--wave-h:36px}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--fg);font-family:var(--font);line-height:1.5;overflow-x:hidden}

/* Шум поверх фона для глубины */
#noise-overlay{position:fixed;inset:0;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');mix-blend-mode:overlay;z-index:1}

.site-header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,rgba(0,0,0,0.85),rgba(0,0,0,0.35) 60%,rgba(0,0,0,0));backdrop-filter:blur(6px);border-bottom:1px solid #111}
.logo-wrap{display:flex;align-items:center;gap:12px}
.vinyl-logo{position:relative;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#111 0%,#090909 40%,#000 65%,#111 100%);box-shadow:inset 0 0 0 2px #111, 0 6px 18px rgba(0,0,0,.6)}
.vinyl-logo::before{content:"";position:absolute;inset:8px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%, transparent 0 3px, rgba(255,255,255,.05) 3px 6px)}
.vinyl-center{position:absolute;inset:22px;border-radius:50%;background:var(--primary)}
.logo-text{position:absolute;inset:auto 0 4px 0;text-align:center;font-weight:800;font-size:10px;letter-spacing:3px;color:#fff;opacity:.9}
/* Наложение изображения логотипа */
.logo-img{position:absolute;border-radius:50%;object-fit:cover;mix-blend-mode:screen;opacity:.95;pointer-events:none}

.nav{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--ring);color:var(--fg);padding:8px;border-radius:10px}
.nav-list{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.nav-list a{display:inline-block;padding:10px 14px;border-radius:999px;text-decoration:none;color:var(--fg);border:1px solid transparent;transition:.25s ease;position:relative}
.nav-list a:hover{border-color:var(--ring);transform:translateY(-1px)}
.nav-list a::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 var(--accent);opacity:0;transition:.25s}
.nav-list a:hover::after{box-shadow:0 0 0 6px rgba(225,6,0,.15);opacity:1}

/* Плеер встроенный в header */
.header-player{display:flex;align-items:center;gap:10px;flex:1;max-width:460px;margin:0 20px;padding:8px 14px;background:none;border-radius:8px;backdrop-filter:blur(12px)}
.header-player .player-tags{display:none}
.header-player .waveform{flex:1;height:28px;background:none;border-radius:4px}
.header-player .icon-btn{min-width:28px;min-height:28px;padding:6px}
.header-player .volume-wrap{display:flex;align-items:center;gap:6px}
.header-player .volume-knob{width:24px;height:24px}

/* Десктопный плеер внизу экрана */
@media (min-width: 801px){
  .header-player{display:none}
  .desktop-player{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:16px;padding:12px 20px;background:linear-gradient(0deg,rgba(0,0,0,0.9),rgba(0,0,0,0.7) 60%,rgba(0,0,0,0));backdrop-filter:blur(8px);border-top:1px solid #111}
  .desktop-player .player-tags{text-align:center;color:#e6e6e6;font-size:12px;opacity:.9;margin-bottom:2px}
  .desktop-player .waveform{flex:1;height:36px;background:rgba(0,0,0,.3);border-radius:8px;border:none;overflow:visible}
  .desktop-player .icon-btn{min-width:32px;min-height:32px;padding:8px}
  .desktop-player .volume-wrap{display:flex;align-items:center;gap:8px}
  .desktop-player .volume-knob{width:30px;height:30px}
  body{padding-bottom:calc(var(--player-h) + 16px)}
}

/* Мобильный плеер в header */
@media (max-width: 800px){
  .desktop-player{display:none}
  .header-player{display:flex}
}

.section{position:relative;padding:40px 20px}
.section-events{background:linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);border-top:2px solid rgba(225,6,0,0.4);position:relative}
.section-events::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, rgba(225,6,0,0.6), transparent)}
.section-portfolio{background:linear-gradient(135deg, #0d0d0d 0%, #080808 100%);border-top:1px solid rgba(40,40,40,0.5)}
.section-pricing{background:linear-gradient(135deg, #121212 0%, #0a0a0a 100%);border-top:1px solid rgba(35,35,35,0.4)}
.section-contacts{background:linear-gradient(135deg, #0f0f0f 0%, #070707 100%);border-top:1px solid rgba(30,30,30,0.5)}
.section-feedback{background:linear-gradient(135deg, #0b0b0b 0%, #050505 100%);border-top:1px solid rgba(25,25,25,0.4)}
.section h2{margin:0 0 24px 0;font-size:clamp(24px,3vw,32px)}

.section-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:visible;position:relative;padding:0 20px}
.bg-video{position:absolute;top:-10vh;left:-5vw;right:-5vw;width:calc(100% + 10vw);height:calc(100% + 20vh);object-fit:cover;object-position:50% 50%;opacity:.28;filter:grayscale(.25) contrast(1.15);transform:scale(1.0);transform-origin:50% 50%;background:#000;z-index:1;pointer-events:none}
.bg-poster{position:absolute;inset:0;background:url('../img/hero-poster.png') center/cover no-repeat;opacity:.85;display:none}
.hero-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-center h1{margin:8px 0 2px 0;font-size:clamp(30px,4.6vw,48px);font-weight:900;letter-spacing:0.05em;background:linear-gradient(45deg, #e10600 0%, #a30400 12.5%, #e10600 25%, #c41e3a 37.5%, #e10600 50%, #d63384 62.5%, #e10600 75%, #dc2626 87.5%, #e10600 100%);background-size:14px 14px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(225,6,0,0.5);animation:stripes 2s linear infinite}
@keyframes stripes{0%{background-position:0 0}100%{background-position:28px 28px}}
.dj-photo{width:min(50vw, 220px);border-radius:50%;aspect-ratio:1/1;object-fit:cover;box-shadow:var(--shadow)}
.tagline{margin:2px 0 8px 0;color:var(--muted)}
.tagline.fade{opacity:0;transition:opacity .35s ease}
.contacts-quick{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0 0}
.btn-pair{gap:8px}
.btn-pair .btn{padding:12px 18px;font-weight:600}
.btn-pair .btn-call{background:var(--primary);border:1px solid var(--primary-dark);border-top-left-radius:20px;border-bottom-left-radius:40px;border-top-right-radius:10px;border-bottom-right-radius:10px;padding:10px 13px 12px 20px;}
.btn-pair .btn-write{display:inline-flex;align-items:center;justify-content:center;background:#101010;border:1px solid var(--primary);color:#fff;box-shadow:none;border-top-left-radius:10px;border-bottom-left-radius:10px;border-top-right-radius:20px;border-bottom-right-radius:40px;padding:10px 21px 12px 14px;}
.btn-pair .btn-write svg{display:block}
.btn-pair .btn-write:hover{box-shadow:0 0 0 1px var(--primary) inset}
.hero-below{position:relative;z-index:2;display:grid;gap:16px;justify-items:center;width:100%;max-width:1200px;margin:10px auto 0 auto;padding:0 12px}
.btn-call{background:var(--primary);border:1px solid var(--primary-dark)}
.btn-write{background:transparent;border:1px solid var(--primary);box-shadow:none}
.btn-write:hover{box-shadow:0 0 0 1px var(--primary) inset}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:12px;padding:12px 16px;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px rgba(225,6,0,.28);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(225,6,0,.36)}
.btn.circle{border-radius:999px}

.player-tags{grid-column:1/-1;text-align:center;color:#e6e6e6;font-size:12px;opacity:.9;margin-bottom:2px;background:none;backdrop-filter:none;position:relative;z-index:1}
@media (max-width: 800px){.player-tags{display:none}}
.icon-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:4px 6px;cursor:pointer;transition:transform .2s ease, background .2s ease;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn:hover{border-color:var(--accent)}
.icon{width:16px;height:16px;display:block}
.playpause .icon-pause{display:none !important}
.playpause.playing .icon-play{display:none !important}
.playpause.playing .icon-pause{display:block !important}
.mute .icon-muted{display:none !important}
.mute.muted .icon-sound{display:none !important}
.mute.muted .icon-muted{display:block !important}
.playpause.playing .icon-play{display:none}
.playpause.playing .icon-pause{display:block}
.mute.muted .icon-sound{display:none}
.mute.muted .icon-muted{display:block}
/* Скрытый слайдер громкости */
.volume-wrap{position:relative}
.volume-slider{position:absolute;left:50%;transform:translateX(-50%);bottom:140%;width:160px;opacity:0;pointer-events:none;background:#0d0d0d;border:1px solid #222;border-radius:999px;padding:6px}
.volume-wrap.vertical{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px}
.volume-slider.v{display:none}
.volume-knob{width:30px;height:30px;border-radius:50%;background:
  conic-gradient(var(--accent) 0deg, var(--accent) var(--vol, 288deg), rgba(255,255,255,.12) var(--vol, 288deg)),
  radial-gradient(circle at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.2));
border:1px solid rgba(255,255,255,.12);position:relative;appearance:none;cursor:pointer}
.volume-knob::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 2px var(--accent)}
.volume-knob::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 0 0 2px var(--accent)}
.volume-knob::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.25) 0 2deg, transparent 2deg 6deg);pointer-events:none}
.volume-knob::before{content:"";position:absolute;left:50%;top:2px;width:2px;height:6px;background:#fff;border-radius:2px;transform:translateX(-50%);pointer-events:none}
.volume-wrap::after{content:"VOL";color:#ccc;font-size:10px;margin-left:6px;opacity:.8}
.volume-knob:focus{outline:2px solid var(--accent);outline-offset:2px}
.track-tags-mobile{display:none;color:#e6e6e6;font-size:12px;text-align:left;margin:6px 0 10px 0;white-space:nowrap;overflow:hidden;position:relative;background:none;backdrop-filter:none;z-index:1}
.track-tags-mobile .marquee{display:inline-block;min-width:100%;padding-right:40px}
.track-tags-mobile .marquee.clone{position:absolute;left:100%}
@media (max-width: 800px){
  #volume{display:none}
  .header-player .volume-knob{display:none}
  .header-player .volume-wrap::after{display:none}
  .track-tags-mobile{display:block}
  .track-tags-mobile .marquee{animation:marquee 16s linear infinite}
  .track-tags-mobile .marquee.clone{animation:marquee 16s linear infinite;animation-delay:8s}
}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
input[type="range"]{accent-color:var(--accent)}

@keyframes spin{to{transform:rotate(360deg)}}

/* Портфолио */
.section-portfolio{position:relative}
.media-carousel-wrap{position:relative}
.media-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px, 28vw);gap:16px;overflow-x:auto;overflow-y:hidden;padding:4px 40px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none}
.media-carousel::-webkit-scrollbar{display:none;height:0}
.media-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:1px solid #222;background:rgba(0,0,0,.7);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer}
.media-prev{left:8px}
.media-next{right:8px}
.media-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid #1a1a1a;background:#111;scroll-snap-align:center;transition:transform .3s ease, opacity .3s ease, box-shadow .3s ease}
.media-card .media{width:100%;height:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.media-card.dimmed{opacity:.5;transform:scale(.92)}
.media-card.featured{transform:scale(1.08);z-index:1}
.media-card:hover{box-shadow:0 8px 32px rgba(225,6,0,.3), 0 0 0 1px rgba(225,6,0,.2);transform:translateY(-4px);opacity:1 !important}
/* Индикатор загрузки для карточек медиатеки */
.media-card .card-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));}
.media-card .spinner{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#ff2d2d;animation:spin .8s linear infinite}
@media (max-width: 640px){.media-carousel{grid-auto-columns:minmax(65vw, 75vw)}}

/* Скелетоны/индикаторы загрузки */
.skeleton-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px, 28vw);gap:16px;padding:8px 44px}
.skeleton-card{position:relative;overflow:hidden;border-radius:18px;border:1px solid #1a1a1a;background:#101010;aspect-ratio:9/16}
.skeleton-shimmer{position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06), rgba(255,255,255,0));transform:translateX(-100%);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:12px;pointer-events:none}

/* Внутренние ссылки в меню без сдвигов */
.nav-list a{white-space:nowrap}

/* Форма: без зума на iOS */
input,textarea,button,select{font-size:16px}

/* Прайс */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.price-card{background:linear-gradient(180deg,#131313,#0e0e0e);border:1px solid #1a1a1a;border-radius:18px;padding:18px;box-shadow:var(--shadow);text-align:center}
.price{font-weight:800;color:#fff;margin:10px 0 14px 0}

/* Контакты */
.contacts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.contact-btn{display:flex;align-items:center;justify-content:center;background:#141414;border:1px solid #242424;border-radius:14px;padding:16px;color:#fff;text-decoration:none}
.contact-btn:hover{border-color:var(--accent)}

/* Форма */
.contact-form{display:grid;gap:12px;max-width:680px;margin:0 auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;background:#0f0f0f;color:#fff;border:1px solid #1a1a1a;border-radius:12px;padding:12px}
.checkbox{display:flex;align-items:center;gap:8px;color:var(--muted)}
.checkbox input[type="checkbox"]{margin:0}
.form-status{min-height:20px;color:var(--muted)}

.site-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding: 10px 20px 55px;border-top:1px solid #121212;background:#0a0a0a;margin-bottom:120px}
.to-top{background:#141414;border:1px solid #222}

/* Адаптив */
@media (max-width: 1024px) and (min-width: 801px){
  .waveform{height:80px}
}
@media (max-width: 800px){
  .bg-video{transform:scale(0.95) translateY(2vh);transform-origin:50% 50%}
  .bg-poster{opacity:.85}
  .dj-photo{transform:translateY(-5%)}
  .hero-below{margin-top:0}
  .contacts-quick{margin-top:4px}
  .nav-toggle{display:inline-flex;z-index:1001}
  .nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);z-index:999;opacity:0;visibility:hidden;transition:all 0.3s ease}
  .nav-overlay.open{opacity:1;visibility:visible}
  .nav-list{position:fixed;right:0;top:0;width:400px;height:100vh;background:rgba(12,12,12,0.8);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,0.1);box-shadow:-10px 0 30px rgba(0,0,0,0.8);z-index:1000;transform:translateX(100%) rotate(25deg);transform-origin:bottom right;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:65px 0 40px 15px;overflow:hidden;opacity:0;visibility:hidden;border-radius:20px 0 0 20px}
  .nav-list.open{transform:translateX(255px) translateY(-35px) rotate(-13deg);opacity:1;visibility:visible}
  .nav-list li{margin:8px 0;transform:translateX(-20px);opacity:0;transition:all 0.3s ease}
  .nav-list.open li{transform:translateX(0);opacity:1}
  .nav-list li:nth-child(1){transition-delay:0.1s}
  .nav-list li:nth-child(2){transition-delay:0.2s}
  .nav-list li:nth-child(3){transition-delay:0.3s}
  .nav-list li:nth-child(4){transition-delay:0.4s}
  .nav-list li:nth-child(5){transition-delay:0.5s}
  .nav-list a{display:block;padding:12px 20px;color:#fff;text-decoration:none;font-weight:600;font-size:18px;border-radius:8px;transition:all 0.3s ease;position:relative;overflow:hidden}
  .nav-list a:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.5s ease}
  .nav-list a:hover:before{left:100%}
  .nav-list a:hover{background:rgba(255,255,255,0.1);transform:translateX(10px)}
  .pricing-grid{grid-template-columns:1fr}
  .contacts-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .contacts-quick{margin-top:10px}
  .section-events{padding-top:20px}
  .site-footer{margin-bottom:80px}
}
@media (max-width: 480px){
  .contacts-grid{grid-template-columns:1fr}
}

/* События — карусель с центральной крупной карточкой */
.events-carousel-wrap{position:relative}
.events-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px, 28vw);gap:16px;overflow-x:auto;overflow-y:hidden;padding:4px 40px;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none}
.events-carousel::-webkit-scrollbar{display:none;height:0}
.events-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:1px solid #222;background:rgba(0,0,0,.7);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer}
.events-prev{left:8px}
.events-next{right:8px}
.event-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid #1a1a1a;background:#121212;scroll-snap-align:center;transition:transform .3s ease, opacity .3s ease, box-shadow .3s ease}
.event-card .event-media{width:100%;height:100%;aspect-ratio:9/16;object-fit:cover;display:block;filter:saturate(1.05)}
.event-card .event-footer{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.9));color:#fff;text-align:left}
.event-card.dimmed{opacity:.5;transform:scale(.92)}
.event-card.featured{transform:scale(1.08);z-index:1}
.event-card:hover{box-shadow:0 8px 32px rgba(225,6,0,.3), 0 0 0 1px rgba(225,6,0,.2);transform:translateY(-4px);opacity:1 !important}
.event-meta{margin:0;color:#fff;font-weight:600}

/* Улучшенное оформление мета-информации событий */
.event-meta-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-place,
.event-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.event-place svg,
.event-date svg {
  opacity: 0.8;
  flex-shrink: 0;
}

.event-place {
  color: #ff6b6b;
}

.event-date {
  color: #4ecdc4;
}
/* Индикатор загрузки для карточек событий */
.event-card .card-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));}
.event-card .spinner{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#ff2d2d;animation:spin .8s linear infinite}
@media (max-width: 640px){.events-carousel{grid-auto-columns:minmax(65vw, 75vw)}}

/* Мобильный таббар */
.mobile-tabbar{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(0,0,0,.9);backdrop-filter:blur(8px);border-top:1px solid #1a1a1a;z-index:10}
.mobile-tabbar a{flex:1;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;background:#171717;border:1px solid #222;padding:12px;border-radius:14px}
.mobile-tabbar svg{width:22px;height:22px;display:block;filter:drop-shadow(0px 7px 5px rgb(255, 0, 0));transition:filter .25s ease}
.mobile-tabbar a:hover svg,.mobile-tabbar a:active svg{filter:drop-shadow(0 0 8px rgba(255,0,0,.7))}
@media (max-width: 800px){.mobile-tabbar{display:flex}}
@media (max-width: 800px){body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}}

/* Стили для placeholder'ов медиафайлов */
.video-placeholder,
.image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  z-index: 1;
}

.placeholder-content {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.placeholder-content svg {
  margin-bottom: 8px;
  opacity: 0.7;
}

.placeholder-content p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

/* Улучшенные стили для загрузочных состояний */
.card-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Стили для кнопки звука */
.sound-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(10px);
  color: white;
}

.sound-button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%) scale(1.1);
}

.sound-button:active {
  transform: translateX(-50%) scale(0.95);
}

.sound-button.active {
  background: rgba(225, 6, 0, 0.8);
  border-color: #e10600;
  animation: soundPulse 1.5s ease-in-out infinite;
}

.sound-button svg {
  transition: transform 0.2s ease;
}

.sound-button:hover svg {
  transform: scale(1.1);
}

.sound-button.active svg {
  transform: scale(1.2);
}

/* Анимация пульсации для активной кнопки */
@keyframes soundPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(225, 6, 0, 0);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .sound-button {
    width: 40px;
    height: 40px;
    bottom: 15px;
  }
  
  .sound-button svg {
    width: 18px;
    height: 18px;
  }
}