/* ==========================================================================
   STUDY VIEWER — style.css
   All app styling, split out of index.html for maintainability.
   No visual changes — this is a straight extraction of the original <style>.
   ========================================================================== */

        /* ==========================================================================
           1. MATERIAL 3 DESIGN SYSTEM & CSS VARIABLES
           ========================================================================== */
        :root {
            color-scheme: dark light;
            
            /* Light Theme Tokens */
            --md-sys-color-primary-light: #15803d;
            --md-sys-color-on-primary-light: #ffffff;
            --md-sys-color-primary-container-light: #dcfce7;
            --md-sys-color-on-primary-container-light: #14532d;
            --md-sys-color-secondary-light: #2563eb;
            --md-sys-color-background-light: #f8fafc;
            --md-sys-color-on-background-light: #0f172a;
            --md-sys-color-surface-light: #ffffff;
            --md-sys-color-on-surface-light: #1e293b;
            --md-sys-color-surface-variant-light: #f1f5f9;
            --md-sys-color-on-surface-variant-light: #475569;
            --md-sys-color-outline-light: #cbd5e1;
            --md-sys-color-error-light: #dc2626;
            --md-sys-color-playlist-light: #8b5cf6;
            --md-sys-color-on-playlist-light: #ffffff;
            --md-sys-elevation-1-light: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --md-sys-elevation-2-light: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --md-sys-elevation-3-light: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

            /* Dark Theme Tokens */
            --md-sys-color-primary-dark: #4ade80;
            --md-sys-color-on-primary-dark: #064e3b;
            --md-sys-color-primary-container-dark: #065f46;
            --md-sys-color-on-primary-container-dark: #a7f3d0;
            --md-sys-color-secondary-dark: #60a5fa;
            --md-sys-color-background-dark: #0f172a;
            --md-sys-color-on-background-dark: #f8fafc;
            --md-sys-color-surface-dark: #1e293b;
            --md-sys-color-on-surface-dark: #f1f5f9;
            --md-sys-color-surface-variant-dark: #334155;
            --md-sys-color-on-surface-variant-dark: #cbd5e1;
            --md-sys-color-outline-dark: #475569;
            --md-sys-color-error-dark: #ef4444;
            --md-sys-color-playlist-dark: #a78bfa;
            --md-sys-color-on-playlist-dark: #2e1065;
            --md-sys-elevation-1-dark: 0 1px 3px 0 rgb(0 0 0 / 0.5);
            --md-sys-elevation-2-dark: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
            --md-sys-elevation-3-dark: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);

            /* Active Defaults (Light Fallback) */
            --primary: var(--md-sys-color-primary-light);
            --on-primary: var(--md-sys-color-on-primary-light);
            --primary-container: var(--md-sys-color-primary-container-light);
            --on-primary-container: var(--md-sys-color-on-primary-container-light);
            --secondary: var(--md-sys-color-secondary-light);
            --bg: var(--md-sys-color-background-light);
            --on-bg: var(--md-sys-color-on-background-light);
            --surface: var(--md-sys-color-surface-light);
            --on-surface: var(--md-sys-color-on-surface-light);
            --surface-variant: var(--md-sys-color-surface-variant-light);
            --on-surface-variant: var(--md-sys-color-on-surface-variant-light);
            --outline: var(--md-sys-color-outline-light);
            --error: var(--md-sys-color-error-light);
            --playlist: var(--md-sys-color-playlist-light);
            --on-playlist: var(--md-sys-color-on-playlist-light);
            --elevation-1: var(--md-sys-elevation-1-light);
            --elevation-2: var(--md-sys-elevation-2-light);
            --elevation-3: var(--md-sys-elevation-3-light);

            /* Universal Styling Variables */
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-full: 9999px;
            --transition-speed: 0.3s;
            --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        /* Auto System Theme Handling */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --primary: var(--md-sys-color-primary-dark);
                --on-primary: var(--md-sys-color-on-primary-dark);
                --primary-container: var(--md-sys-color-primary-container-dark);
                --on-primary-container: var(--md-sys-color-on-primary-container-dark);
                --secondary: var(--md-sys-color-secondary-dark);
                --bg: var(--md-sys-color-background-dark);
                --on-bg: var(--md-sys-color-on-background-dark);
                --surface: var(--md-sys-color-surface-dark);
                --on-surface: var(--md-sys-color-on-surface-dark);
                --surface-variant: var(--md-sys-color-surface-variant-dark);
                --on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
                --outline: var(--md-sys-color-outline-dark);
                --error: var(--md-sys-color-error-dark);
                --playlist: var(--md-sys-color-playlist-dark);
                --on-playlist: var(--md-sys-color-on-playlist-dark);
                --elevation-1: var(--md-sys-elevation-1-dark);
                --elevation-2: var(--md-sys-elevation-2-dark);
                --elevation-3: var(--md-sys-elevation-3-dark);
            }
        }

        /* Explicit Dark/Light Overrides */
        :root[data-theme="dark"] {
            --primary: var(--md-sys-color-primary-dark); --on-primary: var(--md-sys-color-on-primary-dark);
            --primary-container: var(--md-sys-color-primary-container-dark); --on-primary-container: var(--md-sys-color-on-primary-container-dark);
            --bg: var(--md-sys-color-background-dark); --on-bg: var(--md-sys-color-on-background-dark);
            --surface: var(--md-sys-color-surface-dark); --on-surface: var(--md-sys-color-on-surface-dark);
            --surface-variant: var(--md-sys-color-surface-variant-dark); --on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
            --outline: var(--md-sys-color-outline-dark); --error: var(--md-sys-color-error-dark);
            --playlist: var(--md-sys-color-playlist-dark); --on-playlist: var(--md-sys-color-on-playlist-dark);
            --elevation-1: var(--md-sys-elevation-1-dark); --elevation-2: var(--md-sys-elevation-2-dark); --elevation-3: var(--md-sys-elevation-3-dark);
        }

        :root[data-theme="light"] {
            --primary: var(--md-sys-color-primary-light); --on-primary: var(--md-sys-color-on-primary-light);
            --primary-container: var(--md-sys-color-primary-container-light); --on-primary-container: var(--md-sys-color-on-primary-container-light);
            --bg: var(--md-sys-color-background-light); --on-bg: var(--md-sys-color-on-background-light);
            --surface: var(--md-sys-color-surface-light); --on-surface: var(--md-sys-color-on-surface-light);
            --surface-variant: var(--md-sys-color-surface-variant-light); --on-surface-variant: var(--md-sys-color-on-surface-variant-light);
            --outline: var(--md-sys-color-outline-light); --error: var(--md-sys-color-error-light);
            --playlist: var(--md-sys-color-playlist-light); --on-playlist: var(--md-sys-color-on-playlist-light);
            --elevation-1: var(--md-sys-elevation-1-light); --elevation-2: var(--md-sys-elevation-2-light); --elevation-3: var(--md-sys-elevation-3-light);
        }

        /* ==========================================================================
           2. GLOBAL RESETS & NATIVE APP FEEL
           ========================================================================== */
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        
        body {
            background-color: var(--bg);
            color: var(--on-bg);
            font-family: var(--font-family);
            line-height: 1.5;
            overflow-x: hidden;
            user-select: none;
            -webkit-user-select: none;
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
        }

        input, textarea, .allow-select { user-select: text; -webkit-user-select: text; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--surface-variant); border-radius: var(--radius-full); }

        /* Typography & Utilities */
        .text-primary { color: var(--primary); }
        .text-muted { color: var(--on-surface-variant); }
        .text-error { color: var(--error); }
        .font-bold { font-weight: 700; }
        .text-sm { font-size: 0.875rem; }
        .text-lg { font-size: 1.125rem; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }
        
        .flex { display: flex; }
        .flex-col { display: flex; flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
        .gap-4 { gap: 16px; }
        .p-4 { padding: 16px; }
        .mt-2 { margin-top: 8px; }
        .mt-4 { margin-top: 16px; }
        .mb-2 { margin-bottom: 8px; }
        .mb-4 { margin-bottom: 16px; }
        .w-full { width: 100%; }
        .hidden { display: none !important; }

        /* ==========================================================================
           3. APP SHELL COMPONENTS
           ========================================================================== */
        .app-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            background-color: var(--surface);
            box-shadow: var(--elevation-1);
            z-index: 10;
        }

        .app-title { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
        .header-actions { display: flex; gap: 8px; }

        .main-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            position: relative;
        }

        .app-footer {
            text-align: center;
            padding: 12px;
            background-color: var(--surface);
            font-size: 0.875rem;
            color: var(--on-surface-variant);
            box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
        }
        .app-footer a { color: var(--primary); text-decoration: none; font-weight: bold; }
        .app-footer a:active { opacity: 0.7; }

        /* Buttons */
        .icon-btn {
            background: transparent; border: none; color: var(--on-surface);
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: background-color 0.2s ease;
        }
        .icon-btn:active { background-color: var(--surface-variant); }
        .icon-btn svg { width: 24px; height: 24px; fill: currentColor; }

        .btn {
            background-color: var(--primary); color: var(--on-primary);
            border: none; padding: 12px 24px; border-radius: var(--radius-full);
            font-size: 1rem; font-weight: 600; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: opacity 0.2s ease, transform 0.1s ease;
            box-shadow: var(--elevation-1);
        }
        .btn:active { opacity: 0.8; transform: scale(0.98); }
        .btn-outline { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; }
        .btn-secondary { background-color: var(--surface-variant); color: var(--on-surface-variant); border: none; box-shadow: none; }

        .fab {
            position: fixed; bottom: 80px; right: 20px;
            width: 56px; height: 56px; background-color: var(--primary-container);
            color: var(--on-primary-container); border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--elevation-3); cursor: pointer; border: none; z-index: 50;
            transition: transform 0.2s ease;
        }
        .fab:active { transform: scale(0.95); }
        .fab svg { width: 28px; height: 28px; fill: currentColor; }

        /* Input Fields */
        .input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
        .input-label { font-size: 0.875rem; font-weight: 500; color: var(--on-surface-variant); }
        .input-field {
            width: 100%; padding: 14px 16px; background-color: var(--surface-variant);
            color: var(--on-surface); border: 2px solid transparent;
            border-radius: var(--radius-md); font-size: 1rem; outline: none;
            transition: border-color 0.2s ease, background-color 0.2s ease; font-family: inherit;
        }
        .input-field:focus { border-color: var(--primary); background-color: var(--surface); }

        /* ==========================================================================
           4. DRAG & DROP AND GRIDS (Smart Sorting)
           ========================================================================== */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 16px;
            padding-bottom: 80px;
            position: relative;
        }

        /* Dragging States */
        .sortable-ghost { opacity: 0.4; background-color: var(--surface-variant); border: 2px dashed var(--primary); }
        .sortable-drag { cursor: grabbing !important; box-shadow: var(--elevation-3); transform: scale(1.05); z-index: 100; }
        .grid-item { position: relative; transition: transform 0.2s ease; touch-action: pan-y; }

        /* Folder Card */
        .folder-card {
            background-color: var(--surface); border-radius: var(--radius-lg); padding: 20px;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
            box-shadow: var(--elevation-1); cursor: pointer; text-align: center; height: 100%;
        }
        .folder-card:active { background-color: var(--surface-variant); }
        .folder-icon { width: 56px; height: 56px; fill: var(--primary); }
        .folder-title { font-weight: 700; font-size: 1.1rem; color: var(--on-surface); word-break: break-word; }
        .folder-meta { font-size: 0.8rem; color: var(--on-surface-variant); background: var(--surface-variant); padding: 4px 12px; border-radius: var(--radius-full); }
        
        .context-menu-btn {
            position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
            background: rgba(0,0,0,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center;
            border: none; color: var(--on-surface); z-index: 2; cursor: pointer; backdrop-filter: blur(4px);
        }
        .context-menu-btn svg { width: 18px; height: 18px; fill: currentColor; }

        /* Video / Playlist Card */
        .video-card {
            background-color: var(--surface); border-radius: var(--radius-md); overflow: hidden;
            box-shadow: var(--elevation-1); cursor: pointer; display: flex; flex-direction: column; height: 100%;
        }
        .video-card:active { transform: scale(0.98); }
        .video-thumbnail-container { position: relative; width: 100%; padding-top: 56.25%; background-color: #000; }
        .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        .play-overlay {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 48px; height: 48px; background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.2);
        }
        .play-overlay svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
        .video-info { padding: 12px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
        .video-title { font-size: 0.95rem; font-weight: 700; color: var(--on-surface); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        .type-badge {
            position: absolute; top: 8px; left: 8px; font-size: 0.7rem; font-weight: 800;
            padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .badge-video { background-color: var(--primary); color: var(--on-primary); }
        .badge-playlist { background-color: var(--playlist); color: var(--on-playlist); }
        
        .drag-handle {
            position: absolute; bottom: 8px; right: 8px; width: 32px; height: 32px;
            background: var(--surface-variant); border-radius: 50%; display: flex; align-items: center; justify-content: center;
            border: none; color: var(--on-surface-variant); z-index: 2; cursor: grab;
        }
        .drag-handle:active { cursor: grabbing; background: var(--primary); color: var(--on-primary); }
        .drag-handle svg { width: 20px; height: 20px; fill: currentColor; }

        /* ==========================================================================
           5. PLAYER VIEWS (Standard Video vs Playlist Hub)
           ========================================================================== */
        .player-view {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--bg); z-index: 20; display: flex; flex-direction: column;
            transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .player-view.active { transform: translateY(0); }
        .player-header { display: flex; align-items: center; padding: 12px 16px; background-color: var(--surface); box-shadow: var(--elevation-1); z-index: 21; }
        .iframe-container { width: 100%; flex: 1; background-color: #000; position: relative; }
        .iframe-container iframe { width: 100%; height: 100%; border: none; position: absolute; top:0; left:0; }
        
        /* Playlist Specific styling to give more height to iframe on mobile to fit youtube's internal playlist UI */
        .player-view.playlist-mode .iframe-container { flex: 2; }
        .player-view.playlist-mode .player-notes { flex: 1; }

        .player-notes {
            flex: 1; background-color: var(--surface); padding: 16px; display: flex; flex-direction: column;
            border-top: 1px solid var(--outline); box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
        }
        .notes-textarea {
            flex: 1; width: 100%; background-color: var(--surface-variant); color: var(--on-surface);
            border: 2px solid transparent; border-radius: var(--radius-md); padding: 16px;
            font-family: inherit; resize: none; outline: none; font-size: 1rem; line-height: 1.6;
            transition: border-color 0.2s;
        }
        .notes-textarea:focus { border-color: var(--primary); }

        /* ==========================================================================
           6. MODALS & DIALOGS
           ========================================================================== */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
            z-index: 100; display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
        }
        .modal-overlay.active { opacity: 1; pointer-events: auto; }
        .modal-content {
            background-color: var(--surface); width: 92%; max-width: 420px;
            border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--elevation-3);
            transform: scale(0.95) translateY(10px); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column; gap: 16px; max-height: 90vh; overflow-y: auto;
        }
        .modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
        .modal-header { display: flex; align-items: center; justify-content: space-between; }
        .modal-title { font-size: 1.25rem; font-weight: 700; color: var(--on-surface); }
        .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }

        /* Toast / Snackbar */
        .snackbar {
            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
            background-color: var(--on-surface); color: var(--surface); padding: 14px 24px;
            border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 600;
            z-index: 200; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--elevation-2);
            display: flex; align-items: center; gap: 12px; white-space: nowrap;
        }
        .snackbar.active { transform: translateX(-50%) translateY(0); }

        #file-import { display: none; }
        
        /* Auto-detect info banner in add modal */
        .detect-banner {
            background: var(--primary-container); color: var(--on-primary-container);
            padding: 12px; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600;
            display: flex; align-items: center; gap: 8px;
        }
        .detect-banner svg { width: 20px; height: 20px; fill: currentColor; }

/* ===== FINAL FIX PATCH ===== */

.grid-container{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;
    gap:18px !important;
    padding:18px !important;
    align-items:start;
}

.grid-item{
    width:100%;
    display:block;
}

.video-card,
.folder-card{
    width:100%;
    height:100%;
    border-radius:22px !important;
    overflow:hidden;
    transition:.25s;
}

.video-card:hover,
.folder-card:hover{
    transform:translateY(-3px);
}

.video-thumbnail-container{
    overflow:hidden;
}

.video-thumbnail{
    transition:.35s;
}

.video-card:hover .video-thumbnail{
    transform:scale(1.05);
}

.video-info{
    padding:14px !important;
}

body{
    overscroll-behavior:none;
    -webkit-font-smoothing:antialiased;
}

.modal-content{
    border-radius:28px !important;
}

.app-header{
    position:sticky;
    top:0;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

/* ==========================================
   PRIVATE SPACE
   ========================================== */
#private-space-bar {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 4px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
    color: #fff;
    box-shadow: var(--elevation-1);
}
#private-space-bar.active { display: flex; }
#private-space-bar svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
#private-space-bar .psb-label { font-weight: 700; font-size: 0.95rem; flex: 1; }
#private-space-bar .psb-action {
    background: rgba(255,255,255,0.18); border: none; color: #fff;
    padding: 7px 12px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, transform .1s ease;
}
#private-space-bar .psb-action:active { background: rgba(255,255,255,0.32); transform: scale(0.95); }
.folder-card.is-private-card { border: 1.5px solid #8b5cf6; }
.pin-dots { display:flex; gap:14px; justify-content:center; margin: 8px 0 4px; }
.pin-dots span { width:16px; height:16px; border-radius:50%; background: var(--surface-variant); border: 1.5px solid var(--outline); transition: background .15s ease, transform .15s ease; }
.pin-dots span.filled { background: var(--primary); border-color: var(--primary); transform: scale(1.1); }
.pin-keypad { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:8px; }
.pin-key {
    background: var(--surface-variant); border:none; border-radius: var(--radius-md);
    padding: 16px 0; font-size: 1.2rem; font-weight: 700; color: var(--on-surface);
    cursor:pointer; -webkit-tap-highlight-color: transparent; transition: background .12s ease, transform .08s ease;
}
.pin-key:active { background: var(--primary); color: var(--on-primary); transform: scale(0.95); }
.pin-key.pin-key-ghost { background: transparent; cursor: default; }

/* ==========================================
   NATIVE-FEEL TOUCH POLISH
   ========================================== */
button, .icon-btn, .btn, .fab, .folder-card, .video-card, .action-sheet-item,
.context-menu-btn, .drag-handle, .pin-key, .clear-search-btn {
    -webkit-tap-highlight-color: transparent;
}
.folder-card, .video-card {
    transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s ease, background-color .16s ease;
}
.folder-card:active, .video-card:active {
    transform: scale(0.965);
    box-shadow: var(--elevation-1);
}
.action-sheet-item { transition: background-color .15s ease, transform .1s ease; }
.action-sheet-item:active { transform: scale(0.98); }
.icon-btn { will-change: background-color; }
.modal-content { will-change: transform, opacity; }
.player-view { will-change: transform; }

.app-footer{
    padding-bottom:calc(env(safe-area-inset-bottom) + 12px);
}

/* ==========================================================================
   DIRECTORY SEARCH BAR — big-app style (elevated pill, animated focus state)
   Single source of truth; IDs/classes unchanged so search.js needs no edits.
   ========================================================================== */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
.directory-search-input::-webkit-search-cancel-button,
.directory-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.directory-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 18px 0 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--outline);
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: var(--elevation-1);
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s ease,
              transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.directory-search:hover {
  box-shadow: var(--elevation-2);
}

.directory-search:focus-within {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent), var(--elevation-2);
  transform: translateY(-1px);
}

.search-icon {
  width: 22px;
  height: 22px;
  color: var(--on-surface-variant);
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.directory-search:focus-within .search-icon {
  color: var(--primary);
  transform: scale(1.08);
}

.directory-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  color: var(--on-surface);
  min-width: 0;
  padding: 3px 0;
}

.directory-search-input::placeholder {
  color: var(--on-surface-variant);
  opacity: 0.65;
  font-weight: 400;
}

.clear-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface-variant);
  cursor: pointer;
  color: var(--on-surface-variant);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
  flex-shrink: 0;
}

.clear-search-btn:hover { background: color-mix(in srgb, var(--on-surface) 12%, transparent); color: var(--on-surface); }
.clear-search-btn:active { background: color-mix(in srgb, var(--on-surface) 18%, transparent); transform: scale(0.88); color: var(--on-surface); }

#search-status, #content-search-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--on-surface-variant);
    margin: -6px 4px 14px;
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .directory-search {
        padding: 12px 16px;
        gap: 10px;
    }
    .directory-search-input {
        font-size: 15px;
    }
    .search-icon {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   NESTED FOLDERS: Breadcrumb & Section Labels
   ========================================================================== */
.folder-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    font-size: 0.8rem; color: var(--on-surface-variant); margin-bottom: 12px;
}
.folder-breadcrumb .crumb { cursor: pointer; transition: color .15s ease; }
.folder-breadcrumb .crumb:hover, .folder-breadcrumb .crumb:active { color: var(--primary); }
.folder-breadcrumb .crumb.current { color: var(--on-surface); font-weight: 700; cursor: default; }
.folder-breadcrumb svg { width: 14px; height: 14px; fill: currentColor; opacity: .6; }

.section-label {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--on-surface-variant); margin: 4px 2px 10px;
}
#subfolders-section { margin-bottom: 8px; }

/* ==========================================================================
   FAB ACTION SHEET
   ========================================================================== */
.action-sheet { padding: 20px !important; }
.action-sheet-list { display: flex; flex-direction: column; gap: 6px; }
.action-sheet-item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: transparent; border: none; text-align: left; cursor: pointer;
    padding: 12px 8px; border-radius: var(--radius-md); color: var(--on-surface);
    transition: background-color .15s ease;
}
.action-sheet-item:active { background-color: var(--surface-variant); }
.action-sheet-item.disabled { opacity: .35; pointer-events: none; }
.action-sheet-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary-container); color: var(--on-primary-container);
    display: flex; align-items: center; justify-content: center;
}
.action-sheet-icon svg { width: 22px; height: 22px; fill: currentColor; }

/* ==========================================================================
   NOTE & PDF CARDS (reuse video-card shell, swap the visual body)
   ========================================================================== */
.item-icon-card {
    width: 100%; padding-top: 56.25%; position: relative;
    background: var(--surface-variant); display: flex; align-items: center; justify-content: center;
}
.item-icon-card svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; }
.badge-note { background-color: var(--secondary); color: #fff; }
.badge-pdf { background-color: var(--error); color: #fff; }
.note-preview-text {
    font-size: 0.8rem; color: var(--on-surface-variant);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==========================================================================
   PDF VIEWER (PDF.js canvas pages, lazy-rendered, smooth scroll)
   ========================================================================== */
.pdf-scroll-area {
    flex: 1; overflow-y: auto; overflow-x: hidden; background: #525659;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.pdf-pages-container {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 40px;
}
.pdf-page-shell {
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); position: relative; max-width: 100%;
}
.pdf-page-shell canvas { display: block; max-width: 100%; height: auto; }
.pdf-scroll-area { touch-action: pan-y; overscroll-behavior: contain; }
.pdf-pages-container {
    transform-origin: 0 0;
    transition: transform 0.06s linear;
    will-change: transform;
}
.pdf-pages-container.panning { transition: none; }
.pdf-page-shell .pdf-page-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #888; font-size: 0.8rem;
}

/* ==========================================================================
   GLOBAL SEARCH — single full-screen search (replaces the old per-view
   scoped search bars). Same slide/fade pattern as .player-view, but slides
   down from the top since it's reached from the header, not a card.
   ========================================================================== */
.global-search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg); z-index: 150; display: flex; flex-direction: column;
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.global-search-overlay.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.gs-header {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--surface); box-shadow: var(--elevation-1); flex-shrink: 0;
}
.gs-input-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--surface-variant); border-radius: var(--radius-full);
    padding: 8px 14px; min-width: 0;
}
.gs-input-wrap > svg { width: 20px; height: 20px; fill: var(--on-surface-variant); flex-shrink: 0; }
.gs-input {
    flex: 1; border: none; outline: none; background: transparent; font-size: 1rem;
    color: var(--on-surface); min-width: 0;
}
.gs-clear { display: none; flex-shrink: 0; }
.gs-clear.show { display: flex; align-items: center; justify-content: center; }
.gs-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 24px; }
.gs-hint, .gs-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 70px 24px; text-align: center; color: var(--on-surface-variant); gap: 12px;
}
.gs-hint svg, .gs-empty svg { width: 46px; height: 46px; opacity: .35; }
.gs-section-label {
    padding: 14px 16px 6px; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--on-surface-variant);
}
.gs-result {
    display: flex; align-items: center; gap: 14px; padding: 10px 16px; cursor: pointer;
    transition: background-color .15s ease;
}
.gs-result:active { background: var(--surface-variant); }
.gs-result-icon {
    width: 42px; height: 42px; border-radius: var(--radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: var(--surface-variant);
}
.gs-result-icon svg { width: 21px; height: 21px; fill: var(--on-surface-variant); }
.gs-result-icon.is-folder svg { fill: var(--primary); }
.gs-result-body { min-width: 0; flex: 1; }
.gs-result-title {
    font-weight: 600; font-size: .95rem; color: var(--on-surface);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-result-path {
    font-size: .78rem; color: var(--on-surface-variant); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-mark { background: rgba(22, 163, 74, .28); color: inherit; border-radius: 3px; padding: 0 1px; }