/* Global Styles */
:root {
    --app-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --app-surface: #ffffff;
    --app-surface-soft: #f8f9fa;
    --app-text: #333333;
    --app-text-muted: #666666;
    --app-border: #dddddd;
    --app-navbar-bg: rgba(0, 0, 0, 0.8);
    --app-dropdown-bg: rgba(0, 0, 0, 0.95);
    --app-navbar-text: #ffffff;
    --app-footer-bg: rgba(0, 0, 0, 0.8);
    --app-footer-text: #ffffff;
    --app-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] {
    --app-bg: linear-gradient(135deg, #0f172a 0%, #111827 55%, #1f2937 100%);
    --app-surface: #111827;
    --app-surface-soft: #1f2937;
    --app-text: #e5e7eb;
    --app-text-muted: #9ca3af;
    --app-border: #374151;
    --app-navbar-bg: rgba(2, 6, 23, 0.92);
    --app-dropdown-bg: rgba(15, 23, 42, 0.98);
    --app-navbar-text: #f9fafb;
    --app-footer-bg: rgba(2, 6, 23, 0.92);
    --app-footer-text: #e5e7eb;
    --app-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

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

[hidden] {
    display: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.2s ease, color 0.2s ease;
}

.container {
    max-width: min(1800px, calc(100vw - 16px));
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Navbar */
.navbar {
    background-color: var(--app-navbar-bg);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
    text-decoration: none;
}

.navbar-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.welcome {
    color: var(--app-navbar-text);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.welcome:hover {
    background-color: rgba(102, 126, 234, 0.2);
}

.btn-link {
    color: var(--app-navbar-text);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-link:hover {
    background-color: rgba(102, 126, 234, 0.2);
}

.btn-logout {
    color: #fff;
    background-color: #dc3545;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-logout:hover {
    background-color: #c82333;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--app-dropdown-bg);
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    color: var(--app-navbar-text);
    padding: 0.75rem 1rem;
    display: block;
    transition: background-color 0.2s, padding-left 0.2s;
}

.dropdown-content a:hover {
    background-color: rgba(102, 126, 234, 0.4);
}

/* Alerts */
.alert {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert .close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
}

/* Auth Container */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2rem 0;
}

.auth-card {
    background: var(--app-surface);
    border-radius: 8px;
    box-shadow: var(--app-card-shadow);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    color: var(--app-text);
}

.auth-card h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--app-text);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    color: var(--app-text);
    font-weight: 500;
}

.form-group input,
.form-group select {
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s;
    background: var(--app-surface);
    color: var(--app-text);
}

.form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.directory-picker {
    gap: 0.75rem;
}

.directory-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.selection-summary {
    color: #333;
    font-weight: 600;
}

.selection-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.directory-drop-zone {
    border: 2px dashed #667eea;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    color: #555;
    background-color: #f8f9ff;
    transition: background-color 0.2s, border-color 0.2s;
}

.directory-drop-zone.drag-over {
    border-color: #4c63d2;
    background-color: #e9edff;
}

.dashboard-left-pane.music-drop-over {
    outline: 2px dashed #4c63d2;
    outline-offset: -8px;
    border-radius: 12px;
    background-color: rgba(102, 126, 234, 0.08);
}

.files-tree-panel.music-drop-over {
    outline: 2px dashed #4c63d2;
    outline-offset: -4px;
    border-radius: 10px;
    background-color: rgba(102, 126, 234, 0.08);
}

.music-index-layout {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    min-height: 100%;
}

.music-index-tools {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.music-upload-hint {
    margin: 0.35rem 0 0.75rem;
    color: #475569;
    font-size: 0.85rem;
}

.music-index-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.music-index-bulk-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.music-index-action-button {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background-color: #f8fafc;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.34rem 0.66rem;
    cursor: pointer;
}

.music-index-action-button:hover {
    border-color: #94a3b8;
    background-color: #eef2ff;
}

.music-index-action-button.is-active {
    border-color: #be123c;
    background-color: #ffe4e6;
    color: #9f1239;
}

.music-search-label {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.music-search-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #f8fafc;
    color: #1f2937;
    font-size: 0.92rem;
    padding: 0.55rem 0.7rem;
}

.music-search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.16);
    background-color: white;
}

.music-index-nav {
    position: sticky;
    top: 0;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.5rem;
    background: #f8f9ff;
    border: 1px solid #e7e9ff;
    border-radius: 10px;
}

.music-index-letter {
    border: 1px solid #d4dafc;
    border-radius: 8px;
    background: white;
    color: #2d3a9d;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0;
    cursor: pointer;
}

.music-index-letter:hover {
    background-color: #e9edff;
}

.music-index-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.music-letter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.music-letter-heading {
    margin: 0;
    color: #334155;
    font-size: 1.05rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.3rem;
}

.music-artist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.music-artist-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fcfcff;
    padding: 0.85rem;
}

.music-artist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.music-artist-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.music-artist-heading {
    min-width: 0;
}

.music-artist-name {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
}

.music-artist-count {
    margin: 0.15rem 0 0.65rem;
    color: #64748b;
    font-size: 0.82rem;
}

.music-artist-toggle {
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background-color: #f8fafc;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.28rem 0.62rem;
    cursor: pointer;
    white-space: nowrap;
}

.music-artist-toggle:hover {
    border-color: #94a3b8;
    background-color: #eef2ff;
}

.music-artist-delete {
    border-color: #f1bcc4;
    color: #9b1c31;
    background-color: #fff5f6;
}

.music-artist-delete:hover {
    border-color: #e08996;
    background-color: #ffe8eb;
}

.music-track-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.music-track-list[hidden] {
    display: none;
}

.music-track-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    border: 1px solid #edf0f8;
    border-radius: 8px;
    background-color: white;
    padding: 0.55rem;
}

.music-track-info {
    min-width: 0;
}

.music-track-title,
.music-track-meta {
    margin: 0;
}

.music-track-title {
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-track-meta {
    color: #64748b;
    font-size: 0.8rem;
    margin-top: 0.18rem;
}

.music-track-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tree-node-button {
    border: 1px solid #ced4da;
    border-radius: 999px;
    background-color: #f8f9fa;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.56rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.tree-node-button:hover {
    background-color: #e9edff;
    border-color: #667eea;
    color: #2f4ccc;
}

.favorite-toggle-button {
    min-width: 2rem;
    color: #64748b;
    border-color: #cbd5e1;
}

.favorite-toggle-button:hover {
    color: #be123c;
    border-color: #fda4af;
    background-color: #fff1f2;
}

.favorite-toggle-button.is-favorite {
    color: #be123c;
    border-color: #fda4af;
    background-color: #ffe4e6;
}

.favorite-toggle-button-small {
    min-width: 1.75rem;
    padding: 0.2rem 0.5rem;
}

.tree-node-play-button {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: white;
}

.tree-node-play-button:hover {
    background-color: #4338ca;
    border-color: #4338ca;
    color: white;
}

.tree-node-delete-button {
    background-color: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.tree-node-delete-button:hover {
    background-color: #ffe4e6;
    border-color: #fda4af;
    color: #9f1239;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 0.5rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.auth-link {
    text-align: center;
    margin-top: 1.5rem;
    color: #666;
}

.auth-link a {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* Dashboard */
.dashboard-container {
    flex: 1;
    padding: 1.25rem 0 0;
}

.dashboard-container h1 {
    color: white;
    margin-bottom: 2rem;
}

.dashboard-card {
    background: var(--app-surface);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--app-card-shadow);
    color: var(--app-text);
}

.dashboard-card h2 {
    color: var(--app-text);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #667eea;
    padding-bottom: 0.5rem;
}

.privacy-policy {
    max-width: 960px;
    margin: 1.25rem auto 2rem;
}

.privacy-policy-card {
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
    border: 1px solid rgba(102, 126, 234, 0.28);
}

.privacy-policy-card h1 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
    margin-bottom: 0.65rem;
    color: var(--app-text);
}

.privacy-policy-card h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.7rem;
    font-size: clamp(1.2rem, 2.1vw, 1.45rem);
}

.privacy-policy-card p {
    margin: 0.55rem 0 0;
    line-height: 1.62;
    color: var(--app-text-muted);
}

.privacy-policy-card ul {
    margin: 0.65rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.privacy-policy-card li {
    margin-top: 0.45rem;
    line-height: 1.58;
    color: var(--app-text-muted);
}

.privacy-policy-card strong {
    color: var(--app-text);
}

@media (max-width: 768px) {
    .privacy-policy {
        margin-top: 0.8rem;
    }

    .privacy-policy-card {
        border-radius: 10px;
    }
}

.profile-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.profile-card-grid .dashboard-card {
    margin-bottom: 0;
}

.info-group {
    margin-bottom: 1.5rem;
}

.info-group label {
    font-weight: 600;
    color: var(--app-text);
    display: block;
    margin-bottom: 0.5rem;
}

.info-group p {
    color: var(--app-text-muted);
    padding: 0.5rem;
    background-color: var(--app-surface-soft);
    border-radius: 4px;
}

.badge {
    display: inline-block;
    background-color: #667eea;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.badge-info {
    background-color: #17a2b8;
}

.token-container {
    background-color: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-radius: 4px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.token-container code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--app-text);
    word-break: break-all;
}

.btn-small {
    background-color: #667eea;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}

.btn-small:hover {
    background-color: #764ba2;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 0.5rem;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

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

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    animation: slideIn 0.3s;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content h2 {
    color: #333;
    margin-bottom: 1.5rem;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover {
    color: #000;
}

.modal.show {
    display: block;
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 500px;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.notification.removing {
    animation: slideOutRight 0.3s ease-out;
}

.notification-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 5px solid #28a745;
}

.notification-error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border-left: 5px solid #dc3545;
}

.notification-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    color: #856404;
    border-left: 5px solid #ffc107;
}

.notification-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    border-left: 5px solid #17a2b8;
}

.notification-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.notification-message {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: inherit;
}

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

@media (max-width: 600px) {
    .notification {
        left: 10px;
        right: 10px;
        max-width: none;
        min-width: auto;
    }
}

/* Footer */
.footer {
    background-color: var(--app-footer-bg);
    color: var(--app-footer-text);
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;
}

.footer a {
    color: var(--app-footer-text);
    text-decoration: underline;
}

.footer a:hover {
    text-decoration: none;
}

/* Music Library */
.music-container {
    flex: 1;
    padding: 2rem 0;
}

.music-container h1 {
    color: white;
    margin-bottom: 2rem;
}

.music-card {
    background: var(--app-surface);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--app-card-shadow);
    color: var(--app-text);
}

.music-card h2 {
    color: var(--app-text);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #667eea;
    padding-bottom: 0.5rem;
}

.music-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.music-card-header h2 {
    margin-bottom: 0;
    flex: 1;
}

.music-card-header-stacked {
    align-items: stretch;
}

.music-card-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.music-header-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.music-header-stat {
    background-color: #f8f9fa;
    border-left: 4px solid #667eea;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.music-header-stat-label {
    color: #666;
    font-size: 0.78rem;
    margin: 0 0 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.music-header-stat-value {
    color: #333;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.upload-modal-content {
    max-width: 760px;
    max-height: 90vh;
    overflow-y: auto;
}

.save-queue-modal-content {
    max-width: 560px;
}

.save-queue-target-options {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.save-queue-modal-actions {
    justify-content: flex-end;
}

.confirmation-modal-content {
    max-width: 520px;
}

.video-title-modal-content {
    max-width: 520px;
}

.confirmation-modal-message {
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.45;
}

.confirmation-modal-actions {
    justify-content: flex-end;
}


/* ── Dashboard split+tabs layout ─────────────────────────────── */

.dashboard-view-shell {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    min-height: calc(100dvh - 62px - 1.25rem);
}

.library-view-switcher {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: var(--app-card-shadow);
    align-self: flex-start;
    position: sticky;
    top: 82px;
}

.library-view-switcher-button {
    border: 1px solid #d7e0f2;
    background: #f8faff;
    color: #475569;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}

.library-view-switcher-button:hover {
    border-color: #b9cae7;
    color: #334155;
}

.library-view-switcher-button.is-active {
    background: #e9f0ff;
    border-color: #7ba4e8;
    color: #2f4b91;
}

.library-view-host {
    min-width: 0;
    min-height: 0;
}

.library-view {
    display: none;
}

.library-view.is-active {
    display: block;
}

/* Explicit tab containers to keep music and video UI concerns separated. */
.music-tab-container,
.video-tab-container {
    min-width: 0;
}

.video-library-shell {
    display: flex;
    min-height: calc(100dvh - 62px - 1.25rem);
}

.video-library-card {
    width: 100%;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: var(--app-card-shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.video-library-card h2 {
    margin: 0 0 0.6rem;
    color: var(--app-text);
}

.video-library-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.video-library-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.video-upload-progress {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface-soft);
    padding: 0.65rem 0.75rem;
}

.video-upload-progress p {
    margin: 0 0 0.45rem;
    color: var(--app-text-muted);
    font-size: 0.84rem;
}

.video-library-action-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.video-library-grid {
    display: grid;
    grid-template-columns: minmax(640px, 1.65fr) minmax(620px, 1.45fr);
    gap: 0;
    height: calc(100dvh - 180px);
    min-height: 480px;
    align-items: stretch;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--app-surface-soft);
    transition: grid-template-columns 0.25s ease;
}

.video-library-grid.is-theater {
    grid-template-columns: 1fr 0px;
}

.video-library-grid.is-theater .video-library-list-panel {
    overflow: hidden;
    width: 0;
    min-width: 0;
    border-left: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, width 0.25s ease;
}

.video-library-grid:not(.is-theater) .video-library-list-panel {
    transition: opacity 0.2s ease 0.1s, width 0.25s ease;
}


@media (max-width: 1700px) {
    .video-library-grid {
        grid-template-columns: minmax(560px, 1.48fr) minmax(520px, 1.32fr);
    }
}

@media (max-width: 1450px) {
    .video-library-grid {
        grid-template-columns: minmax(460px, 1.22fr) minmax(420px, 1.18fr);
    }
}

.video-right-column {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.85rem;
    align-content: start;
    padding: 1rem 1.25rem;
    background: var(--app-surface-soft);
    overflow-y: auto;
}

.video-library-list-panel,
.video-player-panel {
    border: 1px solid #e8eef8;
    border-radius: 10px;
    background: #ffffff;
    min-height: 0;
    overflow: hidden;
}

.video-library-list-panel {
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--app-border);
    background: var(--app-surface);
    display: flex;
    flex-direction: column;
}

.video-library-list-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #e8eef8;
    background: #ffffff;
}

.video-files-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9rem 1.25rem 1rem;
}

.video-library-list-panel .music-index-tools-panel {
    padding: 0 1.25rem 0.5rem;
}

.video-library-list-panel .music-search-input {
    width: 100%;
    margin: 0;
}

.video-letter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e2e8f0;
}

.video-letter-header .music-letter-heading {
    margin: 0;
    border-bottom: 0;
    flex: 1;
}

.video-letter-items {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.video-letter-items[hidden] {
    display: none;
}

.video-letter-items .video-file-row + .video-file-row {
    margin-top: 0;
}

.video-controls-panel {
    display: block;
    min-height: 0;
}

.video-controls-card {
    border: 1px solid #e8eef8;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.8rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    width: 100%;
}

.video-controls-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--app-border);
    padding: 0 0 0.25rem;
}

.video-controls-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--app-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    margin-bottom: -1px;
}

.video-controls-tab.is-active {
    color: #3b5fc0;
    border-bottom-color: #3b5fc0;
}

.video-controls-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 0.55rem;
}

.video-controls-tab-panel.is-active {
    display: flex;
}

.video-controls-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.video-controls-card-title {
    margin: 0;
    color: var(--app-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.video-controls-summary {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.8rem;
}

.video-controls-row {
    display: flex;
    gap: 0.45rem;
}

.video-controls-row .playlist-input,
.video-controls-row .playlist-select {
    flex: 1;
    min-width: 0;
}

.video-controls-actions-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.video-controls-actions-row .btn-small,
.video-controls-row .btn-small,
.video-queue-actions .btn-small,
.video-playlist-actions .btn-small {
    font-size: 0.74rem;
    min-height: 30px;
    padding: 0.26rem 0.52rem;
}

.video-queue-actions .favorite-toggle-button,
.video-playlist-actions .favorite-toggle-button {
    min-height: 30px;
    min-width: 30px;
    padding: 0.2rem 0.5rem;
}

.video-queue-list,
.video-playlist-items-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface);
    padding: 0.55rem;
}

.video-queue-item,
.video-playlist-item {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface-soft);
    padding: 0.48rem 0.52rem;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
}

.video-queue-item + .video-queue-item,
.video-playlist-item + .video-playlist-item {
    margin-top: 0.45rem;
}

.video-queue-item.is-current,
.video-playlist-item.is-current {
    border-color: #7ba4e8;
    background: #f3f8ff;
}

.video-queue-order,
.video-playlist-order {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #edf2ff;
    color: #3b4cca;
    font-size: 0.8rem;
    font-weight: 700;
}

.video-queue-drag,
.video-playlist-drag {
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-surface);
    color: var(--app-text-muted);
    cursor: grab;
    line-height: 1;
    padding: 0.2rem 0.3rem;
}

.video-queue-details,
.video-playlist-details {
    min-width: 0;
}

.video-queue-title,
.video-playlist-title {
    margin: 0;
    color: var(--app-text);
    font-size: 0.82rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-queue-meta,
.video-playlist-meta {
    margin: 0.15rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.74rem;
}

.video-queue-actions,
.video-playlist-actions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.video-file-row {
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.video-file-row + .video-file-row {
    margin-top: 0.55rem;
}

.video-file-row.is-current-video {
    border-color: #7ba4e8;
    box-shadow: inset 0 0 0 1px rgba(73, 121, 208, 0.2);
    background: #f3f8ff;
}

.video-file-details {
    min-width: 0;
    flex: 1;
}

.video-file-media {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 100%;
}

.video-file-poster {
    width: 72px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.video-file-poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-file-poster-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.video-file-title {
    margin: 0;
    color: var(--app-text);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.video-file-meta {
    margin: 0.2rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.8rem;
}

.video-file-meta-secondary {
    font-size: 0.74rem;
    opacity: 0.88;
}

.video-file-badge-row {
    margin-top: 0.26rem;
    display: flex;
    align-items: center;
    gap: 0.34rem;
    flex-wrap: nowrap;
    overflow: visible;
}

.video-file-badge-row > * {
    flex: 0 0 auto;
}

.video-file-processing {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    padding: 0.14rem 0.46rem;
    width: fit-content;
    white-space: nowrap;
    line-height: 1;
}

.video-file-processing.is-failed {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

.video-file-warning {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9a3412;
    background: #ffedd5;
    border: 1px solid #fdba74;
    border-radius: 999px;
    padding: 0.14rem 0.46rem;
    width: fit-content;
    white-space: nowrap;
    line-height: 1;
}

.video-file-hls-status {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.14rem 0.46rem;
    width: fit-content;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
}

.video-file-hls-status.is-ready {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
}

.video-file-hls-status.is-preparing {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #93c5fd;
}

.video-file-hls-status.is-failed {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

.video-file-hls-status.is-not-prepared {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

body[data-theme="dark"] .video-file-warning {
    color: #fdba74;
    background: rgba(154, 52, 18, 0.28);
    border-color: rgba(251, 146, 60, 0.62);
}

body[data-theme="dark"] .video-file-hls-status.is-ready {
    color: #86efac;
    background: rgba(22, 101, 52, 0.3);
    border-color: rgba(134, 239, 172, 0.62);
}

body[data-theme="dark"] .video-file-hls-status.is-preparing {
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.25);
    border-color: rgba(96, 165, 250, 0.62);
}

body[data-theme="dark"] .video-file-hls-status.is-failed {
    color: #fecaca;
    background: rgba(153, 27, 27, 0.3);
    border-color: rgba(252, 165, 165, 0.62);
}

body[data-theme="dark"] .video-file-hls-status.is-not-prepared {
    color: #fde68a;
    background: rgba(146, 64, 14, 0.3);
    border-color: rgba(252, 211, 77, 0.62);
}

body[data-theme="dark"] .video-file-processing {
    color: #bfdbfe;
    background: rgba(37, 99, 235, 0.25);
    border-color: rgba(96, 165, 250, 0.62);
}

body[data-theme="dark"] .video-file-processing.is-failed {
    color: #fecaca;
    background: rgba(153, 27, 27, 0.3);
    border-color: rgba(248, 113, 113, 0.62);
}

.video-file-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}

.video-file-actions .btn-small {
    font-size: 0.72rem;
    padding: 0.25rem 0.5rem;
    min-height: 28px;
    line-height: 1.15;
}

.video-player-panel {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    gap: 0.65rem;
}

.video-player-meta {
    min-width: 0;
}

.video-player-title {
    margin: 0;
    color: var(--app-text);
    font-size: 0.95rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-player-subtitle {
    margin: 0.25rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.82rem;
}

.video-abr-status-banner {
    margin: 0.3rem 0 0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.35);
    color: #ca8a04;
    font-size: 0.78rem;
    font-style: italic;
}

.video-tab-player {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 10px;
    background: #010816;
    border: 1px solid rgba(122, 162, 247, 0.28);
    box-shadow: 0 20px 48px rgba(2, 6, 23, 0.42), inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.video-tab-player-frame {
    position: relative;
    border-radius: 12px;
    padding: 0.4rem;
    background:
        linear-gradient(145deg, rgba(59, 130, 246, 0.24) 0%, rgba(30, 41, 59, 0.76) 35%, rgba(124, 58, 237, 0.2) 100%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.35);
}

.video-player-shell {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.video-player-controls {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(122, 162, 247, 0.22);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.88) 100%);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.05);
}

.video-player-controls.is-inactive {
    opacity: 0.72;
}

.video-player-controls-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
}

.video-player-controls-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.video-player-secondary-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.video-player-secondary-spacer {
    visibility: hidden;
    pointer-events: none;
}

.video-player-control-button {
    width: 2.7rem;
    min-width: 2.7rem;
    height: 2.7rem;
}

.video-player-primary-control {
    width: 3.35rem;
    min-width: 3.35rem;
    height: 3.35rem;
    font-size: 1.3rem;
    background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
    border-color: rgba(147, 197, 253, 0.85);
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.42);
}

.video-player-primary-control:hover {
    border-color: rgba(219, 234, 254, 0.95);
    box-shadow: 0 14px 26px rgba(29, 78, 216, 0.48);
}

.video-player-seek-row .player-time {
    color: rgba(255, 255, 255, 0.62);
}

.video-player-volume-col {
    justify-content: flex-start;
}

.video-player-volume-bar {
    width: 120px;
}

.video-player-controls .player-vol-btn {
    color: rgba(255, 255, 255, 0.76);
}

.video-player-controls .player-vol-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.video-player-future-controls {
    min-height: 2.7rem;
}

.video-quality-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    user-select: none;
    white-space: nowrap;
}

.video-quality-select {
    height: 2.7rem;
    padding: 0 0.55rem;
    background: rgba(30, 41, 59, 0.82);
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    appearance: auto;
}

.video-quality-select:disabled {
    opacity: 0.45;
    cursor: default;
}

.video-quality-select:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.7);
    outline-offset: 2px;
}

body[data-theme="dark"] .video-quality-select {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.32);
    color: rgba(226, 232, 240, 0.9);
}

.video-library-copy {
    margin: 0.45rem 0;
    color: var(--app-text-muted);
}

.video-library-chip-row {
    margin-top: 0.9rem;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.video-library-chip {
    background: #eef4ff;
    color: #33518f;
    border: 1px solid #c7d8f7;
    border-radius: 999px;
    padding: 0.24rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
}

body[data-theme="dark"] .library-view-switcher {
    background: var(--app-surface);
    border-color: var(--app-border);
}

body[data-theme="dark"] .library-view-switcher-button {
    background: var(--app-surface-soft);
    color: var(--app-text-muted);
    border-color: var(--app-border);
}

body[data-theme="dark"] .library-view-switcher-button:hover {
    color: var(--app-text);
    border-color: #475569;
}

body[data-theme="dark"] .library-view-switcher-button.is-active {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.22) 0%, rgba(30, 41, 59, 0.94) 100%);
    color: #bfdbfe;
    border-color: #60a5fa;
}

body[data-theme="dark"] .video-library-chip {
    background: rgba(59, 130, 246, 0.16);
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.5);
}

body[data-theme="dark"] .video-library-list-panel,
body[data-theme="dark"] .video-player-panel,
body[data-theme="dark"] .video-file-row,
body[data-theme="dark"] .video-controls-card,
body[data-theme="dark"] .video-queue-list,
body[data-theme="dark"] .video-playlist-items-list,
body[data-theme="dark"] .video-queue-item,
body[data-theme="dark"] .video-playlist-item {
    background: #0f172a;
    border-color: var(--app-border);
}

body[data-theme="dark"] .video-library-grid,
body[data-theme="dark"] .video-right-column {
    background: #0b1220;
    border-color: var(--app-border);
}

body[data-theme="dark"] .video-library-list-panel {
    border-left-color: var(--app-border);
}

body[data-theme="dark"] .video-library-list-header {
    background: #0f172a;
    border-bottom-color: var(--app-border);
}

body[data-theme="dark"] .video-controls-tab-bar {
    border-bottom-color: var(--app-border);
}

body[data-theme="dark"] .video-controls-tab {
    color: var(--app-text-muted);
}

body[data-theme="dark"] .video-controls-tab.is-active {
    color: #bfdbfe;
    border-bottom-color: #60a5fa;
}

body[data-theme="dark"] .video-file-row.is-current-video {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.18) 0%, rgba(30, 41, 59, 0.96) 100%);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}

body[data-theme="dark"] .video-queue-order,
body[data-theme="dark"] .video-playlist-order {
    background-color: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}

body[data-theme="dark"] .video-queue-item.is-current,
body[data-theme="dark"] .video-playlist-item.is-current {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.18) 0%, rgba(30, 41, 59, 0.96) 100%);
}

body[data-theme="dark"] .video-tab-player-frame {
    background:
        linear-gradient(145deg, rgba(96, 165, 250, 0.28) 0%, rgba(15, 23, 42, 0.9) 45%, rgba(76, 29, 149, 0.22) 100%);
}

body[data-theme="dark"] .video-player-controls {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.96) 0%, rgba(15, 23, 42, 0.92) 100%);
    border-color: rgba(96, 165, 250, 0.22);
}

@media (max-width: 1180px) {
    .video-library-grid {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .video-library-grid.is-theater {
        grid-template-columns: minmax(0, 1fr);
    }

    .video-library-grid.is-theater .video-library-list-panel {
        overflow: visible;
        width: auto;
        min-width: 0;
        border-left: 0;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
    }

    .video-library-list-panel {
        border-left: 0;
        border-top: 1px solid var(--app-border);
        min-height: 320px;
    }

    .video-right-column {
        grid-template-rows: auto auto;
        gap: 0.75rem;
    }

    .video-tab-player {
        min-height: 260px;
    }

    .video-files-list {
        min-height: 240px;
        max-height: 55vh;
    }
}

@media (max-width: 700px) {
    .video-file-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .video-player-controls-top {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .video-player-secondary-spacer {
        display: none;
    }

    .video-player-controls-top .video-player-transport {
        order: 1;
    }

    .video-player-controls-top .video-player-secondary-controls:not(.video-player-secondary-spacer) {
        order: 2;
        justify-content: flex-start;
    }

    .video-player-controls-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .video-player-secondary-controls,
    .video-player-volume-col {
        justify-content: flex-start;
    }

    .video-player-volume-bar {
        width: 100%;
    }

    .video-file-media {
        width: 100%;
    }

    .video-file-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .video-controls-panel {
        width: 100%;
    }

    .video-queue-item,
    .video-playlist-item {
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: start;
    }

    .video-queue-actions,
    .video-playlist-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .video-file-poster {
        width: 88px;
    }
}

.dashboard-split-layout {
    display: grid;
    grid-template-columns: 1.45fr 1.15fr;
    gap: 0;
    height: calc(100dvh - 62px - 104px - 1.25rem);
    overflow: hidden;
}

@media (max-width: 1100px) {
    .dashboard-view-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .library-view-switcher {
        position: static;
        flex-direction: row;
        align-items: center;
    }

    .library-view-switcher-button {
        flex: 1;
        text-align: center;
    }
}

/* Left pane — Music library */
.dashboard-left-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.25rem 1rem 1.5rem;
    border-right: 1px solid #dde6f4;
    background: #ffffff;
}

.dpane-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e8eef8;
}

.dpane-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.dpane-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-left-pane .music-index-tools-panel {
    flex-shrink: 0;
    padding-bottom: 0.5rem;
}

.dashboard-left-pane .files-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0;
    padding-right: 0.25rem;
}

/* Left pane — artist selection highlight */
.dashboard-left-pane .music-artist-card {
    transition: border-color 0.16s, background-color 0.16s;
}

.dashboard-left-pane .music-artist-card:hover {
    border-color: #b8cae4;
}

.dashboard-left-pane .music-artist-card.is-selected-artist {
    border-color: #7ba4e8;
    background: linear-gradient(180deg, #f3f8ff 0%, #e9f1ff 100%);
    box-shadow: inset 0 0 0 1px rgba(73,121,208,0.2);
}

/* Right pane */
.dashboard-right-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8faff;
}

/* Tab bar */
.dpane-tab-bar {
    flex-shrink: 0;
    display: flex;
    gap: 0;
    border-bottom: 1px solid #dde6f4;
    background: #ffffff;
    padding: 0 1rem;
}

.dpane-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.dpane-tab:hover {
    color: #334155;
}

.dpane-tab.is-active {
    color: #3b5fc0;
    border-bottom-color: #3b5fc0;
}

/* Tab panels */
.dpane-tab-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 1rem 1.25rem 1rem 1.25rem;
}

.dpane-tab-panel.is-active {
    display: flex;
}

.dpane-panel-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e8eef8;
}

/* Scrollable lists inside tab panels */
.dpane-tab-panel .play-queue-list,
.dpane-tab-panel .playlist-items-list,
.dpane-tab-panel .podcast-episodes-list-panel,
.dpane-tab-panel .recently-played-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.music-index-tools-panel {
    flex-shrink: 0;
    padding: 0 0 0.5rem 0;
}

.music-files-card {
    height: clamp(520px, 68vh, 760px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    order: 1;
}

.play-queue-card {
    position: sticky;
    top: 90px;
    max-height: min(clamp(220px, 41vh, 465px), calc(100vh - 90px - 18rem));
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    grid-column: 1 / span 2;
    grid-row: 2;
    order: 2;
}

.playlist-manager-card {
    position: sticky;
    top: 90px;
    max-height: clamp(360px, 62vh, 640px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    grid-column: 3;
    grid-row: 1;
    order: 5;
}

.podcast-manager-card {
    position: sticky;
    top: 90px;
    max-height: clamp(360px, 62vh, 640px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    grid-column: 2;
    grid-row: 1;
    order: 4;
}

.recently-played-card {
    position: sticky;
    top: 90px;
    max-height: clamp(520px, 68vh, 760px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    grid-column: 3;
    grid-row: 2;
    order: 3;
}

.podcast-episodes-list-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 120px;
}

.podcast-download-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fbff;
    padding: 0.65rem;
}

.podcast-download-title,
.podcast-download-meta {
    margin: 0;
}

.podcast-download-title {
    color: #1f2937;
    font-weight: 700;
}

.podcast-download-meta {
    margin-top: 0.2rem;
    color: #667085;
    font-size: 0.86rem;
}

.podcast-download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.podcast-feed-manager-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.podcast-catalog-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #f8fbff;
}

.podcast-catalog-label {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
}

.podcast-feed-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.podcast-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.podcast-feed-item {
    border: 1px solid #d9e0ec;
    border-radius: 10px;
    background: #f8fbff;
    padding: 0.8rem;
}

.podcast-feed-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: start;
}

.podcast-feed-summary {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
}

.podcast-feed-header h3 {
    margin: 0;
    color: #1f2937;
}

.podcast-feed-header p {
    margin: 0.25rem 0 0;
    color: #667085;
    font-size: 0.9rem;
}

.podcast-feed-stats {
    font-weight: 600;
}

.podcast-feed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.podcast-episodes-list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.podcast-episode-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 0.55rem;
}

.podcast-episode-title,
.podcast-episode-meta {
    margin: 0;
}

.podcast-episode-title {
    color: #1f2937;
    font-weight: 600;
}

.podcast-episode-meta {
    margin-top: 0.2rem;
    color: #667085;
    font-size: 0.84rem;
}

.podcast-episode-actions {
    display: flex;
    gap: 0.35rem;
}

.podcast-artwork-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #dbe4f0;
    background: #eef3fb;
}

.podcast-artwork-thumb-feed {
    width: 56px;
    height: 56px;
    border-radius: 10px;
}

.podcast-artwork-thumb-placeholder {
    position: relative;
    background: linear-gradient(140deg, #e2e8f0, #cbd5e1);
}

.podcast-artwork-thumb-placeholder::after {
    content: "♪";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #64748b;
    font-weight: 700;
}

@media (max-width: 720px) {
    .podcast-feed-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .podcast-feed-actions,
    .podcast-download-actions,
    .podcast-episode-actions {
        justify-content: flex-start;
    }

    .podcast-download-item,
    .podcast-episode-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .podcast-download-actions,
    .podcast-episode-actions {
        grid-column: 1 / -1;
    }
}

.playlist-controls-row,
.playlist-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.playlist-actions-row .btn-small {
    margin: 0;
}

.playlist-input,
.playlist-select {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-size: 0.9rem;
    color: #1f2937;
    background-color: #fff;
}

.playlist-items-list {
    flex: 1;
    min-height: 120px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.playlist-item-row {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fbff;
    padding: 0.55rem;
}

.playlist-item-order {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #edf2ff;
    color: #3b4cca;
    font-size: 0.8rem;
    font-weight: 700;
}

.playlist-item-details {
    min-width: 0;
}

.playlist-item-title,
.playlist-item-meta {
    margin: 0;
}

.playlist-item-title {
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-meta {
    margin-top: 0.16rem;
    color: #667085;
    font-size: 0.8rem;
}

.playlist-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.play-queue-summary {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.play-queue-header-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.play-queue-next-up-summary {
    margin: 0;
    color: #667085;
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-player-label {
    margin: 0;
    color: #667085;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.queue-now-playing-title,
.queue-now-playing-meta {
    margin: 0;
}

.queue-now-playing-title {
    margin-top: 0.4rem;
    color: #1f2937;
    font-size: 1.05rem;
    font-weight: 700;
    word-break: break-word;
}

.queue-now-playing-meta {
    margin-top: 0.25rem;
    color: #667085;
    font-size: 0.9rem;
    min-height: 1.25rem;
}

.dashboard-player-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background-color: rgba(15, 23, 42, 0.96);
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    backdrop-filter: blur(14px);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.28);
}

.dashboard-player-footer-inner {
    width: min(1800px, calc(100vw - 16px));
    margin: 0 auto;
    padding: 0.75rem 24px;
    display: grid;
    grid-template-columns: minmax(180px, 300px) 1fr minmax(160px, 200px) minmax(180px, 260px);
    gap: 1.25rem;
    align-items: center;
}

.dashboard-player-meta {
    min-width: 0;
}

.music-overlay-tabs,
.music-overlay-lyrics-panel {
    display: none;
}

.music-overlay-tabs {
    gap: 0.45rem;
}

.music-overlay-tab-button {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.music-overlay-tab-button.is-active {
    background: #5b7dff;
    border-color: #8ea2ff;
    color: #ffffff;
}

#musicPlayerOverlayTrigger {
    cursor: pointer;
}

#musicPlayerOverlayTrigger:focus-visible {
    outline: 2px solid #bfdbfe;
    outline-offset: 2px;
    border-radius: 10px;
}

.music-player-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 22%, rgba(30, 41, 59, 0.2) 0%, rgba(2, 6, 23, 0.72) 62%);
    transition: opacity 0.2s ease;
}

.music-player-overlay-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

body.music-player-overlay-open {
    overflow: hidden;
}

body.music-player-overlay-open .dashboard-player-footer {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    z-index: 1500;
    width: min(1220px, calc(100vw - 32px));
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 20px;
    transform: translate(-50%, -50%);
    box-shadow: 0 26px 62px rgba(2, 6, 23, 0.5);
}

body.music-player-overlay-open .dashboard-player-footer-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1.25rem 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "tabs"
        "artwork"
        "controls"
        "seek"
        "volume"
        "nextup";
    gap: 0.9rem;
}

body.music-player-overlay-open .music-overlay-tabs {
    display: inline-flex;
    grid-area: tabs;
    justify-self: center;
}

body.music-player-overlay-open .dashboard-player-controls {
    display: contents;
}

body.music-player-overlay-open .dashboard-player-meta {
    grid-area: artwork;
}

body.music-player-overlay-open .now-playing-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    justify-items: center;
    text-align: center;
    min-height: 0;
}

body.music-player-overlay-open .now-playing-cover-image {
    width: clamp(220px, 30vw, 340px);
    height: clamp(220px, 30vw, 340px);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35);
}

body.music-player-overlay-open .queue-now-playing-title {
    margin-top: 0;
    font-size: 1.15rem;
}

body.music-player-overlay-open .queue-now-playing-meta {
    margin-top: 0.2rem;
}

body.music-player-overlay-open .player-transport {
    grid-area: controls;
    justify-content: center;
}

body.music-player-overlay-open .player-seek-row {
    grid-area: seek;
}

body.music-player-overlay-open .player-volume-col {
    grid-area: volume;
    justify-content: center;
}

body.music-player-overlay-open .player-next-up-col {
    grid-area: nextup;
    text-align: center;
}

body.music-player-overlay-open .player-next-up-text {
    margin: 0;
}

body.music-player-overlay-open .music-overlay-lyrics-panel {
    grid-area: artwork;
    align-self: stretch;
    width: 100%;
    max-height: min(56vh, 520px);
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    background: rgba(15, 23, 42, 0.52);
}

body.music-player-overlay-open .dashboard-player-footer.is-lyrics-tab-active .music-overlay-player-section {
    display: none;
}

body.music-player-overlay-open .dashboard-player-footer.is-lyrics-tab-active .music-overlay-lyrics-panel {
    display: block;
}

.music-overlay-lyrics-status {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.9rem;
}

.music-overlay-lyrics-track {
    margin: 0 0 0.55rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
}

.music-overlay-lyrics-text {
    margin: 0;
    color: #e2e8f0;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.now-playing-layout {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-height: 70px;
}

.now-playing-cover-image {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.now-playing-cover-image.is-empty {
    opacity: 0.95;
}

.now-playing-text {
    min-width: 0;
}

.dashboard-player-footer .queue-player-label,
.dashboard-player-footer .queue-now-playing-title,
.dashboard-player-footer .queue-now-playing-meta {
    color: white;
}

.dashboard-player-footer .queue-now-playing-meta {
    color: #cbd5e1;
}

.dashboard-player-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}

.queue-player-button,
.queue-mode-button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: linear-gradient(160deg, #334155 0%, #1e293b 100%);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.queue-player-button:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

.queue-mode-button {
    font-size: 0.95rem;
}

.queue-player-button:hover,
.queue-mode-button:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 219, 254, 0.7);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.35);
}

.queue-player-button:active,
.queue-mode-button:active {
    transform: translateY(0) scale(0.98);
}

.queue-player-button:focus-visible,
.queue-mode-button:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}

#playPauseButton {
    width: 3.45rem;
    min-width: 3.45rem;
    height: 3.45rem;
    font-size: 1.34rem;
    background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
    border-color: rgba(147, 197, 253, 0.85);
    box-shadow: 0 12px 24px rgba(30, 64, 175, 0.46);
}

#playPauseButton:hover {
    border-color: rgba(219, 234, 254, 0.95);
    box-shadow: 0 14px 26px rgba(29, 78, 216, 0.48);
}

.queue-mode-button.is-active {
    border-color: rgba(147, 197, 253, 0.9);
    background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.42);
}

.queue-audio-player {
    display: none;
}

.queue-audio-player::-webkit-media-controls-play-button,
/* ── Custom player seek / volume ─────────────────────────────── */

.player-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.player-seek-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.player-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    min-width: 2.6rem;
    text-align: center;
    flex-shrink: 0;
}

/* ── Shared range base ─────────────────────────────────────────── */
.player-seek-bar,
.player-volume-bar {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        #60a5fa var(--pct, 0%),
        rgba(255, 255, 255, 0.18) var(--pct, 0%)
    );
    outline: none;
    cursor: pointer;
    transition: height 0.12s ease;
}

.player-seek-bar {
    flex: 1;
}

.player-seek-bar:hover,
.player-volume-bar:hover {
    height: 6px;
}

/* Webkit thumb */
.player-seek-bar::-webkit-slider-thumb,
.player-volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #3b82f6;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.12s ease;
}

.player-seek-bar::-webkit-slider-thumb:hover,
.player-volume-bar::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

/* Firefox thumb */
.player-seek-bar::-moz-range-thumb,
.player-volume-bar::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #3b82f6;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.player-seek-bar::-moz-range-track,
.player-volume-bar::-moz-range-track {
    background: transparent;
}

/* Volume column */
.player-volume-col {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-content: flex-end;
}

.player-next-up-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
}

.player-next-up-text {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-volume-bar {
    width: 90px;
    --pct: 100%;
}

.player-vol-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.player-vol-btn:hover {
    color: #ffffff;
}
.play-queue-list {
    flex: 1;
    min-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.25rem;
}

.play-queue-empty {
    margin: 0;
    color: #666;
}

.play-queue-item {
    display: grid;
    grid-template-columns: 2rem 1.8rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background-color: #fafbff;
}

.play-queue-item.is-current-track {
    border-color: #7c91ff;
    box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.18);
    background-color: #f3f6ff;
}

.play-queue-item.is-dragging {
    opacity: 0.55;
}

.play-queue-item.is-drag-target {
    border-color: #667eea;
}

.play-queue-order {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #edf2ff;
    color: #3b4cca;
    font-weight: 700;
}

.queue-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.05rem;
    cursor: grab;
    padding: 0;
}

.queue-drag-handle:hover {
    color: #334155;
}

.play-queue-track-details {
    min-width: 0;
}

.play-queue-track-title,
.play-queue-track-meta {
    margin: 0;
}

.play-queue-track-title {
    color: #1f2937;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.play-queue-track-meta {
    margin-top: 0.25rem;
    color: #667085;
    font-size: 0.88rem;
}

.play-queue-remove-button {
    background-color: #e2e8f0;
    color: #334155;
}

.play-queue-remove-button:hover {
    background-color: #cbd5e1;
}

.video-library-upload-note {
    margin: 0.35rem 0 0.75rem;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

.queue-clear-button {
    background-color: #475569;
}

.queue-clear-button:hover {
    background-color: #334155;
}

.queue-clear-button:disabled {
    background-color: #cbd5e1;
    cursor: default;
}

.play-queue-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.queue-play-button {
    background-color: #4f46e5;
}

.queue-play-button:hover {
    background-color: #4338ca;
}

.recently-played-summary {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
}

.recently-played-list {
    flex: 1;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.25rem;
}

.recently-played-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.recently-played-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recently-played-cover {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #eef2ff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.recently-played-cover-placeholder {
    background: linear-gradient(135deg, #eef2ff, #dbeafe);
    border: 1px solid #dbe3ff;
}

.recently-played-details {
    min-width: 0;
}

.recently-played-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.recently-played-title,
.recently-played-meta,
.recently-played-time {
    margin: 0;
}

.recently-played-title {
    color: #111827;
    font-weight: 700;
}

.recently-played-meta,
.recently-played-time {
    color: #6b7280;
    font-size: 0.86rem;
    margin-top: 0.2rem;
}

.admin-table-container {
    overflow-x: auto;
}

body[data-page="admin"] .container {
    max-width: 100vw;
    padding-left: 4px;
    padding-right: 4px;
}

.admin-dashboard {
    width: 100%;
}

body[data-page="admin"] .admin-top-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

body[data-page="admin"] .admin-top-layout > .music-card:first-child {
    width: 100%;
    max-width: none;
}

body[data-page="admin"] .admin-logged-users-card {
    position: static;
    width: 100%;
    max-width: none;
}

body[data-page="admin"] .admin-table {
    min-width: 0;
}

.admin-top-layout {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: start;
}

.admin-top-layout > .music-card:first-child {
    flex: 1 1 1220px;
    min-width: 0;
}

.admin-logged-users-card {
    flex: 0 1 clamp(260px, 18vw, 360px);
    position: sticky;
    top: 90px;
}

.admin-table {
    width: 100%;
    min-width: 1360px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #333;
    background-color: #f8f9fa;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-action-buttons .btn-small {
    min-width: 74px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1;
    margin: 0;
    vertical-align: middle;
}

.admin-quota-input {
    width: 110px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

.admin-nickname-input {
    width: 160px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

.admin-wide-input {
    width: min(460px, 100%);
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

.admin-storage-summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: #495057;
    font-size: 0.86rem;
}

.logged-in-users-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.logged-in-user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background-color: var(--app-surface-soft);
}

.logged-in-user-email {
    margin-left: 0.5rem;
    color: var(--app-text-muted);
}

.logged-in-user-meta {
    display: flex;
    flex-direction: column;
    text-align: right;
    color: var(--app-text-muted);
    font-size: 0.85rem;
    gap: 0.2rem;
}

.admin-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.admin-settings-grid {
    grid-template-columns: minmax(980px, 2.35fr) minmax(360px, 1fr);
    align-items: start;
    gap: 1rem;
}

.admin-settings-editable-card {
    min-width: 0;
}

.admin-settings-env-card {
    position: sticky;
    top: 90px;
}

.admin-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
}

.admin-settings-form-grid .form-group {
    min-width: 0;
    margin: 0;
}

.admin-settings-form-grid .form-group label {
    overflow-wrap: anywhere;
}

.admin-settings-form-grid .admin-wide-input,
.admin-settings-form-grid .admin-select-input,
.admin-settings-form-grid .admin-quota-input {
    width: 100%;
    max-width: 100%;
}

.admin-settings-full-row {
    grid-column: 1 / -1;
}

.admin-checkbox-row {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0;
}

.admin-checkbox-row label {
    margin: 0;
}

.admin-settings-divider {
    grid-column: 1 / -1;
    margin: 0.35rem 0 0.75rem;
    border-color: rgba(148, 163, 184, 0.35);
}

.admin-settings-actions {
    margin-top: 0.25rem;
}

.admin-role-card {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--app-surface);
}

.admin-role-card h3 {
    margin: 0;
    color: var(--app-text);
}

.admin-role-card p {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.9rem;
}

.admin-multiselect {
    width: 100%;
    min-height: 110px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.9rem;
}

.admin-select-input {
    width: 100%;
    min-height: 42px;
    height: 42px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    background: #ffffff;
}

@media (max-width: 1960px) {
    .admin-settings-grid {
        grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
    }
}

@media (max-width: 1660px) {
    .admin-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-settings-env-card {
        position: static;
    }
}

@media (max-width: 1240px) {
    .admin-settings-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-help-text {
    margin-top: 0.75rem;
    color: var(--app-text-muted);
    font-size: 0.85rem;
}

.admin-operation-status {
    margin-top: 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.admin-operation-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.35rem;
}

.admin-user-operation-status {
    margin-top: 0.45rem;
    min-height: 1.15rem;
    font-size: 0.8rem;
    color: #475569;
}

.admin-user-operation-status.is-running::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: #2563eb;
    animation: adminStatusPulse 0.9s ease-in-out infinite;
    vertical-align: middle;
}

.admin-operation-status.is-running::before {
    content: "";
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: #2563eb;
    animation: adminStatusPulse 0.9s ease-in-out infinite;
    vertical-align: middle;
}

.admin-action-buttons button:disabled,
.btn-primary:disabled,
.btn-small:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary.is-working,
.btn-small.is-working {
    cursor: wait;
}

@keyframes adminStatusPulse {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

.theme-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.theme-toggle-label {
    color: var(--app-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.theme-toggle-help {
    margin: 0.5rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.85rem;
}

.theme-switch {
    position: relative;
    display: inline-flex;
    width: 50px;
    height: 28px;
}

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

.theme-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.theme-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.theme-switch input:checked + .theme-slider {
    background: #667eea;
}

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

body[data-theme="dark"] .music-search-input,
body[data-theme="dark"] .admin-multiselect,
body[data-theme="dark"] .admin-quota-input,
body[data-theme="dark"] .admin-nickname-input,
body[data-theme="dark"] .admin-wide-input,
body[data-theme="dark"] .admin-select-input,
body[data-theme="dark"] .music-index-nav,
body[data-theme="dark"] .music-artist-card,
body[data-theme="dark"] .play-queue-item {
    background: var(--app-surface-soft);
    color: var(--app-text);
    border-color: var(--app-border);
}

body[data-theme="dark"] .music-track-row {
    background: #0f172a;
    border-color: var(--app-border);
}

body[data-theme="dark"] .music-artist-card.is-selected-artist {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.22) 0%, rgba(30, 41, 59, 0.94) 100%);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}

body[data-theme="dark"] .play-queue-item.is-current-track {
    border-color: #60a5fa;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.18) 0%, rgba(30, 41, 59, 0.96) 100%);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28);
}

body[data-theme="dark"] .playlist-input,
body[data-theme="dark"] .playlist-select,
body[data-theme="dark"] .playlist-item-row,
body[data-theme="dark"] .podcast-download-item,
body[data-theme="dark"] .podcast-catalog-row,
body[data-theme="dark"] .podcast-feed-item,
body[data-theme="dark"] .podcast-episode-row {
    background: #0f172a;
    color: var(--app-text);
    border-color: var(--app-border);
}

body[data-theme="dark"] .playlist-input::placeholder {
    color: var(--app-text-muted);
    opacity: 1;
}

body[data-theme="dark"] .playlist-select option {
    background: #0f172a;
    color: var(--app-text);
}

body[data-theme="dark"] .playlist-item-order {
    background-color: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}

body[data-theme="dark"] .modal {
    background-color: rgba(2, 6, 23, 0.78);
}

body[data-theme="dark"] .modal-content {
    background-color: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

body[data-theme="dark"] .modal-content h2,
body[data-theme="dark"] .selection-summary,
body[data-theme="dark"] .radio-label {
    color: var(--app-text);
}

body[data-theme="dark"] .close {
    color: var(--app-text-muted);
}

body[data-theme="dark"] .close:hover {
    color: var(--app-text);
}

body[data-theme="dark"] .directory-drop-zone,
body[data-theme="dark"] .upload-form .form-group input[type="file"],
body[data-theme="dark"] .progress-bar {
    background-color: #0f172a;
    color: var(--app-text-muted);
    border-color: #60a5fa;
}

body[data-theme="dark"] .directory-drop-zone.drag-over {
    background-color: rgba(59, 130, 246, 0.16);
    border-color: #93c5fd;
}

body[data-theme="dark"] .dashboard-left-pane.music-drop-over {
    outline-color: #93c5fd;
    background-color: rgba(59, 130, 246, 0.14);
}

body[data-theme="dark"] .files-tree-panel.music-drop-over {
    outline-color: #93c5fd;
    background-color: rgba(59, 130, 246, 0.14);
}

body[data-theme="dark"] .upload-form .form-group small,
body[data-theme="dark"] #progressText {
    color: var(--app-text-muted);
}

body[data-theme="dark"] .music-upload-hint {
    color: var(--app-text-muted);
}

body[data-theme="dark"] .admin-table th {
    background-color: #0f172a;
    color: #e5e7eb;
}

body[data-theme="dark"] .admin-table td {
    border-bottom-color: #374151;
    color: var(--app-text);
}

body[data-theme="dark"] .dashboard-left-pane {
    background: var(--app-surface);
    border-right-color: var(--app-border);
}

body[data-theme="dark"] .dashboard-right-pane {
    background: #0b1220;
}

body[data-theme="dark"] .dpane-tab-bar {
    background: var(--app-surface);
    border-bottom-color: var(--app-border);
}

body[data-theme="dark"] .dpane-header,
body[data-theme="dark"] .dpane-panel-header {
    border-bottom-color: var(--app-border);
}

body[data-theme="dark"] .music-header-stat {
    background-color: var(--app-surface-soft);
    border-left-color: #667eea;
}

body[data-theme="dark"] .dpane-title,
body[data-theme="dark"] .music-header-stat-value,
body[data-theme="dark"] .music-letter-heading,
body[data-theme="dark"] .music-artist-name,
body[data-theme="dark"] .music-track-title,
body[data-theme="dark"] .play-queue-track-title,
body[data-theme="dark"] .playlist-item-title,
body[data-theme="dark"] .podcast-download-title,
body[data-theme="dark"] .podcast-episode-title,
body[data-theme="dark"] .podcast-feed-header h3,
body[data-theme="dark"] .podcast-catalog-label,
body[data-theme="dark"] .recently-played-title {
    color: var(--app-text);
}

body[data-theme="dark"] .play-queue-order {
    background-color: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}

body[data-theme="dark"] .dpane-tab {
    color: var(--app-text-muted);
}

body[data-theme="dark"] .dpane-tab:hover {
    color: var(--app-text);
}

body[data-theme="dark"] .music-index-action-button,
body[data-theme="dark"] .music-index-letter,
body[data-theme="dark"] .music-artist-toggle {
    background: #0f172a;
    color: var(--app-text);
    border-color: var(--app-border);
}

body[data-theme="dark"] .music-index-action-button:hover,
body[data-theme="dark"] .music-index-letter:hover,
body[data-theme="dark"] .music-artist-toggle:hover {
    background-color: #1e293b;
}

body[data-theme="dark"] .music-index-action-button.is-active {
    border-color: #fb7185;
    background-color: #4c1d2a;
    color: #fecdd3;
}

body[data-theme="dark"] .favorite-toggle-button {
    color: #94a3b8;
    border-color: #475569;
    background-color: #0f172a;
}

body[data-theme="dark"] .favorite-toggle-button:hover {
    color: #fda4af;
    border-color: #fb7185;
    background-color: #3f1d2e;
}

body[data-theme="dark"] .favorite-toggle-button.is-favorite {
    color: #fecdd3;
    border-color: #fb7185;
    background-color: #4c1d2a;
}

body[data-theme="dark"] .music-search-label,
body[data-theme="dark"] .music-header-stat-label,
body[data-theme="dark"] .music-artist-count,
body[data-theme="dark"] .music-track-meta,
body[data-theme="dark"] .play-queue-track-meta,
body[data-theme="dark"] .playlist-item-meta,
body[data-theme="dark"] .podcast-download-meta,
body[data-theme="dark"] .podcast-episode-meta,
body[data-theme="dark"] .podcast-feed-header p,
body[data-theme="dark"] .play-queue-empty,
body[data-theme="dark"] .queue-drag-handle,
body[data-theme="dark"] .recently-played-meta,
body[data-theme="dark"] .recently-played-time {
    color: var(--app-text-muted);
}

.embedded-view .navbar,
.embedded-view .footer {
    display: none;
}

.embedded-view .container {
    max-width: 100%;
    margin: 0;
    padding: 1rem 1.25rem;
}

.persistent-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    background: rgba(7, 12, 24, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.persistent-panel-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.persistent-panel-drawer {
    width: min(960px, 88vw);
    height: 100%;
    background: #f8fbff;
    box-shadow: -18px 0 30px rgba(0, 0, 0, 0.22);
    display: grid;
    grid-template-rows: auto 1fr;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.persistent-panel-overlay.panel-admin .persistent-panel-drawer {
    width: min(1680px, 97vw);
}

.persistent-panel-overlay.is-visible .persistent-panel-drawer {
    transform: translateX(0);
}

.persistent-panel-header {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #d7deea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
}

.persistent-panel-header h2 {
    margin: 0;
    font-size: 1.05rem;
    color: #1d2a3a;
}

.persistent-panel-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f8fbff;
}

body.persistent-panel-open {
    overflow: hidden;
}

@media (max-width: 1680px) {
    .music-library-layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr) minmax(340px, 0.95fr);
    }

    .music-files-card {
        grid-column: 1;
        grid-row: 1;
        height: clamp(540px, 72vh, 820px);
    }

    .playlist-manager-card {
        grid-column: 3;
    }

    .recently-played-card {
        grid-column: 3;
    }

    .podcast-manager-card {
        grid-column: 2;
    }

    .play-queue-card {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .playlist-manager-card {
        grid-row: 1;
    }

    .recently-played-card {
        grid-row: 2;
    }

    .podcast-manager-card {
        grid-row: 1;
    }

    .play-queue-card,
    .podcast-manager-card,
    .playlist-manager-card,
    .recently-played-card {

    .play-queue-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
        position: static;
    }
}

@media (max-width: 1280px) {
    .music-library-layout {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }

    .music-files-card {
        grid-column: span 1;
        grid-row: auto;
    }

    .play-queue-card,
    .podcast-manager-card,
    .recently-played-card,
    .playlist-manager-card {
        grid-column: auto;
    }

    .play-queue-card,
    .podcast-manager-card,
    .playlist-manager-card,
    .recently-played-card {
        position: static;
        max-height: none;
    }

    .dashboard-player-footer-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .dashboard-player-meta {
        grid-column: 1 / -1;
    }

    .dashboard-player-controls {
        grid-column: 1 / -1;
    }

    .player-volume-col {
        justify-content: flex-start;
    }

    .player-next-up-col {
        justify-content: flex-start;
    }

    .persistent-panel-drawer {
        width: min(1080px, 94vw);
    }
}

@media (max-width: 1100px) {
    .profile-card-grid {
        grid-template-columns: 1fr;
    }

    .persistent-panel-drawer {
        width: 100vw;
    }

    .admin-top-layout {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-logged-users-card {
        position: static;
    }

    .music-library-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-split-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .dashboard-left-pane {
        border-right: none;
        border-bottom: 1px solid #dde6f4;
        padding-bottom: 1rem;
    }

    .dashboard-left-pane .files-list {
        max-height: 360px;
    }

    .dashboard-right-pane {
        min-height: 480px;
    }

    .music-header-stats {
        grid-template-columns: 1fr;
    }

    .logged-in-user-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .logged-in-user-meta {
        text-align: left;
    }
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.upload-options {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
}

.radio-label input[type="radio"] {
    cursor: pointer;
}

.upload-form .form-group input[type="file"] {
    padding: 1rem;
    border: 2px dashed #667eea;
    border-radius: 4px;
    cursor: pointer;
}

.upload-form .form-group small {
    color: #666;
    font-size: 0.85rem;
}

.progress-bar {
    width: 100%;
    height: 30px;
    background-color: #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    width: 0%;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

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

.storage-stat {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #667eea;
}

.storage-stat label {
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.storage-stat p {
    color: #667eea;
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
}

.storage-bar-container {
    margin-top: 1rem;
}

.storage-bar {
    width: 100%;
    height: 30px;
    background-color: #e9ecef;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.storage-used-bar {
    height: 100%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

.files-list {
    margin-top: 1.5rem;
}

.files-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.files-table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #667eea;
}

.files-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #333;
}

.files-table td {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    color: #666;
}

.files-table tr:hover {
    background-color: #f8f9fa;
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .music-library-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .music-files-card,
    .playlist-manager-card,
    .recently-played-card,
    .play-queue-card,
    .podcast-manager-card {
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .music-files-card .files-list {
        max-height: 52vh;
    }

    .play-queue-list,
    .playlist-items-list,
    .recently-played-list {
        max-height: 42vh;
        overflow-y: auto;
    }

    .dashboard-player-footer {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 0.75rem;
    }

    .navbar .container {
        flex-direction: column;
        gap: 1rem;
    }

    .navbar-menu {
        width: 100%;
        justify-content: center;
    }

    .auth-card {
        margin: 1rem;
    }

    .token-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-small {
        width: 100%;
    }

    .dashboard-player-controls .queue-player-button,
    .dashboard-player-controls .queue-mode-button,
    .video-player-control-button {
        width: 3.05rem;
        min-width: 3.05rem;
        height: 3.05rem;
        font-size: 1.2rem;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .dashboard-player-controls #playPauseButton,
    .video-player-primary-control {
        width: 3.65rem;
        min-width: 3.65rem;
        height: 3.65rem;
        font-size: 1.45rem;
    }

    .dashboard-player-controls .player-transport,
    .video-player-transport {
        gap: 0.7rem;
        flex-wrap: nowrap;
    }

    .dashboard-player-controls .player-seek-row,
    .video-player-seek-row {
        gap: 0.7rem;
    }

    .dashboard-player-controls .player-volume-col,
    .video-player-volume-col {
        gap: 0.75rem;
    }

    .music-index-layout {
        grid-template-columns: 1fr;
    }

    .music-index-tools {
        margin-bottom: 0.7rem;
    }

    .music-index-tools-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .music-index-nav {
        position: static;
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .music-artist-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dpane-tab-panel {
        padding: 0.75rem;
    }

    .music-track-row {
        grid-template-columns: 1fr;
    }

    .music-track-actions {
        justify-content: flex-start;
    }

    .play-queue-item {
        grid-template-columns: 1fr;
    }

    .play-queue-order {
        width: 1.8rem;
        height: 1.8rem;
    }

    .play-queue-item-actions {
        justify-content: stretch;
    }

    .dashboard-player-footer-inner {
        padding: 0.85rem 12px;
    }

    body.music-player-overlay-open .dashboard-player-footer {
        width: min(760px, calc(100vw - 18px));
        top: 52%;
    }

    body.music-player-overlay-open .dashboard-player-footer-inner {
        max-width: 620px;
        gap: 0.7rem;
    }

    body.music-player-overlay-open .now-playing-cover-image {
        width: clamp(180px, 42vw, 280px);
        height: clamp(180px, 42vw, 280px);
    }

}

@media (max-width: 640px) {
    .dashboard-container {
        padding-bottom: 1rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .footer {
        padding-bottom: 1rem;
    }

    .dashboard-player-footer-inner {
        gap: 0.65rem;
        padding: 0.65rem 12px;
    }

    .dashboard-player-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .now-playing-layout {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 0.55rem;
        min-height: 54px;
    }

    .now-playing-cover-image {
        width: 54px;
        height: 54px;
        border-radius: 8px;
    }


    .dashboard-player-footer .queue-player-label {
        display: none;
    }

    .dashboard-player-footer .queue-now-playing-title {
        font-size: 0.92rem;
        line-height: 1.2;
    }

    .dashboard-player-footer .queue-now-playing-meta {
        font-size: 0.78rem;
        min-height: 0;
        line-height: 1.2;
    }

    .dashboard-player-controls {
        gap: 0.5rem;
    }

    .dashboard-player-footer .player-transport {
        justify-content: space-between;
        gap: 0.5rem;
    }

    .dashboard-player-footer .player-seek-row,
    .video-player-seek-row {
        display: grid;
        grid-template-columns: 2.7rem minmax(0, 1fr) 2.7rem;
        align-items: center;
        gap: 0.65rem;
    }

    .dashboard-player-footer .player-volume-col,
    .video-player-volume-col {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-player-footer .player-next-up-col {
        width: 100%;
    }

    .dashboard-player-footer .player-vol-btn,
    .video-player-controls .player-vol-btn {
        width: 2.8rem;
        min-width: 2.8rem;
        height: 2.8rem;
        font-size: 1.1rem;
    }

    .dashboard-player-footer .player-volume-bar,
    .video-player-volume-bar {
        width: min(200px, 100%);
    }

    .dashboard-player-footer .player-transport .btn-small,
    .video-player-transport .btn-small,
    .video-player-secondary-controls .btn-small {
        width: auto;
        min-height: 3rem;
        padding: 0.5rem;
        font-size: 1.1rem;
    }

    .video-player-secondary-controls {
        gap: 0.55rem;
    }

    .video-player-controls {
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .video-quality-select {
        min-height: 3rem;
    }

    .player-seek-bar,
    .player-volume-bar {
        height: 8px;
    }

    .player-seek-bar::-webkit-slider-thumb,
    .player-volume-bar::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
    }

    .player-seek-bar::-moz-range-thumb,
    .player-volume-bar::-moz-range-thumb {
        width: 18px;
        height: 18px;
    }

}

@media (hover: none) and (pointer: coarse) {
    .queue-player-button,
    .queue-mode-button,
    .video-player-control-button,
    .player-vol-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .player-seek-bar,
    .player-volume-bar {
        height: 9px;
    }

    .player-seek-bar::-webkit-slider-thumb,
    .player-volume-bar::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    .player-seek-bar::-moz-range-thumb,
    .player-volume-bar::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }
}