@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');

/* ===========================
   RESET / BASE
=========================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
    background:
        radial-gradient(1200px 600px at 10% -20%, #1b1f35 0%, transparent 60%),
        radial-gradient(800px 500px at 90% 10%, #2b1a3f 0%, transparent 55%),
        #0b0d17;
    color: #fff;
    min-height: 100vh;
    padding-top: 90px; /* header offset */
    overflow-y: overlay;
}

a {
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

a:hover {
    color:#e5e5e5;
}

code {
	color:#fff;
}

code:hover {
    color:#e5e5e5;
}
/* ===========================
   LIQUID GLASS BASE (Light)
=========================== */

.glass {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 1rem;
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.glass:hover {
    background: rgba(255,255,255,0.15);
}

/* ===========================
   BUTTONS
=========================== */

.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 6px 14px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
	border:none;
	border: 1px solid rgba(255,255,255,0.2);
}

.glass-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
.glass-btn:active { transform: scale(0.96); }

/* ===========================
   HEADER
=========================== */

.glass-header {
    position: fixed;
    top: 0; left:0; right:0;
    z-index: 999;
    background: rgba(255,255,255,0.05);
	 backdrop-filter: blur(6px) saturate(180%);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    transition: transform .35s ease, background .25s ease;
}

.glass-header.hidden { transform: translateY(-100%); }

.header-inner {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 28px; /* расстояние между брендом и меню */
}

.brand { font-size:18px; font-weight:700; letter-spacing:.3px; }
.brand span { opacity:.6; font-weight:500; }

.main-nav {
  display: flex !important;
  gap: 18px;
  margin-left: 0; /* убираем старый отступ */
}
.main-nav a { color: rgba(255,255,255,.75); text-decoration:none; font-size:14px; }
.main-nav a.active, .main-nav a:hover { color:#fff; }

/* ===========================
   HEADER-RIGHT / DROPDOWN
=========================== */

.header-right { position: relative; z-index:1000; }

.glass-dropdown {
    position: absolute; right:0; top: calc(100% + 10px);
    min-width: 160px;
    padding: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 1.5rem;
    display:none;
    flex-direction:column;
    z-index:10001;
	
}

.glass-dropdown.show { display:flex; }

.glass-dropdown a {
    padding: 6px 10px;
    color:#fff;
    text-decoration:none;
    border-radius:1.5rem;
    font-size:14px;
}

.glass-dropdown a:hover { background: rgba(255,255,255,0.2); }

.profile-trigger {
    display:flex;
    align-items:center;
    gap:10px;
}

.profile-trigger-avatar,
.profile-dropdown-avatar,
.profile-page-avatar {
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.25);
}

.profile-trigger-avatar {
    width:30px;
    height:30px;
    border-radius:50%;
}

.profile-trigger-text {
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.profile-link-btn {
    text-decoration:none;
}

.profile-dropdown-card {
    padding:10px;
    text-align:center;
}

.profile-dropdown-avatar {
    width:64px;
    height:64px;
    border-radius:50%;
    margin-bottom:10px;
}

.profile-trigger-avatar-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,0.12);
    color:#fff;
    font-size: 16px;
}

.profile-dropdown-name {
    font-weight:700;
}

.profile-dropdown-meta {
    color: rgba(255,255,255,0.75);
    font-size: 13px;
}

.auth-hero,
.auth-page,
.profile-page {
    max-width: 720px;
    margin-top: 32px;
}

.auth-hero,
.auth-page {
    padding: 40px 32px;
}

.auth-hero-icon,
.auth-page-badge {
    width:72px;
    height:72px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    background: rgba(13, 110, 253, 0.18);
    font-size:32px;
}

.auth-cta-btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    padding:12px 22px;
    border-radius:1.5rem;
    border:1px solid rgba(86, 157, 255, 0.35);
    background: linear-gradient(135deg, rgba(0,136,204,0.9), rgba(60,166,255,0.85));
    color:#fff;
    font-weight:700;
    box-shadow: 0 16px 40px rgba(0,136,204,0.22);
}

.auth-cta-btn:hover {
    color:#fff;
    transform: translateY(-1px);
}

.telegram-widget-shell {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}

.telegram-widget-title {
    color: rgba(255,255,255,0.75);
}

.telegram-login-overlay {
    position: relative;
    width: fit-content;
}

.telegram-login-visible {
    min-width: 320px;
    pointer-events: none;
}

.telegram-login-widget {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.01;
}

.telegram-login-widget iframe {
    width: 100% !important;
    height: 100% !important;
}

.token-login-modal .modal-content.glass {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(15, 20, 30, 0.72);
    box-shadow: 0 28px 80px rgba(0,0,0,0.42);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.login-cta {
    width: 320px;
    min-height: 52px;
}

.modal-backdrop.show {
    background: rgba(5, 8, 16, 0.82);
    opacity: 1;
}

.token-login-modal .form-control {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}

.token-login-modal .form-control::placeholder {
    color: rgba(255,255,255,0.55);
}

.token-login-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.8;
}

.token-login-modal .btn-close:hover {
    opacity: 1;
}

.profile-page {
    padding: 32px;
}

.profile-page-header {
    display:flex;
    gap:20px;
    align-items:center;
}

.profile-page-header .flex-grow-1 {
    min-width: 0;
}

.profile-page-header h1 {
    overflow-wrap: anywhere;
}

.profile-page-avatar {
    width:110px;
    height:110px;
    border-radius:28px;
    flex: 0 0 110px;
    object-fit: cover;
}

.profile-page-avatar-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,0.12);
    font-size: 34px;
    color: #fff;
}

.profile-page-meta {
    color: rgba(255,255,255,0.75);
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.text-muted.small,
small.text-muted {
    color: rgba(255,255,255,0.75) !important;
}

.profile-page-card {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}

.profile-page-card-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.role-badge {
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.02em;
}

.role-badge-admin {
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd86b;
}

.role-badge-user {
    background: rgba(13, 202, 240, 0.16);
    border: 1px solid rgba(13, 202, 240, 0.35);
    color: #8ce6ff;
}

.admin-page {
    max-width: 1200px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.token-input-wrap,
.token-inline-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-input-wrap .form-control {
    min-width: 0;
}

.token-inline-wrap code {
    display: inline-flex;
    align-items: center;
    min-height: 40px;

}

.token-inline-btn {
    flex: 0 0 auto;
}

/* ===========================
   INPUTS / SEARCH
=========================== */

#search {
    width:100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.1);
    color:#fff;
    transition: all 0.2s ease;
}

#search::placeholder { color: rgba(255,255,255,0.6); }
#search:focus { outline:none; background: rgba(255,255,255,0.15); }

#playlistUrl {
    width:100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.1);
    color:#fff;
    transition: all 0.2s ease;
}

#playlistUrl::placeholder { color: rgba(255,255,255,0.6); }
#playlistUrl:focus { outline:none; background: rgba(255,255,255,0.15); }

#favoritesSearch {
    width:100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.1);
    color:#fff;
    transition: all 0.2s ease;
}

#favoritesSearch::placeholder { color: rgba(255,255,255,0.6); }
#favoritesSearch:focus { outline:none; background: rgba(255,255,255,0.15); }

/* ===========================
   CHECKBOXES
=========================== */

.form-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.form-check-input {
    appearance: none;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    margin-left: 0 !important;
    border: 2px solid rgba(255,255,255,0.42);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.form-check-input::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 5px;
    background: linear-gradient(135deg, #67a4ff, #9b7cff);
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.form-check-input:checked {
    border-color: rgba(103,164,255,0.95);
    background: rgba(103,164,255,0.18);
    box-shadow: 0 0 0 4px rgba(103,164,255,0.15);
}

.form-check-input:checked::after {
    transform: scale(1);
    opacity: 1;
}

.form-check-input:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.72);
}

.form-check-label,
.form-check-content {
    color:#fff;
    cursor:pointer;
    user-select:none;
    font-size:14px;
}

.form-check-pill {
    width: 100%;
    padding: 10px 15px;
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.form-check-pill:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

.form-check-pill .form-check-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.form-check-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: #dbe6ff;
}

.form-check-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-check-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.form-check-description {
    color: rgba(255,255,255,0.68);
    font-size: 12px;
    line-height: 1.35;
}

.form-check-card {
    padding: 14px 16px;
}

.form-check-pill-highlight {
    max-width: 320px;
    background: linear-gradient(135deg, rgba(87,119,255,0.16), rgba(23,162,184,0.08));
}

.admin-setting-toggle {
    max-width: 560px;
}

/* ===========================
   SELECT2 LIQUID GLASS (исправления)
=========================== */

.select2-container--default .select2-selection--single  {
    display: flex;
    align-items: center; /* строго по центру */
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1.5rem;
    height: 38px;
    padding: 6px 6px;
    color: #fff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
width: 100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.2s ease;
}

.select2-selection__rendered {
    display: flex;
    align-items: center; /* текст по вертикали */
    line-height: normal !important;
    height: 100%;
    color: #fff !important;
}

.select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%);
}

/* dropdown */
.select2-dropdown {
    background: rgba(255,255,255,0.1);
	 backdrop-filter: blur(6px) saturate(180%);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
    border:1px solid rgba(255,255,255,0.15);
    border-radius: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10003;
}

/* опции */
.select2-results__option {

	text-shadow: 0px 0px 7px black;
    padding: 6px 12px;
    display: flex;
    align-items: center; /* вертикальное центрирование */
}

.select2-results__option--highlighted {
    background: rgba(255,255,255,0.2) !important;
}

/* прокрутка dropdown */
.select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}

.select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-results__options::-webkit-scrollbar-track {
    background: rgba(25,25,40,0.2);
    border-radius: 8px;
}
.select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 8px;
}



/* ===========================
   CHANNEL CARDS (Light)
=========================== */

.channel-card {
    padding:12px;
    background: rgba(255,255,255,0.08);
    border-radius:1.5rem;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease; overflow:hidden;
	border:1px solid rgba(255,255,255,0.1);
}

.channel-card:hover { background: rgba(255,255,255,0.12); }

.channel-image { position:relative; overflow:hidden; border-radius:1.5rem; aspect-ratio:16/9; border:1px solid rgba(255,255,255,.1); }
.channel-image img { width:100%; height:100%; object-fit:cover; }

.channel-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.channel-group-badge,
.channel-archive-badge {
    position:absolute; top:6px; padding:2px 6px; font-size:10px;
    border-radius:999px;
    background: rgba(255,255,255,0.12);
    color:#fff;
}

.channel-group-badge { left:6px; }
.channel-top-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.channel-archive-badge {
    position: static;
    background: rgba(0,128,255,0.2);
}

.channel-title { font-size:13px; margin-top:6px; }

.channel-card-actions,
.favorite-item-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.channel-watch-btn,
.favorite-toggle,
.favorite-remove-btn {
    flex: 1 1 0;
    justify-content: center;
}

.favorite-toggle.is-favorite,
#favoriteBtn.is-favorite,
.favorite-remove-btn {
    background: rgba(255, 193, 7, 0.18);
    border-color: rgba(255, 193, 7, 0.45);
    color: #ffe082;
}

.favorite-toggle-inline {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.channel-card-actions-centered {
    align-items: center;
}

.favorite-card-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.favorite-sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    cursor: grab;
    flex: 0 0 auto;
}

.favorites-section {
    padding: 20px;
}

.favorites-page {
    max-width: 1200px;
}

.favorites-page-section {
    padding: 0;
    background: transparent;
    border: 0;
}

.favorites-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    max-width: 100%;
}

.favorites-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    font-weight: 700;
    flex: 0 0 auto;
}

.favorites-empty-state {
    padding: 20px;
    text-align: center;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75);
}

.favorites-groups {
    display: grid;
    gap: 16px;
}

.favorites-group-panel {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    padding: 14px;
    background: rgba(255,255,255,0.04);
}

.favorites-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.favorites-group-count {
    min-width: 36px;
    height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    font-weight: 700;
}

.favorites-group-empty {
    margin-top: 8px;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
}

#playlistFavoriteToggleBtn.is-favorite {
    border-color: rgba(255, 193, 7, 0.55);
    color: #ffd45e;
}

.favorite-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 16px;
    min-height: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.favorite-card {
    display: block;
    gap: 0;
    padding: 12px;
}

.favorite-item.drag-over {
    border-color: rgba(255, 193, 7, 0.6);
}

.favorite-item.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
}

.favorite-item-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    cursor: grab;
    flex: 0 0 auto;
}

.favorite-item-logo {
    width: 88px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    flex: 0 0 auto;
}

.favorite-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.favorite-item-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.favorite-item-title {
    font-weight: 700;
    font-size: 16px;
}

.favorite-item-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===========================
   PAGINATION (Light) FIXED
=========================== */

.glass-pagination {
    margin-top: 15px;
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(25,25,40,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center; /* выравнивание по высоте */
}

.page-item { list-style: none; }

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    font-size: 13px;
    line-height: 1; /* для вертикального центрирования текста */
    color: #fff;
    text-decoration: none;
    border-radius: 12px; /* одинаково для всех */
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center; /* стрелки строго по центру */
}

.page-link:hover:not(.disabled) { background: rgba(255,255,255,0.15); }

.page-item.active .page-link { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.2); }

.page-item.disabled .page-link { opacity:0.5; cursor:default; }

.page-item:first-child .page-link {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
	
}

/* Input "Перейти к странице" */
#gotoPageInput {
    width: 60px;
    height: 32px; /* чтобы совпадало с .page-link */
    border-radius: 12px; /* совпадает с .page-link */
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.08);
    color:#fff;
    text-align:center;
    font-size:13px;
    line-height:1;
    padding:0; /* убираем внутренние паддинги, чтобы центр был точный */
}

/* Button OK */
#gotoPageBtn {
    height: 32px; /* совпадает с .page-link */
    padding: 0 12px;
    border-radius: 12px; /* одинаково с .page-link */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color:#fff;
    border:1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

#gotoPageBtn:hover { background: rgba(255,255,255,0.15); }
#gotoPageInput:focus { outline:none; background: rgba(255,255,255,0.12); }

/* ===========================
   FOOTER
=========================== */

.glass-footer { margin-top:40px; padding:16px 0; background: rgba(255,255,255,0.05); border-top: 1px solid rgba(255, 255, 255, 0.15);}
.footer-inner { display:flex; justify-content:space-between; padding:0 20px; font-size:12px; color: rgba(255,255,255,.55); }

@media(max-width:768px) {

  /* Off-canvas меню слева */
  .main-nav {
    position: fixed;
    top: 0;
    left: -250px;        /* спрятано за экраном */
    width: 250px;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    padding-top: 80px;   /* отступ под хедер */
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    padding-left: 20px;
    z-index: 10001;
    transition: left 0.3s ease;
  }

  .main-nav a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
  }

  .main-nav.open {
    left: 0;            /* выезд меню */
  }

  /* Полупрозрачный фон */
  .menu-overlay {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    z-index:10000;
    transition: opacity 0.3s ease;
  }

  .menu-overlay.active {
    opacity:1;
    visibility:visible;
  }
  
  

    .footer-inner { flex-direction:column; gap:4px; text-align:center; }
}

/* ===========================
   SCROLLBAR FOR PAGE
=========================== */

body::-webkit-scrollbar { width:8px; }
body::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius:8px; }

/* ===========================
   CHANNEL PAGE
=========================== */

.channel-title-big {
    font-size: 22px;
    font-weight: 600;
}

.channel-logo {

    flex-shrink: 0;
}

.channel-logo img {
    max-height: 65px; /* подгоняем под блок заголовка */
    width: auto;
    object-fit: contain;
    border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
 
}


.channel-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.channel-badge {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
}

.channel-badge-link,
.service-badge-link {
    cursor: pointer;
}

.tooltip-link {
    color: #8ec5ff;
    text-decoration: underline;
    font-weight: 600;
}

.tooltip-link:hover {
    color: #c6e1ff;
}

.copy-notice {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
    transition: opacity .2s ease, transform .2s ease;
}

.copy-notice.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.channel-badge.archive {
    background: rgba(0,128,255,0.25);
}

/* ===========================
   PLAYER – STYLISH GLASS
=========================== */

.player-wrapper {
    border-radius: 1.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px) saturate(180%);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

.player-16x9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
}

.player-16x9 video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
 
    background: #000;
}

.player-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    opacity: 0.8;
    font-size: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 1rem;
}

.player-wrapper:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.01);
}

#playerWrapper {
    border-radius: 1.75rem;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(120, 162, 255, 0.22), transparent 35%),
        radial-gradient(circle at left bottom, rgba(68, 211, 255, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(8, 14, 28, 0.72), rgba(8, 14, 28, 0.96));
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 24px 80px rgba(5, 10, 30, 0.40);
    position: relative;
}

#playerWrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;

    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.player-glass-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), transparent 24%, rgba(0,0,0,0.30)),
        radial-gradient(circle at center, transparent 25%, rgba(3, 8, 20, 0.45) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity .2s ease;
}

#playerWrapper:hover .player-glass-overlay,
#playerWrapper.is-ui-visible .player-glass-overlay,
#playerWrapper.is-paused .player-glass-overlay,
#playerWrapper.is-audio-stream .player-glass-overlay {
    opacity: 1;
}

.player-shell {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    color: #fff;
    transition: opacity .25s ease, transform .25s ease;
}

.player-topbar,
.player-bottom-panel {
    transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}


.player-bottom-panel {
    background: transparent;
    border-color: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    box-shadow: none;
}

#playerWrapper:hover .player-topbar,
#playerWrapper.is-ui-visible .player-topbar,
#playerWrapper.is-paused .player-topbar,
#playerWrapper.is-audio-stream .player-topbar {
    background: linear-gradient(180deg, rgba(27, 31, 53, 1) 0%, rgba(43, 26, 63, 0.5) 50%, rgba(43, 26, 63, 0) 100%);

   
}

#playerWrapper:hover .player-bottom-panel,
#playerWrapper.is-ui-visible .player-bottom-panel,
#playerWrapper.is-paused .player-bottom-panel,
#playerWrapper.is-audio-stream .player-bottom-panel {
    background: linear-gradient(180deg, rgba(7, 14, 28, 0.30), rgba(7, 14, 28, 0.68));
    border-color: rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#playerWrapper:not(.is-ui-visible):not(.is-paused):not(.is-audio-stream) .player-topbar,
#playerWrapper:not(.is-ui-visible):not(.is-paused):not(.is-audio-stream) .player-bottom-panel,
#playerWrapper:not(.is-ui-visible):not(.is-paused):not(.is-audio-stream) .player-center-toggle,
#playerWrapper:not(.is-ui-visible):not(.is-paused):not(.is-audio-stream) .player-audio-card {
    opacity: 0;
    transform: translateY(10px);
}

.player-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -18px -18px 0;
    padding: 16px 18px 22px;
    
}

.player-top-actions,
.player-left-controls,
.player-right-controls,
.player-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(7, 14, 28, 0.56);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.player-status-pill.is-archive {
    background: rgba(11, 44, 96, 0.55);
}

.player-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5d5d;
    box-shadow: 0 0 16px rgba(255, 93, 93, 0.8);
}

.player-status-pill.is-archive .player-status-dot {
    background: #61b3ff;
    box-shadow: 0 0 16px rgba(97, 179, 255, 0.8);
}

.player-glass-toolbar .glass-btn,
.player-top-actions .glass-btn,
.player-control-row .glass-btn,
.player-center-toggle,
.player-live-btn {
    box-shadow: 0 12px 32px rgba(5, 10, 30, 0.28);
}

.player-center-toggle {
    width: 76px;
    height: 76px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #fff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.player-center-toggle:hover {
    transform: scale(1.04);
    background: rgba(255,255,255,0.16);
}

.player-bottom-panel {
    border-radius: 18px;
    padding: 12px 14px;
    border: 1px solid transparent;
}

.player-progress-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.player-time-label-end {
    text-align: right;
    white-space: nowrap;
}

.player-progress,
.player-volume {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

.player-progress::-webkit-slider-runnable-track,
.player-volume::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(110,178,255,0.95), rgba(255,255,255,0.28));
}

.player-progress::-webkit-slider-thumb,
.player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    background: #dff1ff;
    box-shadow: 0 4px 18px rgba(73, 153, 255, 0.55);
}

.player-progress::-moz-range-track,
.player-volume::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(110,178,255,0.95), rgba(255,255,255,0.28));
}

.player-progress::-moz-range-thumb,
.player-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    background: #dff1ff;
    box-shadow: 0 4px 18px rgba(73, 153, 255, 0.55);
}

.player-time-label,
.player-mode-note {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
}

.player-mode-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.player-volume-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 110px;
    padding: 0 4px;
}

.player-volume-icon {
    color: rgba(255,255,255,0.7);
}

.player-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 9px 12px;
}

.player-live-btn.is-live {
    opacity: 0.65;
}

#playerWrapper .glass-btn {
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
}


.player-audio-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(76%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(9, 18, 38, 0.46), rgba(9, 18, 38, 0.74));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.player-audio-card.is-visible,
#playerWrapper.is-audio-stream .player-audio-card {
    opacity: 1;
}

.player-audio-kicker {
    font-size: 11px;
    letter-spacing: .18em;
    color: rgba(171, 214, 255, 0.72);
    margin-bottom: 8px;
}

.player-audio-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 6px;
}

.player-audio-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
}

#playerWrapper.is-audio-stream video {
    opacity: 0.08;
}

#playerWrapper.is-native-player .player-shell,
#playerWrapper.is-native-player .player-glass-overlay {
    display: none !important;
}

#playerWrapper.is-native-player video {
    position: absolute;
    inset: 0;
    z-index: 3;
}

@media (max-width: 991.98px) {
    .player-shell {
        padding: 14px;
    }

    .player-topbar {
        margin: -14px -14px 0;
        padding: 14px 14px 18px;
    }

    .player-progress-wrap {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
    }

    .player-control-row {
        flex-direction: column;
        align-items: stretch;
    }

    .player-left-controls,
    .player-right-controls {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .player-volume-wrap {
        min-width: 0;
        flex: 1 1 180px;
    }

    .player-center-toggle {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

@media (max-width: 575.98px) {
    .player-bottom-panel {
        padding: 12px;
        border-radius: 14px;
    }

    .player-topbar {
        gap: 8px;
    }

    .player-status-pill {
        padding: 8px 12px;
    }
}

/* FULLSCREEN RESET */
#playerWrapper:-webkit-full-screen,
.player-16x9:-webkit-full-screen,
#playerWrapper:fullscreen,
.player-16x9:fullscreen,
#playerWrapper:-moz-full-screen,
.player-16x9:-moz-full-screen,
#playerWrapper video:-webkit-full-screen,
.player-16x9 video:-webkit-full-screen,
#playerWrapper video:fullscreen,
.player-16x9 video:fullscreen,
#playerWrapper video:-moz-full-screen,
.player-16x9 video:-moz-full-screen,
#playerWrapper.is-fullscreen,
#playerWrapper.is-fullscreen *,
#playerWrapper:fullscreen *,
#playerWrapper:-webkit-full-screen *,
#playerWrapper:-moz-full-screen * {
    border-radius: 0px;
}

#playerWrapper.is-fullscreen,
#playerWrapper.is-fullscreen *,
#playerWrapper:fullscreen,
#playerWrapper:fullscreen *,
#playerWrapper:-webkit-full-screen,
#playerWrapper:-webkit-full-screen *,
#playerWrapper:-moz-full-screen,
#playerWrapper:-moz-full-screen * {
    overflow: visible !important;
}

#playerWrapper.is-fullscreen,
#playerWrapper:fullscreen,
#playerWrapper:-webkit-full-screen,
#playerWrapper:-moz-full-screen {
    border: none !important;
}

.navbar-toggler {
    border: none; /* убираем рамку */
  outline: none; /* убираем обводку при фокусе */
  box-shadow: none; /* убираем тень при нажатии */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

.navbar-nav .nav-link.active {
  font-weight: bold; /* жирный шрифт */

}

@media (min-width: 992px) { /* lg и выше */
  .navbar-nav .nav-link {
    margin-left: 15px;
  }
}

/* Базовые стили дропдауна */
.glass-dropdown {
  display: none;
  flex-direction: column;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1); /* полупрозрачный фон */
  border-radius: 1.5rem;
  z-index: 1000;
  border: 1px solid rgba(255,255,255,0.2); /* тонкая рамка для эффекта стекла */
}

/* Общие стили родителя для absolute */
.header-right {
  position: relative; /* база для absolute */
  display: inline-block; /* чтобы родитель "схлопнулся" под кнопку */
}

/* Абсолютное позиционирование дропдауна под кнопкой */
.glass-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 140px;
  
}

/* Показать при клике */
.glass-dropdown.show {
  display: flex;
  
}

/* ===========================
   EPG (Channel Page)
=========================== */

.epg-container {
    
    max-height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.epg-now {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 1rem;
    padding: 8px 12px;
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
}

#epgTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#epgTabs .nav-link {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 1.2rem;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
}

#epgTabs .nav-link.active {
    background: rgba(0,128,255,0.25);
    border-color: rgba(0,128,255,0.4);
}

#epgTabs .nav-link:hover:not(.active) {
    background: rgba(255,255,255,0.15);
}

#epgContent {
    background: rgba(255,255,255,0.05);
    border-radius: 1.2rem;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 12px;
    overflow-y: auto;
	  max-height: 100%;
}

#epgContent div {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#epgContent div:last-child {
    border-bottom: none;
}



/* Scrollbar */
#epgContent::-webkit-scrollbar {
    width: 6px;
}

#epgContent::-webkit-scrollbar-track {
    background: rgba(25,25,40,0.2);
    border-radius: 6px;
}

#epgContent::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
}

#epgContent .channel-badge.archive {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(0,128,255,0.2);
}

.epg-catchup {
    font-size: 11px;
    padding: 2px 6px;
    margin-left: 4px;
}

/* Responsive: вкладки под плеером на мобильных */
@media(max-width: 992px) {
    .epg-container {
        width: 100%;
    }
}

#epgTabsWrapper {
  display: flex;
  flex-direction: column;
}

#epgContent {
  flex-grow: 1;
  overflow-y: auto;
}

/* === 2026 refresh === */
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
}

.glass-header-auth,
.glass-footer-auth {
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    opacity: 0.45;
    filter: blur(5px);
    pointer-events: none;
}

.channel-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 50px rgba(5, 10, 30, 0.22);
}

.channel-image {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    aspect-ratio: 16/9;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
}

.channel-image::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(8,12,22,0.55));
    pointer-events: none;
}

.channel-card-badges-left,
.channel-top-actions {
    position: absolute;
    top: 10px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.channel-card-badges-left { left: 10px; }
.channel-top-actions { right: 10px; }

.service-badge,
.channel-icon-badge,
.playlist-item-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(14, 20, 34, 0.75);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.channel-icon-badge {
    width: 34px;
    padding: 0;
}

.channel-icon-badge.favorite-toggle,
.channel-icon-badge.favorite-remove-btn {
    cursor: pointer;
}

.channel-icon-badge.is-favorite,
.favorite-remove-btn,
.danger-btn {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.38);
    color: #ffe082;
}

.channel-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    flex: 1 1 auto;
}

.channel-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.channel-card-subtitle {
    color: rgba(255,255,255,0.68);
    font-size: 13px;
}

.channel-card-actions {
    margin-top: auto;
}

.channel-card-actions-centered {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-watch-btn {
    width: 100%;
}

.favorite-sort-handle {
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
}

.favorites-pagination-toggle {
    min-width: 0;
    width: auto;
    flex: 0 1 320px;
}

.favorites-page,
.playlist-editor-page {
    max-width: 100%;
}

.search-modal {
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.search-result-card {
    padding: 14px;
    border-radius: 20px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.search-result-card:hover {
    transform: translateY(-2px);
}

.search-result-logo {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
}

.playlist-side-card {
    padding: 22px;
    border-radius: 28px;
}

.playlist-epg-list,
.playlist-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.playlist-epg-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.playlist-item-card {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.playlist-item-card.drag-over {
    border-color: rgba(13, 110, 253, 0.65);
}

.playlist-item-card.is-dragging {
    opacity: 0.65;
}

.playlist-item-top,
.playlist-item-title-row,
.playlist-item-meta,
.playlist-item-main {
    display: flex;
    gap: 12px;
    align-items: center;
}

.playlist-item-top,
.playlist-item-title-row {
    justify-content: space-between;
    flex-wrap: wrap;
}

.playlist-item-main {
    align-items: flex-start;
    margin-top: 14px;
}

.playlist-item-content {
    flex: 1 1 auto;
    min-width: 0;
}

.playlist-item-title-row .glass-btn {
    flex-shrink: 0;
}

.playlist-order-input {
    width: 72px;
    min-width: 72px;
    text-align: center;
}

.playlist-item-meta {
    flex-wrap: wrap;
    margin-top: 12px;
}

.playlist-item-meta .form-control,
.playlist-item-title-row .form-control {
    min-width: 220px;
}

.playlist-item-logo {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
}

.playlist-item-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.playlist-item-details summary {
    cursor: pointer;
    color: rgba(255,255,255,0.84);
}

.playlist-origin-note,
.playlist-editor-empty {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
}

.playlist-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    cursor: grab;
}

.playlist-drag-handle:active {
    cursor: grabbing;
}

.service-badge-favorite {
    background: rgba(13, 110, 253, 0.22);
    border-color: rgba(13, 110, 253, 0.42);
}

.service-badge-custom {
    background: rgba(25, 135, 84, 0.22);
    border-color: rgba(25, 135, 84, 0.42);
}

.primary-btn {
    background: rgba(13, 110, 253, 0.25);
    border-color: rgba(13, 110, 253, 0.42);
}

.page-floating-actions {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-floating-actions.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.page-floating-action {
    box-shadow: 0 18px 45px rgba(5, 10, 30, 0.28);
}

.scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1045;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(5, 10, 30, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.scroll-top-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.12));
    border-color: rgba(255,255,255,0.28);
}

.scroll-top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.faq-page {
    max-width: 100%;
    padding: 28px;
}

.faq-list {
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-example-list {
    display: grid;
    gap: 12px;
}

.faq-example-card,
.faq-device-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.faq-example-card-code {
    padding: 18px;
}

.faq-inline-code {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #dbe6ff;
    word-break: break-all;
}

.faq-code-block {
    margin: 0;
    padding: 16px;
    border-radius: 18px;
    background: rgba(4, 10, 26, 0.72);
    border: 1px solid rgba(255,255,255,0.08);
    color: #dfe9ff;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

#playerWrapper,
#playerWrapper video,
.player-16x9,
.player-16x9 video {
 
}

#playerWrapper:fullscreen,
#playerWrapper video:fullscreen,
.player-16x9:fullscreen,
.player-16x9 video:fullscreen,
#playerWrapper:-webkit-full-screen,
#playerWrapper video:-webkit-full-screen,
.player-16x9:-webkit-full-screen,
.player-16x9 video:-webkit-full-screen {
    border-radius: 0 !important;
    overflow: visible !important;
}

@media (max-width: 991px) {
    main.container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .playlist-item-main,
    .playlist-item-meta,
    .playlist-item-title-row,
    .playlist-item-top {
        flex-direction: column;
        align-items: stretch;
    }

    .playlist-item-logo {
        width: 100%;
        height: 180px;
    }

    .page-floating-actions {
        right: 16px;
        left: 16px;
        bottom: 84px;
    }

    .page-floating-action {
        width: 100%;
    }

    .scroll-top-btn {
        right: 16px;
        bottom: 16px;
    }
}