/* ==========================================================================
   🌌 Смотрим Вместе — Космическая тема v4 / Cosmic Theme v4
   Плеер, авторизация, ЛК, модалки / Player, Auth, Profile, Modals
   ========================================================================== */

:root {
  --bg:#08081a;--bg2:#10102a;--card:#181838;--card-h:#222250;--input:#1a1a40;--overlay:rgba(8,8,26,.88);
  --tx:#e8e0ff;--tx2:#a89fd4;--tx-m:#6e6099;--tx-ac:#b388ff;
  --ac:#7c4dff;--ac-l:#b388ff;--ac-d:#5c2dcc;--ac2:#00e5ff;
  --ok:#69f0ae;--err:#ff4081;--warn:#ffd740;
  --brd:rgba(124,77,255,.18);--brd-h:rgba(124,77,255,.45);
  --shd:0 4px 24px rgba(0,0,0,.5);--glow:0 0 30px rgba(124,77,255,.12);
  --r:12px;--r-lg:20px;--t:.25s cubic-bezier(.4,0,.2,1);
  --font:'Inter',system-ui,-apple-system,sans-serif;--mono:'JetBrains Mono','Fira Code',monospace;
}
[data-theme="light"]{
  --bg:#f3eeff;--bg2:#e8e0f8;--card:#fff;--card-h:#f3e5f5;--input:#fff;--overlay:rgba(243,238,255,.92);
  --tx:#18103a;--tx2:#4a3f6e;--tx-m:#7b6fa8;--tx-ac:#5c2dcc;
  --ac:#7c4dff;--ac-l:#5c2dcc;--ac-d:#3d1b8e;--ac2:#00b8d4;
  --brd:rgba(124,77,255,.12);--brd-h:rgba(124,77,255,.4);
  --shd:0 4px 24px rgba(124,77,255,.08);--glow:0 0 20px rgba(124,77,255,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;transition:background var(--t),color var(--t)}

/* ─── Звёзды / Stars ─── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1.2px 1.2px at 8% 18%,rgba(179,136,255,.6) 50%,transparent 50%),radial-gradient(1px 1px at 22% 42%,rgba(0,229,255,.35) 50%,transparent 50%),radial-gradient(1.4px 1.4px at 38% 68%,rgba(179,136,255,.5) 50%,transparent 50%),radial-gradient(1px 1px at 55% 12%,rgba(124,77,255,.55) 50%,transparent 50%),radial-gradient(1.2px 1.2px at 72% 52%,rgba(0,229,255,.3) 50%,transparent 50%),radial-gradient(1px 1px at 88% 28%,rgba(179,136,255,.4) 50%,transparent 50%),radial-gradient(1.3px 1.3px at 14% 78%,rgba(124,77,255,.35) 50%,transparent 50%),radial-gradient(1px 1px at 58% 88%,rgba(0,229,255,.5) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 92% 82%,rgba(179,136,255,.45) 50%,transparent 50%),radial-gradient(2px 2px at 3% 48%,rgba(255,255,255,.7) 50%,transparent 50%),radial-gradient(1.8px 1.8px at 48% 4%,rgba(0,229,255,.7) 50%,transparent 50%),radial-gradient(2px 2px at 96% 58%,rgba(179,136,255,.5) 50%,transparent 50%);
  animation:stars 4s ease-in-out infinite alternate}
[data-theme="light"] body::before{opacity:.12}
@keyframes stars{0%{opacity:.65}100%{opacity:1}}

.wrap{max-width:1400px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ─── Шапка / Header ─── */
.hdr{background:var(--bg2);border-bottom:1px solid var(--brd);backdrop-filter:blur(16px);position:sticky;top:0;z-index:100}
.hdr-in{display:flex;align-items:center;padding:10px 20px;max-width:1400px;margin:0 auto;gap:12px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tx);font-size:1.4rem;font-weight:700;white-space:nowrap}
.logo-ico{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:1.1rem;animation:ico-glow 3s ease-in-out infinite}
@keyframes ico-glow{0%,100%{box-shadow:0 0 8px rgba(124,77,255,.3)}50%{box-shadow:0 0 22px rgba(124,77,255,.5),0 0 44px rgba(0,229,255,.15)}}

.search{flex:1;max-width:480px;position:relative}
.search input{width:100%;padding:9px 36px 9px 14px;background:var(--input);border:1px solid var(--brd);border-radius:22px;color:var(--tx);font-size:.9rem;outline:none;transition:border var(--t),box-shadow var(--t)}
.search input::placeholder{color:var(--tx-m)}
.search input:focus{border-color:var(--ac);box-shadow:0 0 12px rgba(124,77,255,.25)}
.search-ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--tx-m);pointer-events:none}

/* 🔍 Выпадающий поиск / Search dropdown */
.search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--brd-h);border-radius:var(--r);box-shadow:var(--shd),0 0 20px rgba(124,77,255,.1);overflow:hidden;z-index:500;max-height:380px;overflow-y:auto}
.search-dropdown .sd-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .12s;color:var(--tx);text-decoration:none}
.search-dropdown .sd-item:hover{background:var(--card-h)}
.search-dropdown .sd-thumb{width:80px;height:45px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--bg2)}
.search-dropdown .sd-info{min-width:0;flex:1}
.search-dropdown .sd-title{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-dropdown .sd-meta{font-size:.72rem;color:var(--tx-m)}
.search-dropdown .sd-empty{padding:20px;text-align:center;color:var(--tx-m);font-size:.85rem}

.hdr-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Кнопки входа / Auth buttons */
.btn-auth{padding:8px 18px;border-radius:22px;border:1px solid var(--brd);background:transparent;color:var(--tx2);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:var(--font);white-space:nowrap}
.btn-auth:hover{background:var(--card);border-color:var(--brd-h);color:var(--tx)}
.btn-auth.primary{background:linear-gradient(135deg,var(--ac),var(--ac-d));border:none;color:#fff;box-shadow:0 2px 12px rgba(124,77,255,.3)}
.btn-auth.primary:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(124,77,255,.4)}

/* ─── 🐝 Кнопка Приложения / Apps button ─── */
.btn-apps{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:22px;border:1px solid var(--brd);color:var(--tx2);font-size:.82rem;font-weight:500;text-decoration:none;transition:all var(--t);font-family:var(--font);white-space:nowrap}
.btn-apps:hover{border-color:var(--brd-h);color:var(--ac-l);background:var(--card);box-shadow:0 0 12px rgba(124,77,255,.15)}
.btn-apps svg{flex-shrink:0}

/* Юзер-меню / User dropdown */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:22px;border:1px solid var(--brd);background:var(--card);color:var(--tx);font-size:.85rem;cursor:pointer;transition:all var(--t);font-family:var(--font)}
.user-btn:hover{border-color:var(--ac);background:var(--card-h)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);min-width:180px;box-shadow:var(--shd);display:none;overflow:hidden;z-index:200}
.user-dropdown.open{display:block}
.user-dropdown a,.user-dropdown button{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--tx2);text-decoration:none;font-size:.85rem;width:100%;border:none;background:none;cursor:pointer;font-family:var(--font);text-align:left;transition:background var(--t)}
.user-dropdown a:hover,.user-dropdown button:hover{background:var(--card-h);color:var(--tx)}
.user-dropdown .sep{border-top:1px solid var(--brd);margin:4px 0}

/* Тема / Theme toggle */
.t-btn{position:relative;width:48px;height:24px;border-radius:24px;background:linear-gradient(135deg,#ffd54f,#ff9800);border:none;cursor:pointer;overflow:hidden;flex-shrink:0;transition:all .4s;box-shadow:0 2px 6px rgba(255,152,0,.3);outline:none}
.t-btn:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(255,152,0,.45)}
.t-btn .t-c{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
[data-theme="dark"] .t-btn{background:linear-gradient(135deg,#1a237e,#4a148c);box-shadow:0 2px 6px rgba(74,20,140,.4)}
[data-theme="dark"] .t-btn .t-c{left:26px;background:#1a1a2e;color:#ffd54f;box-shadow:0 0 10px rgba(255,213,79,.35)}
.t-btn .t-s{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
[data-theme="dark"] .t-btn .t-s{opacity:1}
.t-btn .s{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:s-tw 2s ease-in-out infinite alternate}
.t-btn .s:nth-child(1){top:5px;left:7px;animation-delay:0s}.t-btn .s:nth-child(2){top:10px;left:4px;animation-delay:.3s}
.t-btn .s:nth-child(3){top:3px;left:13px;animation-delay:.6s}.t-btn .s:nth-child(4){top:12px;left:12px;animation-delay:.9s}
.t-btn .s:nth-child(5){top:6px;left:9px;animation-delay:1.2s}
@keyframes s-tw{0%{opacity:.3;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}

/* Навигация / Nav */
.nav{display:flex;gap:22px;padding:0 20px;max-width:1400px;margin:0 auto;overflow-x:auto;background:var(--bg2);border-bottom:1px solid var(--brd);position:relative;z-index:1}
.nav a{color:var(--tx2);text-decoration:none;padding:10px 0;font-size:.88rem;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;transition:all var(--t)}
.nav a:hover,.nav a.on{color:var(--ac-l);border-bottom-color:var(--ac)}

/* Сетка / Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;padding:22px 0}

.card{background:var(--card);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all var(--t);border:1px solid var(--brd);animation:card-in .4s ease-out both}
.card:hover{transform:translateY(-4px);box-shadow:var(--glow),var(--shd);border-color:var(--brd-h);background:var(--card-h)}
@keyframes card-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.06s}.card:nth-child(3){animation-delay:.1s}
.card:nth-child(4){animation-delay:.14s}.card:nth-child(5){animation-delay:.18s}.card:nth-child(6){animation-delay:.22s}

.card-thumb{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg2),var(--ac-d));overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--t)}
.card:hover .card-thumb img{transform:scale(1.05)}
.card-thumb .dur{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.85);color:#fff;padding:2px 6px;border-radius:4px;font-size:.75rem;font-family:var(--mono)}
.card-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(124,77,255,.3);opacity:0;transition:opacity var(--t)}
.card:hover .play{opacity:1}
.play svg{width:52px;height:52px;fill:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.card-body{padding:10px 12px}
.card-t{font-size:.92rem;font-weight:600;color:var(--tx);line-height:1.35;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-m{display:flex;gap:10px;font-size:.78rem;color:var(--tx-m)}

/* ═══════════════════════════════════════════════════════════════
   🎬 КАСТОМНЫЙ ПЛЕЕР / CUSTOM VIDEO PLAYER
   ═══════════════════════════════════════════════════════════════ */

.player{position:relative;background:#000;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glow);margin-top:20px}
.player video{width:100%;display:block;cursor:pointer}

/* Оверлей кнопки Play / Big play overlay */
.player-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer;transition:opacity .3s}
.player-play svg{width:80px;height:80px;fill:#fff;filter:drop-shadow(0 4px 20px rgba(124,77,255,.5));opacity:.9;transition:transform .2s,opacity .2s}
.player-play:hover svg{transform:scale(1.1);opacity:1}
.player-play.hide{opacity:0;pointer-events:none}

/* Панель управления / Controls bar */
.player-ctrl{position:absolute;bottom:0;left:0;right:0;z-index:20;
  background:linear-gradient(transparent,rgba(0,0,0,.92) 40%);
  padding:40px 16px 12px;opacity:0;transition:opacity .3s}
.player:hover .player-ctrl,.player.paused .player-ctrl,.player.seeking .player-ctrl{opacity:1}

/* Спектрограмма / Spectrogram */
.player-spec{position:absolute;bottom:52px;left:0;right:0;height:50px;z-index:15;pointer-events:none;opacity:.6;transition:opacity .3s}
.player:hover .player-spec{opacity:.8}

/* Прогресс / Progress bar */
.player-prog{position:relative;height:6px;background:rgba(255,255,255,.15);border-radius:3px;cursor:pointer;margin-bottom:10px;transition:height .15s}
.player-prog:hover{height:10px}
.player-prog-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));border-radius:3px;position:relative;transition:width .05s linear}
.player-prog-fill::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--ac-l);box-shadow:0 0 10px var(--ac);opacity:0;transition:opacity .2s}
.player-prog:hover .player-prog-fill::after{opacity:1}
.player-prog-buf{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.2);border-radius:3px;pointer-events:none}
.player-time-mark{position:absolute;top:-28px;transform:translateX(-50%);background:rgba(0,0,0,.9);color:#fff;padding:2px 6px;border-radius:4px;font-size:.72rem;pointer-events:none;display:none;white-space:nowrap}
.player-prog:hover .player-time-mark{display:block}

/* Ряд кнопок / Controls row */
.player-row{display:flex;align-items:center;gap:8px}
.player-btn{background:none;border:none;color:#fff;cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative}
.player-btn svg{width:28px;height:28px;fill:#fff;opacity:.85}
.player-btn:hover{background:rgba(255,255,255,.15);transform:scale(1.1)}
.player-btn:hover svg{opacity:1}
.player-btn.active svg{fill:var(--ac-l)}

.player-btn-lg svg{width:34px;height:34px}

/* Время / Time */
.player-time{color:rgba(255,255,255,.8);font-size:.8rem;font-family:var(--mono);padding:0 4px;white-space:nowrap;user-select:none}
.player-time .cur{color:#fff;font-weight:600}

/* Громкость / Volume */
.player-vol{display:flex;align-items:center;gap:4px;margin-left:auto}
.player-vol-bar{width:80px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;cursor:pointer;position:relative}
.player-vol-fill{height:100%;background:var(--ac-l);border-radius:2px}
.player-vol-knob{position:absolute;top:50%;right:-5px;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.3)}

/* Правая группа кнопок / Right side buttons */
.player-right{display:flex;align-items:center;gap:4px;margin-left:auto}

/* Качество / Quality badge */
.quality-badge{background:var(--ac);color:#fff;font-size:.65rem;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.03em}

/* ═══════════════════════════════════════════════════════════════
   🔐 МОДАЛЬНОЕ ОКНО / MODAL AUTH
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center;animation:fadeIn .25s ease-out}
.modal-overlay.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{background:var(--card);border:1px solid var(--brd);border-radius:var(--r-lg);padding:36px 32px 28px;width:400px;max-width:92vw;box-shadow:var(--glow),0 20px 60px rgba(0,0,0,.5);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}

.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--tx-m);font-size:1.4rem;cursor:pointer;padding:4px;line-height:1;transition:color .2s}
.modal-close:hover{color:var(--tx)}
.modal h2{text-align:center;font-size:1.3rem;margin-bottom:4px}
.modal .sub{text-align:center;color:var(--tx-m);font-size:.85rem;margin-bottom:24px}

.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;color:var(--tx2);margin-bottom:4px;font-weight:500}
.field input{width:100%;padding:10px 14px;background:var(--input);border:1px solid var(--brd);border-radius:10px;color:var(--tx);font-size:.95rem;outline:none;transition:border var(--t),box-shadow var(--t);box-sizing:border-box}
.field input:focus{border-color:var(--ac);box-shadow:0 0 12px rgba(124,77,255,.25)}

.modal-btn{width:100%;padding:12px;font-size:1rem;font-weight:600;cursor:pointer;border:none;border-radius:22px;transition:all var(--t);font-family:var(--font)}
.modal-btn.primary{background:linear-gradient(135deg,var(--ac),var(--ac-d));color:#fff;box-shadow:0 2px 12px rgba(124,77,255,.3)}
.modal-btn.primary:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(124,77,255,.45)}
.modal-btn.primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

.modal-switch{text-align:center;font-size:.85rem;color:var(--tx-m);margin-top:16px}
.modal-switch a{color:var(--ac-l);text-decoration:none;font-weight:500}
.modal-switch a:hover{text-decoration:underline}

.modal-msg{text-align:center;font-size:.85rem;margin-top:12px;padding:8px 12px;border-radius:8px;display:none}
.modal-msg.err{background:rgba(255,64,129,.12);color:var(--err);display:block}
.modal-msg.ok{background:rgba(105,240,174,.12);color:var(--ok);display:block}

/* ═══════════════════════════════════════════════════════════════
   👤 ЛИЧНЫЙ КАБИНЕТ / PROFILE
   ═══════════════════════════════════════════════════════════════ */

.profile-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r-lg);padding:32px;max-width:600px}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#fff;margin-bottom:16px}
.profile-info{margin-bottom:24px}
.profile-info h2{font-size:1.3rem;margin-bottom:4px}
.profile-info p{color:var(--tx-m);font-size:.85rem}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.profile-stat{text-align:center;padding:12px;background:var(--bg2);border-radius:var(--r)}
.profile-stat .num{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--ac),var(--ac2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.profile-stat .lbl{font-size:.75rem;color:var(--tx-m)}

/* ═══════════════════════════════════════════════════════════════
   📱 МОБИЛЬНАЯ АДАПТАЦИЯ / MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* 📱 Планшет / Tablet */
@media(max-width:900px){
  /* 🎬 Страница просмотра — сайдбар под видео / Watch: sidebar below video */
  .watch-layout{flex-direction:column}
  .watch-sidebar{width:100%!important;position:static;order:2}
  .watch-main{order:1}
  .watch-sidebar.wt-active{width:100%!important}
  /* 💬 Комментарии — полная ширина / Comments full width */
  .comments{margin-top:20px}
}

/* 📱 Малый планшет / Small tablet */
@media(max-width:768px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  .hdr-in{padding:8px 10px;gap:6px}
  .search{margin:0 4px;max-width:200px}
  .search input{font-size:.82rem;padding:7px 30px 7px 10px}
  .player-btn svg{width:22px;height:22px}
  .player-btn-lg svg{width:26px;height:26px}
  .player-vol-bar{width:50px}
  .player-vol-bar .player-vol-knob{width:8px;height:8px}
  .modal{padding:28px 20px 20px}
  /* 🔍 Поиск — скрыть текст плейсхолдера / Shorter placeholder */
  .search input::placeholder{font-size:.78rem}
  /* 🎬 Инфо о видео / Video info */
  .vid-info{padding:12px 0}
  .vid-title{font-size:1.1rem}
  .vid-stats{gap:10px;font-size:.8rem;flex-wrap:wrap}
  /* 🎬 Плеер — компактные контролы / Compact controls */
  .player-ctrl{padding:30px 10px 8px}
  .player-row{gap:4px}
  .player-time{font-size:.72rem;padding:0 2px}
  .player-btn{padding:4px}
  /* 💬 WT-модалка — уже / WT modal narrower */
  .wt-modal{padding:20px 16px!important}
  .wt-cols{flex-direction:column;gap:16px}
  .wt-col{flex:1!important}
  .wt-info ol{font-size:.82rem}
  /* 🎤 Транскрипция / Transcript */
  .transcript-seg-line{gap:4px;padding:3px 0}
  .transcript-time{font-size:.65rem;padding:1px 4px}
  .transcript-word{padding:0 1px}
}

/* 📱 Телефон / Phone */
@media(max-width:520px){
  /* 🌟 Шапка — компактная / Compact header */
  .hdr-in{padding:6px 8px;gap:4px;flex-wrap:nowrap}
  .logo{font-size:1.1rem;gap:4px}
  .logo-ico{width:28px;height:28px;border-radius:8px;font-size:.9rem}
  .search{flex:1;max-width:none;min-width:0;margin:0}
  .search input{font-size:.8rem;padding:6px 28px 6px 10px;border-radius:18px}
  .search-ico{right:10px;font-size:.8rem}
  .hdr-right{gap:6px}
  .btn-auth{padding:5px 10px;font-size:.76rem;border-radius:16px}
  .btn-auth.primary{padding:5px 12px}
  .btn-apps-icon,.btn-upload{width:30px;height:30px;border-radius:8px}
  .btn-apps-icon svg,.btn-upload svg{width:16px;height:16px}
  .t-btn{width:40px;height:22px}
  .t-btn .t-c{width:16px;height:16px;font-size:9px}
  .t-btn .t-c{left:22px}
  [data-theme="light"] .t-btn .t-c{left:2px}
  .hamburger span{width:16px;height:1.5px}
  .hamburger{padding:6px;min-width:28px}

  /* 🎬 Плеер — минимальные контролы / Minimal controls */
  .player-ctrl{padding:24px 8px 6px}
  .player-prog{height:4px;margin-bottom:6px}
  .player-prog:hover{height:8px}
  .player-prog-fill::after{width:10px;height:10px}
  .player-row{gap:2px}
  .player-btn{padding:2px}
  .player-btn svg{width:20px;height:20px}
  .player-btn-lg svg{width:24px;height:24px}
  .player-time{font-size:.68rem;padding:0 1px}
  .player-time .cur{font-size:.72rem}
  .player-vol{display:none} /* 📱 Громкость скрываем — регулируется кнопками устройства / Hide volume — device buttons */
  .player-right{gap:2px}
  .quality-badge{font-size:.55rem;padding:1px 3px}
  .player-settings{width:calc(100vw - 16px);right:8px;bottom:50px;padding:10px 12px;max-height:70vh}
  /* 📱 Эквалайзер на мобилке — гориз. скролл / EQ horizontal scroll */
  .ps-eq-sliders{height:120px;overflow-x:auto;overflow-y:hidden;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:2px;padding:4px 0}
  .ps-eq-band{flex:0 0 36px;flex-direction:column;min-width:36px}
  .ps-eq-slider{width:16px}
  .ps-fx-sliders{gap:4px}
  .ps-fx-row{gap:4px}
  .ps-fx-label{min-width:70px;font-size:.68rem}

  /* 🎬 Видео-инфо / Video info */
  .vid-info{padding:10px 0}
  .vid-title{font-size:1rem;line-height:1.25}
  .vid-stats{gap:8px;font-size:.75rem;flex-wrap:wrap}
  .vid-stats span{white-space:nowrap}
  /* 📱 Кнопки под видео — столбиком / Action buttons stacked */
  .vid-info + div[style*="flex"], .wrap > .watch-layout > .watch-main > div[style*="flex"] {
    flex-direction:column;
    gap:6px!important;
  }

  /* 🌍 WT-модалка — полноэкранная / WT modal fullscreen */
  .wt-modal{max-width:100vw!important;width:100vw!important;padding:16px 12px!important;border-radius:0!important}
  .wt-cols{flex-direction:column;gap:12px}
  .wt-col:first-child,.wt-col:last-child{flex:1!important}
  .wt-info{padding:12px 14px}
  .wt-info ol{font-size:.82rem;line-height:1.6}
  .wt-create-btn{padding:10px!important;font-size:.88rem!important}

  /* 💬 Комментарии / Comments */
  .comments{margin-top:16px;padding-top:12px}
  .comments-title{font-size:.95rem;margin-bottom:10px}
  .comment-item{padding:10px}
  .comment-item.reply{margin-left:16px}
  .comment-avatar{width:24px;height:24px;font-size:.65rem}
  .comment-name{font-size:.8rem}
  .comment-text{font-size:.82rem}
  .comment-form textarea{min-height:56px;font-size:.85rem;padding:8px 10px}
  .comment-actions button{font-size:.72rem}

  /* 🎤 Транскрипция / Transcript */
  .transcript-header{padding:10px 12px;font-size:.85rem}
  .transcript-body{padding:0 12px 10px;max-height:280px}
  .transcript-seg-line{gap:6px;padding:4px 0}
  .transcript-time{font-size:.68rem;padding:2px 5px}
  .transcript-word{padding:1px 2px;font-size:.84rem}
  .transcript-seg-text{font-size:.84rem;line-height:1.5}

  /* 🌍 WT-панель (справа от видео) / WT panel */
  #wt-panel{min-height:200px;max-height:350px}
  .wt-panel-header{padding:8px 10px;font-size:.82rem}
  .wt-chat-input-row{padding:8px}
  .wt-input{font-size:.82rem;padding:7px 10px}
  .wt-send-btn{padding:7px 12px}

  /* 📦 Сетка карточек — 1 колонка / Grid 1 column */
  .grid{grid-template-columns:1fr;gap:12px}
  .card-body{padding:8px 10px}
  .card-t{font-size:.85rem}

  /* 📦 Сайдбар — карточки вертикальные / Sidebar cards vertical */
  .side-card{flex-direction:column;gap:6px}
  .side-thumb{width:100%;height:auto;aspect-ratio:16/9}
  .side-info{min-width:0}
  .side-title{font-size:.82rem}
  .side-meta{font-size:.72rem}

  /* 🌟 Шапка — скрыть текст лого / Hide logo text */
  .logo span:not(.logo-ico){display:none}

  /* 📱 Модалка авторизации / Auth modal */
  .modal{padding:20px 14px 16px;width:calc(100vw - 16px);max-width:calc(100vw - 16px);border-radius:16px}
  .modal h2{font-size:1.1rem}
  .modal .sub{font-size:.8rem}
  .field input{font-size:.88rem;padding:9px 12px}
  .modal-btn{padding:10px;font-size:.9rem}

  /* 📱 Сайдбар / Sidebar */
  .sidebar{width:260px}
  .sidebar-nav a{padding:8px 16px;font-size:.85rem}
}

/* Скроллбар / Scrollbar */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--ac);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--ac-l)}

.foot{text-align:center;padding:36px 0 16px;color:var(--tx-m);font-size:.78rem;position:relative;z-index:1}
.foot a{color:var(--ac-l);text-decoration:none}.foot a:hover{text-decoration:underline}

/* Кнопки通用 */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:22px;border:none;font-size:.88rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:var(--font)}
.btn-p{background:linear-gradient(135deg,var(--ac),var(--ac-d));color:#fff;box-shadow:0 2px 10px rgba(124,77,255,.3)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(124,77,255,.4)}
.btn-g{background:transparent;color:var(--tx2);border:1px solid var(--brd)}
.btn-g:hover{background:var(--card-h);border-color:var(--brd-h);color:var(--tx)}

.vid-info{padding:18px 0}.vid-title{font-size:1.4rem;font-weight:700;color:var(--tx);margin-bottom:6px}.vid-stats{display:flex;gap:18px;font-size:.85rem;color:var(--tx-m)}

/* ─── 🌍 Панель СМОТРЕТЬ ВМЕСТЕ (справа от видео) / Watch Together right panel ─── */
#wt-panel{display:flex;flex-direction:column;overflow:hidden;height:100%}
.wt-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);border:1px solid var(--brd);border-radius:var(--r) var(--r) 0 0;font-size:.92rem;font-weight:700;color:var(--tx);gap:8px;flex-shrink:0}
.wt-panel-header-btns{display:flex;gap:6px}
.wt-panel-btn{background:none;border:1px solid var(--brd);border-radius:6px;color:var(--tx-m);cursor:pointer;padding:4px 8px;font-size:.85rem;transition:all .15s;display:flex;align-items:center;gap:4px}
.wt-panel-btn:hover{background:var(--card-h);border-color:var(--ac);color:var(--ac-l)}
.wt-panel-btn-leave{color:var(--err);border-color:rgba(255,64,129,.3)}
.wt-panel-btn-leave:hover{background:rgba(255,64,129,.1);border-color:var(--err)}
.wt-room-id{font-size:.82rem;color:var(--tx2);padding:6px 12px;border-left:3px solid var(--ac);background:var(--bg2);flex-shrink:0}
.wt-room-id strong{font-family:var(--mono);font-size:.95rem;letter-spacing:.1em;color:var(--ac-l)}
.wt-copy-sm{background:none;border:1px solid var(--brd);border-radius:4px;color:var(--tx-m);cursor:pointer;padding:2px 6px;font-size:.75rem;transition:all .15s}
.wt-copy-sm:hover{background:var(--card-h);color:var(--ac)}
.wt-peers-info{font-size:.82rem;color:var(--tx2);padding:4px 12px;flex-shrink:0}
.wt-panel-sync{font-size:.78rem;color:var(--ac-l);padding:2px 12px;text-align:center;min-height:0;transition:all .3s;flex-shrink:0}
.wt-panel-chat{display:flex;flex-direction:column;border:1px solid var(--brd);border-radius:0 0 var(--r) var(--r);background:var(--bg2);overflow:hidden;flex:1;min-height:0}
.wt-chat-messages{flex:1;overflow-y:auto;padding:10px 12px;font-size:.86rem;display:flex;flex-direction:column-reverse;gap:2px}
.wt-panel-chat .wt-chat-sys{font-size:.78rem;color:var(--tx-m);padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.wt-panel-chat .wt-chat-msg{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.5;word-break:break-word}
.wt-panel-chat .chat-name{font-weight:600;color:var(--ac-l);margin-right:6px}
.wt-panel-chat .chat-name.auth{color:var(--ac)}
.wt-panel-chat .chat-text{color:var(--tx2)}
.wt-chat-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--brd);background:var(--card)}
.wt-chat-input-row .wt-input{flex:1;font-size:.86rem;letter-spacing:normal;text-transform:none;padding:8px 12px}
.wt-send-btn{background:var(--ac);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:1rem;cursor:pointer;transition:background .15s;display:flex;align-items:center}
.wt-send-btn:hover{background:var(--ac-l)}

/* ─── 🌍 Совместный просмотр / Watch Together ─── */
/* Модалка — широкая, двухколоночная, без прокрутки / Wide modal, two columns, no scroll */
.wt-modal{max-width:96vw!important;width:96vw!important;padding:28px 36px!important}
.wt-modal .modal-btn{width:auto;padding:10px 20px;font-size:.9rem}
.wt-modal .modal-btn.wt-create-btn{width:100%}
.wt-head{font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:20px;color:var(--tx)}

/* Двухколоночная раскладка / Two-column layout */
.wt-cols{display:flex;gap:32px}
.wt-col{flex:1;min-width:0}
.wt-col:first-child{flex:1.1}
.wt-col:last-child{flex:0.9}

.wt-label{display:block;font-size:.84rem;font-weight:600;color:var(--tx2);margin-bottom:6px}
.wt-captcha-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin-bottom:8px}
.wt-captcha-q{cursor:pointer;padding:8px 14px;background:var(--bg2);border:1px solid var(--brd);border-radius:8px;font-size:.92rem;font-weight:500;color:var(--ac-l);white-space:nowrap;user-select:none;transition:all .2s;flex-shrink:0}
.wt-captcha-q:hover{background:var(--card-h);border-color:var(--ac)}
.wt-captcha-q:active{transform:scale(.96)}
.wt-captcha-row .wt-input{flex:1;min-width:80px}
.wt-captcha-row .modal-btn{flex-shrink:0;white-space:nowrap}
.wt-input{padding:10px 14px;background:var(--input);border:1px solid var(--brd);border-radius:10px;color:var(--tx);font-size:.95rem;font-family:var(--font);outline:none;transition:border var(--t),box-shadow var(--t);box-sizing:border-box;letter-spacing:normal;text-transform:none}
.wt-input:focus{border-color:var(--ac);box-shadow:0 0 12px rgba(124,77,255,.25)}
.wt-room-row{display:flex;gap:8px;align-items:stretch}
.wt-room-row .wt-input{flex:1}
.wt-room-row .modal-btn,.wt-room-row .wt-copy-btn{flex-shrink:0}
.wt-copy-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;border-radius:10px;border:1px solid var(--brd);background:var(--bg2);color:var(--tx2);font-size:.82rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:var(--font)}
.wt-copy-btn:hover{background:var(--card-h);border-color:var(--ac);color:var(--ac-l)}
.wt-create-btn{margin-bottom:4px;width:100%}
.wt-hint{font-size:.75rem;color:var(--tx-m);margin-top:6px}
.wt-divider{text-align:center;margin:16px 0;position:relative}
.wt-divider::before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--brd)}
.wt-divider span{position:relative;background:var(--card);padding:0 14px;color:var(--tx-m);font-size:.82rem}

/* Инфо-блок справа / Info block on the right */
.wt-info{padding:20px 24px;background:var(--bg2);border-radius:var(--r-lg);border:1px solid var(--brd);height:100%}
.wt-info p{font-size:.92rem;font-weight:600;color:var(--tx);margin-bottom:10px}
.wt-info ol{margin:0;padding-left:20px;font-size:.86rem;color:var(--tx2);line-height:1.8}
.wt-info li{margin-bottom:3px}

/* Подключён — компактно / Connected state — compact */
.wt-status{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r);background:rgba(105,240,174,.08);border:1px solid rgba(105,240,174,.2);margin-bottom:16px}
.wt-status-dot{font-size:.8rem}
.wt-status-text{font-size:.92rem;font-weight:500;color:var(--ok)}
.wt-grid{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.wt-grid-label{font-size:.86rem;font-weight:600;color:var(--tx2);white-space:nowrap}
.wt-grid-val{display:flex;gap:8px;flex:1}
.wt-grid-val .wt-input{flex:1}
.wt-ok-box{padding:14px 20px;border-radius:var(--r);background:rgba(105,240,174,.06);border:1px solid rgba(105,240,174,.15);font-size:.88rem;color:var(--tx2);margin-bottom:14px;line-height:1.5}
.wt-btn-row{display:flex;gap:10px}
.wt-btn-row .modal-btn,.wt-btn-row .btn{flex:1}

.btn-wt{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:22px;border:none;font-size:.88rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:var(--font);background:linear-gradient(135deg,#1a237e,#4a148c);color:#e0b0ff;border:1px solid rgba(124,77,255,.3)}
.btn-wt:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(124,77,255,.35);border-color:var(--ac);color:#fff}

.wt-leave-btn{flex-shrink:0}
.wt-peers{margin-top:10px;font-size:.82rem;color:var(--tx2)}
.wt-peers-item{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--bg2);border:1px solid var(--brd);border-radius:16px;margin:2px 4px}
.wt-peers-item.auth{border-color:var(--ac);color:var(--ac-l)}
.wt-peers-item .peer-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}
.wt-peers-item.auth .peer-dot{background:var(--ac)}
.wt-chat{max-height:180px;overflow-y:auto;margin-bottom:8px;border:1px solid var(--brd);border-radius:var(--r);padding:8px;background:var(--bg2)}
.wt-chat:empty{display:none}
.wt-chat-msg{font-size:.82rem;padding:4px 0;border-bottom:1px solid var(--brd)}
.wt-chat-msg:last-child{border-bottom:none}
.wt-chat-msg .chat-from{font-weight:600;color:var(--ac-l)}
.wt-chat-msg .chat-from.auth{color:var(--ac)}
.wt-chat-msg .chat-text{color:var(--tx2)}
.wt-chat-row{display:flex;gap:8px}
.wt-chat-row .wt-input{font-size:.85rem;letter-spacing:normal;text-transform:none}
.wt-send-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--brd);background:var(--bg2);color:var(--tx2);font-size:.82rem;cursor:pointer;font-family:var(--font);transition:all var(--t);flex-shrink:0}
.wt-send-btn:hover{background:var(--ac);color:#fff;border-color:var(--ac)}

/* ═══════════════════════════════════════════════════════════════
   💬 КОММЕНТАРИИ / COMMENTS
   ═══════════════════════════════════════════════════════════════ */
.comments{margin-top:28px;padding-top:24px;border-top:1px solid var(--brd)}
.comments-title{font-size:1.1rem;font-weight:700;color:var(--tx);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.comments-title .cnt{font-size:.8rem;font-weight:500;color:var(--tx-m);background:var(--bg2);padding:2px 8px;border-radius:10px}
.comment-form{margin-bottom:20px}
.comment-form textarea{width:100%;min-height:70px;padding:10px 14px;background:var(--input);border:1px solid var(--brd);border-radius:var(--r);color:var(--tx);font-size:.9rem;font-family:var(--font);resize:vertical;outline:none;transition:border var(--t)}
.comment-form textarea:focus{border-color:var(--ac);box-shadow:0 0 10px rgba(124,77,255,.15)}
.comment-form .cf-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.comment-form .cf-hint{font-size:.75rem;color:var(--tx-m)}
.comment-list{display:flex;flex-direction:column;gap:14px}
.comment-item{padding:12px 14px;background:var(--card);border:1px solid var(--brd);border-radius:var(--r);transition:border-color var(--t)}
.comment-item:hover{border-color:var(--brd-h)}
.comment-item.reply{margin-left:32px;background:var(--bg2);border-color:transparent}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.comment-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0}
.comment-name{font-size:.85rem;font-weight:600;color:var(--tx)}
.comment-name.admin{color:var(--ac-l)}
.comment-date{font-size:.72rem;color:var(--tx-m)}
.comment-text{font-size:.88rem;color:var(--tx2);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.comment-actions{display:flex;gap:12px;margin-top:6px}
.comment-actions button{background:none;border:none;color:var(--tx-m);font-size:.76rem;cursor:pointer;padding:0;font-family:var(--font);transition:color .15s}
.comment-actions button:hover{color:var(--ac)}
.comment-actions .del:hover{color:var(--err)}
.comment-auth-wall{text-align:center;padding:24px;color:var(--tx-m);font-size:.88rem;background:var(--bg2);border-radius:var(--r);border:1px dashed var(--brd)}
.comment-auth-wall a{color:var(--ac-l);text-decoration:none;font-weight:600}
.comment-auth-wall a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════
   🖱️ КОНТЕКСТНОЕ МЕНЮ ПЛЕЕРА / PLAYER CONTEXT MENU
   ═══════════════════════════════════════════════════════════════ */
.player-ctx{position:fixed;z-index:9999;min-width:220px;background:#18182e;border:1px solid rgba(124,77,255,.25);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 1px rgba(255,255,255,.08) inset;overflow:hidden;display:none;animation:ctxIn .12s ease-out;font-size:0;line-height:1.4;padding:3px 0}
.player-ctx.open{display:block}
@keyframes ctxIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.player-ctx-header{padding:7px 12px;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.player-ctx-header::before{content:'';display:inline-block;width:14px;height:14px;border:1.5px solid rgba(255,255,255,.35);border-radius:50%}
.player-ctx-header::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid rgba(255,255,255,.35);border-top:3px solid transparent;border-bottom:3px solid transparent;margin-left:-9px}
.player-ctx-item{display:flex;align-items:center;gap:8px;padding:5px 12px;color:rgba(255,255,255,.82);font-size:13px;cursor:pointer;transition:background .1s;border:none;background:none;width:100%;text-align:left;font-family:-apple-system,system-ui,sans-serif;white-space:nowrap;line-height:1.4}
.player-ctx-item:hover{background:rgba(124,77,255,.22);color:#fff}
.player-ctx-item:active{background:rgba(124,77,255,.35)}
.player-ctx-item .ctx-ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.65}
.player-ctx-item:hover .ctx-ico{opacity:1}
.player-ctx-item .ctx-key{margin-left:auto;font-size:11px;color:rgba(255,255,255,.3);font-family:-apple-system,system-ui,sans-serif;font-weight:500}
.player-ctx-item:hover .ctx-key{color:rgba(255,255,255,.55)}
.player-ctx-sep{border-top:1px solid rgba(255,255,255,.06);margin:3px 0}

/* Светлая тема контекстного меню */
[data-theme="light"] .player-ctx{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 8px 32px rgba(0,0,0,.15),0 0 1px rgba(0,0,0,.05) inset}
[data-theme="light"] .player-ctx-header{color:rgba(0,0,0,.4);border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .player-ctx-item{color:rgba(0,0,0,.78)}
[data-theme="light"] .player-ctx-item:hover{background:rgba(124,77,255,.1);color:#1a1a2e}
[data-theme="light"] .player-ctx-sep{border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .player-ctx-item .ctx-key{color:rgba(0,0,0,.3)}

/* ─── 💾 Тост «Продолжить?» / Resume toast ─── */
.resume-toast{font-family:var(--font);pointer-events:auto}
.resume-toast-inner{display:flex;align-items:center;gap:12px;background:rgba(10,10,26,.94);border:1px solid rgba(124,77,255,.3);border-radius:10px;padding:12px 18px;backdrop-filter:blur(16px);box-shadow:0 6px 28px rgba(0,0,0,.5),0 0 20px rgba(124,77,255,.12)}
.resume-icon{font-size:1.1rem;opacity:.8}
.resume-text{flex:1;min-width:0}
.resume-title{font-size:.88rem;font-weight:600;color:#fff}
.resume-sub{font-size:.74rem;color:rgba(255,255,255,.5);margin-top:1px}
.resume-btn{padding:7px 16px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font);font-size:.8rem;font-weight:600;transition:all .15s;letter-spacing:.01em}
.resume-yes{background:var(--ac);color:#fff}
.resume-yes:hover{background:var(--ac-l);box-shadow:0 0 16px rgba(124,77,255,.4)}
.resume-no{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.resume-no:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
@keyframes resumeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 📱 Мобилка — тост «Продолжить?» / Mobile resume toast */
@media(max-width:768px){
  .resume-toast{left:10px!important;right:10px!important;bottom:60px!important;width:auto!important}
  .resume-toast-inner{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .resume-text{flex:1 1 calc(100% - 40px);min-width:0}
  .resume-btn{flex:1 1 auto;min-width:0;text-align:center}
}
@media(max-width:520px){
  .resume-toast{left:6px!important;right:6px!important;bottom:52px!important}
  .resume-toast-inner{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .resume-title{font-size:.82rem}
  .resume-sub{font-size:.7rem}
  .resume-btn{padding:6px 12px;font-size:.76rem;flex:1 1 45%}
}

/* ─── 🖼️ Превью кадра / Thumbnail preview on timeline ─── */
.player-thumb-preview{box-shadow:0 4px 16px rgba(0,0,0,.6);border-radius:6px;overflow:hidden}
.player-thumb-preview canvas{border:1px solid rgba(255,255,255,.1)}
[data-theme="light"] .player-thumb-preview canvas{border-color:rgba(0,0,0,.15)}

/* ─── 🎭 Кнопка театрального режима / Theater button ─── */
.player-btn.theater{opacity:.65;transition:opacity .15s}
.player-btn.theater:hover{opacity:1}
.player-btn.theater.on{opacity:1;background:rgba(124,77,255,.3);border-radius:4px}
.player-btn.theater.on svg{stroke:var(--ac)}

/* ─── 💡 Амбиентная подсветка / Ambient Light ─── */
.player-amb-wrap{position:relative;border-radius:var(--r-lg);transition:box-shadow .4s ease-out}
.player.paused .player-amb-wrap{box-shadow:none!important;transition:box-shadow .8s ease-out}

/* ─── 🎛️ Панель настроек плеера: эквалайзер + эффекты ─── */
.player-settings{position:absolute;bottom:56px;right:8px;width:340px;max-height:80vh;overflow-y:auto;background:rgba(10,10,30,0.95);backdrop-filter:blur(20px);border:1px solid rgba(124,77,255,0.3);border-radius:12px;padding:14px 16px;z-index:60;color:#fff;font-size:.82rem;animation:settingsIn .2s ease-out;box-shadow:0 8px 32px rgba(0,0,0,.6)}
@keyframes settingsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
[data-theme="light"] .player-settings{background:rgba(255,255,255,0.96);border-color:rgba(124,77,255,0.25);color:#1a1a2e;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.ps-section{margin-bottom:14px}
.ps-section:last-child{margin-bottom:0}
.ps-title{font-size:.92rem;font-weight:700;margin-bottom:8px;color:var(--ac);display:flex;align-items:center;gap:6px}
.ps-eq-presets,.ps-fx-presets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.ps-preset-btn{background:rgba(124,77,255,0.15);border:1px solid rgba(124,77,255,0.3);color:#b388ff;border-radius:6px;padding:3px 8px;font-size:.72rem;cursor:pointer;transition:all .15s;font-family:var(--font)}
.ps-preset-btn:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
.ps-preset-btn.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.ps-reset{background:rgba(255,70,70,0.1)!important;border-color:rgba(255,70,70,0.3)!important;color:#ff6b6b!important}
.ps-reset:hover{background:#ff4b4b!important;color:#fff!important}

/* Эквалайзер — вертикальные слайдеры */
.ps-eq-sliders{display:flex;gap:4px;justify-content:space-between;align-items:flex-end;height:140px;padding:4px 0}
.ps-eq-band{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}
.ps-eq-label{font-size:.62rem;color:rgba(255,255,255,0.5);font-variant-numeric:tabular-nums}
[data-theme="light"] .ps-eq-label{color:rgba(0,0,0,0.45)}
.ps-eq-slider{-webkit-appearance:none;appearance:none;width:20px;height:100px;background:transparent;writing-mode:vertical-lr;direction:rtl;cursor:pointer}
.ps-eq-slider::-webkit-slider-runnable-track{width:4px;background:rgba(124,77,255,0.25);border-radius:2px}
.ps-eq-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ac);border:2px solid #fff;margin-left:-5px;cursor:pointer;box-shadow:0 0 6px rgba(124,77,255,0.4)}
[data-theme="light"] .ps-eq-slider::-webkit-slider-thumb{border-color:var(--ac)}
.ps-eq-val{font-size:.65rem;color:var(--ac2);font-variant-numeric:tabular-nums;text-align:center;min-width:18px}

/* Видеоэффекты — горизонтальные слайдеры */
.ps-fx-sliders{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ps-fx-row{display:flex;align-items:center;gap:8px}
.ps-fx-label{font-size:.75rem;min-width:95px;white-space:nowrap}
.ps-fx-slider{-webkit-appearance:none;appearance:none;flex:1;height:4px;background:rgba(124,77,255,0.2);border-radius:2px;outline:none;cursor:pointer}
.ps-fx-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ac);border:2px solid #fff;cursor:pointer;box-shadow:0 0 6px rgba(124,77,255,0.4)}
.ps-fx-val{font-size:.68rem;color:var(--ac2);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.ps-fx-toggles{display:flex;gap:12px;margin-top:6px}
.ps-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:.78rem;color:rgba(255,255,255,0.75)}
.ps-toggle input[type="checkbox"]{accent-color:var(--ac);width:15px;height:15px;cursor:pointer}
[data-theme="light"] .player-settings{background:rgba(245,243,255,0.97);color:#1a1a2e}
[data-theme="light"] .ps-preset-btn{background:rgba(124,77,255,0.08);border-color:rgba(124,77,255,0.2);color:#7c4dff}
[data-theme="light"] .ps-fx-label,.ps-fx-slider{color:#1a1a2e}
[data-theme="light"] .ps-fx-val{color:#7c4dff}

/* ─── 🎬 Мини-плеер / Mini Player ─── */
#mini-player{position:fixed;bottom:20px;right:20px;z-index:9999;opacity:0;transform:translateY(20px) scale(.95);transition:all .3s cubic-bezier(.4,0,.2,1)}
#mini-player.mini-visible{opacity:1;transform:translateY(0) scale(1)}
.mini-player-inner{background:rgba(10,10,30,.95);backdrop-filter:blur(16px);border-radius:12px;overflow:hidden;border:1px solid rgba(124,77,255,.3);box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 20px rgba(124,77,255,.15);width:320px}
[data-theme="light"] .mini-player-inner{background:rgba(255,255,255,.97);border-color:rgba(124,77,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.15)}
.mini-close{position:absolute;top:6px;right:6px;z-index:10;background:rgba(0,0,0,.6);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .15s;backdrop-filter:blur(4px)}
.mini-close:hover{background:rgba(255,70,70,.8);transform:scale(1.1)}
.mini-video-wrap{position:relative;padding-top:56.25%;background:#000;cursor:pointer}
.mini-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.mini-info{padding:8px 12px 10px;cursor:pointer}
.mini-title{font-size:.82rem;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-hint{font-size:.68rem;color:var(--ac);opacity:.7;margin-top:2px}
[data-theme="light"] .mini-close{background:rgba(255,255,255,.8);color:#333}
[data-theme="light"] .mini-close:hover{background:rgba(255,70,70,.9);color:#fff}
@media(max-width:640px){#mini-player{bottom:10px;right:10px;left:10px;width:auto;}.mini-player-inner{width:100%}}

/* 📱 Очень маленький экран / Very small screen */
@media(max-width:360px){
  .hdr-in{padding:4px 6px;gap:3px}
  .btn-auth{padding:4px 8px;font-size:.72rem}
  .logo{font-size:1rem}
  .logo-ico{width:24px;height:24px;font-size:.8rem}
  .search input{font-size:.76rem;padding:5px 24px 5px 8px}
  .vid-title{font-size:.92rem}
  .player-btn svg{width:18px;height:18px}
  .player-btn-lg svg{width:20px;height:20px}
  .player-time{font-size:.62rem}
  .player-prog{height:3px;margin-bottom:4px}
  .player-prog:hover{height:6px}
}

/* ─── ☰ Гамбургер + боковое меню / Sidebar ─── */
.hamburger{display:flex;flex-direction:column;gap:4px;padding:8px;background:none;border:none;cursor:pointer;min-width:32px}
.hamburger span{display:block;width:20px;height:2px;background:var(--tx);border-radius:1px;transition:all .3s}
.hamburger:hover span{background:var(--ac)}
.sidebar{position:fixed;top:0;left:-280px;width:280px;height:100vh;background:var(--bg);border-right:1px solid var(--border);z-index:1001;transition:left .3s ease;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.3)}
.sidebar.open{left:0}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
.sidebar-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:1.05rem;color:var(--tx)}
.sidebar-close{background:none;border:none;color:var(--tx-m);font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s}
.sidebar-close:hover{background:rgba(124,77,255,.15);color:var(--ac)}
.sidebar-nav{padding:8px 0}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--tx);text-decoration:none;font-size:.9rem;transition:all .15s}
.sidebar-nav a:hover{background:rgba(124,77,255,.1);color:var(--ac)}
.sn-ico{font-size:1.1rem;width:24px;text-align:center}
.sidebar-sep{height:1px;background:var(--border);margin:4px 16px}

/* Адаптив хедера */
@media(max-width:768px){
  .hamburger{display:flex}
  .hdr-in{gap:8px}
  .search{flex:1;min-width:0}
  .search input{min-width:0}
  .hdr-right .btn-auth span{display:none}
}

/* ─── 🔊 Кнопка звука на карточке / Card unmute button ─── */
.card-unmute{position:absolute;bottom:10px;left:10px;z-index:5;width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .2s,transform .15s}
.card:hover .card-unmute{opacity:1}
.card-unmute:hover{transform:scale(1.12);background:rgba(124,77,255,.7)}
.card-unmute svg{width:28px;height:28px;fill:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.card-preview-video{z-index:1}

/* ─── ⬡ Иконка приложений / Apps icon ─── */
.btn-apps-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  color:var(--tx-m);transition:all .15s;text-decoration:none}
.btn-apps-icon:hover{background:rgba(124,77,255,.15);color:var(--ac)}

/* ─── 📤 Кнопка загрузки видео / Upload button ─── */
.btn-upload{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  color:var(--tx-m);transition:all .15s;text-decoration:none;
  background:linear-gradient(135deg,rgba(124,77,255,.12),rgba(0,229,255,.08));
  border:1px solid rgba(124,77,255,.2)}
.btn-upload:hover{background:linear-gradient(135deg,rgba(124,77,255,.25),rgba(0,229,255,.15));
  color:#fff;border-color:var(--ac);transform:scale(1.08);box-shadow:0 0 14px rgba(124,77,255,.25)}
.btn-upload svg{width:18px;height:18px}