* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #e50914;
    --primary-dark: #b20710;
    --bg-dark: #141414;
    --bg-darker: #0a0a0a;
    --bg-card: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --border-color: #2a2a2a;
}

/* Theme: Nord */
[data-theme="nord"] {
    --bg-dark: #2e3440;
    --bg-darker: #242933;
    --bg-card: #3b4252;
    --text-primary: #eceff4;
    --text-secondary: #9da5b4;
    --border-color: #4c566a;
}
[data-theme="nord"] .sidebar {
    background: #242933;
}
[data-theme="nord"] .media-card:hover {
    box-shadow: 0 8px 24px rgba(136, 192, 208, 0.2);
}

/* Theme: Dracula */
[data-theme="dracula"] {
    --bg-dark: #282a36;
    --bg-darker: #1e1f29;
    --bg-card: #44475a;
    --text-primary: #f8f8f2;
    --text-secondary: #bd93f9;
    --border-color: #6272a4;
}
[data-theme="dracula"] .sidebar {
    background: #1e1f29;
}
[data-theme="dracula"] .media-card:hover {
    box-shadow: 0 8px 24px rgba(189, 147, 249, 0.2);
}

/* Theme: Light */
[data-theme="light"] {
    --bg-dark: #f0f2f5;
    --bg-darker: #ffffff;
    --bg-card: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #555770;
    --border-color: #d1d5db;
}
[data-theme="light"] .sidebar {
    background: #ffffff;
    border-right: 1px solid #d1d5db;
}
[data-theme="light"] .sidebar .nav-links a {
    color: #374151;
}
[data-theme="light"] .sidebar .nav-links a:hover,
[data-theme="light"] .sidebar .nav-links a.active {
    background: rgba(0,0,0,0.06);
    color: var(--primary-color);
}
[data-theme="light"] .mobile-header {
    background: #ffffff;
    border-bottom: 1px solid #d1d5db;
}
[data-theme="light"] .filter-chip-select,
[data-theme="light"] .setting-select {
    background: #f3f4f6;
    color: #1a1a2e;
    border-color: #d1d5db;
}
[data-theme="light"] .media-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
[data-theme="light"] .btn-secondary {
    background: #e5e7eb;
    color: #374151;
}
[data-theme="light"] .settings-section {
    background: #ffffff;
    border-color: #d1d5db;
}
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea {
    background: #f9fafb;
    color: #1a1a2e;
    border-color: #d1d5db;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
}

/* Custom Scrollbar - Enhanced */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #404040 0%, #2a2a2a 100%);
    border-radius: 10px;
    border: 2px solid var(--bg-darker);
    transition: all 0.3s ease;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #555 0%, #3a3a3a 100%);
    box-shadow: inset 0 0 8px rgba(229, 9, 20, 0.2);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #e50914 0%, #b20710 100%);
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: var(--bg-darker);
    border-right: 1px solid var(--border-color);
    padding: 2rem 0;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.logo {
    padding: 0 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.logo h1 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 700;
}

.logo .subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Search Container */
.search-container {
    padding: 1rem 1.5rem;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s;
}

.search-input:focus {
    border-color: var(--primary-color);
    background: var(--bg-darker);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-results {
    position: absolute;
    top: calc(100% - 0.5rem);
    left: 1.5rem;
    right: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.search-results.active {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-darker);
}

.search-result-poster {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.search-result-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--primary-color);
    border-radius: 3px;
    font-size: 0.7rem;
    margin-right: 0.5rem;
}

.search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.nav-menu {
    list-style: none;
    padding: 1.5rem 0;
}

.nav-menu li {
    margin-bottom: 0.5rem;
}

.nav-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.nav-menu a:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.nav-menu a.active {
    background: var(--bg-card);
    color: var(--text-primary);
    border-left-color: var(--primary-color);
}

/* Main Content */
.content {
    margin-left: 250px;
    flex: 1;
    padding: 2rem;
    width: calc(100% - 250px);
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    font-size: 2.5rem;
}

.stat-info h3 {
    font-size: 2rem;
    margin: 0;
}

.stat-info p {
    color: var(--text-secondary);
    margin: 0;
}

/* Section */
.section {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

/* Libraries Grid */
.libraries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.library-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.library-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.library-header {
    padding: 1.5rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.library-icon {
    width: 48px;
    height: 48px;
    background: rgba(229, 9, 20, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 1rem;
}

.library-info {
    flex: 1;
}

.library-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.library-type {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.library-stats {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    flex: 1;
}

.stat-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.75rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-box.full-width {
    grid-column: 1 / -1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.stat-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-footer {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Media Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
}

.media-card {
    position: relative;
    transition: transform 0.2s;
    cursor: pointer;
}

.media-card:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.25);
}

.media-poster {
    width: 100%;
    aspect-ratio: 2/3;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    cursor: pointer;
    position: relative;
}

.media-poster::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 50px;
    height: 50px;
    background: rgba(229, 9, 20, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.media-card:hover .media-poster::after {
    transform: translate(-50%, -50%) scale(1);
}

.media-info {
    margin-bottom: 0.5rem;
}

.media-settings-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    z-index: 10;
}

.media-card:hover .media-settings-btn {
    opacity: 1;
}

.media-settings-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}

.media-menu {
    position: absolute;
    top: 45px;
    right: 8px;
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem;
    min-width: 140px;
    display: none;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.media-menu.active {
    display: block;
}

.media-menu button {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: transparent;
    color: #ef4444;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.media-menu button:hover {
    background: rgba(220, 38, 38, 0.15);
}

.media-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-title {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-year {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Filter Controls */
.filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.filter-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.filter-select, .filter-input {
    padding: 0.5rem 1rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 120px;
}

.filter-input {
    min-width: 80px;
    width: 100px;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ==================== Media Page Redesign - Plex Style ==================== */

/* Library Picker */
.library-picker {
    padding: 1rem 0;
}

.library-picker-title {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.library-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.library-picker-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.library-picker-card:hover {
    border-color: var(--primary-color);
    background: rgba(229, 9, 20, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.library-picker-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.library-picker-card:hover::before {
    opacity: 1;
}

.library-picker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(229, 9, 20, 0.08);
    border-radius: 10px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.library-picker-icon svg {
    width: 28px;
    height: 28px;
}

.library-picker-details {
    flex: 1;
    min-width: 0;
}

.library-picker-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-picker-meta {
    display: flex;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.library-picker-shared {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0.15rem 0.5rem;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.library-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

/* Library Browser */
.library-browser {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
}

.library-browser-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.library-browser-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.media-tabs {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.library-back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.library-back-btn:hover {
    border-color: var(--primary-color);
    background: rgba(229, 9, 20, 0.08);
}

.library-browser-info h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
}

.library-browser-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.library-browser-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Content area with alphabet scrollbar */
.library-content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding-top: 1rem;
}

.library-content-wrapper .media-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2.5rem;
    scroll-behavior: smooth;
}

/* Alphabet Scrollbar */
.alphabet-scrollbar {
    position: sticky;
    top: 0;
    right: 0;
    width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    flex-shrink: 0;
    height: 100%;
    z-index: 20;
    user-select: none;
}

.alphabet-letter {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: all 0.15s;
    line-height: 1.4;
    text-align: center;
    width: 100%;
}

.alphabet-letter:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.alphabet-letter.active {
    color: var(--primary-color);
    background: rgba(229, 9, 20, 0.15);
    font-weight: 700;
}

.alphabet-letter.disabled {
    color: rgba(255, 255, 255, 0.15);
    cursor: default;
}

/* Letter Section Headers */
.letter-section-header {
    grid-column: 1 / -1;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 1.25rem 0 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.75rem;
    position: relative;
}

.letter-section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 1px;
}

/* Toolbar (kept for search, genre, sort, view toggle) */
.media-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.media-toolbar-left {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.media-toolbar-left h2 {
    margin: 0;
    white-space: nowrap;
}

.media-result-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.media-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Search Box */
.media-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.media-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.media-search-input {
    width: 240px;
    padding: 0.55rem 2.2rem 0.55rem 2.5rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s, width 0.3s;
}

.media-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    width: 300px;
}

.media-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.media-search-clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s;
}

.media-search-clear:hover {
    background: rgba(255,255,255,0.2);
    color: var(--text-primary);
}

/* View Toggle */
.media-view-toggle {
    display: flex;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.view-btn {
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.view-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.view-btn.active {
    color: var(--primary-color);
    background: rgba(229, 9, 20, 0.1);
}

/* Filter Chips */
.media-filters {
    margin-bottom: 1rem;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-chip-select {
    padding: 0.5rem 2rem 0.5rem 0.85rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
}

.filter-chip-select option {
    background: #1e1e1e;
    color: #ffffff;
    padding: 0.4rem;
}

.filter-chip-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.filter-chip-select:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.04);
}

.filter-chip-select:not([value="all"]):not([value=""]) {
    border-color: var(--primary-color);
    background-color: rgba(229, 9, 20, 0.1);
}

.filter-chip-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.filter-chip-sep {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.filter-chip-input {
    padding: 0.4rem 0.6rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 90px;
    transition: border-color 0.2s;
}

.filter-chip-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.filter-chip-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.filter-chip-clear {
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-chip-clear:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Active Filter Tags */
.active-filter-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem 0.25rem 0.7rem;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 14px;
    color: #f87171;
    font-size: 0.8rem;
    white-space: nowrap;
}

.filter-tag-remove {
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    padding: 0;
}

.filter-tag-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Media Grid - View Modes */
.media-grid.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
}

/* Grid Size Options */
[data-grid-size="3"] .media-grid.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
[data-grid-size="4"] .media-grid.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
[data-grid-size="5"] .media-grid.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
[data-grid-size="6"] .media-grid.view-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.media-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.media-grid.view-list .media-card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.media-grid.view-list .media-card:hover {
    transform: none;
    border-color: rgba(229, 9, 20, 0.4);
    background: rgba(255,255,255,0.02);
}

.media-grid.view-list .media-poster {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 2/3;
    margin-bottom: 0;
    border-radius: 4px;
    flex-shrink: 0;
}

.media-grid.view-list .media-poster::after {
    display: none;
}

.media-grid.view-list .media-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.media-grid.view-list .media-title {
    font-size: 1rem;
    font-weight: 500;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-grid.view-list .letter-section-header {
    padding: 1rem 0 0.5rem 0;
}

.media-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    flex-wrap: wrap;
}

.media-rating {
    color: #fbbf24;
    font-size: 0.85rem;
}

.media-extra {
    margin-top: 0.5rem;
}

.media-overview {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 0.5rem 0;
}

.media-detail-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.media-genre-tag {
    padding: 0.15rem 0.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.media-duration,
.media-library-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.media-type-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 0.15rem 0.45rem;
    background: rgba(0,0,0,0.75);
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Empty State */
.media-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    text-align: center;
}

.media-empty-state svg {
    margin-bottom: 1rem;
    opacity: 0.4;
}

.media-empty-state p {
    font-size: 1rem;
    margin: 0;
}

.filter-controls {
    display: flex;
    gap: 1rem;
}

.search-input {
    width: 300px;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--border-color);
}

.btn-danger {
    background: #dc3545;
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-hero {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Modal */
.modal, .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--border-color);
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
}

.close-modal:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

/* Form */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Settings */
.settings-section {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.settings-section h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Settings Layout */
.settings-container {
    display: flex;
    gap: 2rem;
    height: calc(100vh - 140px); /* Adjust based on header/padding */
}

.settings-sidebar {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding-right: 1rem;
}

.settings-nav {
    list-style: none;
    margin-top: 1rem;
}

.settings-nav li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.settings-nav li:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.settings-nav li.active {
    background: var(--primary-color);
    color: white;
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 1rem;
}

.settings-tab {
    display: none;
}

.settings-tab.active {
    display: block;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Responsive Settings */
@media (max-width: 768px) {
    .settings-container {
        flex-direction: column;
        height: auto;
    }
    
    .settings-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .settings-nav {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .settings-nav li {
        white-space: nowrap;
        margin-bottom: 0;
    }
}

.setting-item {
    margin-bottom: 1rem;
}

/* Toggle Switch */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #444;
    border-radius: 24px;
    transition: background 0.2s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background: #e50914;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Settings Text Input */
.setting-input {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    color: var(--text-primary, #e5e5e5);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.setting-input:focus {
    outline: none;
    border-color: #e50914;
}

.setting-input::placeholder {
    color: #666;
}

/* Settings Text Input */
.setting-input {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    color: var(--text-primary, #e5e5e5);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.setting-input:focus {
    outline: none;
    border-color: #e50914;
}

.setting-input::placeholder {
    color: #666;
}

/* ── Email Notifications Section ─────────────────────────── */
.email-notif-section {
    padding: 0 !important;
    overflow: hidden;
}

.email-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.08) 0%, transparent 60%);
    border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.email-notif-header-text h3 {
    margin: 0;
    color: var(--text-primary, #fff);
}

.email-notif-divider {
    border: none;
    border-top: 1px solid var(--border-color, #2a2a2a);
    margin: 0;
}

.email-notif-field-group {
    padding: 1.25rem 1.5rem 0.5rem;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
}

.email-notif-field-group:last-of-type {
    border-bottom: none;
}

.email-notif-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.75rem;
}

.email-notif-tip {
    font-size: 0.82rem;
    color: #8ab4f8;
    background: rgba(138, 180, 248, 0.07);
    border: 1px solid rgba(138, 180, 248, 0.18);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
    line-height: 1.5;
}

.email-notif-tip a {
    color: #8ab4f8;
}

.email-notif-tip code {
    background: rgba(138, 180, 248, 0.15);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.85em;
}

.email-notif-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.email-notif-row .setting-item {
    flex: 1;
    min-width: 140px;
}

.email-notif-row .setting-item .setting-input {
    max-width: 100%;
    width: 100%;
}

.email-notif-port {
    max-width: 110px;
    flex: 0 0 110px !important;
}

.email-notif-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--border-color, #2a2a2a);
}

#email-settings-status {
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-secondary {
    background: #2a2a2a;
    color: var(--text-primary, #e5e5e5);
    border: 1px solid #3a3a3a;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, border-color 0.2s;
}

.btn-secondary:hover {
    background: #333;
    border-color: #555;
}

/* Appearance Settings */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.theme-card {
    position: relative;
    padding: 1rem;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    text-align: center;
}

.theme-card:hover {
    transform: translateY(-2px);
    border-color: var(--text-secondary);
}

.theme-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.theme-card-preview {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 4px;
    overflow: hidden;
}

.theme-card-preview span {
    flex: 1;
    border-radius: 3px;
}

.theme-card-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.accent-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: center;
}

.accent-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.15s, border-color 0.2s;
    position: relative;
}

.accent-swatch:hover {
    transform: scale(1.15);
}

.accent-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-dark);
}

.accent-swatch.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.accent-custom-wrapper {
    position: relative;
    display: inline-block;
}

.accent-custom-input {
    width: 36px;
    height: 36px;
    border: 2px dashed var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.accent-custom-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.accent-custom-input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.grid-size-options {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.grid-size-btn {
    flex: 1;
    max-width: 100px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    font-size: 0.9rem;
}

.grid-size-btn:hover {
    border-color: var(--text-secondary);
    background: rgba(255,255,255,0.03);
}

.grid-size-btn.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb, 229, 9, 20), 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.grid-size-btn .grid-preview {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    justify-content: center;
}

.grid-size-btn .grid-preview span {
    width: 12px;
    height: 16px;
    background: var(--border-color);
    border-radius: 2px;
}

.grid-size-btn.active .grid-preview span {
    background: var(--primary-color);
}

/* Scan Status Panel */
#scan-status-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.scan-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.scan-status-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scan-status-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    font-weight: 600;
}

.scan-status-value {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
}

.scan-lib-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    font-weight: 600;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.scan-lib-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 5px 0;
    font-size: 0.85rem;
}

.scan-lib-name {
    color: #ccc;
    font-weight: 500;
    min-width: 120px;
}

.scan-lib-time {
    color: #888;
    flex: 1;
}

.scan-result-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-family: monospace;
}

.scan-result-ok {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.scan-result-error {
    background: rgba(229, 9, 20, 0.15);
    color: #e50914;
}

@media (max-width: 600px) {
    .scan-status-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Loading */
.loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* TV Show Detail Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #1a1a1a;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9);
}

.modal-content.large-modal {
    max-width: 900px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.close-modal {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.close-modal:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.tv-show-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.tv-show-header {
    display: flex;
    gap: 2rem;
}

.tv-show-poster {
    width: 200px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.tv-show-info {
    flex: 1;
}

.tv-show-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
}

.tv-show-year {
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.tv-show-overview {
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.tv-show-stats {
    color: var(--text-secondary);
    margin: 0;
}

.tv-seasons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.season-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.season-header {
    margin: 0;
    padding: 1rem 1.5rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.03);
    transition: background-color 0.2s;
    user-select: none;
}

.season-header:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.season-toggle {
    font-size: 0.8rem;
    transition: transform 0.2s;
    display: inline-block;
    width: 16px;
}

.season-toggle.expanded {
    transform: rotate(90deg);
}

.episode-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: auto;
}

/* Season Progress */
.season-progress-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.season-completed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #22c55e;
    border-radius: 50%;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.next-episode-indicator {
    color: var(--primary-color);
    font-weight: 500;
}

.season-progress-bar-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.season-progress-bar {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s;
}

.episode-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: background-color 0.2s;
    position: relative;
}

.episode-item.episode-watched {
    opacity: 0.6;
}

.episode-item.episode-watched .episode-title::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--text-secondary);
}

.episode-watch-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
}

.episode-watch-toggle:hover {
    border-color: var(--primary-color);
    background: rgba(229, 9, 20, 0.1);
    transform: scale(1.1);
}

.episode-item.episode-watched .episode-watch-toggle {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.episode-content {
    display: flex;
    gap: 1rem;
    flex: 1;
    cursor: pointer;
}

.episode-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.episode-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.episode-thumbnail {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.episode-thumbnail-placeholder {
    width: 160px;
    height: 90px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.episode-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.episode-number {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.episode-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.episode-overview {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.episode-filename {
    font-size: 0.8rem;
    color: #888;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.episode-filename:hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}

/* Directory Browser */
.path-browser {
    display: flex;
    gap: 0.5rem;
}

.path-browser input {
    flex: 1;
}

.breadcrumb {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.directory-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.directory-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.directory-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.directory-item.parent {
    background-color: rgba(255, 255, 255, 0.03);
    font-style: italic;
}

.directory-icon {
    font-size: 1.2rem;
}

.directory-name {
    flex: 1;
}

.empty-message {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.error-message {
    padding: 2rem;
    text-align: center;
    color: #ef4444;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1100;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle:hover {
    background: var(--bg-card);
    border-color: var(--primary-color);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.sidebar-overlay.active {
    display: block;
}

/* Top Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.top-bar-search {
    flex: 1;
    max-width: 500px;
    position: relative;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .media-grid.view-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
    
    .continue-watching-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }
    
    .libraries-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    body {
        padding-top: 60px; /* Space for mobile header */
    }

    .mobile-menu-toggle {
        display: flex;
        top: 8px;
        padding: 0.5rem 0.7rem;
        font-size: 1.35rem;
    }

    /* Pin the search bar into the 60px header strip, beside the hamburger */
    .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        margin-bottom: 0;
        padding: 8px 1rem 8px calc(1rem + 54px);
        background: var(--bg-darker);
        border-bottom: 1px solid var(--border-color);
        z-index: 1050;
    }

    .top-bar-search {
        max-width: none;
    }

    .top-bar .search-input {
        padding: 0.55rem 1rem;
    }
    
    .sidebar {
        position: fixed;
        left: -250px;
        top: 0;
        transition: left 0.3s ease;
        z-index: 1000;
    }
    
    .sidebar.mobile-open {
        left: 0;
    }
    
    .content {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .filter-controls {
        width: 100%;
        flex-direction: column;
    }
    
    .filter-panel {
        padding: 1rem;
    }
    
    .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group label {
        font-size: 0.85rem;
    }
    
    .filter-select,
    .filter-input {
        width: 100%;
        min-width: auto;
    }
    
    .search-input {
        width: 100%;
    }
    
    /* Media page mobile */
    .library-browser-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .library-browser-right {
        flex-wrap: wrap;
    }
    
    .media-search-input {
        width: 100%;
    }
    
    .media-search-input:focus {
        width: 100%;
    }
    
    .media-search-box {
        flex: 1;
        min-width: 0;
    }
    
    .library-picker-grid {
        grid-template-columns: 1fr;
    }
    
    .alphabet-scrollbar {
        width: 18px;
    }
    
    .alphabet-letter {
        font-size: 0.55rem;
        padding: 0px 2px;
    }
    
    .library-content-wrapper .media-grid {
        padding-right: 1.5rem;
    }
    .media-search-box {
        flex: 1;
        min-width: 0;
    }
    
    .filter-chip-select {
        width: 100%;
        border-radius: 6px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .media-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .media-grid.view-list .media-poster {
        width: 60px;
        min-width: 60px;
    }
    
    .continue-watching-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .libraries-grid {
        grid-template-columns: 1fr;
    }
    
    .library-actions {
        flex-direction: column;
    }
    
    .library-actions .btn {
        width: 100%;
    }
    
    /* TV Show Detail - Mobile */
    .tvRec-header {
        flex-direction: column;
    }
    
    .tv-show-poster {
        width: 100%;
        height: auto;
    }
    
    .season-header {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }
    
    .season-progress-info {
        font-size: 0.75rem;
        width: 100%;
        margin-left: 2rem;
        margin-top: 0.25rem;
    }
    
    .episode-item {
        flex-direction: row;
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .episode-watch-toggle {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    
    .episode-content {
        flex-direction: column;
    }
    
    .episode-thumbnail,
    .episode-thumbnail-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    .episode-play-btn {
        opacity: 1; /* Always visible on mobile */
        right: 0.75rem;
        width: 40px;
        height: 40px;
    }
    
    /* Movie Detail - Mobile */
    .movie-detail-header {
        flex-direction: column;
    }
    
    .movie-detail-poster {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .movie-actions {
        flex-direction: column;
    }
    
    .play-movie-btn,
    .trailer-btn {
        width: 100%;
        padding: 1rem;
    }
    
    /* Modal - Mobile */
    .modal-content {
        width: 95%;
        max-height: 85vh;
    }
    
    .modal-content.large-modal {
        max-width: 95%;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    /* Form - Mobile */
    .form-actions {
        flex-direction: column-reverse;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    /* Info Grid - Mobile */
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    /* Search Results - Mobile */
    .search-container {
        padding: 1rem;
    }
    
    .search-results {
        left: 1rem;
        right: 1rem;
        max-height: 50vh;
    }
    
    /* Video Player - Mobile */
    .video-player-content {
        width: 100%;
        max-width: 100%;
    }
    
    .video-player-header {
        padding: 0.75rem 1rem;
    }
    
    .video-player-header h3 {
        font-size: 1rem;
    }
    
    /* Touch-friendly buttons */
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }
    
    .media-settings-btn {
        width: 44px;
        height: 44px;
        opacity: 1; /* Always visible on mobile */
    }
    
    .close-modal {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Sidebar adjustments for mobile */
    .logo {
        padding: 1rem 1.5rem;
    }
    
    .logo h1 {
        font-size: 1.5rem;
    }
    
    .nav-menu {
        padding: 1rem 0;
    }
    
    .nav-menu a {
        padding: 1rem 1.5rem;
        min-height: 44px;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .media-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .media-grid.view-list .media-poster {
        width: 50px;
        min-width: 50px;
    }
    
    .media-grid.view-list .media-extra {
        display: none;
    }
    
    .continue-watching-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .episode-thumbnail,
    .episode-thumbnail-placeholder {
        width: 100%;
    }
    
    .season-header {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }
    
    .movie-detail-info h2 {
        font-size: 1.8rem;
    }
}

/* Landscape orientation - Mobile fullscreen video */
@media (max-width: 768px) and (orientation: landscape) {
    .video-player-content {
        max-height: 100vh;
        height: 100vh;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Always show interactive elements on touch devices */
    .media-settings-btn,
    .episode-play-btn {
        opacity: 1;
    }
    
    /* Larger touch targets */
    .media-card:hover {
        transform: none;
    }
    
    .continue-watching-card:hover {
        transform: none;
    }
    
    /* Remove hover-only overlays on touch */
    .continue-overlay {
        opacity: 1;
    }
}

/* Mobile Form & Input Optimization */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    /* Input focus states - better visibility on mobile */
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #e50914;
        outline-offset: 2px;
    }
    
    /* Form groups with better spacing */
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    /* Modal improvements for mobile */
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1rem;
        border-radius: 12px;
    }
    
    /* Modal header sticky on scroll */
    .modal-header {
        position: sticky;
        top: 0;
        background: #1a1a1a;
        z-index: 10;
    }
    
    /* Improved modal footer padding */
    .modal-footer {
        position: sticky;
        bottom: 0;
        padding: 1rem;
        background: #1a1a1a;
        border-top: 1px solid var(--border-color);
    }
}

/* Tablet (768px - 1024px) Layout Improvements */
@media (min-width: 769px) and (max-width: 1024px) {
    .media-grid.view-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .continue-watching-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sidebar {
        width: 220px;
    }
    
    .content {
        margin-left: 220px;
    }
}

/* Small Phone (≤480px) Optimizations */
@media (max-width: 480px) {
    /* Increase base font size slightly for readability */
    body {
        font-size: 15px;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1rem; }
    
    /* Full-width buttons on small screens */
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    /* Modal padding on small screens */
    .modal-content {
        margin: 0.5rem;
    }
    
    .modal-header,
    .modal-footer {
        padding: 1rem;
    }
    
    /* Video controls spacing for small screens */
    .video-controls {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .video-controls button {
        padding: 0.5rem;
        min-width: 40px;
        min-height: 40px;
    }
    
    /* Hero actions button grouping */
    .tv-hero-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-hero {
        width: 100%;
        min-height: 48px;
    }
}

/* Enhanced Video Player Mobile */
@media (max-width: 768px) {
    .video-player-header {
        padding: 0.5rem 1rem;
        min-height: 50px;
    }

    .video-player-header .back-button {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    .video-controls-overlay {
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Larger touch targets for controls */
    .video-controls-overlay button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }
    
    /* Improve progress bar touch target */
    .video-progress-container {
        height: 30px;
        margin-bottom: 0.5rem;
    }
    
    .video-progress-track {
        height: 6px;
    }
    
    /* Video info text sizing */
    .video-info {
        padding: 0.75rem 1rem;
    }
    
    .video-info p {
        font-size: 0.85rem;
    }
}

/* Server version panel (Settings → Server) */
.version-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.version-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
.version-badge.version-ok { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
.version-badge.version-behind { background: rgba(229, 160, 13, 0.15); color: #e5a00d; }
.version-pending { margin-top: 10px; }
.version-commit { font-size: 0.85rem; color: var(--text-secondary); padding: 2px 0; }
.version-commit code { color: #e5a00d; margin-right: 6px; }
.version-how { margin-top: 12px; font-size: 0.85rem; color: var(--text-secondary); }
.version-how code {
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 10px;
    margin-left: 6px;
    color: #e5a00d;
}

/* Server update banner (admins) */
.update-banner {
    background: rgba(229, 160, 13, 0.1);
    border: 1px solid rgba(229, 160, 13, 0.4);
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
}

.update-banner-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.update-banner-text { flex: 1; color: var(--text-primary); font-size: 0.95rem; }
.update-banner-text strong { color: #e5a00d; }
.update-banner-text a { color: #e5a00d; margin-left: 6px; }

.update-banner-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.update-banner-close:hover { color: #fff; }

.update-banner-details {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(229, 160, 13, 0.25);
    padding-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.update-commit { padding: 2px 0; }
.update-commit code { color: #e5a00d; margin-right: 6px; }

.update-banner-how {
    margin-top: 0.75rem;
    color: var(--text-secondary);
}
.update-banner-how code {
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 10px;
    margin: 4px 6px;
    color: #e5a00d;
}

/* Discover Detail Modal */
.discover-detail-content {
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: 0;
}

.discover-detail-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #fff;
    font-size: 1.6rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}

.discover-detail-close:hover {
    background: var(--primary-color);
}

.discover-detail-loading,
.discover-detail-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #b3b3b3;
}

.discover-detail-backdrop {
    height: 260px;
    background-size: cover;
    background-position: center 20%;
    position: relative;
}

.discover-detail-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-card) 0%, rgba(20,20,20,0.35) 50%, rgba(20,20,20,0.1) 100%);
}

.discover-detail-main {
    display: flex;
    gap: 1.5rem;
    padding: 0 1.5rem 1rem;
    margin-top: -80px;
    position: relative;
    z-index: 2;
}

.discover-detail-poster {
    width: 160px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
    align-self: flex-start;
}

.discover-detail-info {
    flex: 1;
    min-width: 0;
    padding-top: 40px;
}

.discover-detail-title {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.discover-detail-tagline {
    color: #b3b3b3;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.discover-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.discover-detail-cert {
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0 0.35rem;
    font-size: 0.8rem;
    color: #ddd;
}

.discover-detail-rating {
    color: #f5c518;
    font-weight: 600;
}

.discover-detail-votes {
    color: #888;
    font-size: 0.85rem;
    margin-left: -0.4rem;
}

.discover-detail-genres {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.discover-detail-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
}

.discover-detail-overview {
    color: #ddd;
    line-height: 1.55;
    margin: 0;
}

.discover-detail-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    padding: 0.5rem 1.5rem 0.6rem;
}

.discover-detail-cast {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    padding: 0 1.5rem 1.5rem;
    scrollbar-width: thin;
}

.discover-cast-card {
    width: 96px;
    flex-shrink: 0;
    text-align: center;
}

.discover-cast-card img,
.discover-cast-placeholder {
    width: 96px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    background: #2a2a2a;
}

.discover-cast-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.discover-cast-name {
    color: #eee;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-cast-role {
    color: #999;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .discover-detail-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: -110px;
    }

    .discover-detail-info {
        padding-top: 0;
    }

    .discover-detail-meta,
    .discover-detail-actions {
        justify-content: center;
    }
}

/* Channels (channel-surf) page */
.channels-setup {
    max-width: 720px;
    margin: 3rem auto;
    text-align: center;
    padding: 0 1rem;
}

.channels-title {
    color: #e5a00d;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 6px;
    margin-bottom: 0.5rem;
}

.channels-subtitle {
    color: #999;
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
}

.channels-section-label {
    color: #777;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin: 1.75rem 0 0.9rem;
}

.channels-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.channels-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ddd;
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.channels-chip:hover {
    background: rgba(255, 255, 255, 0.16);
}

.channels-chip.active {
    background: #e5a00d;
    border-color: #e5a00d;
    color: #000;
    font-weight: 600;
}

.channels-start-btn {
    margin-top: 2.5rem;
    padding: 0.9rem 3rem;
    font-size: 1.1rem;
    font-weight: 700;
    background: #e5a00d;
    border: none;
    color: #000;
    border-radius: 12px;
}

.channels-start-btn:hover:not(:disabled) {
    background: #f5b82e;
}

/* Channel surf banner (shown briefly on each flip) */
.surf-banner {
    position: absolute;
    top: 5.5rem;
    left: 1.5rem;
    z-index: 3007;
    background: rgba(10, 10, 10, 0.85);
    border-left: 4px solid #e5a00d;
    border-radius: 6px;
    padding: 0.75rem 1.25rem;
    max-width: 420px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.surf-banner.surf-banner-visible {
    opacity: 1;
    transform: translateY(0);
}

.surf-banner-label {
    color: #e5a00d;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 0.25rem;
}

.surf-banner-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surf-banner-subtitle {
    color: #aaa;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CH flip buttons in player controls */
.surf-ch-btn {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #e5a00d;
}

/* Video Player - Full Page */
.video-player-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 3000;
    flex-direction: column;
    overflow: hidden;
}

.video-player-page.active {
    display: flex;
}

.video-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
    min-height: 60px;
    gap: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3006;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.video-player-page.controls-visible .video-player-header {
    opacity: 1;
    pointer-events: auto;
}

/* Hide the mouse cursor while controls are hidden during playback */
.video-player-page.active:not(.controls-visible) {
    cursor: none;
}

.video-player-header .back-button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    z-index: 3002;
    position: relative;
}

.video-player-header .back-button:hover {
    background: var(--primary-color);
    color: #fff;
}

.video-player-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
}

.video-player-header .close-player {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 4px;
    flex-shrink: 0;
    z-index: 3002;
    position: relative;
}

.video-player-header .close-player:hover {
    background: var(--primary-color);
    color: #fff;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.video-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    gap: 1rem;
}

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

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

.video-info {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid #333;
}

.video-info p {
    margin: 0;
    color: #b3b3b3;
    font-size: 0.95rem;
}

/* Video Player Controls Overlay */
.video-controls-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3005;
}

.video-player-page.controls-visible .video-controls-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Progress Bar Container */
.video-progress-container {
    position: relative;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.video-progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%);
    border-radius: 2px;
    overflow: hidden;
    transition: height 0.1s;
}

.video-progress-container:hover .video-progress-track {
    height: 6px;
}

.video-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    z-index: 2;
}

.video-buffered-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    width: 0%;
    z-index: 1;
}

#video-seek-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0;
}

/* Controls Row */
.controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.controls-left, .controls-right, .controls-center {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.controls-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.control-btn {
    background: transparent;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 8px;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.control-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Volume Control */
.volume-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.volume-container:hover #volume-slider {
    width: 80px;
    opacity: 1;
    pointer-events: auto;
}

#volume-slider {
    width: 0;
    opacity: 0;
    transition: all 0.3s ease;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    appearance: none;
    cursor: pointer;
    pointer-events: none;
}

#volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* Time Display */
.time-display {
    font-family: monospace;
    font-size: 0.9rem;
    color: #ddd;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    margin-left: 0.5rem;
}

.time-separator {
    margin: 0 0.25rem;
    opacity: 0.7;
}

/* Master API Registration Styles */
.status-banner {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-banner.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.status-banner.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.status-banner.info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.alert {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid;
    line-height: 1.6;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.alert-info strong {
    color: #3b82f6;
}

.section-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-item {
    background: var(--bg-card);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.info-item label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.info-item span {
    display: block;
    font-size: 1rem;
    font-weight: 500;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge.active {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.badge.pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.badge.inactive {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Movie Detail Modal */
.movie-detail {
    position: relative;
    color: white;
}

.movie-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}

.movie-backdrop::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-darker) 100%);
}

.movie-detail-content {
    position: relative;
    z-index: 1;
    padding-top: 2rem;
}

.movie-detail-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.movie-detail-poster {
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.movie-detail-info h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.movie-detail-year {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.movie-genres,
.movie-director,
.movie-cast {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.movie-overview {
    margin-top: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.movie-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.play-movie-btn,
.trailer-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.play-movie-btn {
    background: var(--primary-color);
    color: white;
}

.play-movie-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.trailer-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.trailer-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: background 0.2s;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.activity-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.activity-info {
    flex: 1;
}

.activity-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.activity-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Continue Watching */
.continue-watching-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.continue-watching-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.continue-watching-card:hover {
    transform: scale(1.05);
}

.continue-poster {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 2/3;
}

.continue-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.continue-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.continue-watching-card:hover .continue-overlay {
    opacity: 1;
}

.play-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: auto;
    margin-top: auto;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.time-remaining {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.progress-bar {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s;
}

.continue-info {
    padding: 0.75rem 0;
}

.continue-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.continue-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Back Button */
.back-button {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-button:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateX(-4px);
}

/* Detail Pages */
#movie-detail-page,
#tv-detail-page {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, #2a2a2a 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================================
   Modern TV Detail View
   ========================================= */

/* Hero Section */
.tv-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 500px;
    margin: -2rem -2rem 2rem -2rem; /* Break out of container padding */
    overflow: hidden;
}

.tv-hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    z-index: 0;
}

.tv-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(20,20,20,0.0) 0%, rgba(20,20,20,0.4) 60%, var(--bg-dark) 100%),
                linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.2) 50%, transparent 100%);
    z-index: 1;
}

.tv-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    max-width: 1200px;
}

.tv-hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #e5e5e5;
}

.tv-hero-rating {
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    color: #46d369;
}

.tv-hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.tv-hero-overview {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    color: #d1d1d1;
    margin-bottom: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-hero-actions {
    display: flex;
    gap: 1rem;
}

/* Season Tabs */
.season-tabs-container {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.season-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    margin-bottom: -0.5rem; /* Align with container border */
}

.season-tab:hover {
    color: var(--text-primary);
}

.season-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Modern Episode List */
.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.episode-card {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
}

.episode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.1);
}

.episode-card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.episode-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.episode-card:hover .episode-card-thumb img {
    transform: scale(1.05);
}

.episode-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.5);
}

.episode-progress-bar {
    height: 100%;
    background: var(--primary-color);
}

.episode-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
}

.episode-card:hover .episode-play-overlay {
    opacity: 1;
}

.episode-play-icon {
    font-size: 3rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transition: transform 0.2s;
}

.episode-card:hover .episode-play-icon {
    transform: scale(1.1);
}

.episode-card-content {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.episode-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.episode-number-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.episode-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.25rem 0;
    line-height: 1.4;
}

.episode-card-overview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
    flex: 1;
}

.episode-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.episode-watched-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.episode-watched-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.episode-watched-btn.watched {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    color: #22c55e;
}

/* =========================================
   Dashboard 2.0
   ========================================= */

/* Dashboard Hero */
.dashboard-hero {
    position: relative;
    /* width:auto (not 100%) so the negative side margins stretch the hero
       edge-to-edge; an explicit width makes CSS drop the right margin and
       the hero falls short of the right edge */
    width: auto;
    height: 70vh;
    min-height: 500px;
    margin: -2rem -2rem 2rem -2rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.dashboard-hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    z-index: 0;
    transition: transform 10s ease;
}

.dashboard-hero:hover .dashboard-hero-backdrop {
    transform: scale(1.05);
}

.dashboard-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(20,20,20,0.0) 0%, rgba(20,20,20,0.3) 50%, var(--bg-dark) 100%),
                linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.2) 40%, transparent 100%);
    z-index: 1;
}

.dashboard-hero-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    max-width: 800px;
    margin-bottom: 2rem;
}

.hero-tag {
    display: inline-block;
    background: rgba(229, 9, 20, 0.8);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: #e5e5e5;
}

.hero-overview {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #d1d1d1;
    margin-bottom: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hero-actions {
    display: flex;
    gap: 1rem;
}

/* Horizontal Scroll Section */
.scroll-section {
    margin-bottom: 3rem;
    position: relative;
}

.scroll-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.scroll-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.scroll-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(20, 20, 20, 0.8);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.scroll-section:hover .scroll-arrow {
    opacity: 1;
}

.scroll-arrow:hover {
    background: white;
    color: black;
    transform: translateY(-50%) scale(1.1);
}

.scroll-arrow.left {
    left: -1rem;
}

.scroll-arrow.right {
    right: -1rem;
}

.scroll-item {
    flex: 0 0 auto;
    width: 200px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-item:hover {
    transform: scale(1.05) translateY(-5px);
    z-index: 10;
}

/* Compact Stats */
.stats-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.stat-item-compact {
    background: rgba(255,255,255,0.03);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile Adjustments for Dashboard */
@media (max-width: 768px) {
    .dashboard-hero {
        height: 60vh;
        align-items: flex-end;
        /* content padding is 1rem on mobile, not 2rem */
        margin: -1rem -1rem 1.5rem -1rem;
    }
    
    .dashboard-hero-content {
        padding: 1.5rem;
        margin-bottom: 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-overview {
        display: none; /* Hide overview on mobile to save space */
    }
    
    .scroll-item {
        width: 140px;
    }
}

/* Enhanced Server Section */
.server-status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.status-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, rgba(229, 9, 20, 0.05), transparent);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #444;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.status-dot.active {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.status-dot.error {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.status-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--border-color);
}

.server-stat-item {
    background: var(--bg-card);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.server-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.server-stat-value {
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Consolas', monospace;
}

.server-actions-bar {
    padding: 1.5rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copy-field {
    display: flex;
    align-items: center;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem;
}

.copy-field input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0.5rem;
    font-family: monospace;
    width: 100%;
    outline: none;
}

.copy-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* ===================== Skip Intro Tool ===================== */

.skip-intro-tool {
    margin-top: 1rem;
}

.skip-intro-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.skip-intro-row .form-group {
    flex: 1;
}

.skip-intro-row .form-group label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.skip-intro-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.skip-intro-status {
    font-size: 0.85rem;
    font-weight: 500;
}

.skip-intro-status.success {
    color: #4caf50;
}

.skip-intro-status.error {
    color: #e50914;
}

.skip-intro-preview {
    margin-top: 0.5rem;
}

.skip-intro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.skip-intro-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.skip-intro-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.skip-intro-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.skip-intro-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.skip-intro-badge.set {
    background: rgba(229, 160, 13, 0.2);
    color: #e5a00d;
}

.skip-intro-badge.default {
    color: var(--text-secondary);
}

/* ===== Toast Notification System ===== */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    pointer-events: auto;
    animation: toastSlideIn 0.3s ease-out;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    backdrop-filter: blur(12px);
}

.toast:hover {
    transform: scale(1.02);
}

.toast.toast-exit {
    animation: toastSlideOut 0.3s ease-in forwards;
}

.toast-success {
    background: rgba(34, 197, 94, 0.9);
    border-left: 4px solid #16a34a;
}

.toast-error {
    background: rgba(239, 68, 68, 0.9);
    border-left: 4px solid #dc2626;
}

.toast-info {
    background: rgba(59, 130, 246, 0.9);
    border-left: 4px solid #2563eb;
}

.toast-warning {
    background: rgba(234, 179, 8, 0.85);
    border-left: 4px solid #ca8a04;
    color: #1a1a1a;
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 0.25rem;
    flex-shrink: 0;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

/* ===== User Management Table ===== */
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.users-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.users-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.users-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.user-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.user-badge.admin {
    background: rgba(229, 9, 20, 0.2);
    color: var(--primary-color);
}

.user-badge.user {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.user-badge.you {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    margin-left: 0.5rem;
}

.user-badge.shared {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    margin-left: 0.5rem;
}

/* ===== User Cards ===== */
.user-add-section {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.add-user-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.add-user-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-user-form input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.add-user-found {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.user-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: border-color 0.2s;
}

.user-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 1rem;
}

.user-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.user-card-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-display-name {
    font-weight: 500;
    color: var(--text-primary);
}

.user-card-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.user-card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    align-items: center;
}

.expand-arrow {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.user-card-expand {
    border-top: 1px solid var(--border-color);
    padding: 1rem;
    background: rgba(0, 0, 0, 0.15);
}

.user-share-section h4 {
    margin: 0 0 0.25rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.library-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.library-check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 0.85rem;
}

.library-check-item:hover {
    border-color: var(--primary-color);
    background: rgba(229, 9, 20, 0.05);
}

.library-check-item input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.library-check-label {
    color: var(--text-primary);
    cursor: pointer;
}

.user-share-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.btn-danger {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(220, 38, 38, 0.3);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: rgba(220, 38, 38, 0.35);
}

/* ===== Log Filtering ===== */
.log-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.log-toolbar input {
    flex: 1;
    min-width: 150px;
    padding: 0.4rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.log-toolbar input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.log-filter-btn {
    padding: 0.4rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.log-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.log-filter-btn.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(229, 9, 20, 0.1);
}

.log-line-error { color: #ef4444; }
.log-line-warning { color: #eab308; }
.log-line-info { color: #22c55e; }
.log-line-debug { color: #6b7280; }

/* ===== Admin-only visibility ===== */
.admin-only {
    display: none !important;
}

body.is-admin .admin-only {
    display: block !important;
}

/* Admin-only nav items should display as list items */
body.is-admin .nav-menu li.admin-only,
body.is-admin .settings-nav li.admin-only {
    display: list-item !important;
}

body.is-admin #settings-page .settings-nav-item.admin-only {
    display: flex !important;
}

/* Admin-only settings tabs should still follow tab visibility rules */
body.is-admin .settings-tab.admin-only {
    display: none !important;
}

body.is-admin .settings-tab.admin-only.active {
    display: block !important;
}

/* Settings Control Center */
#settings-page {
    --settings-bg-start: #060b14;
    --settings-bg-mid: #0a1322;
    --settings-bg-end: #08111f;
    --settings-bg: #09111f;
    --settings-surface: rgba(10, 18, 33, 0.88);
    --settings-surface-strong: rgba(14, 23, 39, 0.96);
    --settings-border: rgba(148, 163, 184, 0.16);
    --settings-border-strong: rgba(148, 163, 184, 0.24);
    --settings-text: #f8fafc;
    --settings-muted: #9fb0c7;
    --settings-soft: #6f84a3;
    --settings-kicker: #7dd3fc;
    --settings-glow-a: rgba(37, 99, 235, 0.16);
    --settings-glow-b: rgba(14, 165, 233, 0.12);
    --settings-accent-surface: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.08));
    --settings-accent-surface-strong: linear-gradient(135deg, rgba(37, 99, 235, 0.32), rgba(14, 165, 233, 0.22));
    --settings-accent-border: rgba(96, 165, 250, 0.32);
    --settings-accent-shadow: rgba(14, 165, 233, 0.12);
    --settings-chip-bg: rgba(148, 163, 184, 0.12);
    --settings-field-bg: rgba(15, 23, 42, 0.72);
    --settings-field-solid: rgba(8, 15, 27, 0.9);
    --settings-subsurface: rgba(15, 23, 42, 0.52);
    --settings-card-surface: rgba(8, 15, 27, 0.75);
    --settings-info-bg: rgba(14, 165, 233, 0.12);
    --settings-info-border: rgba(125, 211, 252, 0.22);
    --settings-info-text: #d7f4ff;
    --settings-muted-chip-bg: rgba(148, 163, 184, 0.12);
    --settings-muted-chip-border: rgba(148, 163, 184, 0.2);
    --settings-muted-chip-text: #dbe4f1;
    --settings-ready-bg: rgba(16, 185, 129, 0.14);
    --settings-ready-border: rgba(16, 185, 129, 0.28);
    --settings-ready-text: #d1fae5;
    --settings-shared-bg: rgba(59, 130, 246, 0.14);
    --settings-shared-border: rgba(59, 130, 246, 0.28);
    --settings-shared-text: #dbeafe;
    --settings-popup-bg: rgba(8, 15, 27, 0.98);
    --settings-toggle-on-a: #2563eb;
    --settings-toggle-on-b: #0ea5e9;
    --settings-shadow: 0 26px 60px rgba(1, 6, 18, 0.34);
    padding: 30px 28px 40px;
    background:
        radial-gradient(circle at top left, var(--settings-glow-a), transparent 32%),
        radial-gradient(circle at top right, var(--settings-glow-b), transparent 30%),
        linear-gradient(180deg, var(--settings-bg-start) 0%, var(--settings-bg-mid) 52%, var(--settings-bg-end) 100%);
}

[data-theme="nord"] #settings-page {
    --settings-bg-start: #242933;
    --settings-bg-mid: #2e3440;
    --settings-bg-end: #28313d;
    --settings-bg: #28313d;
    --settings-surface: rgba(46, 52, 64, 0.9);
    --settings-surface-strong: rgba(36, 41, 51, 0.96);
    --settings-border: rgba(136, 192, 208, 0.16);
    --settings-border-strong: rgba(136, 192, 208, 0.26);
    --settings-text: #eceff4;
    --settings-muted: #c6d0dc;
    --settings-soft: #9da5b4;
    --settings-kicker: #88c0d0;
    --settings-glow-a: rgba(136, 192, 208, 0.16);
    --settings-glow-b: rgba(94, 129, 172, 0.14);
    --settings-accent-surface: linear-gradient(135deg, rgba(136, 192, 208, 0.2), rgba(94, 129, 172, 0.1));
    --settings-accent-surface-strong: linear-gradient(135deg, rgba(136, 192, 208, 0.28), rgba(94, 129, 172, 0.18));
    --settings-accent-border: rgba(136, 192, 208, 0.34);
    --settings-accent-shadow: rgba(136, 192, 208, 0.14);
    --settings-chip-bg: rgba(143, 188, 187, 0.14);
    --settings-field-bg: rgba(36, 41, 51, 0.78);
    --settings-field-solid: rgba(36, 41, 51, 0.92);
    --settings-subsurface: rgba(36, 41, 51, 0.62);
    --settings-card-surface: rgba(36, 41, 51, 0.84);
    --settings-info-bg: rgba(136, 192, 208, 0.16);
    --settings-info-border: rgba(136, 192, 208, 0.24);
    --settings-info-text: #e5f6fb;
    --settings-muted-chip-bg: rgba(129, 161, 193, 0.16);
    --settings-muted-chip-border: rgba(129, 161, 193, 0.24);
    --settings-muted-chip-text: #e5ebf4;
    --settings-ready-bg: rgba(163, 190, 140, 0.16);
    --settings-ready-border: rgba(163, 190, 140, 0.26);
    --settings-ready-text: #ecf8df;
    --settings-shared-bg: rgba(94, 129, 172, 0.18);
    --settings-shared-border: rgba(94, 129, 172, 0.28);
    --settings-shared-text: #e4eefb;
    --settings-popup-bg: rgba(36, 41, 51, 0.98);
    --settings-toggle-on-a: #5e81ac;
    --settings-toggle-on-b: #88c0d0;
}

[data-theme="dracula"] #settings-page {
    --settings-bg-start: #1e1f29;
    --settings-bg-mid: #282a36;
    --settings-bg-end: #252733;
    --settings-bg: #252733;
    --settings-surface: rgba(40, 42, 54, 0.92);
    --settings-surface-strong: rgba(30, 31, 41, 0.96);
    --settings-border: rgba(98, 114, 164, 0.22);
    --settings-border-strong: rgba(189, 147, 249, 0.26);
    --settings-text: #f8f8f2;
    --settings-muted: #d6caef;
    --settings-soft: #a79bc7;
    --settings-kicker: #bd93f9;
    --settings-glow-a: rgba(189, 147, 249, 0.16);
    --settings-glow-b: rgba(255, 121, 198, 0.12);
    --settings-accent-surface: linear-gradient(135deg, rgba(189, 147, 249, 0.2), rgba(255, 121, 198, 0.1));
    --settings-accent-surface-strong: linear-gradient(135deg, rgba(189, 147, 249, 0.3), rgba(255, 121, 198, 0.18));
    --settings-accent-border: rgba(189, 147, 249, 0.34);
    --settings-accent-shadow: rgba(189, 147, 249, 0.14);
    --settings-chip-bg: rgba(98, 114, 164, 0.18);
    --settings-field-bg: rgba(30, 31, 41, 0.8);
    --settings-field-solid: rgba(30, 31, 41, 0.92);
    --settings-subsurface: rgba(30, 31, 41, 0.66);
    --settings-card-surface: rgba(30, 31, 41, 0.86);
    --settings-info-bg: rgba(189, 147, 249, 0.16);
    --settings-info-border: rgba(189, 147, 249, 0.26);
    --settings-info-text: #f3edff;
    --settings-muted-chip-bg: rgba(98, 114, 164, 0.2);
    --settings-muted-chip-border: rgba(98, 114, 164, 0.28);
    --settings-muted-chip-text: #ece7f7;
    --settings-ready-bg: rgba(80, 250, 123, 0.14);
    --settings-ready-border: rgba(80, 250, 123, 0.26);
    --settings-ready-text: #e8ffe9;
    --settings-shared-bg: rgba(139, 233, 253, 0.16);
    --settings-shared-border: rgba(139, 233, 253, 0.26);
    --settings-shared-text: #ebfcff;
    --settings-popup-bg: rgba(30, 31, 41, 0.98);
    --settings-toggle-on-a: #bd93f9;
    --settings-toggle-on-b: #ff79c6;
}

[data-theme="light"] #settings-page {
    --settings-bg-start: #f8fafc;
    --settings-bg-mid: #eef2ff;
    --settings-bg-end: #e5ecf6;
    --settings-bg: #f4f7fb;
    --settings-surface: rgba(255, 255, 255, 0.94);
    --settings-surface-strong: rgba(248, 250, 252, 0.98);
    --settings-border: rgba(148, 163, 184, 0.24);
    --settings-border-strong: rgba(59, 130, 246, 0.2);
    --settings-text: #1a1a2e;
    --settings-muted: #5b6778;
    --settings-soft: #7b8798;
    --settings-kicker: #2563eb;
    --settings-glow-a: rgba(37, 99, 235, 0.12);
    --settings-glow-b: rgba(14, 165, 233, 0.08);
    --settings-accent-surface: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.08));
    --settings-accent-surface-strong: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.12));
    --settings-accent-border: rgba(37, 99, 235, 0.22);
    --settings-accent-shadow: rgba(37, 99, 235, 0.12);
    --settings-chip-bg: rgba(148, 163, 184, 0.1);
    --settings-field-bg: rgba(248, 250, 252, 0.96);
    --settings-field-solid: rgba(248, 250, 252, 0.98);
    --settings-subsurface: rgba(248, 250, 252, 0.86);
    --settings-card-surface: rgba(241, 245, 249, 0.94);
    --settings-info-bg: rgba(37, 99, 235, 0.1);
    --settings-info-border: rgba(37, 99, 235, 0.18);
    --settings-info-text: #1e40af;
    --settings-muted-chip-bg: rgba(148, 163, 184, 0.12);
    --settings-muted-chip-border: rgba(148, 163, 184, 0.2);
    --settings-muted-chip-text: #475569;
    --settings-ready-bg: rgba(22, 163, 74, 0.12);
    --settings-ready-border: rgba(22, 163, 74, 0.2);
    --settings-ready-text: #166534;
    --settings-shared-bg: rgba(14, 165, 233, 0.12);
    --settings-shared-border: rgba(14, 165, 233, 0.2);
    --settings-shared-text: #075985;
    --settings-popup-bg: rgba(255, 255, 255, 0.98);
    --settings-toggle-on-a: #2563eb;
    --settings-toggle-on-b: #0ea5e9;
}

/* ===== Appearance Tab v2 — compact rows, segmented controls, preview ===== */
#settings-page .appearance-panel { padding: 22px 24px; }
#settings-page .appearance-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}
#settings-page .appearance-panel-controls { display: flex; flex-direction: column; gap: 6px; }

#settings-page .appearance-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
#settings-page .appearance-head-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex: 0 0 auto;
}
#settings-page .icon-personalization { background: linear-gradient(135deg, #3b82f6, #6366f1); }
#settings-page .icon-accessibility { background: linear-gradient(135deg, #22c55e, #4ade80); }
#settings-page .appearance-head h3 { margin: 0; font-size: 1.15rem; }
#settings-page .appearance-head p { margin: 2px 0 0; font-size: 0.85rem; }

#settings-page .appearance-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--settings-border);
}
#settings-page .appearance-row:first-of-type { border-top: none; }
#settings-page .appearance-row-title { font-size: 0.95rem; font-weight: 600; color: var(--settings-text); }
#settings-page .appearance-row-sub { font-size: 0.8rem; color: var(--settings-muted); margin-top: 2px; }

/* Segmented control */
#settings-page .segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--settings-chip-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--settings-border);
}
#settings-page .segmented .seg-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--settings-muted);
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#settings-page .segmented .seg-btn:hover { color: var(--settings-text); }
#settings-page .segmented .seg-btn.active {
    background: var(--settings-accent-surface);
    border-color: var(--settings-accent-border);
    color: var(--settings-text);
    box-shadow: 0 4px 12px var(--settings-accent-shadow);
}

/* Compact accent swatches with active checkmark */
#settings-page .accent-color-grid-compact {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
#settings-page .accent-color-grid-compact .accent-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#settings-page .accent-color-grid-compact .accent-swatch:hover { transform: scale(1.1); }
#settings-page .accent-color-grid-compact .accent-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--primary-color, #2563eb), 0 4px 10px rgba(0,0,0,0.3);
}
#settings-page .accent-color-grid-compact .accent-swatch.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#settings-page .accent-color-grid-compact .accent-custom-wrapper {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px dashed var(--settings-border-strong, rgba(255,255,255,0.3));
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
}
#settings-page .accent-color-grid-compact .accent-custom-wrapper::before {
    content: '+';
    color: var(--settings-muted);
    font-size: 1.1rem;
    font-weight: 700;
}
#settings-page .accent-color-grid-compact .accent-custom-input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

/* Typography slider row */
#settings-page .appearance-typography {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
}
#settings-page .appearance-typography .ty-aa-small { font-size: 0.8rem; color: var(--settings-muted); }
#settings-page .appearance-typography .ty-aa-large { font-size: 1.2rem; color: var(--settings-muted); }
#settings-page .appearance-typography input[type=range] {
    flex: 1;
    accent-color: var(--primary-color, #2563eb);
}
#settings-page .appearance-typography .ty-value {
    font-size: 0.8rem;
    color: var(--settings-muted);
    min-width: 42px;
    text-align: right;
}

/* Preview pane */
#settings-page .appearance-preview { min-width: 0; }
#settings-page .preview-card {
    border-radius: 18px;
    border: 1px solid var(--settings-border);
    background: rgba(0,0,0,0.25);
    padding: 16px;
    height: 100%;
}
#settings-page .preview-card-header { margin-bottom: 12px; }
#settings-page .preview-card-title { font-size: 0.95rem; font-weight: 700; }
#settings-page .preview-card-sub { font-size: 0.78rem; color: var(--settings-muted); margin-top: 2px; }
#settings-page .preview-mini {
    border-radius: 12px;
    background: #0a0a0a;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 10px;
    color: #ccc;
}
#settings-page .pmini-topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
#settings-page .pmini-logo { color: var(--primary-color, #2563eb); font-weight: 700; font-size: 11px; }
#settings-page .pmini-search {
    flex: 1; background: rgba(255,255,255,0.05); border-radius: 8px;
    padding: 4px 8px; font-size: 9px; color: #888;
}
#settings-page .pmini-avatar {
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}
#settings-page .pmini-body { display: flex; }
#settings-page .pmini-rail {
    width: 28px;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 8px 4px;
    display: flex; flex-direction: column; gap: 8px;
}
#settings-page .pmini-rail::before,
#settings-page .pmini-rail::after {
    content: '';
    height: 4px; width: 100%;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}
#settings-page .pmini-content { flex: 1; padding: 10px; min-width: 0; }
#settings-page .pmini-section {
    font-size: 10px; font-weight: 600; color: #ddd;
    margin-bottom: 6px;
}
#settings-page .pmini-section + .pmini-section { margin-top: 8px; }
#settings-page .pmini-row { display: flex; gap: 6px; margin-bottom: 10px; }
#settings-page .pmini-poster {
    flex: 1;
    aspect-ratio: 2 / 3;
    border-radius: var(--np-poster-radius, 6px);
    background: linear-gradient(135deg,#374151,#1f2937);
}
#settings-page .pmini-poster.small { aspect-ratio: 2 / 3; }

/* Bottom personalization + accessibility cards */
#settings-page .appearance-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 18px;
    margin-top: 18px;
}
#settings-page .appearance-a11y-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
#settings-page .appearance-a11y-grid .appearance-row { padding: 10px 0; }

@media (max-width: 1100px) {
    #settings-page .appearance-panel-grid { grid-template-columns: 1fr; }
    #settings-page .appearance-bottom-grid { grid-template-columns: 1fr; }
    #settings-page .appearance-a11y-grid { grid-template-columns: 1fr; }
}

/* Poster corners CSS var (applied via body class) */
body[data-poster-corners="rounded"] { --np-poster-radius: 10px; }
body[data-poster-corners="slight"] { --np-poster-radius: 4px; }
body[data-poster-corners="square"] { --np-poster-radius: 0; }

/* ============================================================
   Settings v2 — cross-tab polish (Server, Tools, Users, IPTV)
   Applies consistent styling without restructuring HTML.
   ============================================================ */

/* Raw h3 children inside any settings-section get the same treatment
   as h3s inside .settings-section-head. */
#settings-page .settings-section > h3 {
    margin: 0 0 16px;
    color: var(--settings-text);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

#settings-page .settings-section > h3 + .section-description,
#settings-page .settings-section > .section-description {
    margin: -8px 0 16px;
    color: var(--settings-text-muted, var(--text-secondary));
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Section-internal "flex header row" used in some tabs (e.g., Users) */
#settings-page .settings-section > div[style*="justify-content: space-between"]:first-child > h3 {
    margin: 0;
}

/* Neutralize inline dark backgrounds on inputs — use unified field surface */
#settings-page .settings-section input[type="text"],
#settings-page .settings-section input[type="password"],
#settings-page .settings-section input[type="number"],
#settings-page .settings-section input[type="search"],
#settings-page .settings-section select,
#settings-page .settings-section textarea {
    background: var(--settings-field-bg, rgba(15, 23, 42, 0.6)) !important;
    border: 1px solid var(--settings-field-border, rgba(148, 163, 184, 0.2)) !important;
    color: var(--settings-text, #e6edf3) !important;
    border-radius: 10px !important;
    padding: 0.55rem 0.75rem !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
#settings-page .settings-section input[type="text"]:focus,
#settings-page .settings-section input[type="password"]:focus,
#settings-page .settings-section input[type="number"]:focus,
#settings-page .settings-section input[type="search"]:focus,
#settings-page .settings-section select:focus,
#settings-page .settings-section textarea:focus {
    outline: none;
    border-color: var(--accent-color, var(--primary-color)) !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18) !important;
}
#settings-page .settings-section input[readonly] {
    cursor: default;
    color: var(--settings-text-muted, var(--text-secondary)) !important;
}

/* Copy field — slick pill look */
#settings-page .copy-field {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
}
#settings-page .copy-field input {
    flex: 1;
    min-width: 0;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
#settings-page .copy-field .copy-btn {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    color: var(--settings-text);
    cursor: pointer;
    padding: 0 12px;
    font-size: 0.9rem;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
#settings-page .copy-field .copy-btn:hover {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.35);
}
#settings-page .copy-field .copy-btn:active { transform: scale(0.96); }

/* Server-stat grid — card-like cells */
#settings-page .server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
#settings-page .server-stat-item {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#settings-page .server-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--settings-text-muted, var(--text-secondary));
    font-weight: 600;
}
#settings-page .server-stat-value {
    color: var(--settings-text);
    font-size: 0.95rem;
    word-break: break-all;
}

/* Server status card refresh */
#settings-page .server-status-card {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    padding: 18px;
}
#settings-page .server-status-card .status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
#settings-page .server-status-card .status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #6b7280;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
#settings-page .server-status-card .status-dot.connected,
#settings-page .server-status-card.connected .status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
#settings-page .server-status-card .status-title {
    font-weight: 700;
    color: var(--settings-text);
    margin-left: 8px;
}
#settings-page .server-status-card .server-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* Log viewer toolbar */
#settings-page .log-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
#settings-page .log-toolbar input {
    flex: 1;
    min-width: 200px;
}
#settings-page .log-filter-btn {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--settings-text-muted, var(--text-secondary));
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}
#settings-page .log-filter-btn:hover {
    background: rgba(148, 163, 184, 0.16);
    color: var(--settings-text);
}
#settings-page .log-filter-btn.active {
    background: var(--accent-color, var(--primary-color));
    border-color: var(--accent-color, var(--primary-color));
    color: #fff;
}
#settings-page .logs-container {
    background: #0a0a0a !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 14px !important;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace !important;
    font-size: 12px !important;
}

/* Skip intro tool / batch refresh / tool action bars */
#settings-page .skip-intro-tool { display: flex; flex-direction: column; gap: 14px; }
#settings-page .skip-intro-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
#settings-page .skip-intro-row .form-group {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#settings-page .skip-intro-row .form-group label {
    font-size: 0.82rem;
    color: var(--settings-text-muted, var(--text-secondary));
    font-weight: 600;
}
#settings-page .skip-intro-actions,
#settings-page .tool-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* IPTV inline status block (override its inline styles via specificity) */
#settings-page #iptv-status {
    background: rgba(15, 23, 42, 0.35) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
}
#settings-page #iptv-status h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: var(--settings-text);
}

/* IPTV field cards */
#settings-page .iptv-field-card {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
#settings-page .iptv-field-card h4 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--settings-text);
    font-weight: 700;
}
#settings-page .iptv-field-help {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--settings-text-muted, var(--text-secondary));
}
#settings-page .iptv-field-input {
    width: 100%;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace !important;
    font-size: 0.85rem !important;
}
#settings-page .iptv-actions {
    display: flex;
    gap: 10px;
    margin: 16px 0 8px;
    flex-wrap: wrap;
}

/* Users table container */
#settings-page #users-table-container {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 14px 16px;
}
#settings-page #users-table-container .loading {
    margin: 0;
    color: var(--settings-text-muted, var(--text-secondary));
}

/* Anchors styled as primary/secondary buttons in Server tab */
#settings-page .server-actions-bar a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* Density (compact reduces spacing on key surfaces) */
body[data-density="compact"] .card-grid,
body[data-density="compact"] .media-grid { gap: 12px; }
body[data-density="compact"] #settings-page .settings-section { padding: 16px 18px; }

/* Reduced motion */
body[data-reduced-motion="true"] *, 
body[data-reduced-motion="true"] *::before,
body[data-reduced-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
}

/* High contrast */
body[data-high-contrast="true"] { filter: contrast(1.15); }

/* Transparent panels off */
body[data-transparent-panels="false"] #settings-page .settings-sidebar-panel,
body[data-transparent-panels="false"] #settings-page .settings-section,
body[data-transparent-panels="false"] #settings-page .settings-summary-card {
    backdrop-filter: none;
}

/* ===== Settings v2 — top header, summary cards, simplified sidebar ===== */
#settings-page .settings-top-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 4px 22px;
}

#settings-page .settings-top-title h1 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: -0.02em;
    color: var(--settings-text);
    font-weight: 700;
}

#settings-page .settings-top-subtitle {
    margin: 6px 0 0;
    color: var(--settings-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

#settings-page .settings-top-header .settings-local-search-wrap {
    margin-top: 0;
    min-width: 320px;
    max-width: 360px;
    padding: 0 14px;
}

#settings-page .settings-summary-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0 4px 22px;
}

#settings-page .settings-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--settings-surface);
    border: 1px solid var(--settings-border);
    box-shadow: var(--settings-shadow);
    backdrop-filter: blur(16px);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    color: var(--settings-text);
    min-width: 0;
}

#settings-page .settings-summary-card:hover {
    transform: translateY(-2px);
    border-color: var(--settings-accent-border);
    box-shadow: 0 16px 32px var(--settings-accent-shadow);
}

#settings-page .summary-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
}

#settings-page .icon-appearance { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
#settings-page .icon-playback    { background: linear-gradient(135deg, #a855f7, #c084fc); }
#settings-page .icon-libraries   { background: linear-gradient(135deg, #22c55e, #4ade80); }
#settings-page .icon-livetv      { background: linear-gradient(135deg, #f97316, #fb923c); }
#settings-page .icon-notifications { background: linear-gradient(135deg, #eab308, #facc15); }
#settings-page .icon-server      { background: linear-gradient(135deg, #64748b, #94a3b8); }

#settings-page .summary-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

#settings-page .summary-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--settings-text);
    line-height: 1.2;
}

#settings-page .summary-text small {
    font-size: 0.75rem;
    color: var(--settings-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#settings-page .summary-text .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    margin-left: 4px;
    vertical-align: middle;
}

@media (max-width: 1200px) {
    #settings-page .settings-summary-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    #settings-page .settings-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #settings-page .settings-top-header { flex-direction: column; }
    #settings-page .settings-top-header .settings-local-search-wrap { width: 100%; max-width: none; min-width: 0; }
}

#settings-page .settings-control-center {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

#settings-page .settings-sidebar {
    position: sticky;
    top: 84px;
}

#settings-page .settings-sidebar-panel,
#settings-page .settings-page-header,
#settings-page .settings-section,
#settings-page .settings-search-empty,
#settings-page .settings-overview-stat,
#settings-page .settings-empty-state,
#settings-page .user-card,
#settings-page .status-card,
#settings-page .server-status-card,
#settings-page .logs-container,
#settings-page .tool-result-box,
#settings-page .add-user-dialog,
#settings-page .scan-status-item {
    background: var(--settings-surface);
    border: 1px solid var(--settings-border);
    box-shadow: var(--settings-shadow);
    backdrop-filter: blur(16px);
}

#settings-page .settings-sidebar-panel {
    border-radius: 20px;
    padding: 14px;
}

#settings-page .settings-sidebar-kicker,
#settings-page .settings-page-kicker,
#settings-page .settings-tab-kicker {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--settings-kicker);
}

#settings-page .settings-sidebar-head h2,
#settings-page .settings-page-header h1,
#settings-page .settings-tab-intro h3 {
    margin: 0;
    color: var(--settings-text);
}

#settings-page .settings-sidebar-head p,
#settings-page .settings-page-subtitle,
#settings-page .settings-tab-intro p,
#settings-page .section-description,
#settings-page .setting-description,
#settings-page .settings-row-copy p,
#settings-page .settings-overview-stat span,
#settings-page .scan-status-label,
#settings-page .settings-footer-status {
    color: var(--settings-muted);
}

#settings-page .settings-sidebar-head p:last-child {
    margin: 10px 0 0;
    line-height: 1.6;
}

#settings-page .settings-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}

#settings-page .settings-nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#settings-page .settings-nav-group-label {
    margin: 0 0 4px;
    padding: 0 4px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--settings-soft);
}

#settings-page .settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--settings-text);
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#settings-page .settings-nav-item:hover,
#settings-page .settings-nav-item.active {
    background: var(--settings-accent-surface);
    border-color: var(--settings-accent-border);
    transform: translateY(-1px);
}

#settings-page .settings-nav-item.active {
    box-shadow: 0 14px 30px var(--settings-accent-shadow);
}

#settings-page .settings-nav-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--settings-chip-bg);
    font-size: 0.9rem;
}

#settings-page .settings-nav-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#settings-page .settings-nav-copy strong {
    font-size: 0.95rem;
    font-weight: 700;
}

#settings-page .settings-nav-copy small {
    color: var(--settings-muted);
    font-size: 0.77rem;
    line-height: 1.45;
}

#settings-page .settings-nav-item.search-hidden,
#settings-page .settings-search-hidden,
#settings-page .search-empty-group {
    display: none !important;
}

#settings-page .settings-main {
    min-width: 0;
}

#settings-page .settings-page-header {
    border-radius: 24px;
    padding: 24px 26px;
    margin-bottom: 20px;
}

#settings-page .settings-page-titleblock {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

#settings-page .settings-page-header h1 {
    font-size: 2.1rem;
    letter-spacing: -0.04em;
}

#settings-page .settings-page-subtitle {
    margin: 10px 0 0;
    max-width: 720px;
    line-height: 1.6;
}

#settings-page .settings-page-status {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#settings-page .settings-status-pill,
#settings-page .settings-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid var(--settings-info-border);
    background: var(--settings-info-bg);
    color: var(--settings-info-text);
}

#settings-page .settings-status-pill-muted,
#settings-page .settings-status-badge.tone-muted {
    background: var(--settings-muted-chip-bg);
    border-color: var(--settings-muted-chip-border);
    color: var(--settings-muted-chip-text);
}

#settings-page .settings-status-badge.tone-ready {
    background: var(--settings-ready-bg);
    border-color: var(--settings-ready-border);
    color: var(--settings-ready-text);
}

#settings-page .settings-status-badge.tone-shared {
    background: var(--settings-shared-bg);
    border-color: var(--settings-shared-border);
    color: var(--settings-shared-text);
}

#settings-page .settings-local-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--settings-border-strong);
    background: var(--settings-field-bg);
}

#settings-page .settings-local-search-icon {
    color: var(--settings-kicker);
    font-size: 1.1rem;
}

#settings-page .settings-local-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 15px 0;
    color: var(--settings-text);
    font-size: 0.98rem;
}

#settings-page .settings-local-search-input:focus {
    outline: none;
}

#settings-page .settings-search-shortcut {
    border: 1px solid var(--settings-muted-chip-border);
    background: var(--settings-muted-chip-bg);
    color: var(--settings-muted);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

#settings-page .settings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#settings-page .settings-search-empty {
    border-radius: 18px;
    padding: 18px 20px;
    color: var(--settings-muted);
}

#settings-page .settings-tab-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

#settings-page .settings-tab-intro h3 {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
}

#settings-page .settings-tab-intro p:last-child {
    margin: 10px 0 0;
    max-width: 760px;
    line-height: 1.55;
}

#settings-page .settings-tab-actions,
#settings-page .settings-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#settings-page .settings-section-actions-stack {
    flex-direction: column;
    align-items: flex-end;
}

#settings-page .settings-section {
    border-radius: 22px;
    padding: 22px 24px;
    margin-bottom: 0;
}

#settings-page .settings-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

#settings-page .settings-section-head h3 {
    margin: 0;
    color: var(--settings-text);
    font-size: 1.08rem;
}

#settings-page .settings-setting-list {
    display: flex;
    flex-direction: column;
}

#settings-page .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

#settings-page .settings-row:first-child {
    border-top: none;
    padding-top: 0;
}

#settings-page .settings-row:last-child {
    padding-bottom: 0;
}

#settings-page .settings-row-copy {
    min-width: 0;
}

#settings-page .settings-row-title,
#settings-page .settings-row-copy .settings-row-title,
#settings-page .setting-label {
    display: block;
    margin: 0 0 6px;
    color: var(--settings-text);
    font-weight: 700;
}

#settings-page .settings-row-copy p,
#settings-page .setting-description {
    margin: 0;
    line-height: 1.55;
}

#settings-page .settings-row-control {
    min-width: 240px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

#settings-page .settings-row-danger .settings-row-title {
    color: #fca5a5;
}

#settings-page .settings-section-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

#settings-page .settings-inline-status,
#settings-page .settings-footer-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    font-size: 0.85rem;
}

#settings-page .setting-item {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--settings-subsurface);
    border: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 12px;
}

#settings-page .setting-item:last-child {
    margin-bottom: 0;
}

#settings-page .setting-input,
#settings-page .setting-select,
#settings-page input[type="text"],
#settings-page input[type="email"],
#settings-page input[type="password"],
#settings-page input[type="number"],
#settings-page textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: var(--settings-field-solid);
    color: var(--settings-text);
    padding: 12px 14px;
}

#settings-page .setting-select,
#settings-page .settings-row-control .setting-select {
    min-width: 220px;
}

#settings-page .toggle-switch {
    margin: 0;
}

#settings-page .toggle-slider {
    background: rgba(148, 163, 184, 0.24);
}

#settings-page input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--settings-toggle-on-a), var(--settings-toggle-on-b));
}

#settings-page .settings-library-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

#settings-page .settings-overview-stat {
    border-radius: 20px;
    padding: 18px 20px;
}

#settings-page .settings-overview-stat strong {
    display: block;
    margin-top: 10px;
    color: var(--settings-text);
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

#settings-page .settings-segmented-control {
    display: inline-flex;
    padding: 4px;
    border-radius: 14px;
    background: var(--settings-field-bg);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

#settings-page .settings-segmented-btn,
#settings-page .grid-size-btn {
    border: none;
    background: transparent;
    color: var(--settings-muted);
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

#settings-page .settings-segmented-btn.active,
#settings-page .grid-size-btn.active {
    background: var(--settings-accent-surface-strong);
    color: var(--settings-text);
}

#settings-page .settings-libraries-tab > * + * {
    margin-top: 18px;
}

#settings-page .settings-libraries-toolbar,
#settings-page .settings-libraries-summary-strip,
#settings-page .settings-libraries-list-pane,
#settings-page .settings-libraries-detail-pane,
#settings-page .settings-libraries-viewbar {
    background: var(--settings-surface);
    border: 1px solid var(--settings-border);
    box-shadow: var(--settings-shadow);
    backdrop-filter: blur(16px);
}

#settings-page .settings-libraries-toolbar,
#settings-page .settings-libraries-summary-strip,
#settings-page .settings-libraries-viewbar {
    border-radius: 20px;
}

#settings-page .settings-libraries-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

#settings-page .settings-libraries-toolbar-main,
#settings-page .settings-libraries-toolbar-actions,
#settings-page .settings-libraries-viewbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#settings-page .settings-libraries-toolbar-main {
    flex: 1 1 560px;
}

#settings-page .settings-libraries-toolbar-actions {
    justify-content: flex-end;
}

#settings-page .settings-libraries-search {
    flex: 1 1 280px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--settings-border-strong);
    background: var(--settings-field-bg);
}

#settings-page .settings-libraries-search:focus-within {
    border-color: var(--settings-accent-border);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--settings-kicker) 12%, transparent);
}

#settings-page .settings-libraries-search-icon {
    color: var(--settings-kicker);
    font-size: 1rem;
}

#settings-page .settings-libraries-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--settings-text);
    padding: 14px 0;
    font-size: 0.96rem;
}

#settings-page .settings-libraries-search-input:focus {
    outline: none;
}

#settings-page .settings-libraries-select {
    min-width: 150px;
}

#settings-page .settings-libraries-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px;
}

#settings-page .settings-libraries-summary-item {
    min-width: 0;
}

#settings-page .settings-libraries-summary-item span {
    display: block;
    color: var(--settings-soft);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#settings-page .settings-libraries-summary-item strong {
    display: block;
    margin-top: 8px;
    color: var(--settings-text);
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

#settings-page .settings-libraries-viewbar {
    justify-content: space-between;
    padding: 12px 16px;
}

#settings-page .settings-libraries-surface {
    min-width: 0;
}

#settings-page .settings-libraries-manager {
    display: grid;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

#settings-page .settings-libraries-list-pane,
#settings-page .settings-libraries-detail-pane {
    border-radius: 22px;
    padding: 22px;
    min-width: 0;
}

#settings-page .settings-libraries-list-head,
#settings-page .settings-library-detail-hero,
#settings-page .settings-library-detail-title-row,
#settings-page .settings-library-detail-section-head,
#settings-page .settings-library-detail-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

#settings-page .settings-libraries-pane-kicker {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--settings-kicker);
}

#settings-page .settings-libraries-list-head h4,
#settings-page .settings-library-detail-copy h4 {
    margin: 0;
    color: var(--settings-text);
}

#settings-page .settings-libraries-list-head h4 {
    font-size: 1.2rem;
}

#settings-page .settings-libraries-list-head p:last-child,
#settings-page .settings-library-detail-subtitle,
#settings-page .settings-library-detail-section-head p {
    margin: 8px 0 0;
    color: var(--settings-muted);
    line-height: 1.5;
}

#settings-page .settings-libraries-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

#settings-page .settings-library-list-item {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--settings-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

#settings-page .settings-library-list-item:hover,
#settings-page .settings-library-list-item:focus-visible {
    background: var(--settings-subsurface);
    border-color: var(--settings-border-strong);
    transform: translateY(-1px);
    outline: none;
}

#settings-page .settings-library-list-item.active {
    background: var(--settings-accent-surface);
    border-color: var(--settings-accent-border);
    box-shadow: 0 14px 28px var(--settings-accent-shadow);
}

#settings-page .settings-library-list-icon,
#settings-page .settings-library-detail-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--settings-accent-surface);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

#settings-page .settings-library-list-copy {
    min-width: 0;
}

#settings-page .settings-library-list-name {
    display: block;
    color: var(--settings-text);
    font-size: 0.98rem;
    font-weight: 700;
}

#settings-page .settings-library-list-meta {
    display: block;
    margin-top: 6px;
    color: var(--settings-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

#settings-page .settings-library-detail-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

#settings-page .settings-library-detail-copy {
    min-width: 0;
    flex: 1;
}

#settings-page .settings-library-detail-copy h4 {
    font-size: clamp(1.55rem, 2.4vw, 1.9rem);
    letter-spacing: -0.04em;
}

#settings-page .settings-library-detail-path {
    margin-top: 14px;
}

#settings-page .settings-library-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

#settings-page .settings-library-detail-body {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

#settings-page .settings-library-detail-section {
    padding-top: 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

#settings-page .settings-library-detail-section:first-child {
    padding-top: 0;
    border-top: none;
}

#settings-page .settings-library-detail-section-head h5 {
    margin: 0;
    color: var(--settings-text);
    font-size: 1.05rem;
}

#settings-page .settings-library-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 16px;
}

#settings-page .settings-library-detail-row {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--settings-subsurface);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

#settings-page .settings-library-detail-row-wide {
    grid-column: 1 / -1;
}

#settings-page .settings-library-detail-row dt {
    color: var(--settings-soft);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#settings-page .settings-library-detail-row dd {
    margin: 0;
    color: var(--settings-text);
    font-size: 0.98rem;
    font-weight: 600;
}

#settings-page .settings-library-detail-progress {
    margin-top: 16px;
}

#settings-page .settings-library-danger-zone {
    border-top-color: rgba(248, 113, 113, 0.22);
}

#settings-page .settings-library-danger-zone .btn-danger {
    margin-top: 14px;
}

#settings-page .settings-empty-state-inline {
    background: var(--settings-surface);
    border: 1px solid var(--settings-border);
    box-shadow: var(--settings-shadow);
    border-radius: 22px;
    padding: 28px;
}

#settings-page .settings-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

#settings-page .settings-library-card {
    border-radius: 20px;
    padding: 20px;
}

#settings-page .settings-library-card-head,
#settings-page .settings-library-title-row,
#settings-page .settings-library-meta-row,
#settings-page .settings-library-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#settings-page .settings-library-card-head {
    align-items: flex-start;
    margin-bottom: 18px;
}

#settings-page .settings-library-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

#settings-page .settings-library-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--settings-accent-surface);
    font-size: 1.15rem;
}

#settings-page .settings-library-title-row h4 {
    margin: 0;
    color: var(--settings-text);
    font-size: 1.05rem;
}

#settings-page .settings-library-subtitle {
    margin: 6px 0 0;
    color: var(--settings-muted);
    font-size: 0.88rem;
}

#settings-page .settings-library-share-chip,
#settings-page .settings-library-readonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--settings-muted-chip-bg);
    border: 1px solid var(--settings-muted-chip-border);
    color: var(--settings-muted-chip-text);
    font-size: 0.78rem;
    font-weight: 700;
}

#settings-page .settings-library-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

#settings-page .settings-library-metric {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--settings-card-surface);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

#settings-page .settings-library-metric span,
#settings-page .settings-library-meta-row span {
    display: block;
    color: var(--settings-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#settings-page .settings-library-metric strong,
#settings-page .settings-library-meta-row strong {
    display: block;
    margin-top: 8px;
    color: var(--settings-text);
    font-size: 1rem;
}

#settings-page .settings-library-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#settings-page .settings-library-path-pill {
    display: inline-flex;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--settings-field-bg);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--settings-text);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.79rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#settings-page .settings-library-actions {
    margin-top: 18px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#settings-page .settings-library-actions-inline {
    justify-content: flex-end;
}

#settings-page .settings-library-progress {
    min-height: 0;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--settings-muted);
    font-size: 0.82rem;
}

#settings-page .settings-library-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    overflow: hidden;
}

#settings-page .settings-library-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--settings-toggle-on-a), var(--settings-toggle-on-b));
    transition: width 0.22s ease;
}

#settings-page .settings-library-progress.is-success .settings-library-progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

#settings-page .settings-library-progress-inline {
    margin-top: 8px;
}

#settings-page .settings-library-table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

#settings-page .settings-library-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
    background: rgba(8, 15, 27, 0.72);
}

#settings-page .settings-library-table th,
#settings-page .settings-library-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    text-align: left;
    vertical-align: top;
}

#settings-page .settings-library-table th {
    color: var(--settings-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#settings-page .settings-library-table-name {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#settings-page .settings-overflow-menu {
    position: relative;
}

#settings-page .settings-overflow-trigger {
    list-style: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: var(--settings-field-bg);
    color: var(--settings-text);
    cursor: pointer;
}

#settings-page .settings-overflow-trigger::-webkit-details-marker {
    display: none;
}

#settings-page .settings-overflow-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    padding: 8px;
    border-radius: 14px;
    background: var(--settings-popup-bg);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

#settings-page .settings-overflow-action {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--settings-text);
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}

#settings-page .settings-overflow-action:hover {
    background: rgba(148, 163, 184, 0.12);
}

#settings-page .settings-overflow-action.danger {
    color: #fecaca;
}

#settings-page .settings-empty-state {
    border-radius: 20px;
    padding: 36px;
    text-align: center;
}

#settings-page .settings-empty-state h4 {
    margin: 0 0 10px;
    color: var(--settings-text);
}

#settings-page .settings-empty-state p {
    margin: 0;
    color: var(--settings-muted);
}

#settings-page .theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

#settings-page .theme-card {
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.7);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#settings-page .theme-card:hover,
#settings-page .theme-card.active {
    transform: translateY(-2px);
    border-color: var(--settings-accent-border);
    box-shadow: 0 18px 34px var(--settings-accent-shadow);
}

#settings-page .theme-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

#settings-page .theme-card-description {
    color: var(--settings-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

#settings-page .accent-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#settings-page .accent-swatch {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 2px solid transparent;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.2);
}

#settings-page .accent-swatch.active {
    border-color: var(--settings-text);
    transform: translateY(-1px);
}

#settings-page .grid-size-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#settings-page .grid-size-btn {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.72);
}

#settings-page .grid-size-btn .grid-preview span {
    background: rgba(148, 163, 184, 0.26);
}

#settings-page .user-card {
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

#settings-page .email-notif-header,
#settings-page .users-header,
#settings-page .logs-controls,
#settings-page .server-info-grid,
#settings-page .notification-header {
    gap: 14px;
}

#settings-page .scan-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#settings-page .scan-status-item {
    border-radius: 16px;
    padding: 14px 16px;
}

#settings-page .scan-status-value {
    color: var(--settings-text);
}

#settings-page .btn {
    border-radius: 14px;
}

@media (max-width: 900px) {
    #settings-page .settings-control-center {
        grid-template-columns: 1fr;
    }

    #settings-page .settings-sidebar {
        position: static;
    }

    #settings-page .settings-library-overview,
    #settings-page .settings-libraries-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #settings-page .settings-libraries-manager {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    #settings-page {
        padding: 22px 16px 34px;
    }

    #settings-page .settings-page-titleblock,
    #settings-page .settings-tab-intro,
    #settings-page .settings-section-head,
    #settings-page .settings-row,
    #settings-page .settings-libraries-toolbar,
    #settings-page .settings-libraries-viewbar,
    #settings-page .settings-libraries-list-head,
    #settings-page .settings-library-detail-hero,
    #settings-page .settings-library-detail-title-row,
    #settings-page .settings-library-detail-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    #settings-page .settings-page-status,
    #settings-page .settings-section-actions-stack,
    #settings-page .settings-libraries-toolbar-actions,
    #settings-page .settings-library-detail-actions {
        justify-content: flex-start;
        align-items: flex-start;
    }

    #settings-page .settings-row-control {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    #settings-page .settings-local-search-wrap {
        padding-right: 12px;
    }

    #settings-page .settings-search-shortcut {
        display: none;
    }

    #settings-page .settings-library-overview,
    #settings-page .settings-libraries-summary-strip,
    #settings-page .settings-library-detail-grid,
    #settings-page .scan-status-grid {
        grid-template-columns: 1fr;
    }

    #settings-page .settings-library-list-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    #settings-page .settings-library-list-item .settings-status-badge {
        grid-column: 2;
        justify-self: flex-start;
    }
}

/* ===== Content Rating Badges ===== */
.content-rating-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
    vertical-align: middle;
}

.content-rating-badge-small {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    vertical-align: middle;
    margin-left: 4px;
}

/* ===== Watchlist Button ===== */
.btn-watchlist-active {
    background: rgba(255, 180, 0, 0.15) !important;
    border-color: #ffb400 !important;
    color: #ffb400 !important;
}

.watchlist-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-poster:hover .watchlist-remove-btn {
    opacity: 1;
}

/* ===== External Links ===== */
.external-link {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
}

.external-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ===== Skip Intro Button ===== */
.skip-intro-btn {
    position: absolute;
    bottom: 100px;
    right: 30px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    animation: skipIntroFadeIn 0.3s ease-out;
}

.skip-intro-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.03);
}

@keyframes skipIntroFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ===== Up Next — Full-Screen Plex-Style ===== */

/* Video container shrink transition */
.video-container {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-player-page.up-next-active .video-container {
    transform: scale(0.28);
    transform-origin: top right;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
    z-index: 5001;
    position: relative;
}

/* Suppress controls, header, info bar during up-next */
.video-player-page.up-next-active .video-player-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.video-player-page.up-next-active .video-controls-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

.video-player-page.up-next-active .video-info {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.video-player-page.up-next-active #skip-intro-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Full-screen overlay */
.up-next-overlay {
    position: absolute;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 80px 60px;
    overflow: hidden;
}

.up-next-overlay.up-next-visible {
    animation: upNextFadeIn 0.6s ease-out forwards;
}

/* Backdrop image */
.up-next-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(4px) brightness(0.3);
    transform: scale(1.1);
    z-index: 0;
}

/* Gradient overlays for readability */
.up-next-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.3) 100%),
        linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    z-index: 1;
}

/* Content layout */
.up-next-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    gap: 40px;
}

/* Episode info */
.up-next-info {
    flex: 1;
    min-width: 0;
}

.up-next-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.up-next-show-title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.up-next-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.2;
}

.up-next-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
    font-weight: 500;
}

.up-next-overview {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 550px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Action buttons */
.up-next-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.up-next-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #e5e5e5;
    color: #111;
    transition: background 0.2s, transform 0.15s;
}

.up-next-play-btn:hover {
    background: #fff;
    transform: scale(1.04);
}

.up-next-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background 0.2s, border-color 0.2s;
}

.up-next-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Countdown ring */
.up-next-countdown-container {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.up-next-countdown-ring {
    width: 64px;
    height: 64px;
    transform: rotate(-90deg);
}

.up-next-countdown-ring .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3;
}

.up-next-countdown-ring .ring-progress {
    fill: none;
    stroke: #e5e5e5;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 175.93;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.up-next-countdown-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

@keyframes upNextFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Responsive — tablet */
@media (max-width: 768px) {
    .up-next-overlay {
        padding: 40px 30px;
    }

    .video-player-page.up-next-active .video-container {
        transform: scale(0.22);
    }

    .up-next-title {
        font-size: 1.3rem;
    }

    .up-next-overview {
        -webkit-line-clamp: 2;
        font-size: 0.85rem;
    }

    .up-next-content {
        gap: 24px;
    }
}

/* Responsive — mobile */
@media (max-width: 480px) {
    .up-next-overlay {
        padding: 24px 20px;
        align-items: flex-end;
    }

    .video-player-page.up-next-active .video-container {
        transform: scale(0.18);
    }

    .up-next-title {
        font-size: 1.1rem;
    }

    .up-next-overview {
        display: none;
    }

    .up-next-play-btn,
    .up-next-cancel-btn {
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    .up-next-countdown-container {
        width: 50px;
        height: 50px;
    }

    .up-next-countdown-ring {
        width: 50px;
        height: 50px;
    }

    .up-next-countdown-text {
        font-size: 0.9rem;
    }
}

/* ===== Playback Speed Control ===== */
.speed-control {
    position: relative;
    display: inline-flex;
}

#speed-btn {
    min-width: 45px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 6px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#speed-btn:hover {
    background: rgba(229, 9, 20, 0.3);
    border-color: rgba(229, 9, 20, 0.5);
}

#speed-btn:active {
    background: rgba(229, 9, 20, 0.5);
}

/* Speed Menu Dropdown */
.speed-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    min-width: 120px;
    z-index: 1000;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    padding: 4px 0;
    display: none;
}

.speed-menu-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.speed-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.speed-menu-item.active {
    color: #e50914;
    font-weight: 600;
}

.speed-menu-item .speed-check {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ===== Track Selector (Subtitles & Audio) ===== */
.track-selector-container {
    position: relative;
    display: inline-flex;
}

#subtitle-btn,
#audio-track-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    opacity: 0.85;
}

#subtitle-btn:hover,
#audio-track-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

#subtitle-btn svg,
#audio-track-btn svg {
    width: 22px;
    height: 22px;
}

.track-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    padding: 4px 0;
    display: none;
}

.track-menu-header {
    padding: 8px 14px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 2px;
}

.track-menu-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.track-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.track-menu-item.active {
    color: #e50914;
    font-weight: 600;
}

.track-menu-item .track-check {
    width: 16px;
    text-align: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.track-menu::-webkit-scrollbar {
    width: 4px;
}

.track-menu::-webkit-scrollbar-track {
    background: transparent;
}

.track-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* ===== Watch History Page ===== */
.history-date-header {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.history-date-header:first-child {
    margin-top: 0;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.history-poster {
    width: 46px;
    min-width: 46px;
    height: 69px;
    border-radius: 4px;
    overflow: hidden;
    background: #1e1e1e;
}

.history-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-poster-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #555;
}

.history-info {
    flex: 1;
    min-width: 0;
}

.history-title {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.history-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 0.75rem;
}

.history-status {
    font-weight: 600;
}

.history-status.completed {
    color: #10b981;
}

.history-status.in-progress {
    color: #f59e0b;
}

.history-time {
    color: rgba(255, 255, 255, 0.35);
}

.history-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.history-progress-fill {
    height: 100%;
    background: #e50914;
    border-radius: 2px;
    transition: width 0.3s;
}

/* ===== User Profile Modal ===== */
.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.profile-details {
    width: 100%;
}

.profile-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-field:last-child {
    border-bottom: none;
}

.profile-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-field span {
    color: #fff;
    font-size: 0.9rem;
}

.profile-role.admin {
    color: #f59e0b;
    font-weight: 600;
}

/* ===== Mark as Watched Button ===== */
.btn-watched-active {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
}

/* ===== Cast & Crew Links ===== */
.cast-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.cast-link:hover {
    color: #e50914;
    text-decoration: underline;
}

/* Cast Section with Photos */
.cast-section {
    margin-bottom: 1.5rem;
}

.cast-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
}

.cast-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.cast-grid::-webkit-scrollbar {
    height: 4px;
}

.cast-grid::-webkit-scrollbar-track {
    background: transparent;
}

.cast-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

.cast-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    min-width: 80px;
    max-width: 80px;
    transition: transform 0.2s;
}

.cast-card:hover {
    transform: translateY(-3px);
}

.cast-card-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 0.4rem;
    border: 2px solid rgba(255,255,255,0.1);
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.cast-card:hover .cast-card-img {
    border-color: var(--primary-color);
}

.cast-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cast-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    font-weight: 600;
}

.cast-card-name {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.cast-card:hover .cast-card-name {
    color: var(--primary-color);
}

/* ===== Enhanced Media Details ===== */
.movie-meta-details {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(229, 9, 20, 0.01) 100%);
    border-radius: 8px;
    border: 1px solid rgba(229, 9, 20, 0.1);
    margin-bottom: 2rem;
    color: #b3b3b3;
}

.movie-meta-details p {
    margin: 0.75rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.movie-meta-details strong {
    color: #ffffff;
    min-width: 100px;
    font-weight: 600;
}

.movie-meta-details .cast-link {
    color: #e50914;
    font-weight: 500;
}

.movie-meta-details .cast-link:hover {
    color: #ff4d5e;
}

/* ===== Related Content Section ===== */
.related-section {
    padding: 2rem 0;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeIn 0.5s ease-out 0.3s backwards;
}

.related-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scroll-section {
    position: relative;
    margin: 0;
}

.scroll-container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scroll-behavior: smooth;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(229, 9, 20, 0.9) 0%, rgba(178, 7, 16, 0.7) 100%);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.scroll-arrow:hover {
    background: linear-gradient(90deg, rgba(229, 9, 20, 1) 0%, rgba(178, 7, 16, 0.9) 100%);
    transform: translateY(-50%) scale(1.1);
}

.scroll-arrow.left {
    left: 0;
}

.scroll-arrow.right {
    right: 0;
}

/* ===== Admin Tools ===== */
.tool-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.health-table, .duplicate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.health-table th, .health-table td,
.duplicate-table th, .duplicate-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.health-table th, .duplicate-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.health-table tr:hover, .duplicate-table tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tool-result-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

.tool-result-box h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.tool-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.tool-stat.ok { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.tool-stat.warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.tool-stat.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.tool-stat.info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* Scan progress bar */
.scan-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.scan-progress-bar .bar {
    height: 100%;
    background: #e50914;
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: scanPulse 1.5s ease-in-out infinite;
}

@keyframes scanPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.scan-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* TMDB Candidate Cards */
.tmdb-candidate {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.tmdb-candidate:hover {
    border-color: #e50914;
    background: rgba(229, 9, 20, 0.05);
}

.tmdb-candidate img {
    width: 60px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.tmdb-candidate-info {
    flex: 1;
    min-width: 0;
}

.tmdb-candidate-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    color: white;
}

.tmdb-candidate-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tmdb-candidate-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Duplicate group card */
.duplicate-group {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.duplicate-group h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.duplicate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.duplicate-item:last-child {
    border-bottom: none;
}

/* Batch refresh progress */
.batch-progress-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.batch-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 0.75rem 0;
}

.batch-progress-bar .bar {
    height: 100%;
    background: #e50914;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ============================================
   Dashboard Analytics Section
   ============================================ */

.analytics-section {
    margin-top: 2rem;
    padding: 0 2rem 2rem;
}

.analytics-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(229, 9, 20, 0.3);
}

.analytics-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.analytics-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}

.analytics-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(229, 9, 20, 0.4);
}

.analytics-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #e50914;
    margin-bottom: 0.3rem;
}

.analytics-stat-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.analytics-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
}

.analytics-chart-card h4 {
    font-size: 0.95rem;
    color: #ccc;
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.analytics-chart-card canvas {
    max-height: 260px;
}

.top-watched-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}

.top-watched-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    transition: border-color 0.2s;
}

.top-watched-item:hover {
    border-color: rgba(229, 9, 20, 0.4);
}

.top-watched-rank {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e50914;
    min-width: 28px;
    text-align: center;
}

.top-watched-poster {
    width: 36px;
    height: 54px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}

.top-watched-info {
    flex: 1;
    min-width: 0;
}

.top-watched-title {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-watched-meta {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}

/* ============================================
   Statistics Page
   ============================================ */

.statistics-page-content {
    padding: 0 1rem 2rem;
}

.statistics-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 2rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(229, 9, 20, 0.3);
}

.stats-overview-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stats-overview-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}

.stats-overview-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 9, 20, 0.4);
}

.stats-overview-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.stats-overview-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.stats-overview-label {
    font-size: 0.85rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-saved-positive { border-color: rgba(63, 185, 80, 0.3); }
.stats-saved-positive .stats-overview-value { color: #5fd068; }
.stats-saved-negative { border-color: rgba(229, 120, 50, 0.3); }
.stats-saved-negative .stats-overview-value { color: #e57832; }

/* Replacement History */
.stats-repl-history {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    margin-top: 8px;
}
.stats-repl-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stats-repl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    gap: 12px;
    flex-wrap: wrap;
}
.stats-repl-row:hover { background: rgba(255,255,255,0.04); }
.stats-repl-title {
    font-size: 0.85rem;
    color: #ddd;
    flex: 1;
    min-width: 200px;
}
.stats-repl-type { margin-right: 6px; }
.stats-repl-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.stats-repl-lib {
    color: #888;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 4px;
}
.stats-repl-date { color: #666; }
.stats-repl-size { color: #999; }
.stats-repl-diff { font-weight: 600; }
.stats-repl-diff.repl-saved { color: #5fd068; }
.stats-repl-diff.repl-grew { color: #e57832; }

/* ============================================
   Active Streams / Who's Watching
   ============================================ */
.active-streams-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.active-stream-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.active-stream-indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #4caf50;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.active-stream-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e50914, #b20710);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.active-stream-info {
    flex: 1;
    min-width: 0;
}

.active-stream-user {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.active-stream-title {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-stream-progress-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 6px;
}

.active-stream-bar-bg {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.active-stream-bar {
    height: 100%;
    background: #4caf50;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.active-stream-time {
    font-size: 0.7rem;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.active-stream-poster {
    width: 36px;
    height: 54px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}

.active-streams-empty {
    padding: 1.5rem;
    text-align: center;
    color: #666;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.9rem;
}

.active-streams-footer {
    margin-top: 0.5rem;
    text-align: right;
}

.btn-refresh-streams {
    background: transparent;
    border: 1px solid var(--border-color);
    color: #aaa;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: border-color 0.2s, color 0.2s;
}

.btn-refresh-streams:hover {
    border-color: #e50914;
    color: #fff;
}

.btn-refresh-streams:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════
   STORAGE MANAGER — Redesigned Dashboard
   ═══════════════════════════════════════════════ */

.sm-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}

/* ---- Stats Row ---- */
.sm-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sm-stat {
    flex: 1;
    min-width: 110px;
    padding: 0.9rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.sm-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.sm-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.sm-stat-label {
    font-size: 0.65rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.sm-stat-primary {
    border-color: rgba(229, 9, 20, 0.25);
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.08), transparent);
}

.sm-stat-primary .sm-stat-value {
    color: #e50914;
}

.sm-stat-purple {
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.05);
    cursor: pointer;
}

.sm-stat-purple:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
}

.sm-stat-purple .sm-stat-value {
    color: #818cf8;
}

.sm-stat-green {
    border-color: rgba(76, 175, 80, 0.25);
    background: rgba(76, 175, 80, 0.05);
}

.sm-stat-green .sm-stat-value {
    color: #66bb6a;
}

.sm-stat-orange {
    border-color: rgba(255, 152, 0, 0.25);
    background: rgba(255, 152, 0, 0.05);
}

.sm-stat-orange .sm-stat-value {
    color: #ffa726;
}

/* ---- Distribution Bar ---- */
.sm-distribution {
    padding: 0 0.25rem;
}

.sm-dist-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    gap: 2px;
}

.sm-dist-segment {
    height: 100%;
    border-radius: 3px;
    transition: opacity 0.2s;
    min-width: 4px;
    cursor: pointer;
}

.sm-dist-segment:hover {
    opacity: 0.75;
    filter: brightness(1.2);
}

.sm-dist-legend {
    display: flex;
    gap: 1.25rem;
    margin-top: 8px;
    flex-wrap: wrap;
}

.sm-dist-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #777;
    cursor: pointer;
    transition: color 0.15s;
}

.sm-dist-legend-item:hover {
    color: #ccc;
}

.sm-dist-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Replacement History ---- */
.replacement-history-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.replacement-history-panel h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: #fff;
}

.replacement-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.replacement-history-table th {
    text-align: left;
    color: #555;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
}

.replacement-history-table td {
    padding: 0.5rem 0.6rem;
    color: #bbb;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.replacement-history-table tr:hover td {
    background: rgba(255,255,255,0.03);
}

.repl-saved { color: #66bb6a; font-weight: 600; }
.repl-grew { color: #ffa726; font-weight: 600; }

/* ---- Main Layout (Sidebar + Content) ---- */
.sm-main {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

/* ---- Sidebar ---- */
.sm-sidebar {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-sidebar-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 0.75rem;
    margin-bottom: 0.35rem;
}

.sm-lib {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.2s;
    border: 1px solid transparent;
    position: relative;
}

.sm-lib:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sm-lib.active {
    background: rgba(229, 9, 20, 0.08);
    border-color: rgba(229, 9, 20, 0.25);
}

.sm-lib.active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: #e50914;
    border-radius: 0 3px 3px 0;
}

.sm-lib-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.sm-lib-details {
    flex: 1;
    min-width: 0;
}

.sm-lib-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-lib.active .sm-lib-name {
    color: #fff;
}

.sm-lib-meta {
    font-size: 0.68rem;
    color: #555;
    margin-top: 1px;
}

.sm-lib-size {
    font-size: 0.82rem;
    font-weight: 700;
    color: #666;
    flex-shrink: 0;
}

.sm-lib.active .sm-lib-size {
    color: #e50914;
}

/* ---- Content Panel ---- */
.sm-content {
    flex: 1;
    min-width: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sm-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #444;
    font-size: 0.9rem;
    font-style: italic;
}

.sm-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: rgba(255,255,255,0.01);
}

.sm-content-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.sm-content-meta {
    font-size: 0.75rem;
    color: #555;
    margin-top: 2px;
}

.sm-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sm-items::-webkit-scrollbar {
    width: 6px;
}

.sm-items::-webkit-scrollbar-track {
    background: transparent;
}

.sm-items::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}

.sm-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* ---- Media Items (Movies & Shows) ---- */
.sm-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.sm-item:hover {
    background: rgba(255, 255, 255, 0.035);
}

.sm-item-expandable {
    cursor: pointer;
}

.sm-item-expanded {
    background: rgba(229, 9, 20, 0.04);
}

.sm-poster {
    width: 38px;
    height: 57px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}

.sm-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sm-item-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sm-item-sub {
    font-size: 0.7rem;
    color: #555;
}

.sm-chevron {
    font-size: 0.65rem;
    color: #555;
    transition: transform 0.2s;
    display: inline-block;
    width: 12px;
    flex-shrink: 0;
}

/* ---- Size Bars ---- */
.sm-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
}

.sm-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #e50914, #ff4444);
    transition: width 0.4s ease;
}

.sm-size {
    font-size: 0.8rem;
    font-weight: 700;
    color: #e50914;
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
}

/* ---- Action Buttons ---- */
.sm-btn-find {
    flex-shrink: 0;
    background: rgba(33, 150, 243, 0.08);
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.18);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.73rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-weight: 600;
}

.sm-btn-find:hover {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.sm-btn-find-sm {
    flex-shrink: 0;
    background: rgba(33, 150, 243, 0.06);
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.12);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sm-btn-find-sm:hover {
    background: rgba(33, 150, 243, 0.18);
    border-color: rgba(33, 150, 243, 0.35);
}

.sm-btn-del {
    flex-shrink: 0;
    background: rgba(229, 9, 20, 0.06);
    color: #e57373;
    border: 1px solid rgba(229, 9, 20, 0.15);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.73rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-weight: 600;
}

.sm-btn-del:hover {
    background: rgba(229, 9, 20, 0.2);
    border-color: rgba(229, 9, 20, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.15);
}

.sm-btn-del-sm {
    flex-shrink: 0;
    background: rgba(229, 9, 20, 0.04);
    color: #e57373;
    border: 1px solid rgba(229, 9, 20, 0.1);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sm-btn-del-sm:hover {
    background: rgba(229, 9, 20, 0.18);
    border-color: rgba(229, 9, 20, 0.35);
}

.sm-btn-pack {
    flex-shrink: 0;
    background: rgba(156, 39, 176, 0.08);
    color: #ce93d8;
    border: 1px solid rgba(156, 39, 176, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-weight: 600;
}

.sm-btn-pack:hover {
    background: rgba(156, 39, 176, 0.2);
    border-color: rgba(156, 39, 176, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
}

/* Keep tag-pack for modal results */
.tag-pack {
    background: rgba(156, 39, 176, 0.2) !important;
    color: #ce93d8 !important;
    border-color: rgba(156, 39, 176, 0.4) !important;
}

/* Keep storage-replace-btn for modal results */
.storage-replace-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---- TV Show Drilldown ---- */
.sm-drilldown {
    margin-left: 20px;
    padding-left: 16px;
    border-left: 2px solid rgba(229, 9, 20, 0.12);
}

.sm-drilldown-loading {
    padding: 12px 16px;
    font-size: 0.82rem;
    color: #555;
}

/* Seasons */
.sm-season {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    margin: 1px 0;
}

.sm-season:hover {
    background: rgba(255, 255, 255, 0.035);
}

.sm-season-expanded {
    background: rgba(255, 152, 0, 0.04);
}

.sm-season-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 170px;
    flex-shrink: 0;
}

.sm-season-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
}

.sm-season-eps {
    font-size: 0.68rem;
    color: #555;
    margin-left: 2px;
}

.sm-season-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sm-season-bar {
    flex: 1;
}

.sm-bar-fill-season {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}

.sm-season .sm-size {
    color: #ffa726;
}

/* Episodes */
.sm-episodes {
    margin-left: 16px;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 152, 0, 0.12);
    margin-bottom: 4px;
}

.sm-episode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 5px 8px;
    border-radius: 4px;
    margin: 1px 0;
    transition: background 0.15s;
}

.sm-episode:hover {
    background: rgba(255, 255, 255, 0.03);
}

.sm-ep-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ff9800;
    min-width: 28px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    flex-shrink: 0;
}

.sm-ep-info {
    flex: 1;
    min-width: 0;
}

.sm-ep-title {
    font-size: 0.8rem;
    color: #bbb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-ep-file {
    font-size: 0.65rem;
    color: #444;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.sm-ep-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
}

.sm-ep-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9800, #ffb74d);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.sm-ep-size {
    font-size: 0.75rem;
    font-weight: 600;
    color: #66bb6a;
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
    flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .sm-main {
        flex-direction: column;
    }
    .sm-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .sm-sidebar-title {
        display: none;
    }
    .sm-lib {
        min-width: 150px;
        flex-shrink: 0;
    }
    .sm-content {
        min-height: 400px;
    }
    .sm-stats {
        gap: 0.5rem;
    }
    .sm-stat {
        min-width: 80px;
        padding: 0.65rem 0.8rem;
    }
    .sm-stat-value {
        font-size: 1.2rem;
    }
}

/* ---- Legacy: Statistics Page Storage Breakdown ---- */
.storage-breakdown-controls { margin-bottom: 1rem; }
.storage-breakdown-controls select { background: rgba(255,255,255,0.08); border: 1px solid var(--border-color); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.storage-breakdown-controls select:focus { border-color: #e50914; outline: none; }
.storage-breakdown-controls select option { background: #1a1a1a; color: #fff; }
.storage-breakdown-summary { display: flex; gap: 1.5rem; align-items: center; padding: 0.75rem 1rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; color: #aaa; }
.storage-breakdown-summary strong { color: #fff; }
.storage-breakdown-section { margin-bottom: 1.5rem; }
.storage-breakdown-heading { font-size: 0.95rem; font-weight: 600; color: #ccc; margin: 0 0 0.75rem 0; }
.storage-item-list, .storage-file-list { display: flex; flex-direction: column; gap: 0.5rem; }
.storage-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.8rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: border-color 0.2s; }
.storage-item:hover { border-color: rgba(229, 9, 20, 0.4); }
.storage-item-expandable { cursor: pointer; }
.storage-item-expanded { border-color: rgba(229, 9, 20, 0.5); background: rgba(229, 9, 20, 0.04); }
.storage-item-poster { width: 36px; height: 54px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.05); }
.storage-item-info { flex: 1; min-width: 0; }
.storage-item-title { font-size: 0.9rem; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storage-item-meta { font-size: 0.75rem; color: #888; margin-top: 2px; }
.storage-item-bar-bg { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.storage-item-bar { height: 100%; background: linear-gradient(90deg, #e50914, #ff6b6b); border-radius: 2px; transition: width 0.4s ease; }
.storage-item-bar-alt { background: linear-gradient(90deg, #2196f3, #64b5f6); }
.storage-item-size { font-size: 0.85rem; font-weight: 600; color: #e50914; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.storage-file-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.8rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; }
.storage-file-info { flex: 1; min-width: 0; }
.storage-file-title { font-size: 0.85rem; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storage-file-name { font-size: 0.72rem; color: #666; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.storage-expand-icon { display: inline-block; width: 14px; font-size: 0.75rem; color: #888; margin-right: 4px; flex-shrink: 0; }
.storage-drilldown { margin-left: 36px; padding-left: 12px; border-left: 2px solid rgba(229, 9, 20, 0.2); margin-bottom: 4px; }
.storage-drilldown-loading { padding: 12px 16px; font-size: 0.85rem; color: #888; }
.storage-season { display: flex; align-items: center; gap: 0.75rem; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background 0.15s; margin: 2px 0; }
.storage-season:hover { background: rgba(255,255,255,0.05); }
.storage-season-expanded { background: rgba(255,255,255,0.03); }
.storage-season-info { display: flex; align-items: center; gap: 4px; min-width: 180px; flex-shrink: 0; }
.storage-season-label { font-size: 0.88rem; font-weight: 600; color: #fff; }
.storage-season-meta { font-size: 0.75rem; color: #777; margin-left: 6px; }
.storage-season-bar-wrap { flex: 1; min-width: 0; }
.storage-item-bar-season { background: linear-gradient(90deg, #ff9800, #ffcc80); }
.storage-episodes { margin-left: 18px; padding-left: 12px; border-left: 2px solid rgba(255, 152, 0, 0.2); margin-bottom: 4px; }
.storage-episode { display: flex; align-items: center; gap: 0.6rem; padding: 6px 10px; border-radius: 4px; margin: 1px 0; transition: background 0.15s; }
.storage-episode:hover { background: rgba(255,255,255,0.04); }
.storage-episode-num { font-size: 0.75rem; font-weight: 700; color: #ff9800; min-width: 32px; flex-shrink: 0; font-family: monospace; }
.storage-episode-info { flex: 1; min-width: 0; }
.storage-episode-title { font-size: 0.82rem; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storage-episode-meta { font-size: 0.7rem; color: #666; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.storage-item-bar-episode { background: linear-gradient(90deg, #4caf50, #81c784); }
.storage-episode-size { font-size: 0.78rem; color: #4caf50; }

/* ===== Find Replacement Modal ===== */
.find-replacement-modal-content {
    max-width: 700px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

.find-current-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: rgba(229, 9, 20, 0.08);
    border: 1px solid rgba(229, 9, 20, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.find-current-label {
    font-size: 0.85rem;
    color: #aaa;
}

.find-current-size {
    font-size: 1rem;
    font-weight: 700;
    color: #e50914;
}

.find-current-quality {
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
    padding: 2px 8px;
    border-radius: 4px;
}

.find-no-results {
    text-align: center;
    color: #888;
    padding: 2rem 0;
}

.find-results-count {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.75rem;
}

.find-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.find-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.find-result-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.find-result-item.find-size-smaller {
    border-left: 3px solid #4caf50;
}

.find-result-item.find-size-larger {
    border-left: 3px solid #ff9800;
}

.find-result-info {
    flex: 1;
    min-width: 0;
}

.find-result-title {
    font-size: 0.82rem;
    color: #ddd;
    word-break: break-word;
    line-height: 1.3;
}

.find-result-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 4px;
}

.find-result-size {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}

.find-size-diff {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
}

.find-size-save {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.find-size-bigger {
    background: rgba(255, 152, 0, 0.15);
    color: #ffcc80;
}

.find-result-date {
    font-size: 0.7rem;
    color: #666;
    margin-top: 2px;
}

.storage-replace-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ===== Replace Confirm Modal ===== */
.replace-confirm-modal-content {
    max-width: 480px;
    width: 90vw;
}

.replace-confirm-info {
    padding: 0.75rem 0;
}

.replace-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.replace-label {
    font-size: 0.85rem;
    color: #888;
}

.replace-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.replace-new-name {
    font-size: 0.78rem;
    color: #ccc;
    font-weight: 400;
    max-width: 280px;
    text-align: right;
    word-break: break-word;
    line-height: 1.3;
}

.replace-confirm-arrow {
    text-align: center;
    font-size: 1.2rem;
    padding: 4px 0;
}

.replace-confirm-warning {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: #ffcc80;
    line-height: 1.4;
}

/* ===== Bulk Selection & Replace ===== */

/* Checkboxes on items */
.sm-bulk-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
}

.sm-bulk-cb:hover {
    border-color: rgba(33, 150, 243, 0.5);
    background: rgba(33, 150, 243, 0.1);
}

.sm-bulk-cb:checked {
    background: #2196f3;
    border-color: #2196f3;
}

.sm-bulk-cb:checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 11px;
    color: #fff;
    font-weight: 700;
}

.sm-bulk-cb-ep {
    width: 14px;
    height: 14px;
}

.sm-bulk-cb-ep:checked::after {
    top: -2px;
    left: 1px;
    font-size: 10px;
}

/* Floating bulk toolbar */
.sm-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.12), rgba(33, 150, 243, 0.06));
    border-bottom: 1px solid rgba(33, 150, 243, 0.2);
    animation: smBulkSlideIn 0.2s ease-out;
}

@keyframes smBulkSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sm-bulk-info {
    font-size: 0.82rem;
    color: #64b5f6;
    font-weight: 600;
}

.sm-bulk-info span {
    font-size: 1rem;
    font-weight: 700;
    color: #90caf9;
}

.sm-bulk-actions {
    display: flex;
    gap: 8px;
}

.sm-btn-bulk-clear {
    background: rgba(255, 255, 255, 0.06);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.73rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sm-btn-bulk-clear:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ddd;
}

.sm-btn-bulk-search {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.1));
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 6px;
    padding: 5px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.sm-btn-bulk-search:hover {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3), rgba(33, 150, 243, 0.15));
    border-color: rgba(33, 150, 243, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

/* Bulk search modal */
.bulk-search-modal-content {
    max-width: 800px;
    width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.bulk-progress {
    padding: 0 1rem;
}

.bulk-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.bulk-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #64b5f6);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.bulk-progress-text {
    font-size: 0.78rem;
    color: #888;
    margin-bottom: 12px;
}

.bulk-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bulk-summary {
    font-size: 0.82rem;
    color: #aaa;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.bulk-empty {
    text-align: center;
    color: #666;
    padding: 2rem;
}

/* Individual bulk result row */
.bulk-result-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.2s;
}

.bulk-result-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.bulk-result-smaller {
    border-left: 3px solid #4caf50;
}

.bulk-result-larger {
    border-left: 3px solid #ff9800;
}

.bulk-no-match {
    border-left: 3px solid #444;
    opacity: 0.5;
}

.bulk-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.bulk-result-check {
    flex-shrink: 0;
    cursor: pointer;
}

.bulk-result-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}

.bulk-result-check input[type="checkbox"]:hover {
    border-color: rgba(76, 175, 80, 0.6);
}

.bulk-result-check input[type="checkbox"]:checked {
    background: #4caf50;
    border-color: #4caf50;
}

.bulk-result-check input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 0;
    left: 3px;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
}

.bulk-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.bulk-result-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ddd;
    word-break: break-word;
}

.bulk-result-current {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e50914;
}

.bulk-result-arrow {
    color: #555;
    font-size: 0.75rem;
}

.bulk-result-new {
    font-size: 0.78rem;
    font-weight: 700;
    color: #4caf50;
}

.bulk-result-status {
    font-size: 0.75rem;
    color: #666;
    padding: 2px 0;
}

.bulk-result-match {
    padding-left: 28px;
}

.bulk-result-match-title {
    font-size: 0.75rem;
    color: #999;
    word-break: break-word;
    line-height: 1.3;
}

.bulk-result-match-meta {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 3px;
}

.bulk-alt-select {
    width: 100%;
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.4);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
}

.bulk-alt-select:focus {
    outline: none;
    border-color: rgba(33, 150, 243, 0.4);
}

/* Bulk footer */
.bulk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.bulk-footer-info {
    font-size: 0.82rem;
    color: #aaa;
}

.bulk-footer-info span:first-child {
    font-weight: 700;
    color: #fff;
}

.bulk-savings {
    font-size: 0.78rem;
    margin-left: 8px;
}

.bulk-savings-positive {
    color: #81c784;
}

.bulk-savings-negative {
    color: #ffcc80;
}

.bulk-fallback-badge {
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255, 152, 0, 0.15);
    color: #ffcc80;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
}

/* ===== Media Page Tabs (Plex-style) ===== */
.media-tab {
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
    white-space: nowrap;
}

.media-tab:hover {
    color: var(--text-primary);
}

.media-tab.active {
    color: #e5a00d;
}

.media-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: #e5a00d;
    border-radius: 1px;
}

/* Tab content panels */
.media-tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
}

.media-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Recommended tab scrollable */
#media-tab-recommended {
    overflow-y: auto;
    padding: 1rem 0;
}

#media-tab-recommended.active {
    display: block;
    overflow-y: auto;
}

#media-tab-recommended .scroll-section {
    margin-bottom: 2.5rem;
}

#media-tab-recommended .scroll-section:first-child {
    margin-top: 0;
}

/* Episode count badge on show posters */
.episode-count-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(229, 160, 13, 0.9);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 20px;
    text-align: center;
}

/* Library toolbar layout (Plex-style) */
.library-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.library-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.library-item-count {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.library-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

/* Mobile adjustments for media tabs */
@media (max-width: 768px) {
    .media-tabs {
        order: 10;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .media-tab {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
    
    .library-browser-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .library-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════
   DOWNLOADS PAGE (qBittorrent)
   ══════════════════════════════════════════════════════════════ */

/* -- Page header actions -- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header-actions {
    display: flex;
    gap: 8px;
}

/* -- Transfer status bar -- */
.transfer-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.transfer-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transfer-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transfer-value {
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
}

.transfer-limit {
    font-size: 0.7rem;
    color: #888;
    margin-left: 2px;
}

#alt-speed-btn {
    margin-left: auto;
    font-size: 1.2rem;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
}

#alt-speed-btn.active {
    background: rgba(229, 9, 20, 0.25);
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.4);
    color: #e50914;
}

/* -- Filter tabs -- */
.torrent-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.torrent-filter-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #aaa;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}

.torrent-filter-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.torrent-filter-btn.active {
    background: rgba(229, 9, 20, 0.2);
    border-color: rgba(229, 9, 20, 0.4);
    color: #e50914;
}

/* -- Torrent list -- */
.torrent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.torrent-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 18px;
    transition: border-color 0.15s;
}

.torrent-item:hover {
    border-color: rgba(229, 9, 20, 0.3);
}

.torrent-main {
    flex: 1;
    min-width: 0;
}

.torrent-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.torrent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.78rem;
    color: #888;
}

.torrent-meta span {
    display: inline-flex;
    align-items: center;
}

/* State badges */
.torrent-state {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.state-downloading {
    background: rgba(46, 160, 67, 0.2);
    color: #3fb950;
}

.state-seeding {
    background: rgba(56, 132, 244, 0.2);
    color: #58a6ff;
}

.state-completed {
    background: rgba(56, 132, 244, 0.15);
    color: #79b8ff;
}

.state-paused {
    background: rgba(255, 255, 255, 0.08);
    color: #999;
}

.state-queued {
    background: rgba(255, 166, 0, 0.15);
    color: #ffa600;
}

.state-checking {
    background: rgba(168, 132, 244, 0.15);
    color: #b49aff;
}

.state-stalled {
    background: rgba(255, 166, 0, 0.15);
    color: #e0a020;
}

.state-error {
    background: rgba(229, 9, 20, 0.2);
    color: #e55;
}

.torrent-category {
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
}

/* Right section: progress + actions */
.torrent-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 160px;
}

.torrent-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.torrent-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.torrent-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: #e50914;
}

.torrent-progress-fill.state-downloading {
    background: #3fb950;
}

.torrent-progress-fill.state-seeding,
.torrent-progress-fill.state-completed {
    background: #58a6ff;
}

.torrent-progress-fill.state-paused {
    background: #666;
}

.torrent-progress-fill.state-error {
    background: #e55;
}

.torrent-pct {
    font-size: 0.78rem;
    font-weight: 600;
    color: #ccc;
    min-width: 38px;
    text-align: right;
}

.torrent-actions {
    display: flex;
    gap: 6px;
}

.torrent-action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s;
}

.torrent-action-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* -- Downloads dashboard redesign -- */
#downloads-page {
    --downloads-panel: linear-gradient(180deg, rgba(20, 26, 36, 0.96), rgba(13, 18, 28, 0.98));
    --downloads-panel-soft: rgba(18, 24, 34, 0.84);
    --downloads-outline: rgba(255, 255, 255, 0.08);
    --downloads-outline-strong: rgba(126, 211, 255, 0.18);
    --downloads-accent: #7ed3ff;
    --downloads-accent-strong: #38bdf8;
    --downloads-surface: rgba(255, 255, 255, 0.04);
    --downloads-text-soft: #94a3b8;
    --downloads-heading: #f8fafc;
    --downloads-body: #cbd5e1;
    --downloads-control-text: #cbd5e1;
    --downloads-control-hover: #ffffff;
    --downloads-control-active-bg: rgba(255, 255, 255, 0.96);
    --downloads-control-active-text: #0f172a;
    --downloads-hero-border: rgba(126, 211, 255, 0.14);
    --downloads-hero-glow-a: rgba(126, 211, 255, 0.16);
    --downloads-hero-glow-b: rgba(229, 9, 20, 0.15);
    --downloads-hero-base-a: rgba(14, 20, 29, 0.98);
    --downloads-hero-base-b: rgba(10, 14, 21, 0.98);
    --downloads-search-bg: rgba(8, 12, 18, 0.72);
    --downloads-search-border: rgba(126, 211, 255, 0.14);
    --downloads-search-focus-border: rgba(126, 211, 255, 0.38);
    --downloads-search-focus-shadow: rgba(56, 189, 248, 0.12);
    --downloads-search-text: #f8fafc;
    --downloads-search-placeholder: #7c8aa0;
    --downloads-button-bg: rgba(255, 255, 255, 0.08);
    --downloads-button-text: #dbe4ee;
    --downloads-chip-bg: rgba(255, 255, 255, 0.06);
    --downloads-chip-text: #dbe4ee;
    --downloads-chip-accent-bg: rgba(126, 211, 255, 0.12);
    --downloads-chip-accent-text: #dff4ff;
    --downloads-idle-border: rgba(126, 211, 255, 0.16);
    --downloads-idle-glow: rgba(126, 211, 255, 0.12);
    --downloads-idle-panel: rgba(10, 14, 21, 0.84);
    --downloads-queue-base-a: rgba(14, 22, 32, 0.98);
    --downloads-queue-base-b: rgba(10, 15, 23, 0.98);
    --downloads-queue-glow: rgba(126, 211, 255, 0.14);
    --downloads-item-bg: linear-gradient(180deg, rgba(17, 23, 32, 0.97), rgba(12, 17, 25, 0.97));
    --downloads-item-border: rgba(255, 255, 255, 0.08);
    --downloads-item-glow: rgba(126, 211, 255, 0.07);
    --downloads-item-hover-border: rgba(126, 211, 255, 0.22);
    --downloads-item-calm-bg: linear-gradient(180deg, rgba(13, 18, 26, 0.92), rgba(10, 14, 21, 0.92));
    --downloads-item-calm-border: rgba(255, 255, 255, 0.06);
    --downloads-item-calm-text: #94a3b8;
    --downloads-progress-track: rgba(255, 255, 255, 0.08);
    --downloads-metric-bg: rgba(255, 255, 255, 0.045);
    --downloads-action-bg: rgba(255, 255, 255, 0.055);
    --downloads-action-border: rgba(255, 255, 255, 0.1);
    --downloads-action-hover-bg: rgba(126, 211, 255, 0.12);
    --downloads-action-hover-border: rgba(126, 211, 255, 0.22);
    --downloads-danger-hover-bg: rgba(229, 85, 85, 0.12);
    --downloads-danger-hover-border: rgba(229, 85, 85, 0.22);
    --downloads-nav-active-bg: linear-gradient(90deg, rgba(229, 9, 20, 0.18), rgba(126, 211, 255, 0.08));
    --downloads-nav-active-text: #ffffff;
    --downloads-nav-active-border: #7ed3ff;
    --downloads-nav-active-shadow: rgba(126, 211, 255, 0.1);
    --downloads-success: #67e8a5;
    --downloads-seed: #8fb4ff;
    --downloads-warning: #f5b74d;
}

[data-theme="nord"] #downloads-page {
    --downloads-panel: linear-gradient(180deg, rgba(59, 66, 82, 0.96), rgba(46, 52, 64, 0.98));
    --downloads-panel-soft: rgba(46, 52, 64, 0.9);
    --downloads-outline: rgba(136, 192, 208, 0.14);
    --downloads-outline-strong: rgba(136, 192, 208, 0.26);
    --downloads-accent: #88c0d0;
    --downloads-accent-strong: #5e81ac;
    --downloads-surface: rgba(236, 239, 244, 0.05);
    --downloads-text-soft: #9da5b4;
    --downloads-heading: #eceff4;
    --downloads-body: #d8dee9;
    --downloads-control-text: #d8dee9;
    --downloads-control-hover: #eceff4;
    --downloads-control-active-bg: #eceff4;
    --downloads-control-active-text: #2e3440;
    --downloads-hero-border: rgba(136, 192, 208, 0.18);
    --downloads-hero-glow-a: rgba(136, 192, 208, 0.16);
    --downloads-hero-glow-b: rgba(94, 129, 172, 0.14);
    --downloads-hero-base-a: rgba(59, 66, 82, 0.98);
    --downloads-hero-base-b: rgba(46, 52, 64, 0.98);
    --downloads-search-bg: rgba(36, 41, 51, 0.88);
    --downloads-search-border: rgba(136, 192, 208, 0.18);
    --downloads-search-focus-border: rgba(136, 192, 208, 0.34);
    --downloads-search-focus-shadow: rgba(136, 192, 208, 0.14);
    --downloads-search-text: #eceff4;
    --downloads-search-placeholder: #9da5b4;
    --downloads-button-bg: rgba(129, 161, 193, 0.16);
    --downloads-button-text: #e5ebf4;
    --downloads-chip-bg: rgba(129, 161, 193, 0.14);
    --downloads-chip-text: #e5ebf4;
    --downloads-chip-accent-bg: rgba(136, 192, 208, 0.18);
    --downloads-chip-accent-text: #ecfbff;
    --downloads-idle-border: rgba(136, 192, 208, 0.2);
    --downloads-idle-glow: rgba(136, 192, 208, 0.12);
    --downloads-idle-panel: rgba(36, 41, 51, 0.88);
    --downloads-queue-base-a: rgba(59, 66, 82, 0.98);
    --downloads-queue-base-b: rgba(46, 52, 64, 0.98);
    --downloads-queue-glow: rgba(136, 192, 208, 0.14);
    --downloads-item-bg: linear-gradient(180deg, rgba(59, 66, 82, 0.97), rgba(46, 52, 64, 0.97));
    --downloads-item-border: rgba(136, 192, 208, 0.16);
    --downloads-item-glow: rgba(136, 192, 208, 0.08);
    --downloads-item-hover-border: rgba(136, 192, 208, 0.24);
    --downloads-item-calm-bg: linear-gradient(180deg, rgba(46, 52, 64, 0.94), rgba(36, 41, 51, 0.94));
    --downloads-item-calm-border: rgba(136, 192, 208, 0.14);
    --downloads-item-calm-text: #9da5b4;
    --downloads-progress-track: rgba(236, 239, 244, 0.12);
    --downloads-metric-bg: rgba(129, 161, 193, 0.12);
    --downloads-action-bg: rgba(129, 161, 193, 0.14);
    --downloads-action-border: rgba(129, 161, 193, 0.2);
    --downloads-action-hover-bg: rgba(136, 192, 208, 0.16);
    --downloads-action-hover-border: rgba(136, 192, 208, 0.28);
    --downloads-nav-active-bg: linear-gradient(90deg, rgba(94, 129, 172, 0.22), rgba(136, 192, 208, 0.12));
    --downloads-nav-active-text: #eceff4;
    --downloads-nav-active-border: #88c0d0;
    --downloads-nav-active-shadow: rgba(136, 192, 208, 0.12);
    --downloads-success: #a3be8c;
    --downloads-seed: #81a1c1;
    --downloads-warning: #ebcb8b;
}

[data-theme="dracula"] #downloads-page {
    --downloads-panel: linear-gradient(180deg, rgba(68, 71, 90, 0.96), rgba(40, 42, 54, 0.98));
    --downloads-panel-soft: rgba(40, 42, 54, 0.9);
    --downloads-outline: rgba(98, 114, 164, 0.18);
    --downloads-outline-strong: rgba(189, 147, 249, 0.28);
    --downloads-accent: #bd93f9;
    --downloads-accent-strong: #ff79c6;
    --downloads-surface: rgba(248, 248, 242, 0.05);
    --downloads-text-soft: #b9aed4;
    --downloads-heading: #f8f8f2;
    --downloads-body: #e8defc;
    --downloads-control-text: #e8defc;
    --downloads-control-hover: #f8f8f2;
    --downloads-control-active-bg: #f8f8f2;
    --downloads-control-active-text: #282a36;
    --downloads-hero-border: rgba(189, 147, 249, 0.18);
    --downloads-hero-glow-a: rgba(189, 147, 249, 0.16);
    --downloads-hero-glow-b: rgba(255, 121, 198, 0.12);
    --downloads-hero-base-a: rgba(68, 71, 90, 0.98);
    --downloads-hero-base-b: rgba(40, 42, 54, 0.98);
    --downloads-search-bg: rgba(30, 31, 41, 0.9);
    --downloads-search-border: rgba(189, 147, 249, 0.18);
    --downloads-search-focus-border: rgba(189, 147, 249, 0.34);
    --downloads-search-focus-shadow: rgba(189, 147, 249, 0.14);
    --downloads-search-text: #f8f8f2;
    --downloads-search-placeholder: #b9aed4;
    --downloads-button-bg: rgba(98, 114, 164, 0.2);
    --downloads-button-text: #efe8ff;
    --downloads-chip-bg: rgba(98, 114, 164, 0.2);
    --downloads-chip-text: #efe8ff;
    --downloads-chip-accent-bg: rgba(189, 147, 249, 0.18);
    --downloads-chip-accent-text: #f7f0ff;
    --downloads-idle-border: rgba(189, 147, 249, 0.22);
    --downloads-idle-glow: rgba(189, 147, 249, 0.1);
    --downloads-idle-panel: rgba(30, 31, 41, 0.88);
    --downloads-queue-base-a: rgba(68, 71, 90, 0.98);
    --downloads-queue-base-b: rgba(40, 42, 54, 0.98);
    --downloads-queue-glow: rgba(189, 147, 249, 0.14);
    --downloads-item-bg: linear-gradient(180deg, rgba(68, 71, 90, 0.97), rgba(40, 42, 54, 0.97));
    --downloads-item-border: rgba(189, 147, 249, 0.16);
    --downloads-item-glow: rgba(189, 147, 249, 0.08);
    --downloads-item-hover-border: rgba(189, 147, 249, 0.24);
    --downloads-item-calm-bg: linear-gradient(180deg, rgba(40, 42, 54, 0.94), rgba(30, 31, 41, 0.94));
    --downloads-item-calm-border: rgba(189, 147, 249, 0.14);
    --downloads-item-calm-text: #b9aed4;
    --downloads-progress-track: rgba(248, 248, 242, 0.12);
    --downloads-metric-bg: rgba(98, 114, 164, 0.18);
    --downloads-action-bg: rgba(98, 114, 164, 0.2);
    --downloads-action-border: rgba(98, 114, 164, 0.28);
    --downloads-action-hover-bg: rgba(189, 147, 249, 0.16);
    --downloads-action-hover-border: rgba(189, 147, 249, 0.28);
    --downloads-nav-active-bg: linear-gradient(90deg, rgba(255, 121, 198, 0.2), rgba(189, 147, 249, 0.12));
    --downloads-nav-active-text: #f8f8f2;
    --downloads-nav-active-border: #bd93f9;
    --downloads-nav-active-shadow: rgba(189, 147, 249, 0.12);
    --downloads-success: #50fa7b;
    --downloads-seed: #8be9fd;
    --downloads-warning: #f1fa8c;
}

[data-theme="light"] #downloads-page {
    --downloads-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98));
    --downloads-panel-soft: rgba(255, 255, 255, 0.94);
    --downloads-outline: rgba(148, 163, 184, 0.18);
    --downloads-outline-strong: rgba(37, 99, 235, 0.22);
    --downloads-accent: #2563eb;
    --downloads-accent-strong: #0ea5e9;
    --downloads-surface: rgba(37, 99, 235, 0.04);
    --downloads-text-soft: #64748b;
    --downloads-heading: #1f2937;
    --downloads-body: #475569;
    --downloads-control-text: #475569;
    --downloads-control-hover: #111827;
    --downloads-control-active-bg: #1d4ed8;
    --downloads-control-active-text: #ffffff;
    --downloads-hero-border: rgba(37, 99, 235, 0.16);
    --downloads-hero-glow-a: rgba(37, 99, 235, 0.1);
    --downloads-hero-glow-b: rgba(14, 165, 233, 0.08);
    --downloads-hero-base-a: rgba(255, 255, 255, 0.98);
    --downloads-hero-base-b: rgba(241, 245, 249, 0.98);
    --downloads-search-bg: rgba(255, 255, 255, 0.96);
    --downloads-search-border: rgba(148, 163, 184, 0.22);
    --downloads-search-focus-border: rgba(37, 99, 235, 0.3);
    --downloads-search-focus-shadow: rgba(37, 99, 235, 0.12);
    --downloads-search-text: #1f2937;
    --downloads-search-placeholder: #64748b;
    --downloads-button-bg: rgba(148, 163, 184, 0.14);
    --downloads-button-text: #334155;
    --downloads-chip-bg: rgba(148, 163, 184, 0.12);
    --downloads-chip-text: #334155;
    --downloads-chip-accent-bg: rgba(37, 99, 235, 0.12);
    --downloads-chip-accent-text: #1d4ed8;
    --downloads-idle-border: rgba(37, 99, 235, 0.16);
    --downloads-idle-glow: rgba(37, 99, 235, 0.08);
    --downloads-idle-panel: rgba(255, 255, 255, 0.92);
    --downloads-queue-base-a: rgba(255, 255, 255, 0.98);
    --downloads-queue-base-b: rgba(241, 245, 249, 0.98);
    --downloads-queue-glow: rgba(37, 99, 235, 0.1);
    --downloads-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    --downloads-item-border: rgba(148, 163, 184, 0.18);
    --downloads-item-glow: rgba(37, 99, 235, 0.04);
    --downloads-item-hover-border: rgba(37, 99, 235, 0.22);
    --downloads-item-calm-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
    --downloads-item-calm-border: rgba(148, 163, 184, 0.16);
    --downloads-item-calm-text: #64748b;
    --downloads-progress-track: rgba(148, 163, 184, 0.18);
    --downloads-metric-bg: rgba(148, 163, 184, 0.1);
    --downloads-action-bg: rgba(148, 163, 184, 0.12);
    --downloads-action-border: rgba(148, 163, 184, 0.18);
    --downloads-action-hover-bg: rgba(37, 99, 235, 0.1);
    --downloads-action-hover-border: rgba(37, 99, 235, 0.22);
    --downloads-nav-active-bg: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(14, 165, 233, 0.08));
    --downloads-nav-active-text: #1f2937;
    --downloads-nav-active-border: #2563eb;
    --downloads-nav-active-shadow: rgba(37, 99, 235, 0.12);
    --downloads-success: #16a34a;
    --downloads-seed: #2563eb;
    --downloads-warning: #d97706;
}

#downloads-page .downloads-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#downloads-page .downloads-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid var(--downloads-hero-border);
    background:
        radial-gradient(circle at top left, var(--downloads-hero-glow-a), transparent 35%),
        radial-gradient(circle at right, var(--downloads-hero-glow-b), transparent 28%),
        linear-gradient(145deg, var(--downloads-hero-base-a), var(--downloads-hero-base-b));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

#downloads-page .downloads-eyebrow {
    margin: 0 0 10px;
    color: var(--downloads-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#downloads-page .downloads-hero h2 {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    line-height: 1;
    color: var(--downloads-heading);
}

#downloads-page .downloads-subtitle {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--downloads-body);
    font-size: 0.98rem;
    line-height: 1.6;
}

#downloads-page .downloads-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

#downloads-page .downloads-layout-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--downloads-outline);
    background: var(--downloads-surface);
}

#downloads-page .downloads-layout-btn {
    border: 0;
    background: transparent;
    color: var(--downloads-control-text);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#downloads-page .downloads-layout-btn:hover {
    color: var(--downloads-control-hover);
}

#downloads-page .downloads-layout-btn.active {
    background: var(--downloads-control-active-bg);
    color: var(--downloads-control-active-text);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

#downloads-page .downloads-command-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid var(--downloads-outline);
    background: var(--downloads-panel-soft);
}

#downloads-page .downloads-search-shell {
    flex: 1 1 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid var(--downloads-search-border);
    background: var(--downloads-search-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#downloads-page .downloads-search-shell:focus-within {
    border-color: var(--downloads-search-focus-border);
    box-shadow: 0 0 0 4px var(--downloads-search-focus-shadow);
}

#downloads-page .downloads-search-icon {
    color: var(--downloads-accent);
    font-size: 1rem;
}

#downloads-page .downloads-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--downloads-search-text);
    font-size: 0.96rem;
    outline: none;
}

#downloads-page .downloads-search-input::placeholder {
    color: var(--downloads-search-placeholder);
}

#downloads-page .downloads-search-clear {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: var(--downloads-button-bg);
    color: var(--downloads-button-text);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

#downloads-page .downloads-search-clear[hidden] {
    display: none;
}

#downloads-page .downloads-search-help {
    color: var(--downloads-text-soft);
    font-size: 0.84rem;
}

#downloads-page .downloads-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

#downloads-page .downloads-status-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 148px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid var(--downloads-outline);
    background: var(--downloads-panel);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

#downloads-page .downloads-status-card strong,
#downloads-page .downloads-status-card .downloads-status-value {
    color: var(--downloads-heading);
    font-size: 1.68rem;
    font-weight: 700;
    line-height: 1.05;
}

#downloads-page .downloads-status-label {
    color: var(--downloads-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#downloads-page .downloads-status-note,
#downloads-page .downloads-status-footnote {
    margin: 0;
    color: var(--downloads-body);
    font-size: 0.84rem;
    line-height: 1.45;
}

#downloads-page .downloads-status-footnote {
    margin-top: auto;
    color: var(--downloads-text-soft);
}

#downloads-page .status-queue {
    background:
    linear-gradient(180deg, var(--downloads-queue-base-a), var(--downloads-queue-base-b)),
    radial-gradient(circle at top left, var(--downloads-queue-glow), transparent 42%);
}

#downloads-page .status-download .downloads-status-value {
    color: var(--downloads-success);
}

#downloads-page .status-upload .downloads-status-value {
    color: var(--downloads-seed);
}

#downloads-page .status-connection {
    position: relative;
}

#downloads-page #alt-speed-btn {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    width: auto;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.82rem;
}

#downloads-page .downloads-sub-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--downloads-outline);
    background: var(--downloads-surface);
}

#downloads-page .downloads-sub-tab {
    border: 0;
    background: transparent;
    color: var(--downloads-control-text);
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#downloads-page .downloads-sub-tab:hover {
    color: var(--downloads-control-hover);
}

#downloads-page .downloads-sub-tab.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--downloads-accent) 22%, transparent), color-mix(in srgb, var(--downloads-accent) 10%, transparent));
    color: var(--downloads-heading);
    box-shadow: inset 0 0 0 1px rgba(126, 211, 255, 0.18);
}

#downloads-page .downloads-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid var(--downloads-outline);
    background: rgba(255, 255, 255, 0.035);
}

#downloads-page .downloads-toolbar-side {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#downloads-page .torrent-filters {
    margin-bottom: 0;
    gap: 8px;
}

#downloads-page .torrent-filter-btn {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--downloads-control-text);
    background: var(--downloads-surface);
    border: 1px solid var(--downloads-outline);
    font-weight: 600;
}

#downloads-page .torrent-filter-btn.active {
    background: color-mix(in srgb, var(--downloads-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--downloads-accent) 30%, transparent);
    color: var(--downloads-heading);
}

#downloads-page .torrent-category-select {
    min-width: 160px;
    background: var(--downloads-search-bg);
    border: 1px solid var(--downloads-outline);
    border-radius: 14px;
    color: var(--downloads-search-text);
    padding: 11px 14px;
}

#downloads-page .downloads-idle-summary,
#downloads-page .downloads-empty-state {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid var(--downloads-idle-border);
    background:
        radial-gradient(circle at top left, var(--downloads-idle-glow), transparent 40%),
        var(--downloads-idle-panel);
}

#downloads-page .downloads-idle-copy h3,
#downloads-page .downloads-empty-state h3 {
    margin: 0 0 8px;
    color: var(--downloads-heading);
    font-size: 1.08rem;
}

#downloads-page .downloads-idle-copy p,
#downloads-page .downloads-empty-state p {
    margin: 0;
    color: var(--downloads-body);
    line-height: 1.55;
}

#downloads-page .downloads-idle-label {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--downloads-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#downloads-page .downloads-idle-actions,
#downloads-page .downloads-empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#downloads-page .downloads-empty-state {
    flex-direction: column;
    text-align: center;
    padding: 48px 22px;
}

#downloads-page .downloads-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--downloads-accent) 12%, transparent);
    color: var(--downloads-accent);
    font-size: 1.8rem;
}

#downloads-page .batch-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid var(--downloads-outline);
    background: var(--downloads-surface);
}

#downloads-page .torrent-list {
    gap: 14px;
}

#downloads-page.downloads-layout-modern .torrent-item {
    position: relative;
    display: block;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid var(--downloads-item-border);
    background:
        var(--downloads-item-bg),
        linear-gradient(120deg, var(--downloads-item-glow), transparent 35%);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#downloads-page.downloads-layout-modern .torrent-item::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(180deg, var(--downloads-accent), rgba(56, 189, 248, 0.2));
    transition: opacity 0.18s ease;
}

#downloads-page.downloads-layout-modern .torrent-item:hover {
    transform: translateY(-1px);
    border-color: var(--downloads-item-hover-border);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}

#downloads-page.downloads-layout-modern .torrent-item.is-active-state::before {
    opacity: 1;
}

#downloads-page.downloads-layout-modern .torrent-item.is-calm-state {
    background: var(--downloads-item-calm-bg);
    border-color: var(--downloads-item-calm-border);
}

#downloads-page.downloads-layout-modern .torrent-item.is-calm-state .torrent-card-metric,
#downloads-page.downloads-layout-modern .torrent-item.is-calm-state .torrent-card-size {
    color: var(--downloads-item-calm-text);
}

#downloads-page.downloads-layout-modern .torrent-item.is-attention-state {
    border-color: rgba(229, 85, 85, 0.28);
    box-shadow: 0 0 0 1px rgba(229, 85, 85, 0.08), 0 24px 44px rgba(0, 0, 0, 0.24);
}

#downloads-page.downloads-layout-modern .torrent-item.selected {
    border-color: rgba(229, 9, 20, 0.38);
    box-shadow: 0 0 0 1px rgba(229, 9, 20, 0.14), 0 28px 50px rgba(0, 0, 0, 0.26);
}

#downloads-page.downloads-layout-modern .torrent-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

#downloads-page.downloads-layout-modern .torrent-select-column {
    padding-top: 8px;
}

#downloads-page.downloads-layout-modern .torrent-main-modern {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

#downloads-page.downloads-layout-modern .torrent-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

#downloads-page.downloads-layout-modern .torrent-card-title-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

#downloads-page.downloads-layout-modern .torrent-title-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
}

#downloads-page.downloads-layout-modern .torrent-card-title-copy {
    min-width: 0;
}

#downloads-page.downloads-layout-modern .torrent-name {
    margin-bottom: 0;
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--downloads-heading);
}

#downloads-page.downloads-layout-modern .torrent-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

#downloads-page.downloads-layout-modern .torrent-meta-chip,
#downloads-page.downloads-layout-modern .torrent-tag,
#downloads-page.downloads-layout-modern .torrent-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--downloads-chip-bg);
    color: var(--downloads-chip-text);
    font-size: 0.74rem;
    font-weight: 600;
}

#downloads-page.downloads-layout-modern .torrent-meta-chip-category,
#downloads-page.downloads-layout-modern .torrent-category {
    background: var(--downloads-chip-accent-bg);
    color: var(--downloads-chip-accent-text);
}

#downloads-page.downloads-layout-modern .torrent-progress-wrap-modern {
    width: 100%;
}

#downloads-page.downloads-layout-modern .torrent-progress-bar {
    height: 10px;
    background: var(--downloads-progress-track);
    border-radius: 999px;
}

#downloads-page.downloads-layout-modern .torrent-progress-fill {
    border-radius: 999px;
    box-shadow: 0 0 24px rgba(103, 232, 165, 0.16);
}

#downloads-page.downloads-layout-modern .torrent-card-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

#downloads-page.downloads-layout-modern .torrent-pct {
    min-width: auto;
    font-size: 1.08rem;
    color: var(--downloads-heading);
}

#downloads-page.downloads-layout-modern .torrent-card-size {
    color: var(--downloads-body);
    font-size: 0.84rem;
}

#downloads-page.downloads-layout-modern .torrent-card-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#downloads-page.downloads-layout-modern .torrent-card-metric {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--downloads-metric-bg);
    color: var(--downloads-body);
    font-size: 0.76rem;
    font-weight: 600;
}

#downloads-page.downloads-layout-modern .torrent-right-modern {
    min-width: 170px;
    align-items: flex-end;
    gap: 12px;
}

#downloads-page.downloads-layout-modern .torrent-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

#downloads-page.downloads-layout-modern .torrent-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--downloads-action-bg);
    border-color: var(--downloads-action-border);
}

#downloads-page.downloads-layout-modern .torrent-action-btn:hover {
    background: var(--downloads-action-hover-bg);
    border-color: var(--downloads-action-hover-border);
}

#downloads-page.downloads-layout-modern .torrent-action-btn.danger:hover {
    background: var(--downloads-danger-hover-bg);
    border-color: var(--downloads-danger-hover-border);
}

#downloads-page.downloads-layout-modern .torrent-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--downloads-outline);
}

#downloads-page.downloads-layout-classic .downloads-hero,
#downloads-page.downloads-layout-classic .downloads-command-bar,
#downloads-page.downloads-layout-classic .downloads-toolbar,
#downloads-page.downloads-layout-classic .downloads-status-card,
#downloads-page.downloads-layout-classic .downloads-idle-summary,
#downloads-page.downloads-layout-classic .downloads-empty-state {
    border-radius: 16px;
}

#downloads-page .auto-dl-header,
#downloads-page .auto-dl-rules-list,
#downloads-page .wizard-card {
    border-radius: 22px;
}

.nav-menu a[data-page="downloads"].active {
    background: linear-gradient(90deg, rgba(229, 9, 20, 0.18), rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
    border-left-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 1180px) {
    #downloads-page .downloads-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    #downloads-page .downloads-hero {
        flex-direction: column;
    }

    #downloads-page .downloads-hero-actions {
        justify-content: flex-start;
    }

    #downloads-page.downloads-layout-modern .torrent-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #downloads-page.downloads-layout-modern .torrent-right-modern {
        grid-column: 2;
        align-items: flex-start;
    }

    #downloads-page.downloads-layout-modern .torrent-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    #downloads-page .downloads-status-grid {
        grid-template-columns: 1fr;
    }

    #downloads-page .downloads-sub-tabs {
        width: 100%;
    }

    #downloads-page .downloads-sub-tab {
        flex: 1;
        text-align: center;
    }

    #downloads-page .downloads-idle-summary,
    #downloads-page .downloads-empty-state,
    #downloads-page .downloads-toolbar,
    #downloads-page .batch-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #downloads-page .downloads-toolbar-side,
    #downloads-page .downloads-idle-actions,
    #downloads-page .downloads-empty-actions {
        width: 100%;
    }

    #downloads-page .downloads-toolbar-side > *,
    #downloads-page .downloads-idle-actions > *,
    #downloads-page .downloads-empty-actions > * {
        flex: 1;
    }

    #downloads-page.downloads-layout-modern .torrent-header {
        grid-template-columns: 1fr;
    }

    #downloads-page.downloads-layout-modern .torrent-select-column {
        padding-top: 0;
    }

    #downloads-page.downloads-layout-modern .torrent-card-topline {
        flex-direction: column;
    }

    #downloads-page.downloads-layout-modern .torrent-card-summary,
    #downloads-page.downloads-layout-modern .torrent-right-modern {
        align-items: flex-start;
        text-align: left;
    }
}

.torrent-action-btn.danger:hover {
    background: rgba(229, 9, 20, 0.3);
    border-color: rgba(229, 9, 20, 0.5);
    color: #e55;
}

/* -- Downloads modals -- */
.downloads-modal-content,
.add-torrent-modal-content {
    background: linear-gradient(180deg, rgba(35, 37, 49, 0.98) 0%, rgba(24, 26, 37, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.downloads-modal-content .modal-header,
.add-torrent-modal-content .modal-header {
    padding: 1.3rem 1.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
}

.downloads-modal-content .modal-body,
.add-torrent-modal-content .modal-body {
    padding: 1.25rem 1.4rem 1rem;
}

.downloads-modal-content .modal-footer,
.add-torrent-modal-content .modal-footer {
    padding: 0 1.4rem 1.3rem;
}

.downloads-modal-content .search-form-row {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%);
}

.downloads-modal-content .search-source-toggle {
    border-radius: 10px;
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
}

.downloads-modal-content .search-results-container,
.downloads-modal-content .feed-list {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
}

.downloads-modal-content .feed-item,
.downloads-modal-content .search-result-row td {
    border-bottom-color: rgba(255,255,255,0.06);
}

.downloads-modal-content .search-plugins-section {
    border-top-color: rgba(255,255,255,0.08);
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: #f3f5ff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.modal-close:hover {
    background: rgba(76, 141, 255, 0.16);
    border-color: rgba(76, 141, 255, 0.4);
    transform: translateY(-1px);
}

.modal-close:focus-visible {
    outline: 2px solid rgba(76, 141, 255, 0.65);
    outline-offset: 2px;
}

.add-torrent-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: #f3f5ff;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.add-torrent-modal-close:hover {
    background: rgba(76, 141, 255, 0.16);
    border-color: rgba(76, 141, 255, 0.4);
    transform: translateY(-1px);
}

.add-torrent-modal-close:focus-visible {
    outline: 2px solid rgba(76, 141, 255, 0.65);
    outline-offset: 2px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: rgba(229, 9, 20, 0.5);
}

.form-input::placeholder {
    color: #666;
}

textarea.form-input {
    resize: vertical;
}

.torrent-file-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.035) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
}

.torrent-file-picker:focus-within {
    border-color: rgba(76, 141, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.12);
}

.torrent-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.torrent-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(76, 141, 255, 0.35);
    background: linear-gradient(135deg, rgba(76, 141, 255, 0.22) 0%, rgba(76, 141, 255, 0.12) 100%);
    color: #f3f7ff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.torrent-file-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(76, 141, 255, 0.3) 0%, rgba(76, 141, 255, 0.16) 100%);
    border-color: rgba(76, 141, 255, 0.55);
}

.torrent-file-name {
    min-width: 0;
    flex: 1;
    color: #b4bbca;
    font-size: 0.87rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

select.form-input option {
    background: #1a1a2e;
    color: #e0e0e0;
    padding: 8px;
}

.torrent-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    position: relative;
    min-height: 58px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.torrent-checkbox-row:hover {
    border-color: rgba(76, 141, 255, 0.28);
    background: linear-gradient(180deg, rgba(76,141,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
}

.torrent-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.torrent-checkbox-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(0,0,0,0.28);
    position: relative;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.torrent-checkbox-input:checked + .torrent-checkbox-ui {
    background: linear-gradient(180deg, #4c8dff 0%, #356de0 100%);
    border-color: rgba(110, 168, 255, 0.9);
    box-shadow: 0 0 0 4px rgba(76, 141, 255, 0.15);
}

.torrent-checkbox-input:checked + .torrent-checkbox-ui::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.torrent-checkbox-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.torrent-checkbox-title {
    color: #f3f5ff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

.torrent-checkbox-subtitle {
    color: #98a2b3;
    font-size: 0.78rem;
    line-height: 1.35;
}

.torrent-checkbox-input:focus-visible + .torrent-checkbox-ui {
    outline: 2px solid rgba(76, 141, 255, 0.65);
    outline-offset: 3px;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .torrent-item {
        flex-direction: column;
        align-items: stretch;
    }

    .torrent-right {
        align-items: stretch;
        min-width: 0;
    }

    .transfer-bar {
        gap: 12px;
        padding: 10px 14px;
    }
}

/* ── Phase 2: Category filter select ─────────────────────── */

.torrent-category-select {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-left: auto;
}
.torrent-category-select:focus {
    outline: none;
    border-color: var(--accent, #e50914);
}

/* ── Phase 2: Expandable torrent detail ──────────────────── */

.torrent-header {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    width: 100%;
}
.torrent-item {
    flex-direction: column;
    align-items: stretch;
}
.torrent-expand-icon {
    color: #888;
    margin-right: 6px;
    font-size: 0.85rem;
    user-select: none;
}
.torrent-item.expanded {
    border-color: var(--accent, #e50914);
}
.torrent-item.expanded .torrent-expand-icon {
    color: var(--accent, #e50914);
}

.torrent-detail {
    padding: 14px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0.01) 100%);
}

.torrent-detail-loading {
    color: #888;
    text-align: center;
    padding: 18px;
}

/* ── Detail controls row ─────────────────────────────────── */

.torrent-detail-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding-bottom: 14px;
    align-items: stretch;
}

.detail-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
.detail-control-group label {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.detail-select, .detail-input {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.85rem;
    min-width: 110px;
}
.detail-select:focus, .detail-input:focus {
    outline: none;
    border-color: var(--accent, #e50914);
}
.detail-input {
    width: 100px;
}

.detail-control-group-actions {
    grid-column: span 2;
}

.detail-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.detail-action-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    gap: 6px;
    justify-content: flex-start;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
}

.detail-action-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-action-state {
    margin-left: auto;
    color: #9ec0ff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
}

/* ── File list table ─────────────────────────────────────── */

.torrent-file-list {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 6px;
}

.torrent-file-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.torrent-file-table thead th {
    background: #1a1a1a;
    color: #aaa;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}
.torrent-file-table .file-name-col {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.torrent-file-row {
    border-bottom: 1px solid #2a2a2a;
}
.torrent-file-row td {
    padding: 5px 10px;
    color: #ccc;
    white-space: nowrap;
}
.torrent-file-row.file-skipped td {
    opacity: 0.4;
}

/* File progress bar */
.file-progress-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}
.file-progress-fill {
    height: 100%;
    background: var(--accent, #e50914);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.file-pct {
    font-size: 0.75rem;
    color: #999;
}

/* File priority select */
.file-priority-select {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8rem;
    cursor: pointer;
}
.file-priority-select:focus {
    outline: none;
    border-color: var(--accent, #e50914);
}

/* ── Phase 2 responsive ──────────────────────────────────── */

@media (max-width: 768px) {
    .torrent-header {
        flex-direction: column;
        align-items: stretch;
    }
    .torrent-detail-controls {
        flex-direction: column;
    }
    .torrent-file-table .file-name-col {
        max-width: 150px;
    }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — POWER FEATURES
   ══════════════════════════════════════════════════════════════ */

/* ── 3A: Search Torrents ─────────────────────────────────── */

.search-source-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    width: fit-content;
}

.search-source-btn {
    background: rgba(255,255,255,0.04);
    border: none;
    color: #888;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.search-source-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #ccc;
}

.search-source-btn.active {
    background: #e50914;
    color: #fff;
}

.search-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ipt-results-list {
    max-height: 55vh;
    overflow-y: auto;
}

.search-status {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 12px;
    text-align: center;
}
.search-status.searching {
    background: rgba(56, 132, 244, 0.12);
    color: #58a6ff;
}
.search-status.done {
    background: rgba(46, 160, 67, 0.12);
    color: #3fb950;
}
.search-status.error {
    background: rgba(229, 9, 20, 0.12);
    color: #e55;
}

.search-results-container {
    max-height: 420px;
    overflow-y: auto;
    border-radius: 6px;
}

.search-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.search-results-table thead th {
    background: #1a1a1a;
    color: #aaa;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}
.search-result-row td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #ccc;
}
.search-result-row:hover {
    background: rgba(255,255,255,0.03);
}
.search-result-name {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e0e0e0;
    font-weight: 500;
}
.seed-count {
    color: #3fb950;
    font-weight: 600;
}
.leech-count {
    color: #e55;
    font-weight: 600;
}
.search-result-site {
    color: #888;
    font-size: 0.78rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Plugin management */
.search-plugins-section {
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 12px;
}
.search-plugins-section summary {
    color: #888;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 6px 0;
    user-select: none;
}
.search-plugins-section summary:hover {
    color: #ccc;
}
.search-plugins-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.search-plugin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 8px 12px;
}
.search-plugin-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.search-plugin-name {
    font-weight: 500;
    color: #e0e0e0;
    font-size: 0.85rem;
}
.search-plugin-url {
    color: #666;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}
.search-plugin-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.search-plugin-install {
    display: flex;
    gap: 8px;
}

/* ── 3B: RSS Feeds & Auto-Download ───────────────────────── */

.rss-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 0;
}
.rss-tab-btn {
    background: none;
    border: none;
    color: #888;
    padding: 10px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.rss-tab-btn:hover {
    color: #ccc;
}
.rss-tab-btn.active {
    color: #e50914;
    border-bottom-color: #e50914;
}

.rss-actions-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.rss-add-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* Feed list */
.rss-feeds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
}
.rss-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px 16px;
}
.rss-feed-item:hover {
    border-color: rgba(229, 9, 20, 0.25);
}
.rss-feed-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.rss-feed-name {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.9rem;
}
.rss-feed-url {
    color: #666;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}
.rss-feed-meta {
    color: #888;
    font-size: 0.78rem;
}
.rss-feed-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Articles under a feed */
.rss-articles {
    background: rgba(0,0,0,0.15);
    border-radius: 0 0 8px 8px;
    padding: 6px 16px;
    margin-top: -8px;
    margin-bottom: 4px;
    border: 1px solid rgba(255,255,255,0.04);
    border-top: none;
}
.rss-article-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    gap: 8px;
}
.rss-article-item:last-child {
    border-bottom: none;
}
.rss-article-title {
    color: #aaa;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.rss-article-more {
    color: #666;
    font-size: 0.75rem;
    text-align: center;
    padding: 4px 0;
}

/* Rules list */
.rss-rules-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
}
.rss-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px 16px;
}
.rss-rule-item.disabled {
    opacity: 0.5;
}
.rss-rule-item:hover {
    border-color: rgba(229, 9, 20, 0.25);
}
.rss-rule-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.rss-rule-name {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rss-rule-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.rss-rule-status-dot.active {
    background: #3fb950;
}
.rss-rule-status-dot.inactive {
    background: #666;
}
.rss-rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 0.78rem;
    color: #888;
}
.rss-rule-meta span {
    display: inline-flex;
    align-items: center;
}
.rss-rule-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   Auto-Download Panel & Wizard
   ══════════════════════════════════════════════════════════════ */

/* Downloads sub-tabs */
.downloads-sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.downloads-sub-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}
.downloads-sub-tab:hover {
    color: #ccc;
}
.downloads-sub-tab.active {
    color: #fff;
    border-bottom-color: #e50914;
}

.auto-dl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.auto-dl-desc {
    color: #999;
    font-size: 0.88rem;
    margin: 0;
}

/* Rule Cards */
.auto-dl-rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auto-dl-rule-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 18px;
    transition: border-color 0.2s;
}
.auto-dl-rule-card:hover {
    border-color: rgba(229, 9, 20, 0.3);
}
.auto-dl-rule-card.disabled {
    opacity: 0.45;
}
.auto-dl-rule-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}
.auto-dl-rule-title {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.auto-dl-rule-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.auto-dl-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: #aaa;
    white-space: nowrap;
}
.auto-dl-badge.quality {
    background: rgba(229, 9, 20, 0.15);
    color: #e55;
}
.auto-dl-badge.scope {
    background: rgba(59, 130, 246, 0.15);
    color: #6baaff;
}
.auto-dl-badge.type-tv { background: rgba(59, 130, 246, 0.12); color: #78b4ff; }
.auto-dl-badge.type-movie { background: rgba(245, 158, 11, 0.12); color: #f5a623; }
.auto-dl-badge.lang { background: rgba(63, 185, 80, 0.12); color: #5fd068; }
.auto-dl-badge.feed { background: rgba(200, 200, 255, 0.08); color: #8888bb; }

.auto-dl-rule-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Toggle switch */
.auto-dl-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    cursor: pointer;
}
.auto-dl-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.auto-dl-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #444;
    border-radius: 24px;
    transition: background 0.2s;
}
.auto-dl-toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.auto-dl-toggle input:checked + .auto-dl-toggle-slider {
    background: #3fb950;
}
.auto-dl-toggle input:checked + .auto-dl-toggle-slider:before {
    transform: translateX(18px);
}

/* Empty state */
.auto-dl-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}
.auto-dl-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}
.auto-dl-empty p {
    margin: 4px 0;
    font-size: 0.9rem;
}

/* Expand icon */
.auto-dl-expand-icon {
    font-size: 0.75rem;
    color: #666;
    margin-left: 4px;
    transition: transform 0.2s;
}
.auto-dl-rule-card.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    margin-bottom: 0;
}

/* Detail Panel (expandable under each rule card) */
.auto-dl-detail-panel {
    background: #141425;
    border: 1px solid rgba(255,255,255,0.06);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 16px 20px;
    margin-bottom: 10px;
    animation: wizardFadeIn 0.2s ease;
}
.detail-section {
    margin-bottom: 14px;
}
.detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    flex-wrap: wrap;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    color: #888;
    font-size: 0.82rem;
    min-width: 100px;
    flex-shrink: 0;
}
.detail-value {
    color: #e0e0e0;
    font-size: 0.85rem;
}
.detail-code {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: #aaa;
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}
.form-input-sm {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    max-width: 320px;
}
.wizard-pill-group-sm {
    gap: 5px !important;
}
.wizard-pill-sm {
    padding: 4px 12px !important;
    font-size: 0.78rem !important;
}
.detail-row-ro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0;
    font-size: 0.82rem;
}
.detail-row-ro .detail-label {
    min-width: 110px;
}

/* Advanced Details (collapsible) */
.detail-advanced {
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 6px;
    overflow: hidden;
}
.detail-advanced-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    color: #888;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.02);
    transition: background 0.15s;
}
.detail-advanced-toggle:hover {
    background: rgba(255,255,255,0.04);
    color: #aaa;
}
.detail-chevron {
    transition: transform 0.2s;
}
.detail-advanced.open .detail-chevron {
    transform: rotate(90deg);
}
.detail-advanced-body {
    display: none;
    padding: 10px 12px;
}
.detail-advanced.open .detail-advanced-body {
    display: block;
}

/* Detail panel action bar */
/* Preview Feed Matches */
.detail-preview {
    margin: 14px 0 10px;
}
.preview-results {
    margin-top: 10px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
}
.preview-results::-webkit-scrollbar { width: 6px; }
.preview-results::-webkit-scrollbar-track { background: transparent; }
.preview-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.preview-count {
    font-size: 0.78rem;
    color: #888;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.preview-item {
    padding: 6px 12px;
    font-size: 0.8rem;
    color: #bbb;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    word-break: break-word;
}
.preview-item:last-child { border-bottom: none; }
.preview-item .preview-feed {
    font-size: 0.7rem;
    color: #666;
    margin-top: 2px;
}
.preview-empty {
    padding: 16px;
    text-align: center;
    color: #555;
    font-size: 0.82rem;
}

.detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Wizard Styles ── */
.wizard-card {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 24px;
    max-width: 560px;
    animation: wizardFadeIn 0.25s ease;
}
.wizard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wizard-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #e0e0e0;
}
.wizard-step {
    display: none;
    animation: wizardFadeIn 0.25s ease;
}
.wizard-step.active {
    display: block;
}
@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.wizard-step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
}
.wizard-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.2);
    color: #e55;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.wizard-step-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Pill selector */
.wizard-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.wizard-pill {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: #bbb;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.wizard-pill:hover {
    border-color: rgba(229, 9, 20, 0.4);
    color: #e0e0e0;
}
.wizard-pill.active {
    background: rgba(229, 9, 20, 0.15);
    border-color: rgba(229, 9, 20, 0.5);
    color: #fff;
}

/* Season number */
.wizard-season-num {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.wizard-season-num label {
    font-size: 0.85rem;
    color: #aaa;
}

/* Verify banner */
.wizard-verify-banner {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 14px;
}
.wizard-verify-banner.success {
    background: rgba(63, 185, 80, 0.1);
    border: 1px solid rgba(63, 185, 80, 0.3);
    color: #5fd068;
}
.wizard-verify-banner.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f5a623;
}
.wizard-verify-banner.error {
    background: rgba(229, 9, 20, 0.1);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #e55;
}

/* Review card */
.wizard-review-card {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px 20px;
}
.wizard-review-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.88rem;
}
.wizard-review-row:last-child {
    border-bottom: none;
}
.wizard-review-label {
    color: #888;
}
.wizard-review-value {
    color: #e0e0e0;
    font-weight: 500;
    text-align: right;
}

/* Step dots */
.wizard-steps-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
}
.wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #444;
    transition: background 0.2s;
}
.wizard-dot.active {
    background: #e50914;
}
.wizard-dot.completed {
    background: #3fb950;
}

.form-hint {
    font-size: 0.78rem;
    color: #666;
    font-weight: normal;
}

.wizard-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #e0e0e0;
}
.wizard-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3fb950;
}

/* ── 3C: Library Move Button ─────────────────────────────── */

.library-move-btn {
    background: rgba(56, 132, 244, 0.12) !important;
    border-color: rgba(56, 132, 244, 0.25) !important;
    color: #58a6ff !important;
    width: auto !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
}
.library-move-btn:hover {
    background: rgba(56, 132, 244, 0.25) !important;
    border-color: rgba(56, 132, 244, 0.4) !important;
}

/* ── Shared utility: btn-danger, btn-sm ──────────────────── */

.btn-danger {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #e55;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    transition: all 0.15s;
}
.btn-danger:hover {
    background: rgba(229, 9, 20, 0.3);
    border-color: rgba(229, 9, 20, 0.5);
}

/* ── Phase 3 responsive ──────────────────────────────────── */

@media (max-width: 768px) {
    .search-form-row {
        flex-direction: column;
    }
    .search-form-row .form-input,
    .search-form-row .btn {
        width: 100%;
        max-width: none !important;
    }
    .search-result-name {
        max-width: 200px;
    }
    .rss-feed-item,
    .rss-rule-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .rss-feed-actions,
    .rss-rule-actions {
        justify-content: flex-end;
    }
    .rss-add-form {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — BATCH OPERATIONS, TAGS, TRACKERS & ADVANCED
   ══════════════════════════════════════════════════════════════ */

/* ── Batch action bar ────────────────────────────────────── */

.batch-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e1e2d;
    border: 1px solid var(--accent, #e50914);
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.batch-select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e0e0e0;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.batch-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-danger {
    background: #e50914;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #ff1a1a;
}

/* ── Torrent checkbox ────────────────────────────────────── */

.torrent-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--accent, #e50914);
    cursor: pointer;
    margin-right: 8px;
}

.torrent-item.selected {
    background: rgba(229, 9, 20, 0.08);
    border-color: rgba(229, 9, 20, 0.4);
}

/* ── Tag badge ───────────────────────────────────────────── */

.torrent-tag {
    background: #2a3a4a;
    color: #7eb8da;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── Detail tab system ───────────────────────────────────── */

.torrent-detail-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    border-bottom: 1px solid #333;
    padding-bottom: 0;
}

.detail-tab-btn {
    background: none;
    border: none;
    color: #888;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.detail-tab-btn:hover {
    color: #ccc;
}
.detail-tab-btn.active {
    color: var(--accent, #e50914);
    border-bottom-color: var(--accent, #e50914);
}

.detail-tab-panel {
    /* shown/hidden via JS */
}

/* ── Tag input row in detail ─────────────────────────────── */

.detail-tag-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Active state for toggle buttons ─────────────────────── */

.torrent-action-btn.active {
    background: rgba(229, 9, 20, 0.25);
    border-color: var(--accent, #e50914);
    color: var(--accent, #e50914);
}

/* ── Tracker status badges ───────────────────────────────── */

.tracker-status {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.tracker-status-0 { background: #444; color: #888; }
.tracker-status-1 { background: #3a3520; color: #c9a82e; }
.tracker-status-2 { background: #1a3a1a; color: #4caf50; }
.tracker-status-3 { background: #1a2a3a; color: #42a5f5; }
.tracker-status-4 { background: #3a1a1a; color: #e53935; }

.tracker-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tracker-add-row .detail-input {
    width: min(360px, 100%);
}

/* ── Torrent info grid (properties tab) ──────────────────── */

.torrent-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    padding: 8px 0;
}
.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.info-label {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-value {
    font-size: 0.85rem;
    color: #e0e0e0;
    word-break: break-all;
}

/* ── Phase 4 responsive ──────────────────────────────────── */

@media (max-width: 768px) {
    .batch-action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .batch-actions {
        justify-content: center;
    }
    .torrent-detail-tabs {
        overflow-x: auto;
    }
    .torrent-detail-controls {
        grid-template-columns: 1fr;
    }
    .detail-control-group-actions {
        grid-column: span 1;
    }
    .detail-tag-input-row {
        flex-wrap: wrap;
    }
    .torrent-info-grid {
        grid-template-columns: 1fr;
    }
    .tracker-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .tracker-add-row .detail-input {
        width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Feed Browser Modal
   ══════════════════════════════════════════════════════════════ */

.feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: #888;
    font-size: 14px;
}

.feed-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(229, 9, 20, 0.3);
    border-top-color: #e50914;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.feed-list {
    max-height: 65vh;
    overflow-y: auto;
}

.feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}

.feed-item:hover {
    background: rgba(255,255,255,0.04);
}

.feed-item:last-child {
    border-bottom: none;
}

.feed-item-info {
    flex: 1;
    min-width: 0;
}

.feed-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.feed-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: #888;
}

.feed-item-size {
    color: #58a6ff;
    font-weight: 500;
}

.feed-item-date {
    color: #777;
}

.feed-quality-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.08);
    color: #ccc;
}

.feed-quality-tag.tag-4k {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.3);
}

.feed-quality-tag.tag-1080p {
    background: rgba(88, 166, 255, 0.15);
    color: #58a6ff;
    border: 1px solid rgba(88, 166, 255, 0.25);
}

.feed-quality-tag.tag-720p {
    background: rgba(255,255,255,0.06);
    color: #aaa;
}

.feed-quality-tag.tag-hdr,
.feed-quality-tag.tag-hdr10,
.feed-quality-tag.tag-hdr10\+ {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.25);
}

.feed-quality-tag.tag-dv {
    background: rgba(148, 103, 189, 0.2);
    color: #b48ede;
    border: 1px solid rgba(148, 103, 189, 0.3);
}

.feed-quality-tag.tag-remux {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, 0.25);
}

.feed-quality-tag.tag-bluray {
    background: rgba(0, 120, 212, 0.15);
    color: #4ea4e8;
    border: 1px solid rgba(0, 120, 212, 0.25);
}

.feed-quality-tag.tag-web-dl {
    background: rgba(255,255,255,0.06);
    color: #bbb;
}

.feed-quality-tag.tag-atmos,
.feed-quality-tag.tag-dts-hd {
    background: rgba(229, 9, 20, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(229, 9, 20, 0.2);
}

.feed-add-btn {
    flex-shrink: 0;
    min-width: 70px;
}

.btn-success {
    background: #3fb950 !important;
    border-color: #3fb950 !important;
    color: #fff !important;
    cursor: default;
}

.btn-danger {
    background: #e50914 !important;
    border-color: #e50914 !important;
}

@media (max-width: 600px) {
    .feed-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .feed-item-title {
        white-space: normal;
    }
    .feed-add-btn {
        align-self: flex-end;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   VISUAL ENHANCEMENTS - Page Transitions & Animations
   ════════════════════════════════════════════════════════════════════════════ */

/* Smooth page fade-in transitions */
.page.active {
    animation: pageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grid Fade-in Animation */
.media-grid {
    animation: gridFadeIn 0.5s ease-out 0.1s both;
}

@keyframes gridFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Staggered card animations */
.media-card,
.library-card,
.stat-card {
    animation: cardSlideUp 0.4s ease-out forwards;
}

.media-card:nth-child(1) { animation-delay: 0.05s; }
.media-card:nth-child(2) { animation-delay: 0.1s; }
.media-card:nth-child(3) { animation-delay: 0.15s; }
.media-card:nth-child(4) { animation-delay: 0.2s; }
.media-card:nth-child(5) { animation-delay: 0.25s; }
.media-card:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Enhanced Card Hover Effects
   ════════════════════════════════════════════════════════════════════════════ */

/* Library Cards */
.library-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.library-card:hover {
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 12px 32px rgba(229, 9, 20, 0.2), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-6px);
}

/* Stat Cards */
.stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(229, 9, 20, 0.08) 100%);
    border-color: rgba(229, 9, 20, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.15);
}

/* Button smooth transitions */
.btn {
    transition: all 0.2s ease-out;
}

.btn:active {
    transform: scale(0.98);
}

/* ════════════════════════════════════════════════════════════════════════════
   Empty States Styling
   ════════════════════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    min-height: 300px;
    background: linear-gradient(135deg, 
                                rgba(255, 255, 255, 0.02) 0%,
                                rgba(229, 9, 20, 0.02) 100%);
    border: 1px dashed rgba(229, 9, 20, 0.1);
    border-radius: 12px;
    animation: fadeIn 0.4s ease-out;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.empty-state-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 400px;
}

.empty-state-action {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   Loading States - Enhanced Skeletons
   ════════════════════════════════════════════════════════════════════════════ */

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    animation: fadeIn 0.3s ease-out;
}

.skeleton-card {
    aspect-ratio: 2/3;
    border-radius: 4px;
    background: linear-gradient(90deg, 
                                var(--bg-card) 25%, 
                                #2a2a2a 50%, 
                                var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 0.875rem;
    border-radius: 4px;
    margin: 0.75rem 0;
    background: linear-gradient(90deg, 
                                var(--bg-card) 25%, 
                                #2a2a2a 50%, 
                                var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.skeleton-text.short {
    width: 70%;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    animation: fadeIn 0.3s ease-out;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin-left: 0.5rem;
    animation: loadingDots 1.4s infinite;
}

.loading::before {
    content: 'Loading';
    margin-right: 0.25rem;
}

@keyframes loadingDots {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Toast Notification Enhancements
   ════════════════════════════════════════════════════════════════════════════ */

.toast {
    backdrop-filter: blur(16px);
    background: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.toast-success {
    background: linear-gradient(135deg, 
                                rgba(34, 197, 94, 0.95) 0%,
                                rgba(16, 185, 129, 0.85) 100%) !important;
    border-left: 4px solid #10b981;
}

.toast-error {
    background: linear-gradient(135deg, 
                                rgba(239, 68, 68, 0.95) 0%,
                                rgba(220, 38, 38, 0.85) 100%) !important;
    border-left: 4px solid #dc2626;
}

.toast-warning {
    background: linear-gradient(135deg, 
                                rgba(234, 179, 8, 0.95) 0%,
                                rgba(202, 138, 4, 0.85) 100%) !important;
    border-left: 4px solid #ca8a04;
}

/* ════════════════════════════════════════════════════════════════════════════
   Smooth Section Transitions  
   ════════════════════════════════════════════════════════════════════════════ */

.section {
    animation: sectionFadeIn 0.5s ease-out;
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Backdrop Blur for Modals
   ════════════════════════════════════════════════════════════════════════════ */

.modal {
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.5);
}

.modal.active {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Scroll and List Animations
   ════════════════════════════════════════════════════════════════════════════ */

.activity-list,
.history-list,
.user-card {
    animation: fadeIn 0.3s ease-out;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ════════════════════════════════════════════════════════════════════════════
   Focus & Accessibility Enhancements
   ════════════════════════════════════════════════════════════════════════════ */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth focus ring animation */
.btn:focus-visible {
    animation: focusPulse 0.3s ease-out;
}

@keyframes focusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(229, 9, 20, 0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Live TV Page
   ════════════════════════════════════════════════════════════════════════════ */


#livetv-page {
    --livetv-panel: linear-gradient(180deg, rgba(20, 24, 34, 0.96), rgba(11, 15, 24, 0.98));
    --livetv-panel-soft: rgba(255, 255, 255, 0.035);
    --livetv-outline: rgba(255, 255, 255, 0.08);
    --livetv-accent: #89d6ff;
    --livetv-accent-soft: rgba(137, 214, 255, 0.16);
    --livetv-guide-columns: 300px minmax(0, 1fr);
}

.livetv-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: calc(100vh - 64px);
}

.livetv-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(137, 214, 255, 0.14);
    background:
        radial-gradient(circle at top left, rgba(137, 214, 255, 0.16), transparent 34%),
        radial-gradient(circle at 80% 20%, rgba(229, 9, 20, 0.14), transparent 26%),
        linear-gradient(145deg, rgba(13, 20, 29, 0.98), rgba(9, 13, 20, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.livetv-eyebrow {
    margin: 0 0 10px;
    color: var(--livetv-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.livetv-hero h2 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1;
    color: #f8fafc;
}

.livetv-subtitle {
    max-width: 760px;
    margin: 12px 0 0;
    color: #cbd5e1;
    line-height: 1.6;
}

.livetv-hero-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    min-width: 360px;
}

.livetv-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(137, 214, 255, 0.16);
    background: rgba(5, 10, 16, 0.55);
}

.livetv-search-wrap:focus-within {
    border-color: rgba(137, 214, 255, 0.34);
    box-shadow: 0 0 0 4px rgba(137, 214, 255, 0.1);
}

.livetv-search-icon {
    color: var(--livetv-accent);
}

.livetv-search-input {
    border: 0;
    background: transparent;
    width: 100%;
    max-width: none;
}

.livetv-guide-status {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.livetv-status-pill {
    min-width: 136px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--livetv-outline);
    background: rgba(255, 255, 255, 0.04);
}

.livetv-status-pill span {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.livetv-status-pill strong {
    color: #f8fafc;
    font-size: 1rem;
}

.livetv-content {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
    min-height: 0;
}

.livetv-sidebar,
.livetv-guide-surface,
.livetv-epg-panel {
    border-radius: 24px;
    border: 1px solid var(--livetv-outline);
    background: var(--livetv-panel);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}

.livetv-sidebar {
    overflow: hidden;
}

.livetv-sidebar-header {
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.livetv-sidebar-kicker,
.livetv-section-kicker {
    margin: 0 0 8px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.livetv-sidebar h3,
.livetv-guide-toolbar h3 {
    margin: 0;
    color: #f8fafc;
}

.livetv-sidebar .category-list {
    list-style: none;
    padding: 12px;
    margin: 0;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.livetv-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    margin-bottom: 4px;
    border-radius: 14px;
    cursor: pointer;
    color: #cbd5e1;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.livetv-cat-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateX(1px);
}

.livetv-cat-item.active {
    background: linear-gradient(135deg, rgba(137, 214, 255, 0.18), rgba(229, 9, 20, 0.1));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(137, 214, 255, 0.16);
}

.livetv-cat-item.special {
    color: #f8fafc;
    font-weight: 600;
}

.livetv-cat-icon {
    margin-right: 2px;
    font-size: 1rem;
}

.livetv-cat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.livetv-cat-count {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 0.72rem;
}

.livetv-cat-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 10px 6px;
}

.livetv-main {
    min-width: 0;
    overflow: hidden;
}

.livetv-guide-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 0 6px 12px;
}

.livetv-active-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.livetv-summary-pill {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #dbe4ee;
    font-size: 0.8rem;
}

.livetv-summary-pill strong {
    color: #fff;
}

.livetv-summary-subtle {
    color: #94a3b8;
    font-size: 0.82rem;
}

.livetv-guide-surface {
    overflow: hidden;
}

.livetv-time-header {
    display: grid;
    grid-template-columns: var(--livetv-guide-columns);
    gap: 0;
    align-items: stretch;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.livetv-time-header-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-right: 18px;
    color: #cbd5e1;
}

.livetv-time-header-label span {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.livetv-time-header-track,
.livetv-guide-track {
    position: relative;
    min-width: 0;
}

.livetv-time-track-grid,
.livetv-guide-track-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    width: 100%;
    height: 100%;
}

.livetv-time-tick {
    position: relative;
    padding-left: 12px;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
}

.livetv-time-tick::before {
    content: '';
    position: absolute;
    left: 0;
    top: -10px;
    bottom: -16px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.channel-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 20px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.livetv-guide-row {
    display: grid;
    grid-template-columns: var(--livetv-guide-columns);
    gap: 0;
    align-items: stretch;
    min-height: 112px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.livetv-guide-row:hover {
    transform: translateY(-1px);
    border-color: rgba(137, 214, 255, 0.18);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
}

.livetv-guide-channel {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.livetv-guide-channel-brand {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.channel-card-logo,
.livetv-guide-channel-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.channel-card-logo img,
.livetv-guide-channel-logo img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

.channel-card-logo .logo-fallback,
.livetv-guide-channel-logo .logo-fallback {
    font-size: 1.6rem;
    opacity: 0.55;
}

.livetv-guide-channel-copy {
    min-width: 0;
}

.livetv-guide-channel-name-row {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    margin-bottom: 6px;
}

.livetv-guide-channel-name-row h4 {
    margin: 0;
    color: #f8fafc;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ff4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ff4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.live-badge-dot {
    width: 6px;
    height: 6px;
    background: #ff4444;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
}

.livetv-guide-channel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.livetv-channel-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #dbe4ee;
}

.channel-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.livetv-guide-channel-actions {
    align-items: flex-end;
}

.channel-card-fav-btn,
.channel-card-epg-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.15s;
    opacity: 0.5;
    line-height: 1;
}

.channel-card-fav-btn:hover,
.channel-card-epg-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.channel-card-fav-btn.active {
    opacity: 1;
}

.livetv-guide-track {
    min-height: 112px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%,
        rgba(8, 12, 18, 0.42);
}

.livetv-guide-track-grid {
    position: absolute;
    inset: 0;
}

.livetv-guide-track-grid::before {
    content: '';
    position: absolute;
    inset: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.livetv-guide-now-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(137, 214, 255, 0.95), rgba(137, 214, 255, 0.25));
    box-shadow: 0 0 0 3px rgba(137, 214, 255, 0.08);
    z-index: 3;
}

.livetv-program-block {
    position: absolute;
    top: 18px;
    bottom: 18px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
}

.livetv-program-block.is-now {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.2), rgba(229, 9, 20, 0.1));
    box-shadow: inset 0 0 0 1px rgba(229, 9, 20, 0.18);
}

.livetv-program-block.is-next {
    background: linear-gradient(135deg, rgba(137, 214, 255, 0.14), rgba(137, 214, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(137, 214, 255, 0.14);
}

.livetv-program-block-time {
    color: #dbe4ee;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.livetv-program-block-title {
    margin-top: 6px;
    color: #f8fafc;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.livetv-program-block-progress {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.livetv-program-block-progress-fill {
    height: 100%;
    background: #fff;
    opacity: 0.9;
}

.livetv-guide-track-empty {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 16px;
    color: #94a3b8;
    font-size: 0.84rem;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.livetv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.livetv-empty-state h3 {
    margin: 0;
    color: #f8fafc;
}

.livetv-empty-state p {
    margin: 0;
    color: #94a3b8;
}

.livetv-empty-icon {
    font-size: 2rem;
}

/* ── EPG Panel ── */

.livetv-epg-panel {
    overflow-y: auto;
    padding: 18px;
    display: none;
}

.livetv-epg-panel.visible {
    display: block;
}

.epg-close-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 9px 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    transition: color 0.15s, background 0.15s;
}

.epg-close-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.epg-channel-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.epg-channel-info img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.epg-channel-info .epg-ch-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.epg-channel-info .epg-ch-group {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.epg-program-item {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 8px;
    transition: background 0.15s;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.epg-program-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.epg-program-item.now-playing {
    background: rgba(229, 9, 20, 0.1);
    border-left: 3px solid var(--primary-color);
}

.epg-program-item.past {
    opacity: 0.4;
}

.epg-program-time {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 2px;
}

.epg-program-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.epg-program-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.4;
}

.epg-program-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.epg-program-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
}

/* ── Live TV Player Overlay ── */

.livetv-player-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    display: none;
    flex-direction: column;
}

.livetv-player-overlay.active {
    display: flex;
}

.livetv-player-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: opacity 0.3s;
}

.livetv-player-header .back-button {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.livetv-player-header .back-button:hover {
    background: rgba(255,255,255,0.2);
}

.livetv-player-ch-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.livetv-player-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff4444;
    text-transform: uppercase;
}

.livetv-player-epg-info {
    font-size: 0.85rem;
    color: #ccc;
    margin-left: auto;
}

.livetv-player-video-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    position: relative;
}

.livetv-player-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.livetv-player-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ccc;
    font-size: 0.9rem;
}

.livetv-player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: opacity 0.3s;
}

.livetv-player-controls .ctrl-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.livetv-player-controls .ctrl-btn:hover {
    background: rgba(255,255,255,0.15);
}

.livetv-player-controls .vol-slider {
    width: 80px;
    accent-color: var(--primary-color);
}

.livetv-player-controls .ctrl-spacer {
    flex: 1;
}

/* ── Responsive ── */

@media (max-width: 1380px) {
    .livetv-content {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .livetv-epg-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1024px) {
    .livetv-hero {
        flex-direction: column;
    }

    .livetv-hero-tools {
        min-width: 0;
        width: 100%;
    }

    .livetv-guide-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .livetv-time-header,
    .livetv-guide-row {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .livetv-content {
        grid-template-columns: 1fr;
    }

    .livetv-sidebar {
        width: auto;
        overflow-y: visible;
        overflow-x: auto;
    }

    .livetv-sidebar-header {
        display: none;
    }

    .livetv-sidebar .category-list {
        display: flex;
        gap: 4px;
        padding: 8px 12px;
        max-height: none;
    }

    .livetv-cat-item {
        border-radius: 20px;
        padding: 6px 14px;
        white-space: nowrap;
        font-size: 0.82rem;
        margin-bottom: 0;
    }

    .livetv-cat-item.active {
        background: rgba(137, 214, 255, 0.22);
        color: #fff;
    }

    .livetv-time-header,
    .livetv-guide-row {
        grid-template-columns: 1fr;
    }

    .livetv-guide-channel {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .livetv-guide-channel-actions {
        align-items: flex-start;
    }

    .channel-grid {
        max-height: none;
    }

    .livetv-time-header-track {
        padding-top: 16px;
    }

    .livetv-time-tick::before {
        top: -2px;
        bottom: -12px;
    }

    .livetv-epg-panel {
        width: auto;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Discover Page
   ════════════════════════════════════════════════════════════════════════════ */

.discover-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 16px;
}

.discover-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.platform-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.platform-btn.active {
    color: #fff;
    border-color: transparent;
}

/* Specific platform brand theme colors on active focus */
.platform-btn[data-platform="all"].active {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.platform-btn[data-platform="netflix"].active {
    background: #e50914;
    box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
}

.platform-btn[data-platform="prime"].active {
    background: #00a8e1;
    box-shadow: 0 0 12px rgba(0, 168, 225, 0.4);
}

.platform-btn[data-platform="apple"].active {
    background: #111;
    border-color: #444;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.platform-btn[data-platform="disney"].active {
    background: linear-gradient(135deg, #0d1b2a, #1b4965);
    box-shadow: 0 0 12px rgba(27, 73, 101, 0.4);
}

.platform-btn[data-platform="max"].active {
    background: linear-gradient(135deg, #001242, #0052cc);
    box-shadow: 0 0 12px rgba(0, 82, 204, 0.4);
}

.platform-btn[data-platform="hulu"].active {
    background: #1ce783;
    color: #0c0c0c;
    box-shadow: 0 0 12px rgba(28, 231, 131, 0.4);
}

.platform-btn[data-platform="paramount"].active {
    background: #0057b8;
    box-shadow: 0 0 12px rgba(0, 87, 184, 0.4);
}

.platform-btn[data-platform="peacock"].active {
    background: linear-gradient(135deg, #2b2d42, #4a4e69);
    box-shadow: 0 0 12px rgba(74, 78, 105, 0.4);
}

.platform-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 4px;
}

.discover-secondary-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.discover-tabs, .discover-time-window {
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.discover-tab, .time-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.discover-tab:hover, .time-btn:hover {
    color: #fff;
}

.discover-tab.active, .time-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Genre filter chips */
.discover-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
    margin-top: 14px;
}

.genre-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.genre-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.genre-btn.active {
    background: rgba(229, 160, 13, 0.15);
    border-color: #e5a00d;
    color: #e5a00d;
}

/* Discover Card Tweaks & Overlay */
.discover-card {
    position: relative;
    cursor: default !important;
}

.discover-card .media-poster {
    position: relative;
    overflow: hidden;
}

.discover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 4;
}

.discover-card:hover .discover-overlay {
    opacity: 1;
}

.discover-overview {
    font-size: 0.78rem;
    color: #ccc;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.discover-search-btn {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: #e50914 !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3);
    transition: all 0.15s ease;
}

.discover-search-btn:hover {
    background: #ff1a1a !important;
    transform: scale(1.04);
}

.discover-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding-bottom: 20px;
}

.discover-pagination .page-indicator {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}


/* ==================== Activity Page (Admin) ==================== */

.activity-refresh-note {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    margin-left: 12px;
}

.act-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.act-card {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
}

.act-card-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.act-card-value {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.act-card-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    margin-top: 6px;
}

.act-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.act-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.act-section-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 26px 0 12px;
}

.act-empty {
    color: rgba(255, 255, 255, 0.45);
    padding: 14px 0;
}

.act-table-wrap {
    overflow-x: auto;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.act-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.act-table th {
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.act-table td {
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.act-table tbody tr:last-child td {
    border-bottom: none;
}

.act-title {
    color: #fff;
    font-weight: 600;
}

.act-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin-top: 2px;
}

.act-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 700;
}

.act-badge-hw {
    background: rgba(76, 175, 80, 0.18);
    color: #7fd685;
}

.act-badge-sw {
    background: rgba(229, 160, 13, 0.16);
    color: #e5a00d;
}

.act-viewers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.act-viewer {
    display: flex;
    gap: 14px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    align-items: center;
}

.act-viewer-poster {
    width: 52px;
    height: 78px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.act-viewer-poster-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #252525;
    font-size: 1.3rem;
}

.act-viewer-info {
    flex: 1;
    min-width: 0;
}

.act-viewer-bar {
    margin-top: 8px;
}


/* ==================== Quality / Version Badges ==================== */

.quality-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.quality-badge-4k {
    border-color: #e5a00d;
    color: #e5a00d;
}

.other-version-link {
    color: #e5a00d;
    text-decoration: none;
}

.other-version-link:hover {
    text-decoration: underline;
}


.search-result-library {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
}