/* Study Viewer v3.18 | Copyright (c) 2026 Ayush Tiwari (Panthera Store). All rights reserved. See LICENSE.txt */
/* ==========================================================================
   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: #066c4a;
            --md-sys-color-on-primary-light: #ffffff;
            --md-sys-color-primary-container-light: #d2f5e4;
            --md-sys-color-on-primary-container-light: #04382a;
            --md-sys-color-secondary-light: #1d5fe0;
            --md-sys-color-background-light: #f2f6f5;
            --md-sys-color-on-background-light: #0d1a26;
            --md-sys-color-surface-light: #ffffff;
            --md-sys-color-on-surface-light: #0d1a26;
            --md-sys-color-surface-variant-light: #e6eeec;
            --md-sys-color-on-surface-variant-light: #4f6070;
            --md-sys-color-outline-light: #d3ded9;
            --md-sys-color-error-light: #c42b1c;
            --md-sys-color-playlist-light: #8b5cf6;
            --md-sys-color-on-playlist-light: #ffffff;
            --md-sys-elevation-1-light: 0 1px 2px rgb(13 40 30 / 0.07), 0 0 0 1px rgb(13 40 30 / 0.02);
            --md-sys-elevation-2-light: 0 6px 14px -4px rgb(13 40 30 / 0.14), 0 2px 5px -2px rgb(13 40 30 / 0.08);
            --md-sys-elevation-3-light: 0 18px 32px -10px rgb(13 40 30 / 0.22), 0 6px 12px -6px rgb(13 40 30 / 0.12);

            /* Dark Theme Tokens */
            --md-sys-color-primary-dark: #3fe0a0;
            --md-sys-color-on-primary-dark: #032a1c;
            --md-sys-color-primary-container-dark: #0f3f33;
            --md-sys-color-on-primary-container-dark: #b8f6d9;
            --md-sys-color-secondary-dark: #7db8ff;
            --md-sys-color-background-dark: #070c16;
            --md-sys-color-on-background-dark: #f3f7fc;
            --md-sys-color-surface-dark: #0e1626;
            --md-sys-color-on-surface-dark: #e9eff8;
            --md-sys-color-surface-variant-dark: #17223a;
            --md-sys-color-on-surface-variant-dark: #a3b3ca;
            --md-sys-color-outline-dark: #25324b;
            --md-sys-color-error-dark: #ff8a8a;
            --md-sys-color-playlist-dark: #b6a2ff;
            --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; }

        /* v3.18: custom WebKit scrollbars only where a mouse exists. On phones the native overlay bar
           (thin, fades away, follows color-scheme) is used, so nothing sticks out of rounded sheets. */
        @media (hover: hover) and (pointer: fine) {
            ::-webkit-scrollbar { width: 8px; height: 8px; }
            ::-webkit-scrollbar-track { background: transparent; }
            ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--on-surface) 38%, transparent); 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; }


/* ==========================================================================
   v2 — PERFORMANCE (GPU / RAM) + RESPONSIVE LAYER
   Appended last on purpose: it only overrides, nothing above was edited, so the
   look is unchanged except where a rule below says otherwise.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- GPU: no live blur anywhere. backdrop-filter forces a full-screen offscreen
        render every frame (one per card!) — the main cause of lag on 2 GB phones. ---- */
.context-menu-btn {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.app-header {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    position: relative;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.modal-overlay {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.68);
}

/* ---- GPU: no permanent compositor layers (will-change kept ~16 layers alive at all times) ---- */
.icon-btn, .modal-content, .player-view, .pdf-pages-container { will-change: auto; }

/* ---- GPU/RAM: hidden full-screen layers are really hidden (and not focusable) ---- */
.modal-overlay { visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.modal-overlay.active { visibility: visible; transition: opacity .2s ease, visibility 0s; }

.player-view { visibility: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; }
/* transform:none (not translateY(0)) -> no compositing layer around the YouTube iframe while it
   plays, so rotating the phone no longer re-rasterises a stale layer (the few-second glitchy frame). */
.player-view.active { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; }

.global-search-overlay { visibility: hidden; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear .25s; }
.global-search-overlay.active { visibility: visible; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s; }

.player-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.gs-header { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }

/* ---- Hover effects only where a real hover exists (touch screens keep "stuck" hover = extra layers) ---- */
@media (hover: none) {
    .video-card:hover, .folder-card:hover { transform: none; }
    .video-card:hover .video-thumbnail { transform: none; }
    .video-thumbnail { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Scrolling ---- */
.main-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.grid-sentinel { height: 1px; width: 100%; pointer-events: none; }
.video-thumbnail { background: #000; }

/* ---- Bottom clearance so the last row is never hidden behind the + button ---- */
.grid-container { padding-bottom: 96px !important; }
.app-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* ---- Touch: bigger invisible hit areas (visual size unchanged) ---- */
.context-menu-btn::after, .drag-handle::after { content: ''; position: absolute; inset: -7px; }
.modal-content { max-height: 90vh; max-height: 90dvh; }
.snackbar { max-width: calc(100vw - 24px); }

/* ---- Phones: 2 columns instead of 1 (the old minmax(170px) rule gave a single huge column on
        most phones). To go back to the old look, delete this block. ---- */
@media (max-width: 599px) {
    .main-content { padding-top: 14px; padding-bottom: 14px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
    .grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 6px 2px 96px !important; }
    .folder-card { padding: 16px 10px; gap: 10px; }
    .folder-title { font-size: 1rem; }
    .video-info { padding: 10px !important; }
    .video-title { font-size: .9rem; }
    .modal-content { padding: 20px; }
    .snackbar { white-space: normal; text-align: center; width: max-content; }
}
@media (max-width: 339px) {
    .grid-container { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- Tablets / desktop ---- */
@media (min-width: 900px) {
    .main-content { padding-top: 24px; padding-bottom: 24px; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
    .grid-container { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 20px !important; }
    .modal-content { max-width: 460px; }
}
@media (min-width: 1500px) {
    .grid-container { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }
}

/* ---- Phone held sideways: video on the left, notes on the right (instead of two thin strips) ---- */
@media (orientation: landscape) and (max-height: 520px) {
    .player-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 38%); grid-template-rows: auto minmax(0, 1fr); }
    .player-view > .player-header { grid-column: 1 / -1; padding-top: 8px; padding-bottom: 8px; }
    .player-view > .iframe-container { grid-column: 1; grid-row: 2; min-height: 0; }
    .player-view > .player-notes { grid-column: 2; grid-row: 2; min-height: 0; border-top: none; border-left: 1px solid var(--outline); }
    #note-editor-view > .player-notes { grid-column: 1 / -1; border-left: none; }
    .app-header { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
    .modal-content { max-height: 94dvh; }
}

/* Online PDF card: placeholder icon when no cover image was chosen */
.pdflink-ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; fill: var(--error); }

/* ==========================================================================
   FINAL POLISH
   ========================================================================== */

/* ---- 1. Gap fix: the 96px "clear the + button" padding was applied to EVERY grid, so the
        Folders grid left a huge hole above "Content". Now each grid only has a small padding and
        the clearance lives once, at the very bottom of the page. ---- */
.grid-container { padding-bottom: 6px !important; }
#view-folders::after, #view-videos::after { content: ""; display: block; height: 96px; }
#subfolders-section { margin-bottom: 4px; }
.section-label { margin-top: 10px; }

/* ---- 2. Notes: clean scrolling (no dark 6px strip, no double scroll area) ---- */
.player-view > .player-notes { min-height: 0; overflow: hidden; }
#note-editor-view > .player-notes { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
#note-editor-content {
    height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding-right: 12px;
}

/* ---- 3. Clicks: the + button never floats over the player / note editor / search ---- */
body:has(.player-view.active) .fab,
body:has(.global-search-overlay.active) .fab { display: none; }
/* bigger, easier touch target for the edit (pencil) button */
.context-menu-btn { width: 36px; height: 36px; }
.context-menu-btn::after { content: ""; position: absolute; inset: -6px; }

/* (Practical Books styles live in the v3 redesign block at the end of this file) */

/* ==========================================================================
   v3 PREMIUM REDESIGN
   UI-only layer. No selector, id or storage key the JavaScript relies on was
   renamed; this block restyles the existing markup and adds the new pieces
   (drawer, welcome banner, sheets, guide). To roll back, delete from here down.
   Motion budget: transform + opacity only, one-shot or slow loops, paused for
   prefers-reduced-motion. No continuous box-shadow / filter animation.
   ========================================================================== */

:root {
    --outline-soft: color-mix(in srgb, var(--outline) 62%, transparent);
    --tint: color-mix(in srgb, var(--primary) 11%, transparent);
    --tint-strong: color-mix(in srgb, var(--primary) 20%, transparent);
    --surface-2: color-mix(in srgb, var(--surface-variant) 55%, var(--surface));
    --ease-out: cubic-bezier(.2, 0, 0, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --page-x: max(12px, env(safe-area-inset-left, 0px));
    --font-family: Roboto, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
:root[data-theme="dark"], :root[data-theme="light"] { --outline-soft: color-mix(in srgb, var(--outline) 62%, transparent); }

body { letter-spacing: .005em; }
.main-content { overflow-x: hidden; }
.ic { width: 24px; height: 24px; flex-shrink: 0; }
.inline-ic { width: 20px; height: 20px; vertical-align: -4px; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:focus-visible, .icon-btn:focus-visible { outline-offset: 3px; }

/* ---------- Shared effects: shine sweep + ripple ---------- */
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::after, .hb-card::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: sv-shine 7s var(--ease-out) infinite; animation-delay: var(--shine-delay, 2s);
}
.hb-card:nth-child(n+5)::after { animation: none; display: none; }
.hb-card:nth-child(2)::after { --shine-delay: 3.4s; }
.hb-card:nth-child(3)::after { --shine-delay: 4.8s; }
.hb-card:nth-child(4)::after { --shine-delay: 6.2s; }
@keyframes sv-shine { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

.sv-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
    background: currentColor; opacity: 0; transform: scale(0);
    animation: sv-ripple .55s var(--ease-out);
}
@keyframes sv-ripple { 0% { opacity: .2; transform: scale(0); } 100% { opacity: 0; transform: scale(1); } }
.btn, .icon-btn, .drawer-item, .set-row, .action-sheet-item, .seg-btn, .wh-cta, .pin-key { position: relative; overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
    min-height: 48px; padding: 12px 22px; font-size: .95rem; font-weight: 650; letter-spacing: .01em;
    background-color: var(--primary); color: var(--on-primary); border: 1.5px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
    transition: transform .16s var(--ease-out), opacity .2s ease, background-color .2s ease;
}
.btn:active { transform: scale(.97); opacity: .92; }
.btn .ic, .btn svg { width: 20px; height: 20px; }
.btn-outline { background: transparent; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: none; }
.btn-secondary { background: var(--surface-variant); color: var(--on-surface); box-shadow: none; }
.btn-danger { background: var(--error); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--error) 30%, transparent); }
.btn.w-full { width: 100%; }
.icon-btn { width: 44px; height: 44px; color: var(--on-surface); transition: background-color .2s ease, transform .14s var(--ease-out); }
.icon-btn:active { background-color: var(--tint-strong); transform: scale(.92); }
.icon-btn .ic, .icon-btn svg { width: 24px; height: 24px; }
.input-field { border-radius: 14px; border: 1.5px solid var(--outline-soft); background: var(--surface-2); }
.input-field:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--tint); }

/* ---------- Header ---------- */
.app-header {
    display: flex; align-items: center; justify-content: flex-start; gap: 4px;
    min-height: calc(60px + env(safe-area-inset-top, 0px));
    padding: calc(6px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px));
    background: var(--surface); box-shadow: none; border-bottom: 1px solid var(--outline-soft); z-index: 10;
}
.app-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; font-size: 1.18rem; font-weight: 750; letter-spacing: -.01em; }
.app-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; fill: none; }
.header-actions { display: flex; gap: 2px; margin-left: auto; }
.menu-btn { margin-right: 2px; }

/* ---------- Navigation drawer ---------- */
.drawer-overlay { justify-content: flex-start; align-items: stretch; background-color: rgba(3, 8, 20, .55); transition: opacity .3s ease, visibility 0s linear .34s; }
.drawer-overlay.active { transition: opacity .3s ease, visibility 0s; }
.drawer {
    width: min(84vw, 316px); height: 100%; display: flex; flex-direction: column;
    background: var(--surface); border-radius: 0 28px 28px 0; box-shadow: 8px 0 32px rgba(0,0,0,.28);
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(-104%); transition: transform .34s var(--ease-out);
}
.drawer-overlay.active .drawer { transform: none; }
.drawer-head {
    display: flex; align-items: center; gap: 14px; padding: 26px 22px 20px;
    background: linear-gradient(160deg, var(--tint-strong), transparent 70%);
}
.drawer-logo { width: 48px; height: 48px; flex-shrink: 0; }
.drawer-brand { display: flex; flex-direction: column; min-width: 0; }
.drawer-brand strong { font-size: 1.2rem; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.drawer-brand span { font-size: .8rem; color: var(--on-surface-variant); }
.drawer-list { flex: 1; overflow-y: auto; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.drawer-item {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 52px; padding: 0 16px;
    background: transparent; border: none; border-radius: 16px; color: var(--on-surface);
    font-size: .98rem; font-weight: 550; text-align: left; cursor: pointer;
    transition: background-color .18s ease, transform .14s var(--ease-out);
}
.drawer-item .ic { color: var(--on-surface-variant); transition: color .2s ease, transform .25s var(--ease-spring); }
.drawer-item:active { background: var(--tint-strong); transform: scale(.98); }
.drawer-item:hover { background: var(--tint); }
.drawer-item:active .ic { color: var(--primary); transform: scale(1.12); }
.drawer-item .di-label { flex: 1; min-width: 0; }
.drawer-item .di-value { font-size: .78rem; font-weight: 700; color: var(--primary); background: var(--tint); padding: 4px 10px; border-radius: 99px; }
.drawer-sep { height: 1px; margin: 8px 16px; background: var(--outline-soft); }
.drawer-foot { padding: 14px 24px 18px; font-size: .75rem; color: var(--on-surface-variant); opacity: .8; }
/* staggered item entrance (transform + opacity, once, on open) */
.drawer-overlay.active .drawer-item { animation: sv-slide-in .4s var(--ease-out) backwards; }
.drawer-overlay.active .drawer-item:nth-child(1) { animation-delay: .06s; } .drawer-overlay.active .drawer-item:nth-child(2) { animation-delay: .09s; }
.drawer-overlay.active .drawer-item:nth-child(3) { animation-delay: .12s; } .drawer-overlay.active .drawer-item:nth-child(4) { animation-delay: .15s; }
.drawer-overlay.active .drawer-item:nth-child(5) { animation-delay: .18s; } .drawer-overlay.active .drawer-item:nth-child(7) { animation-delay: .22s; }
.drawer-overlay.active .drawer-item:nth-child(8) { animation-delay: .25s; } .drawer-overlay.active .drawer-item:nth-child(9) { animation-delay: .28s; }
@keyframes sv-slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---------- Page / view transitions ---------- */
#view-folders, #view-videos { animation: sv-view-in .3s var(--ease-out); }
@keyframes sv-view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Welcome / install banner ---------- */
.welcome-hero {
    position: relative; display: flex; align-items: center; gap: 4px; min-height: 124px;
    margin: 2px 0 18px; padding: 16px 6px 16px 18px; border-radius: 26px; color: #ecfdf5; cursor: default;
    background:
        radial-gradient(circle at 84% 50%, rgba(74,222,128,.26), transparent 52%),
        radial-gradient(rgba(74,222,128,.16) 1.1px, transparent 1.3px) 0 0 / 18px 18px,
        linear-gradient(135deg, #04170d, #0a3320 62%, #0f4a2b);
    box-shadow: 0 8px 24px rgba(4, 60, 36, .28); border: 1px solid rgba(74,222,128,.18);
    transition: transform .2s var(--ease-out);
}
.welcome-hero.is-clickable { cursor: pointer; }
.welcome-hero.is-clickable:active { transform: scale(.985); }
.welcome-hero.hidden { display: none !important; }
.wh-text { flex: 1; min-width: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.wh-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #bbf7d0; padding: 4px 10px; border-radius: 99px; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.4); }
.wh-chip i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.wh-title { margin: 9px 0 0; font-size: 1.08rem; line-height: 1.22; font-weight: 800; color: #f0fdf4; letter-spacing: -.005em; }
.wh-sub { margin: 2px 0 0; font-size: .84rem; color: #86efac; }
.wh-cta {
    margin-top: 11px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border: none; border-radius: 99px;
    background: #4ade80; color: #052e16; font-size: .86rem; font-weight: 750; cursor: pointer; transition: transform .15s var(--ease-out);
}
.wh-cta .ic { width: 20px; height: 20px; }
.wh-cta:active { transform: scale(.96); }
.wh-cta.hidden { display: none !important; }
.wh-art { width: 42%; max-width: 190px; flex-shrink: 0; align-self: stretch; height: auto; z-index: 1; margin-right: -4px; }
.wh-books { transform-box: fill-box; transform-origin: 50% 100%; animation: sv-float 6s ease-in-out infinite; }
.wh-play { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-pulse 3.2s ease-in-out infinite; }
.wh-pdf { animation: sv-float 5s ease-in-out -2s infinite; }
.wh-sp { transform-box: fill-box; transform-origin: 50% 50%; animation: sv-twinkle 3s ease-in-out infinite; }
.wh-sp2 { animation-delay: -1.4s; }
@keyframes sv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes sv-twinkle { 0%, 100% { opacity: .85; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.7) rotate(25deg); } }
.wh-dismiss { position: absolute; top: 6px; right: 6px; z-index: 4; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(0,0,0,.22); color: #d1fae5; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s var(--ease-out), background-color .2s; }
.wh-dismiss .ic { width: 18px; height: 18px; }
.wh-dismiss:active { transform: scale(.88); background: rgba(0,0,0,.4); }

/* ---------- Section headers ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 12px; }
.section-title { font-size: 1.32rem; font-weight: 800; letter-spacing: -.015em; color: var(--on-bg); display: flex; align-items: center; gap: 10px; min-width: 0; }
.section-title::before { content: ""; width: 4px; height: 22px; border-radius: 4px; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 40%, transparent)); transform-origin: 50% 100%; animation: sv-bar-in .5s var(--ease-out) backwards; flex-shrink: 0; }
@keyframes sv-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hint-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: .74rem; font-weight: 600; color: var(--on-surface-variant); background: var(--surface-variant); padding: 6px 11px 6px 9px; border-radius: 99px; }
.hint-chip svg { width: 15px; height: 15px; }
.section-label { font-size: .74rem; letter-spacing: .08em; margin: 8px 4px 10px; }
#view-videos .icon-btn#btn-back-to-folders { background: var(--surface) !important; border: 1px solid var(--outline-soft); box-shadow: var(--elevation-1) !important; }
#current-folder-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; }
.folder-breadcrumb { margin: 6px 2px 14px; }

/* ---------- Practical Books (home carousel) ---------- */
.home-books { background: none; border: none; border-radius: 0; padding: 0; margin: 4px 0 22px; overflow: visible; }
.hb-head { display: flex; align-items: center; gap: 12px; padding: 0 2px; margin-bottom: 12px; }
.hb-accent { width: 4px; min-height: 40px; border-radius: 4px; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 35%, transparent)); transform-origin: 50% 0; animation: sv-bar-in .5s var(--ease-out) backwards; }
.hb-head-text { flex: 1; min-width: 0; }
.hb-title { font-size: 1.32rem; line-height: 1.2; font-weight: 800; color: var(--on-bg); letter-spacing: -.015em; }
.hb-sub { font-size: .8rem; color: var(--on-surface-variant); margin-top: 1px; }
.hb-count {
    min-width: 36px; height: 30px; padding: 0 12px 0 10px; border-radius: 99px; background: var(--tint-strong); color: var(--primary);
    font-weight: 800; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px;
}
.hb-count::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.8c2.6-1.1 6-.9 9 1 3-1.9 6.4-2.1 9-1V18c-2.6-1.1-6-.9-9 1-3-1.9-6.4-2.1-9-1z'/%3E%3Cpath d='M12 6.8V19'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.8c2.6-1.1 6-.9 9 1 3-1.9 6.4-2.1 9-1V18c-2.6-1.1-6-.9-9 1-3-1.9-6.4-2.1-9-1z'/%3E%3Cpath d='M12 6.8V19'/%3E%3C/svg%3E") center / contain no-repeat; }

.hb-row {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth;
    margin: 0 calc(-1 * var(--page-x)); padding: 4px var(--page-x) 14px; scroll-padding: 0 var(--page-x);
    scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.hb-row::-webkit-scrollbar { display: none; }
.hb-card {
    position: relative; flex: 0 0 clamp(142px, 41vw, 178px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 0;
    text-align: left; cursor: pointer; font: inherit; color: var(--on-surface);
    background: var(--surface); border: 1px solid var(--outline-soft); border-radius: 22px; overflow: hidden; isolation: isolate;
    box-shadow: var(--elevation-1); transition: transform .22s var(--ease-out), box-shadow .22s ease;
    animation: sv-rise .45s var(--ease-out) backwards;
}
.hb-card:nth-child(2) { animation-delay: .06s; } .hb-card:nth-child(3) { animation-delay: .12s; } .hb-card:nth-child(4) { animation-delay: .18s; } .hb-card:nth-child(n+5) { animation-delay: .22s; }
.hb-card:active { transform: scale(.965); box-shadow: var(--elevation-1); }
.hb-cover { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: linear-gradient(145deg, #0f4a29, #22c55e); overflow: hidden; }
.hb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.hb-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8%; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.14) 62%, transparent); }
.hb-cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.38), transparent); }
.hb-ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; color: #fff; opacity: .92; z-index: 1; }
.hb-badge {
    position: absolute; top: 9px; left: 9px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
    font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff;
    background: rgba(220, 38, 38, .94); padding: 4px 9px 4px 8px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.hb-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .9; }
.hb-meta { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px 12px; flex: 1; }
.hb-name { font-weight: 750; font-size: .9rem; line-height: 1.25; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.hb-folder { font-size: .74rem; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-open {
    margin-top: 10px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-weight: 700; font-size: .84rem; padding: 9px 12px; border-radius: 14px; background: var(--primary); color: var(--on-primary);
}
.hb-open svg { width: 17px; height: 17px; stroke: currentColor; fill: none; transition: transform .2s var(--ease-out); }
.hb-card:active .hb-open svg { transform: translateX(3px); }

/* ---------- Directory cards ---------- */
#folders-grid, #subfolders-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 2px 0 6px !important; }
.folder-card {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px;
    min-height: 76px; height: auto; padding: 12px 10px 12px 14px; text-align: left;
    background: var(--surface); border: 1px solid var(--outline-soft) !important; border-radius: 22px !important; box-shadow: var(--elevation-1); overflow: hidden;
    transition: transform .18s var(--ease-out), box-shadow .2s ease, background-color .2s ease;
}
.folder-card.is-private-card { border-color: #8b5cf6 !important; background: color-mix(in srgb, #8b5cf6 6%, var(--surface)); }
.folder-card:active { transform: scale(.975); background-color: var(--surface-2); }
.folder-icon { width: 50px; height: 50px; fill: none; transition: transform .3s var(--ease-spring); }
.folder-card:active .folder-icon { transform: scale(1.1) rotate(-4deg); }
.folder-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.folder-title { font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.005em; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.folder-meta { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 650; color: var(--primary); background: var(--tint); padding: 3px 10px; border-radius: 99px; }
.context-menu-btn, .drag-handle {
    position: relative; inset: auto; top: auto; right: auto; bottom: auto; width: 38px; height: 38px; border-radius: 50%; border: none;
    background: var(--surface-variant); color: var(--on-surface-variant); display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .18s ease, color .18s ease, transform .15s var(--ease-out);
}
.context-menu-btn svg { width: 19px; height: 19px; fill: none; }
.drag-handle svg { width: 20px; height: 20px; fill: none; }
.context-menu-btn:active { background: var(--tint-strong); color: var(--primary); transform: scale(.9); }
.drag-handle { background: transparent; cursor: grab; touch-action: none; }
.folder-card .drag-handle { width: 30px; }
.drag-handle:active { background: var(--primary); color: var(--on-primary); }
.sortable-drag { box-shadow: 0 14px 34px rgba(0,0,0,.3); transform: scale(1.03); }
.sortable-ghost { border-radius: 22px; border: 2px dashed var(--primary); background: var(--tint); }
@media (hover: hover) {
    .folder-card:hover, .hb-card:hover, .video-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }
    .hb-card:hover .hb-cover img { transform: scale(1.04); }
    .context-menu-btn:hover { background: var(--tint-strong); color: var(--primary); }
}
@media (hover: none) { .folder-card:hover, .hb-card:hover, .video-card:hover { transform: none; } }

/* staggered card entrance — animates the inner card, never .grid-item (drag uses position:fixed) */
.folder-card, .video-card { animation: sv-rise .38s var(--ease-out) backwards; }
.grid-item:nth-child(2) > .folder-card, .grid-item:nth-child(2) > .video-card { animation-delay: .04s; }
.grid-item:nth-child(3) > .folder-card, .grid-item:nth-child(3) > .video-card { animation-delay: .08s; }
.grid-item:nth-child(4) > .folder-card, .grid-item:nth-child(4) > .video-card { animation-delay: .12s; }
.grid-item:nth-child(5) > .folder-card, .grid-item:nth-child(5) > .video-card { animation-delay: .16s; }
.grid-item:nth-child(n+6) > .folder-card, .grid-item:nth-child(n+6) > .video-card { animation-delay: .2s; }
@keyframes sv-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Content cards (videos / notes / PDFs) ---------- */
.video-card { border: 1px solid var(--outline-soft); border-radius: 20px !important; background: var(--surface); box-shadow: var(--elevation-1); transition: transform .18s var(--ease-out), box-shadow .2s ease; }
.video-card:active { transform: scale(.97); }
.video-card .context-menu-btn { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; z-index: 4; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.video-info { padding: 12px !important; gap: 6px; }
.video-title { font-size: .9rem; font-weight: 700; line-height: 1.3; }
.video-info .drag-handle { width: 32px; height: 32px; background: var(--surface-variant); }
.type-badge { border-radius: 99px; padding: 4px 10px; font-size: .62rem; letter-spacing: .06em; }
.item-icon-card { background: linear-gradient(145deg, var(--surface-variant), var(--surface-2)); }
.item-icon-card svg { width: 40px; height: 40px; }
.pdflink-ph { color: var(--error); fill: none; }
.play-overlay { background: rgba(0,0,0,.62); backdrop-filter: none; }
#videos-grid { gap: 12px !important; padding: 2px 0 6px !important; }

/* ---------- Floating action button (Material 3) ---------- */
.fab {
    right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    width: 58px; height: 58px; border-radius: 19px; background: var(--primary); color: var(--on-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 34%, rgba(0,0,0,.2)), 0 2px 5px rgba(0,0,0,.16);
    transition: transform .2s var(--ease-spring), box-shadow .2s ease; animation: sv-fab-in .55s var(--ease-spring) .25s backwards;
}
.fab .ic { width: 28px; height: 28px; transition: transform .3s var(--ease-spring); }
.fab:active { transform: scale(.9); box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 30%, rgba(0,0,0,.2)); }
.fab:active .ic { transform: rotate(90deg); }
.fab::after { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.34) 50%, transparent 60%); animation-duration: 8s; animation-delay: 4s; }
@keyframes sv-fab-in { from { opacity: 0; transform: scale(.4) translateY(20px); } to { opacity: 1; transform: none; } }
.app-footer { background: var(--surface); border-top: 1px solid var(--outline-soft); box-shadow: none; }
#view-folders::after, #view-videos::after { height: 104px; }

/* ---------- Sheets & dialogs ---------- */
.modal-overlay { background-color: rgba(3, 8, 20, .6); }
.modal-content { border-radius: 28px !important; box-shadow: 0 24px 60px rgba(0,0,0,.35); border: 1px solid var(--outline-soft); }
.modal-title { font-size: 1.15rem; font-weight: 750; letter-spacing: -.01em; }
.sheet { padding: 0 !important; gap: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; max-width: 480px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 10px 10px 20px; flex-shrink: 0; }
.sheet-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sheet-icon { width: 40px; height: 40px; border-radius: 14px; background: var(--tint-strong); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sheet-icon svg { width: 22px; height: 22px; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 18px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 18px; }
.sheet-simple { padding: 8px 14px 14px !important; }
.sheet-simple .modal-header { padding: 6px 4px 4px 8px; }
.action-sheet-item { min-height: 64px; padding: 10px 10px; border-radius: 18px; transition: background-color .15s ease, transform .14s var(--ease-out); }
.action-sheet-item:hover { background: var(--tint); }
.action-sheet-icon { border-radius: 16px; width: 46px; height: 46px; background: var(--tint-strong); color: var(--primary); }
.action-sheet-icon svg { width: 23px; height: 23px; fill: none; }
.action-sheet-item strong { font-weight: 700; }
.modal-overlay.active .action-sheet-item { animation: sv-rise .38s var(--ease-out) backwards; }
.modal-overlay.active .action-sheet-item:nth-child(2) { animation-delay: .04s; } .modal-overlay.active .action-sheet-item:nth-child(3) { animation-delay: .08s; }
.modal-overlay.active .action-sheet-item:nth-child(4) { animation-delay: .12s; } .modal-overlay.active .action-sheet-item:nth-child(5) { animation-delay: .16s; }

@media (max-width: 639px) {
    .sheet-overlay { align-items: flex-end; }
    .sheet-overlay .modal-content { width: 100%; max-width: none; border-radius: 28px 28px 0 0 !important; border-bottom: none; max-height: 92vh; max-height: 92dvh; transform: translateY(100%); transition: transform .38s var(--ease-out); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .sheet-overlay.active .modal-content { transform: none; }
    .sheet-overlay .modal-content::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--outline); opacity: .8; z-index: 2; }
    .sheet-overlay .sheet-head { padding-top: 22px; }
    .sheet-overlay .sheet-simple .modal-header { padding-top: 18px; }
    .sheet-overlay .modal-content.sheet-simple { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* settings */
.set-section { display: flex; flex-direction: column; gap: 8px; }
.set-label { font-size: .74rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); padding: 0 6px; }
.set-label-danger { color: var(--error); }
.set-card { background: var(--surface-2); border: 1px solid var(--outline-soft); border-radius: 20px; overflow: hidden; }
.set-card-pad { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.set-card-danger { border-color: color-mix(in srgb, var(--error) 45%, transparent); background: color-mix(in srgb, var(--error) 6%, var(--surface)); }
.set-hint { font-size: .78rem; line-height: 1.45; color: var(--on-surface-variant); padding: 0 6px; margin: 0; }
.set-card-pad .set-hint { padding: 0 2px; }
.set-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 14px; background: transparent; border: none; text-align: left;
    color: var(--on-surface); cursor: pointer; transition: background-color .15s ease, transform .14s var(--ease-out);
}
.set-row + .set-row, .set-row + input + .set-row { border-top: 1px solid var(--outline-soft); }
.set-row:active { background: var(--tint-strong); }
.set-row-static { cursor: default; }
.set-row-static:active { background: transparent; }
.set-ico { width: 40px; height: 40px; border-radius: 13px; background: var(--tint-strong); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-ico svg { width: 21px; height: 21px; }
.set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-text strong { font-size: .95rem; font-weight: 650; }
.set-text small { font-size: .76rem; color: var(--on-surface-variant); line-height: 1.35; }
.set-chev { width: 20px; height: 20px; color: var(--on-surface-variant); opacity: .7; flex-shrink: 0; transition: transform .2s var(--ease-out); }
.set-row:active .set-chev { transform: translateX(3px); }
.set-value { font-size: .85rem; font-weight: 700; color: var(--on-surface-variant); }
.set-row-danger { color: var(--error); }
.set-row-danger .set-ico { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.set-row-danger .set-text small, .set-row-danger .set-chev { color: color-mix(in srgb, var(--error) 80%, var(--on-surface-variant)); }
.set-row-danger:active { background: color-mix(in srgb, var(--error) 12%, transparent); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--surface-variant); border-radius: 16px; }
.seg-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 12px; background: transparent; color: var(--on-surface-variant); font-size: .86rem; font-weight: 650; cursor: pointer; transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .14s var(--ease-out); }
.seg-btn svg { width: 18px; height: 18px; }
.seg-btn:active { transform: scale(.96); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.16); }

/* factory reset dialog */
.confirm-dialog { max-width: 380px !important; padding: 26px 22px 20px !important; align-items: stretch; text-align: center; gap: 12px !important; }
.confirm-icon { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); animation: sv-pop .45s var(--ease-spring); }
.confirm-icon svg { width: 30px; height: 30px; }
@keyframes sv-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.confirm-text { font-size: .9rem; line-height: 1.5; color: var(--on-surface-variant); text-align: left; }
.confirm-text ul { margin: 8px 0 8px 4px; padding-left: 18px; }
.confirm-text li { margin: 2px 0; }
.confirm-text strong { color: var(--on-surface); }
.confirm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* usage guide */
.guide-intro { font-size: .9rem; color: var(--on-surface-variant); line-height: 1.5; padding: 0 4px; }
.guide-list { list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: g; }
.guide-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: var(--surface-2); border: 1px solid var(--outline-soft); border-radius: 20px; counter-increment: g; position: relative; }
.g-ico { width: 44px; height: 44px; border-radius: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--tint-strong); color: var(--primary); }
.g-ico svg { width: 23px; height: 23px; }
.guide-list strong { display: flex; align-items: center; gap: 8px; font-size: .96rem; font-weight: 700; }
.guide-list strong::before { content: counter(g); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: .7rem; font-weight: 800; }
.guide-list p { margin: 4px 0 0; font-size: .85rem; line-height: 1.5; color: var(--on-surface-variant); }
.guide-list b { color: var(--on-surface); font-weight: 650; }
.modal-overlay.active .guide-list li { animation: sv-rise .4s var(--ease-out) backwards; }
.modal-overlay.active .guide-list li:nth-child(2) { animation-delay: .04s; } .modal-overlay.active .guide-list li:nth-child(3) { animation-delay: .08s; } .modal-overlay.active .guide-list li:nth-child(4) { animation-delay: .12s; } .modal-overlay.active .guide-list li:nth-child(n+5) { animation-delay: .16s; }
.guide-install.hidden { display: none !important; }
.install-card { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--outline-soft); border-radius: 20px; }
.install-card.is-match { border-color: var(--primary); background: var(--tint); }
.install-card h3 { font-size: .92rem; font-weight: 750; margin-bottom: 8px; color: var(--primary); }
.install-card ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; line-height: 1.5; color: var(--on-surface-variant); }
.install-card b { color: var(--on-surface); }
.kbd { display: inline-flex; vertical-align: -5px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-variant); color: var(--on-surface); }
.kbd svg { width: 16px; height: 16px; }
.note-warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--error) 11%, transparent); border: 1px solid color-mix(in srgb, var(--error) 40%, transparent); color: var(--on-surface); }
.note-warn svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--error); margin-top: 1px; }
.note-warn p { margin: 0; font-size: .88rem; line-height: 1.45; }
.info-list { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; line-height: 1.5; color: var(--on-surface-variant); }
.info-list b { color: var(--on-surface); }
.about-body { align-items: center; text-align: center; gap: 6px; padding-top: 10px; }
.about-logo { width: 76px; height: 76px; animation: sv-float 6s ease-in-out infinite; }
.about-name { font-size: 1.4rem; font-weight: 800; color: var(--primary); margin-top: 6px; }
.about-ver { font-size: .82rem; font-weight: 650; color: var(--on-surface-variant); background: var(--surface-variant); padding: 3px 12px; border-radius: 99px; }
.about-text { font-size: .92rem; color: var(--on-surface-variant); max-width: 300px; margin-top: 8px; line-height: 1.5; }
.about-by { font-size: .85rem; color: var(--on-surface-variant); margin-top: 10px; }
.about-by a { color: var(--primary); font-weight: 700; text-decoration: none; }

/* onboarding + other legacy dialogs pick up the new look */
#modal-onboarding .modal-content { max-width: 440px; }
#modal-onboarding .modal-body > div.p-4 { border-radius: 16px !important; background: color-mix(in srgb, var(--error) 88%, #000) !important; }
.pin-key { border-radius: 18px; min-height: 56px; background: var(--surface-2); border: 1px solid var(--outline-soft); }
.pin-key .ic { width: 22px; height: 22px; margin: 0 auto; }
.pin-dots span { width: 15px; height: 15px; }
#private-space-bar { border-radius: 20px; background: linear-gradient(135deg, #4c1d95, #6d28d9); margin-bottom: 12px; }
#private-space-bar svg { fill: none; }
.detect-banner svg { fill: none; }
.gs-input-wrap > svg { fill: none; color: var(--on-surface-variant); }
.gs-header .icon-btn svg, .gs-clear svg { fill: none; }
.player-header .icon-btn svg, .player-notes svg { fill: none; }

/* ---------- Toast ---------- */
.snackbar {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 12px 20px 12px 16px; border-radius: 16px; font-size: .88rem; font-weight: 600;
    background: var(--on-surface); color: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.3);
    opacity: 0; transform: translateX(-50%) translateY(24px) scale(.96); transition: transform .32s var(--ease-out), opacity .22s ease; pointer-events: none;
}
.snackbar.active { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.snackbar svg { width: 20px; height: 20px; color: var(--primary); fill: none; flex-shrink: 0; }
:root[data-theme="light"] .snackbar svg { color: #3fe0a0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .snackbar svg { color: #3fe0a0; } }

/* ---------- Empty & loading states ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 20px; color: var(--on-surface-variant); font-size: .9rem; }
.empty-state strong { font-size: 1.02rem; color: var(--on-surface); font-weight: 700; }
.empty-state .btn { margin-top: 10px; }
.empty-art { width: 84px; height: 84px; margin-bottom: 4px; animation: sv-float 6s ease-in-out infinite; }
.sk-card { height: 76px; border-radius: 22px; position: relative; overflow: hidden; background: var(--surface-variant); isolation: isolate; }
.sk-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: sv-shimmer 1.4s linear infinite; }
@keyframes sv-shimmer { to { transform: translateX(100%); } }

/* ---------- Responsive ---------- */
@media (max-width: 359px) {
    .hint-chip { display: none; }
    .wh-art { width: 34%; }
    .wh-title { font-size: 1rem; }
    .folder-card { column-gap: 10px; padding-left: 12px; }
    .folder-icon { width: 44px; height: 44px; }
}
@media (min-width: 600px) {
    :root { --page-x: max(20px, env(safe-area-inset-left, 0px)); }
    #folders-grid, #subfolders-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 12px !important; }
    .hb-card { flex-basis: 184px; }
    .wh-art { max-width: 240px; }
    .welcome-hero { min-height: 140px; padding-left: 26px; }
    .wh-title { font-size: 1.3rem; }
}
@media (min-width: 900px) {
    :root { --page-x: max(32px, env(safe-area-inset-left, 0px)); }
    .main-content > div, .main-content > .w-full { max-width: 1100px; margin-left: auto; margin-right: auto; }
    .hb-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0 8px; -webkit-mask-image: none; mask-image: none; }
    .hb-card { flex: 0 0 196px; }
    .fab { right: max(28px, env(safe-area-inset-right, 0px)); }
}
@media (orientation: landscape) and (max-height: 520px) {
    .welcome-hero { min-height: 104px; padding-top: 10px; padding-bottom: 10px; }
    .wh-art { display: none; }
    .drawer-head { padding-top: 14px; padding-bottom: 10px; }
    .drawer-item { min-height: 44px; }
}

/* ---------- Reduced motion: no loops, no sweeps, no entrance travel ---------- */
@media (prefers-reduced-motion: reduce) {
    .fx-shine::after, .hb-card::after, .wh-books, .wh-play, .wh-pdf, .wh-sp, .empty-art, .about-logo, .sk-card::after { animation: none !important; }
    .fx-shine::after, .hb-card::after { display: none; }
    .drawer, .sheet-overlay .modal-content { transition-duration: .01ms !important; }
    .folder-card, .video-card, .hb-card, #view-folders, #view-videos, .fab, .drawer-item, .guide-list li, .action-sheet-item { animation: none !important; }
    .sv-ripple { display: none; }
    .hb-row { scroll-behavior: auto; }
}
.fab.fx-shine { position: fixed; }
.sheet-overlay .modal-content { position: relative; }
.gs-hint svg, .gs-empty svg { fill: none; color: var(--on-surface-variant); opacity: .55; }
.gs-input:focus, .gs-input:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 459px) { #view-videos .hint-chip { padding: 8px; } #view-videos .hint-label { display: none; } }
.gs-hint svg, .gs-empty svg { fill: currentColor; }

/* ==========================================================================
   v3.1 — smoothness pass + book card sizing
   (SVG-internal loops removed: they repaint every frame; only composited
   transforms on whole elements remain, all one-shot or very slow.)
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; }
.wh-books, .wh-play, .wh-pdf, .wh-sp { animation: none !important; }
.wh-art { animation: sv-float 7s ease-in-out infinite; }
.welcome-hero.fx-shine::after { display: none; }
.fx-shine::after, .hb-card::after { animation: sv-shine-once 1.1s var(--ease-out) 1 both; animation-delay: var(--shine-delay, 1.2s); transform: translateX(-130%); }
.hb-card::after { opacity: 0; }
@keyframes sv-shine-once { 0% { transform: translateX(-130%); opacity: 1; } 99% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }
.hb-card:nth-child(1)::after { --shine-delay: 1s; } .hb-card:nth-child(2)::after { --shine-delay: 1.3s; }
.hb-card:nth-child(3)::after { --shine-delay: 1.6s; } .hb-card:nth-child(4)::after { --shine-delay: 1.9s; }
.fab::after { --shine-delay: 1.4s; animation-duration: 1.2s; }
.hb-row { -webkit-mask-image: none !important; mask-image: none !important; }
/* drawer: promote once (no first-open raster hitch), no per-item stagger while it slides */
.drawer { will-change: transform; contain: layout paint; }
.drawer-overlay.active .drawer-item { animation: none !important; }
.sv-paused .wh-art, .sv-paused .empty-art, .sv-paused .fab::after { animation-play-state: paused !important; }
/* replaces body:has(...) (cheap sibling selector instead of a document-wide :has re-evaluation) */
#private-space-bar.active ~ .welcome-hero { display: none !important; }

/* ---------- Practical Books: smaller, aligned cards ---------- */
.home-books { margin: 2px 0 14px; }
.hb-head { margin-bottom: 8px; }
.hb-row { gap: 10px; padding-bottom: 10px; }
.hb-card { flex: 0 0 clamp(128px, 37vw, 148px); border-radius: 18px; }
.hb-cover { aspect-ratio: 5 / 7; }
.hb-badge { top: 7px; left: 7px; font-size: .56rem; padding: 3px 8px 3px 7px; }
.hb-meta { padding: 9px 10px 10px; gap: 0; }
.hb-name { font-size: .82rem; line-height: 1.25; min-height: 2.5em; }
.hb-folder { font-size: .7rem; margin: 2px 0 8px; }
.hb-open { margin-top: auto; padding: 8px 10px; border-radius: 12px; font-size: .78rem; }
.hb-open svg { width: 15px; height: 15px; }
@media (min-width: 600px) { .hb-card { flex-basis: 164px; } }
@media (min-width: 900px) { .hb-card { flex: 0 0 176px; } }

/* ---------- Switch row (Settings) ---------- */
.set-row-switch .sw { width: 46px; height: 28px; border-radius: 99px; background: var(--outline); position: relative; flex-shrink: 0; transition: background-color .2s ease; }
.set-row-switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s var(--ease-out); }
.set-row-switch[aria-checked="true"] .sw { background: var(--primary); }
.set-row-switch[aria-checked="true"] .sw::after { transform: translateX(18px); }
.set-card + .set-card { margin-top: 8px; }

/* ---------- Pull-to-refresh circle ---------- */
.ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 50%; z-index: 60; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 1px var(--outline-soft); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, -52px); pointer-events: none; }
.ptr.snap { transition: transform .28s var(--ease-out), opacity .2s ease; }
.ptr svg { width: 28px; height: 28px; transform: rotate(-90deg); overflow: visible; }
.ptr circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.ptr-track { stroke: var(--tint-strong); }
.ptr-arc { stroke: #10b981; stroke-dasharray: 0 100; }
.ptr.ready .ptr-arc { stroke: var(--primary); }
.ptr.spin svg { animation: sv-spin .8s linear infinite; }
.ptr.spin .ptr-arc { stroke-dasharray: 70 100; }
@keyframes sv-spin { to { transform: rotate(270deg); } }

/* ==========================================================================
   v3.3 — wider / shorter book cards, native-style snackbar
   ========================================================================== */
.hb-card { flex: 1 0 clamp(150px, 44vw, 200px); }
.hb-cover { aspect-ratio: 1 / 1; max-height: 176px; }
.hb-cover img { object-position: 50% 30%; }
.hb-ph { width: 44px; height: 44px; }
.hb-meta { padding: 10px 12px 12px; }
.hb-name { font-size: .86rem; }
@media (min-width: 600px) { .hb-card { flex: 0 1 220px; } }
@media (min-width: 900px) { .hb-card { flex: 0 0 220px; } }

.snackbar {
    left: 50%; right: auto; width: min(calc(100vw - 24px), 440px); max-width: none; min-height: 52px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px 10px 10px; gap: 12px; align-items: center; justify-content: flex-start;
    border-radius: 16px; font-size: .9rem; font-weight: 500; line-height: 1.35; letter-spacing: .005em; text-align: left; cursor: pointer;
    background: #172033; color: #f1f5f9; border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.2);
    pointer-events: auto;
}
:root[data-theme="dark"] .snackbar { background: #e8eef6; color: #0f1b2d; border-color: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .snackbar { background: #e8eef6; color: #0f1b2d; border-color: rgba(0,0,0,.06); } }
.snackbar:not(.active) { pointer-events: none; }
.sb-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #10b981; color: #fff; }
.sb-ico svg, .snackbar .sb-ico svg { width: 18px; height: 18px; color: #fff; fill: none; }
.snackbar[data-tone="error"] .sb-ico { background: #ef4444; }
.snackbar[data-tone="info"] .sb-ico { background: #3b82f6; }
.sb-msg { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snackbar .sb-ico svg { color: #fff !important; }

/* ==========================================================================
   v3.4 — BUNDLED FONT + FLUID RESPONSIVE LAYOUT
   Inter is shipped inside the app (works offline, identical on every device).
   ========================================================================== */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Inter-Bold.woff") format("woff"); }

:root {
    --font-family: "Inter", Roboto, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans", "Noto Sans Devanagari", sans-serif;
}
/* Fluid base size: small phones 15px → normal phones 16px → tablets/desktop up to 18px. All rem sizes follow. */
html { font-size: clamp(15px, 14.2px + .26vw, 18px); }
@media (max-width: 340px) { html { font-size: 14.5px; } }
@media (orientation: landscape) and (max-height: 520px) { html { font-size: 15px; } }

body {
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-feature-settings: "kern", "liga", "calt";
    overflow-wrap: break-word;
}
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, .brand-name, .sec-title, .wh-title, .modal-title, .sheet-title { letter-spacing: -.015em; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.folder-title, .hb-name, .gs-result-title { line-height: 1.28; letter-spacing: -.005em; font-weight: 600; }
.folder-meta, .hb-sub, .sec-sub, .set-sub, .sb-msg { line-height: 1.4; }
.btn, .seg-btn, .set-row, .drawer-item, .wh-cta { font-weight: 600; letter-spacing: .005em; }
.badge, .chip, .hint-chip, .hb-badge, .sec-count, .drawer-value { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }
input, textarea { font-size: max(16px, 1rem); } /* stops iOS/Android zoom-on-focus */
.hb-name, .folder-title { text-wrap: pretty; }

/* ---- Fluid layout on every screen ---- */
.drawer { width: clamp(272px, 82vw, 340px); max-width: 100vw; }
.modal-content { width: min(92vw, 460px); }
.snackbar { width: min(calc(100vw - 24px), 440px); }

/* books: scroll row on phones, wrapping grid from tablet portrait upward (no empty gaps) */
@media (min-width: 600px) {
    .hb-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0 8px; -webkit-mask-image: none; mask-image: none; }
    .hb-card { flex: 1 1 200px; max-width: 280px; }
    .main-content > div, .main-content > .w-full { max-width: 920px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 900px) {
    .hb-card { flex: 1 1 210px; max-width: 260px; }
    .main-content > div, .main-content > .w-full { max-width: 1100px; }
    #folders-grid, #subfolders-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
}
@media (min-width: 1400px) {
    .main-content > div, .main-content > .w-full { max-width: 1280px; }
}
/* tablets / desktop: bottom sheets become centered dialogs */
@media (min-width: 700px) {
    .sheet-overlay { align-items: center; justify-content: center; }
    .sheet-overlay .modal-content { width: min(92vw, 520px); max-width: 520px; border-radius: 28px !important; border-bottom: 1px solid var(--outline-soft); transform: scale(.96) translateY(12px); opacity: 0; transition: transform .28s var(--ease-out), opacity .2s ease; }
    .sheet-overlay.active .modal-content { transform: none; opacity: 1; }
    .sheet-overlay .modal-content::before { display: none; }
}
/* very narrow / foldable-cover screens */
@media (max-width: 359px) {
    .hb-card { flex-basis: 140px; }
    .btn { padding-left: 12px; padding-right: 12px; }
}
/* keep content clear of notches and rounded corners in landscape */
@supports (padding: max(0px)) {
    .app-header { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 600px) { .hb-card { flex: 1 1 220px; max-width: none; } .hb-row { align-items: stretch; } }
@media (min-width: 900px) { .hb-card { flex: 1 1 220px; max-width: 340px; } }

/* ==========================================================================
   PLAYER: notes scrolling, timestamps, keyboard + rotation fit
   ========================================================================== */
/* follows the visible area when the keyboard overlays the page (set from JS; falls back to 100%) */
.player-view { height: var(--vvh, 100%); top: var(--vvt, 0px); }

.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.notes-head h4 { min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-add-btn {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 11px;
    font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap;
    color: var(--on-primary); background: var(--primary); border: 0; border-radius: 999px; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
    transition: transform .16s var(--ease-out), opacity .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ts-add-btn svg { width: 18px; height: 18px; flex: none; fill: none; }
.ts-add-btn:active { transform: scale(.95); opacity: .92; }
.ts-add-btn:focus-visible, .ts-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ts-chips { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 0 0 8px; margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ts-chips[hidden] { display: none; }
.ts-chips::-webkit-scrollbar { display: none; }
.ts-chip {
    flex: none; min-height: 32px; padding: 0 13px; font: inherit; font-size: .8rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--primary);
    background: var(--tint, var(--surface-variant)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 999px; cursor: pointer; transition: transform .14s var(--ease-out), background-color .2s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ts-chip:active { transform: scale(.94); background: var(--tint-strong, var(--surface-variant)); }

/* Notes box scrolls on its own and never drags the page */
.notes-textarea {
    background: var(--surface-2); border: 1.5px solid var(--outline-soft); border-radius: 16px;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#player-view > .player-notes { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Keyboard open (portrait): shrink the video strip so there is room to type */
.player-view.kb-open > .iframe-container { flex: 0 0 auto; height: 26%; min-height: 96px; }
.player-view.kb-open > .player-notes { flex: 1 1 0; min-height: 0; }

/* Rotation: phone sideways */
@media (orientation: landscape) and (max-height: 520px) {
    .player-view > .iframe-container { margin-left: env(safe-area-inset-left, 0px); height: auto; }
    .player-view > .player-notes { padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) 12px; }
    .player-view.kb-open > .iframe-container { flex: initial; height: auto; min-height: 0; }
    .player-view.kb-open .notes-head h4, .player-view.kb-open .ts-chips { display: none; }
    .player-view.kb-open .notes-head { justify-content: flex-end; margin-bottom: 6px; }
    .ns-sub { display: none; }
    .ts-add-btn { min-height: 32px; padding: 0 12px 0 9px; }
}

.notes-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--tint); }

/* ==========================================================================
   RICH NOTES (contenteditable) — links, timestamps, format bar
   ========================================================================== */
:root { --note-link: #1d4ed8; --note-hl-ink: #1c1917; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --note-link: #60a5fa; } }
:root[data-theme="dark"] { --note-link: #60a5fa; }
:root[data-theme="light"] { --note-link: #1d4ed8; }

.rn-editor {
    position: relative; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    caret-color: var(--primary); -webkit-tap-highlight-color: transparent; cursor: text;
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; outline: none;
}
.rn-editor > div { min-height: 1.6em; }
.rn-editor.rn-empty::before { content: attr(data-placeholder); position: absolute; left: 16px; right: 16px; color: var(--on-surface-variant); opacity: .7; pointer-events: none; }
.rn-editor b { font-weight: 800; }
.rn-editor [style*="253, 224, 71"] { color: var(--note-hl-ink); border-radius: 4px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rn-editor .rn-url, .rn-editor .rn-ts { color: var(--note-link); font-weight: 600; cursor: pointer; }
.rn-editor .rn-url { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.rn-editor .rn-ts { font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--note-link) 12%, transparent); border-radius: 6px; padding: 0 3px; }

/* timestamp chips use the same blue as in the notes */
.ts-chip { color: var(--note-link); background: color-mix(in srgb, var(--note-link) 12%, transparent); border-color: color-mix(in srgb, var(--note-link) 32%, transparent); }
.ts-chip:active { background: color-mix(in srgb, var(--note-link) 22%, transparent); }

/* floating Bold / Underline / Highlight bar (shown only while text is selected) */
.rn-bar {
    position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 26;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    display: flex; gap: 2px; padding: 5px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--outline-soft); box-shadow: var(--elevation-3);
    opacity: 0; transform: translate(-50%, 14px) scale(.96); pointer-events: none;
    transition: transform .2s var(--ease-out), opacity .15s ease;
}
.rn-bar.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.rn-bar button {
    width: 46px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--on-surface);
    font: inherit; font-size: 1.05rem; display: grid; place-items: center; cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color .15s ease, color .15s ease, transform .12s var(--ease-out);
}
.rn-bar button:active { transform: scale(.9); }
.rn-bar button.on { background: var(--tint-strong); color: var(--primary); }
.rn-bar button svg { width: 21px; height: 21px; fill: none; }
.rn-bar .rn-hl::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 2px; background: rgb(253, 224, 71); }
@media (orientation: landscape) and (max-height: 520px) {
    .rn-bar { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
    .rn-bar button { height: 34px; width: 42px; }
}

/* one clean focus ring (no second outer glow) */
.rn-editor:focus, .rn-editor:focus-visible { box-shadow: none; outline: none; }

/* Wide screens (tablet landscape / laptop): video on the left, notes on the right instead of one tall stack */
@media (min-width: 900px) and (min-height: 521px) {
    .player-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 34%); grid-template-rows: auto minmax(0, 1fr); }
    .player-view > .player-header { grid-column: 1 / -1; }
    .player-view > .iframe-container { grid-column: 1; grid-row: 2; flex: none; min-height: 0; height: auto; }
    .player-view > .player-notes { grid-column: 2; grid-row: 2; min-height: 0; border-top: none; border-left: 1px solid var(--outline); }
    #note-editor-view > .player-notes { grid-column: 1 / -1; border-left: none; }
    .player-view.kb-open > .iframe-container { height: auto; min-height: 0; }
}

/* Home: one block per directory of Online PDFs */
.hb-group + .hb-group { margin-top: 22px; }

/* ==========================================================================
   IMPORT REVIEW SHEET
   ========================================================================== */
.imp-sheet { max-height: 88vh; max-height: 88dvh; }
.imp-body { gap: 12px; flex: 1 1 auto; min-height: 0; padding-bottom: 8px; }
.imp-sub { font-size: .88rem; line-height: 1.45; }
.imp-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.imp-tools[hidden] { display: none; }
.imp-link { border: 0; background: none; color: var(--primary); font: inherit; font-size: .82rem; font-weight: 700; padding: 4px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.imp-list { display: flex; flex-direction: column; gap: 10px; }
.imp-row { background: var(--surface-2); border: 1px solid var(--outline-soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; contain: content; }
.imp-row-head { min-width: 0; }
.imp-name { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.imp-meta { font-size: .78rem; color: var(--on-surface-variant); margin-top: 2px; }
.imp-select { width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--on-surface); text-overflow: ellipsis; }
.imp-foot { display: flex; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--outline-soft); flex-shrink: 0; background: var(--surface); }
.imp-foot .btn { flex: 1; justify-content: center; min-height: 48px; }

/* ==========================================================================
   STABLE APP FRAME (fixes footer vanishing / header sliding up after a reload)
   The frame is pinned to the real visible screen (position: fixed; inset: 0) instead of
   100vh/100dvh, which some phones measure wrongly right after a reload. The page itself can
   never scroll, so the header can't slide away and the footer can't fall below the fold;
   only .main-content scrolls.
   ========================================================================== */
html { height: 100%; overflow: hidden; background-color: var(--bg); }
body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; overflow: hidden; }
.app-header, .app-footer { flex: 0 0 auto; }
.main-content { flex: 1 1 auto; min-height: 0; }

/* ==========================================================================
   HOME PDFs: compact + collapsible groups; roomier buttons in the edit sheet
   ========================================================================== */
.home-books { margin: 2px 0 10px; }
.hb-group + .hb-group { margin-top: 6px; }
.hb-head { cursor: pointer; margin-bottom: 4px; padding: 8px 2px; min-height: 52px; border-radius: 14px; -webkit-tap-highlight-color: transparent; user-select: none; }
.hb-head:active { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.hb-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hb-title { font-size: 1.1rem; overflow-wrap: anywhere; }
.hb-accent { min-height: 30px; }
.hb-chev { width: 22px; height: 22px; flex: none; stroke: var(--on-surface-variant); fill: none; stroke-width: 2.4; transition: transform .22s var(--ease-out); }
.hb-group.open .hb-chev { transform: rotate(90deg); }
.hb-row[hidden] { display: none; }
/* compact cards that never stretch to fill a row, so one PDF is one small card */
.hb-row { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: stretch; padding: 4px 0 12px; }
.hb-card, .hb-card:nth-child(n) { flex: 0 0 clamp(138px, 40vw, 170px); max-width: none; }
.hb-cover { aspect-ratio: 4 / 3; max-height: 128px; }
.hb-name { font-size: .84rem; min-height: 2.5em; }
@media (min-width: 600px) { .hb-card, .hb-card:nth-child(n) { flex: 0 0 180px; } }
@media (min-width: 900px) { .hb-card, .hb-card:nth-child(n) { flex: 0 0 190px; } .hb-row { flex-wrap: wrap; overflow: visible; } }

/* Edit sheet: spacing between the stacked buttons */
#modal-edit-item .modal-body { display: flex; flex-direction: column; gap: 12px; }
#modal-edit-item .modal-body > .btn { margin: 0; }

/* Compact pass: one-line headers, small cards */
.hb-head { min-height: 44px; padding: 4px 2px; gap: 10px; }
.hb-head-text { min-width: 0; flex: 1; }
.hb-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; margin: 0; }
.hb-sub { font-size: .74rem; margin: 0; }
.hb-accent { min-height: 26px; height: 26px; }
.hb-count { flex: none; }
.hb-row { gap: 10px; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hb-row::-webkit-scrollbar { display: none; }
.hb-card, .hb-card:nth-child(n) { flex: 0 0 clamp(120px, 34vw, 150px); }
.hb-cover { aspect-ratio: auto; height: 76px; max-height: none; }
.hb-ph { width: 30px; height: 30px; }
.hb-badge { font-size: .6rem; padding: 2px 6px; top: 6px; left: 6px; }
.hb-name { font-size: .78rem; min-height: 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-open { padding: 6px 8px; font-size: .78rem; min-height: 0; }
@media (min-width: 600px) { .hb-card, .hb-card:nth-child(n) { flex: 0 0 160px; } }

/* ==========================================================================
   HOME: cover-flow PDF carousel (replaces the grouped list)
   ========================================================================== */
.home-books { margin: 2px 0 14px; overflow: hidden; }
.cf-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; }
.cf-accent { width: 4px; height: 26px; border-radius: 4px; background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 40%, transparent)); flex: none; }
.cf-head-text { flex: 1; min-width: 0; }
.cf-head-text.cf-swap { animation: cfFade .45s var(--ease-out, ease) both; }
@keyframes cfFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cf-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-sub { margin: 1px 0 0; font-size: .78rem; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-count { flex: none; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-variant-numeric: tabular-nums; }
.cf-stage { --cw: clamp(112px, 33vw, 150px); position: relative; height: calc(var(--cw) * 1.3 + 14px); margin-top: 6px; perspective: 900px; perspective-origin: 50% 40%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cf-card { position: absolute; left: 50%; top: 6px; width: var(--cw); height: calc(var(--cw) * 1.3); padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--surface-container-high, #dfe5e2); box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.15); transition: transform .6s cubic-bezier(.22,.8,.24,1), opacity .5s ease; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; backface-visibility: hidden; }
.cf-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cf-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.cf-ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, #0f7a52, #0a3d2b); }
.cf-ph svg { width: 44px; height: 44px; fill: rgba(255,255,255,.92); }
.cf-badge { position: absolute; left: 8px; top: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; color: #fff; background: #d92d20; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cf-card:not(.cf-active)::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.cf-dots { display: flex; justify-content: center; gap: 6px; padding-top: 6px; }
.cf-dot { width: 6px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--on-surface) 25%, transparent); transition: width .3s ease, background .3s ease; }
.cf-dot.on { width: 18px; background: var(--primary); }
@media (min-width: 700px) { .cf-stage { --cw: 170px; } }
@media (max-height: 420px) and (orientation: landscape) { .cf-stage { --cw: 96px; } }
@media (prefers-reduced-motion: reduce) { .cf-card { transition: none; } .cf-head-text.cf-swap { animation: none; } }


/* ==========================================================================
   v3.15 — NATIVE POLISH, LEGAL BLOCK
   Additive layer only: presentation, press-feel and the new About/License UI.
   Copyright (c) 2026 Ayush Tiwari. All rights reserved.
   ========================================================================== */
:root {
    --ease-spring: cubic-bezier(.3, 1.5, .5, 1);
    --press: .965;
    accent-color: var(--primary);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; }
body { caret-color: var(--primary); }
::selection { background: color-mix(in srgb, var(--primary) 32%, transparent); }

/* No 300 ms tap delay / double-tap zoom on controls; no long-press callout on chrome */
button, a, [role="button"], [role="switch"], .icon-btn, .btn, .fab, .set-row, .drawer-item, .seg-btn, .pin-key, .action-sheet-item {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}
.set-row { text-decoration: none; }
a.set-row { color: var(--on-surface); }

/* Keyboard / switch-access focus ring (never shown for touch) */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.input-field:focus-visible, .gs-input:focus-visible { outline: none; }

/* Springy native press response */
.btn, .icon-btn, .fab, .set-row, .drawer-item, .seg-btn, .pin-key, .action-sheet-item, .folder-card, .video-card, .wh-cta {
    transition-property: transform, background-color, opacity, box-shadow;
    transition-duration: .22s;
    transition-timing-function: var(--ease-spring);
}
.btn:active, .fab:active, .wh-cta:active, .pin-key:active { transform: scale(var(--press)); opacity: 1; }
.folder-card:active, .video-card:active { transform: scale(.975); }
.icon-btn:active { transform: scale(.9); }

/* iOS-style switch: thumb stretches while pressed */
.set-row-switch .sw::after { transition: transform .26s var(--ease-spring), width .18s var(--ease-out); }
.set-row-switch:active .sw::after { width: 28px; }
.set-row-switch[aria-checked="true"]:active .sw::after { transform: translateX(12px); }
.set-row-switch .sw { transition: background-color .25s ease; }

/* Hover only where a real pointer exists (no sticky hover on phones) */
@media (hover: hover) and (pointer: fine) {
    .folder-card:hover, .video-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }
    .btn:hover { filter: brightness(1.06); }
    .set-row:hover, .drawer-item:hover { background: var(--tint); }
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--on-surface) 50%, transparent) transparent; }
}

/* Surfaces: hairline edge + layered depth */
.modal-content, .sheet, .set-card, .drawer { border: 1px solid var(--outline-soft); }
.set-card { box-shadow: var(--elevation-1); }
.app-footer { box-shadow: none; }

/* Footer legal line */
.app-footer-legal { display: block; margin-top: 3px; font-size: .74rem; font-weight: 500; color: var(--on-surface-variant); opacity: .9; }
.app-footer-legal a { font-weight: 650; }

/* About: developer card */
.about-card { width: 100%; max-width: 360px; margin-top: 14px; text-align: left; background: var(--surface-2); border: 1px solid var(--outline-soft); border-radius: 18px; padding: 4px 14px; }
.about-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: .88rem; }
.about-row + .about-row { border-top: 1px solid var(--outline-soft); }
.about-row > span:first-child { color: var(--on-surface-variant); flex-shrink: 0; }
.about-row strong { font-weight: 650; text-align: right; }
.about-row a { color: var(--primary); font-weight: 650; text-decoration: none; text-align: right; overflow-wrap: anywhere; }
.about-links { display: flex; gap: 14px; }
.about-tag { margin-top: 12px; font-size: .8rem; font-style: italic; color: var(--on-surface-variant); }
.about-actions { display: flex; gap: 10px; width: 100%; max-width: 360px; margin-top: 12px; }
.about-actions .btn { flex: 1; min-height: 46px; text-decoration: none; justify-content: center; gap: 8px; font-size: .88rem; }
.about-actions .ic { width: 18px; height: 18px; }
.about-copy { margin-top: 12px; font-size: .75rem; color: var(--on-surface-variant); }

/* License sheet */
.license-body { display: flex; flex-direction: column; gap: 12px; font-size: .9rem; line-height: 1.55; color: var(--on-surface-variant); text-align: left; }
.license-body strong, .license-body b { color: var(--on-surface); }
.license-body a:not(.btn) { color: var(--primary); font-weight: 650; overflow-wrap: anywhere; }
.license-lead { padding: 12px 14px; border-radius: 16px; background: var(--tint); border: 1px solid var(--tint-strong); color: var(--on-surface); }
.license-body .btn { text-decoration: none; gap: 8px; }
.license-body .btn .ic { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .btn, .icon-btn, .fab, .set-row, .drawer-item, .seg-btn, .pin-key, .action-sheet-item, .folder-card, .video-card, .wh-cta,
    .set-row-switch .sw::after { transition-duration: .01s; }
    .folder-card:hover, .video-card:hover { transform: none; }
}

/* v3.15 — exit confirmation (native-style alert) */
.confirm-neutral { background: var(--tint-strong); color: var(--primary); }
.exit-text { text-align: center; }
.exit-actions { flex-direction: row; gap: 10px; }
.exit-actions .btn { flex: 1; min-height: 48px; justify-content: center; }


/* ==========================================================================
   v3.16 — RECENTLY VIEWED CARD, SEARCH HISTORY
   Additive. Copyright (c) 2026 Ayush Tiwari. All rights reserved.
   ========================================================================== */
.home-recent { margin: 2px 0 14px; max-width: 680px; }
.rv-card {
    position: relative; border-radius: 22px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--outline-soft); box-shadow: var(--elevation-1);
    transition: opacity .2s ease, transform .2s ease;
}
.rv-card.rv-out { opacity: 0; transform: translateY(-4px) scale(.97); pointer-events: none; }
.rv-main {
    position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 40px 14px 14px; text-align: left; background: transparent; border: 0;
    color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rv-main:active { background: var(--tint); }
.rv-kicker {
    position: absolute; top: 12px; left: 16px; right: 52px; display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary);
}
.rv-kicker svg { width: 15px; height: 15px; flex: none; }
.rv-art {
    flex: none; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--primary-container), var(--tint-strong)); color: var(--primary);
}
.rv-art svg { width: 26px; height: 26px; }
.rv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-title {
    font-weight: 700; font-size: .98rem; line-height: 1.25; color: var(--on-surface);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.rv-meta { font-size: .78rem; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-play {
    flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--on-primary);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 38%, transparent);
    transition: transform .2s var(--ease-spring);
}
.rv-play svg { width: 22px; height: 22px; margin-left: 2px; }
.rv-main:active .rv-play { transform: scale(.92); }
.rv-x {
    position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--surface-variant); color: var(--on-surface-variant);
    -webkit-tap-highlight-color: transparent;
}
.rv-x::after { content: ""; position: absolute; inset: -7px; }   /* 44px touch target */
.rv-x svg { width: 15px; height: 15px; }
.rv-x:active { transform: scale(.9); }

/* Search history rows (reuse .gs-result so spacing/press feel match the results) */
.gs-hist-head { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.gs-clear-all { background: none; border: 0; padding: 10px 8px; border-radius: 10px; cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--primary); }
.gs-clear-all.is-armed { color: var(--error); }
.gs-hist { padding-right: 6px; }
.gs-hist .gs-result-icon { background: transparent; width: 36px; }
.gs-hist-icon svg { fill: none; color: var(--on-surface-variant); }
.gs-hist-act {
    flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--on-surface-variant);
    -webkit-tap-highlight-color: transparent;
}
.gs-hist-act svg { width: 19px; height: 19px; fill: none; }
.gs-hist-act:active { background: var(--surface-variant); }
.gs-more { display: block; width: 100%; padding: 14px; background: none; border: 0; cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--primary); }
.gs-section-label + .gs-hist { margin-top: 0; }
#set-history-clear.is-armed .set-text small, #set-history-clear.is-armed .set-value { color: var(--error); }

/* About: what's new */
.about-new { width: 100%; max-width: 360px; margin-top: 14px; text-align: left; }
.about-new h3 { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 6px; }
.about-new .info-list { font-size: .86rem; }

@media (prefers-reduced-motion: reduce) { .rv-card, .rv-play { transition-duration: .01s; } }

/* v3.16 — off-screen search rows are skipped by the browser's layout/paint (keeps 150-row lists instant) */
.gs-result { content-visibility: auto; contain-intrinsic-size: auto 62px; }

/* ==========================================================================
   v3.16 FINAL POLISH — readable type, keyboard, scroll (additive overrides)
   ========================================================================== */
/* Readable small text: nothing below ~11.5px; labels at 12.5px+ */
.wh-chip, .hb-badge, .type-badge, .cf-badge { font-size: max(.72rem, 11.5px); }
.drawer-foot, .section-label, .hint-chip, .hb-folder, .folder-meta, .set-label, .set-text small,
.hb-sub, .cf-count, .app-footer-legal, .about-copy, .about-new h3 { font-size: max(.8rem, 12.5px); }
.gs-hist-act, .rv-meta, .rv-kicker { font-size: max(.8rem, 12.5px); }
.set-label, .section-label, .rv-kicker { color: color-mix(in srgb, var(--primary) 82%, var(--on-surface)); }
.set-text small, .drawer-foot, .about-copy, .app-footer-legal, .hb-folder { opacity: 1; color: var(--on-surface-variant); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Inputs never trigger the iOS auto-zoom (needs >= 16px) */
input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select { font-size: max(1rem, 16px); }

/* Keyboard: sheets/dialogs keep the focused field visible; --kb is set by ui.js only when a keyboard overlays the page */
.sheet-body, .modal-content, .gs-results, #note-editor-content, .notes-textarea { scroll-padding-block: 24px 110px; }
html.kb-on .modal-overlay.active { padding-bottom: var(--kb, 0px); transition: padding-bottom .18s ease; }
html.kb-on .modal-content { max-height: calc(var(--vvh, 100dvh) - 16px); }

/* Scroll feel: contained, momentum, no chaining into the page behind */
.main-content, .modal-content, .sheet-body, .drawer-list, .gs-results { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.main-content { scroll-padding-top: 8px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .gs-results, .main-content { scroll-behavior: auto; } }

/* Header logo: gentle glow so the mark stands out on dark and light */
.brand-mark { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--primary) 38%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .brand-mark { animation: svBrandIn .7s var(--ease-spring, cubic-bezier(.2,.9,.3,1.2)) both; }
  @keyframes svBrandIn { from { transform: scale(.7) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* v3.16 — web link + Search on Google rows (shown after the app's own results) */
.gs-web-icon { background: color-mix(in srgb, var(--primary) 16%, var(--surface-variant)); }
.gs-web-icon svg { fill: none; stroke: var(--primary); }
.gs-web-out { flex: none; width: 20px; height: 20px; color: var(--on-surface-variant); display: inline-flex; }
.gs-web-out svg { width: 18px; height: 18px; }
.gs-web .gs-result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v3.16 — search button next to "Add time" in the player notes header */
.notes-head .ts-add-btn { margin-left: auto; }
.ts-search-btn {
    flex: none; width: 38px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--outline-soft); border-radius: 999px; cursor: pointer; padding: 0;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary);
    transition: transform .18s var(--ease-spring, ease), opacity .15s ease;
}
.ts-search-btn svg { width: 19px; height: 19px; }
.ts-search-btn:active { transform: scale(.92); opacity: .92; }
.ts-search-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.player-view.kb-open .ts-search-btn { display: none; }

/* ==========================================================================
   v3.18 — NATIVE ANDROID FINISH (flat, no glow / no shine), tidy banner, compact carousel,
   real logo, edit-sheet spacing. Pure overrides: delete this block to roll back.
   ========================================================================== */

/* ---- 1. No glow, no shine: Material-style flat surfaces with neutral elevation only ---- */
.fx-shine::after, .hb-card::after, .fab::after, .welcome-hero.fx-shine::after { display: none !important; animation: none !important; }
.brand-mark, .drawer-logo, .about-logo { filter: none !important; animation: none !important; box-shadow: none; object-fit: cover; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.drawer-logo { width: 48px; height: 48px; border-radius: 13px; }
.about-logo { width: 76px; height: 76px; border-radius: 20px; }
.fab { box-shadow: 0 3px 6px rgba(0,0,0,.20), 0 6px 14px rgba(0,0,0,.14); }
.fab:active { box-shadow: 0 1px 3px rgba(0,0,0,.24); }
.btn, .ts-add-btn, .rv-play, .wh-cta { box-shadow: none; }
.btn:active, .ts-add-btn:active { box-shadow: none; }
.btn-outline, .btn-secondary { box-shadow: none; }
.input-field:focus, .notes-textarea:focus, .directory-search:focus-within { box-shadow: none; outline: 2px solid var(--primary); outline-offset: -1px; }
.welcome-hero {
    background:
        radial-gradient(rgba(74,222,128,.13) 1.1px, transparent 1.3px) 0 0 / 18px 18px,
        linear-gradient(135deg, #04170d, #0a3320 70%, #0d4026);
    box-shadow: none; border: 1px solid rgba(74,222,128,.14);
}
.cf-card { box-shadow: 0 2px 8px rgba(0,0,0,.24); }
.cf-badge { box-shadow: none; }
.play-overlay, .type-badge { box-shadow: none; }
.hb-card { box-shadow: var(--elevation-1); }

/* ---- 2. Header / app-bar: real logo, clean 56dp bar ---- */
.app-title { gap: 12px; font-size: 1.2rem; font-weight: 700; letter-spacing: 0; }
.app-title-text { color: var(--primary); }

/* ---- 3. Welcome banner: tidy, one-line chip, balanced copy ---- */
.welcome-hero { min-height: 0; padding: 14px 8px 14px 16px; margin: 2px 0 14px; border-radius: 22px; align-items: center; gap: 0; }
.wh-chip { white-space: nowrap; font-size: .66rem; letter-spacing: .09em; padding: 4px 10px 4px 9px; line-height: 1.1; }
.wh-title { margin: 8px 0 0; font-size: 1.04rem; line-height: 1.22; font-weight: 750; letter-spacing: -.005em; text-wrap: balance; }
.wh-sub { margin: 3px 0 0; font-size: .8rem; line-height: 1.3; color: #86efac; text-wrap: pretty; }
.wh-art { width: 30%; max-width: 150px; align-self: center; margin-right: 0; padding-right: 4px; }
.wh-dismiss { top: 8px; right: 8px; width: 32px; height: 32px; }
.wh-text { padding-right: 34px; }
@media (min-width: 560px) { .wh-text { padding-right: 0; } .wh-art { width: 28%; max-width: 200px; } .wh-title { font-size: 1.25rem; } }
@media (max-width: 340px) { .wh-art { display: none; } .wh-text { padding-right: 30px; } }

/* ---- 4. Online-PDF carousel: compact, smooth, drag-friendly ---- */
.cf-stage { --cw: clamp(92px, 27vw, 124px); touch-action: pan-y; cursor: grab; margin-top: 2px; }
.cf-stage:active { cursor: grabbing; }
.cf-card { transition: none !important; will-change: auto; contain: layout style; }
.cf-card:not(.cf-active) .cf-badge { display: none; }
.cf-badge { font-size: .64rem; padding: 3px 8px; left: 7px; top: 7px; }
.cf-ph svg { width: 36px; height: 36px; }
.cf-title { font-size: 1.05rem; }
@media (min-width: 700px) { .cf-stage { --cw: 150px; } }

/* ---- 5. Directory / content cards: one-line titles, tighter action cluster ---- */
.folder-card { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 10px; padding: 12px 6px 12px 14px; min-height: 72px; border-radius: 20px !important; }
.folder-icon { width: 44px; height: 44px; }
.folder-title { font-size: .98rem; -webkit-line-clamp: 2; }
.folder-card .context-menu-btn { width: 36px; height: 36px; }
.folder-card .drag-handle { width: 28px; height: 36px; margin-left: -2px; }
.video-card .drag-handle { width: 34px; height: 34px; }

/* ---- 6. Sheets & edit dialog: even gaps everywhere ---- */
.action-sheet-sep { height: 1px; margin: 6px 14px; background: var(--outline-soft); }
.action-sheet-list { gap: 4px; }
#modal-edit-item .modal-body { display: flex; flex-direction: column; gap: 14px; }
#modal-edit-item .input-group, #modal-edit-item .edit-pdf .input-group { margin-bottom: 0; }
#modal-edit-item .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
#modal-edit-item .modal-actions .btn { width: 100%; min-height: 48px; justify-content: center; gap: 8px; }
.edit-pdf { display: flex; flex-direction: column; gap: 14px; }
.edit-pdf.hidden { display: none !important; }
.edit-cover-row { display: flex; align-items: stretch; gap: 14px; }
.edit-cover-thumb { flex: none; width: 66px; height: 86px; border-radius: 12px; background: var(--surface-variant) center / cover no-repeat; border: 1px solid var(--outline-soft); display: grid; place-items: center; color: var(--on-surface-variant); }
.edit-cover-thumb svg { width: 28px; height: 28px; fill: currentColor; }
.edit-cover-thumb.has-img svg { display: none; }
.edit-cover-actions { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.edit-cover-actions .btn { width: 100%; min-height: 44px; padding: 8px 14px; font-size: .9rem; gap: 8px; justify-content: center; }
.edit-cover-note { margin: 2px 2px 0; font-size: .78rem; color: var(--on-surface-variant); }
#modal-add-pdflink .input-group { gap: 10px; }
#modal-add-pdflink #btn-pick-pdflink-img { margin-bottom: 0; }

/* ---- 7. Smooth scrolling: isolate heavy cards so a scroll frame only repaints what moved ---- */
.folder-card, .video-card, .hb-card { contain: layout paint style; }
.main-content { scroll-behavior: auto; overscroll-behavior-y: contain; }


/* ==========================================================================
   v3.18 FINAL — drag radius, native scrollbars, Done badge, Lecture Monitor, What's new
   (additive block: nothing above is removed)
   ========================================================================== */

/* --- Scrollbars follow the app theme (native overlay bar on phones, slim bar on desktop) --- */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.modal-content, .sheet-body, .drawer-list, .main-content, .gs-results { scrollbar-gutter: auto; }
/* Rounded sheets clip their own scrollbar so it never pokes out of the corners */
.modal-content { overflow-clip-margin: 0; }
@media (hover: hover) and (pointer: fine) {
    #note-editor-content, .notes-textarea { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--on-surface) 50%, transparent) transparent; }
}

/* --- Picked-up card keeps its rounded shape (the lifted wrapper used to paint a square box) --- */
.grid-item.sortable-drag {
    box-shadow: none !important;
    background: transparent !important;
    border-radius: var(--radius-lg);
    contain: none !important;
    filter: drop-shadow(0 10px 16px rgba(13, 26, 38, .22)) drop-shadow(0 2px 4px rgba(13, 26, 38, .14));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grid-item.sortable-drag { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)) drop-shadow(0 2px 5px rgba(0, 0, 0, .4)); } }
:root[data-theme="dark"] .grid-item.sortable-drag { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)) drop-shadow(0 2px 5px rgba(0, 0, 0, .4)); }
.grid-item.sortable-drag > .folder-card, .grid-item.sortable-drag > .video-card { border-radius: inherit; }
.grid-item.sortable-drag > .video-card { border-radius: var(--radius-md); }
.grid-item.sortable-drag > .folder-card { border-radius: var(--radius-lg); }

/* --- Done badge --- */
.video-card { position: relative; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-height: 32px; }
.card-foot .drag-handle { margin-top: 0 !important; align-self: center !important; }
.done-btn {
    width: 32px; height: 32px; margin: -2px 0 -2px -4px; padding: 2px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: transparent; color: var(--on-surface-variant);
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease, background-color .2s ease, transform .14s var(--ease-out);
}
.done-btn svg { width: 26px; height: 26px; display: block; pointer-events: none; }
.done-btn:active { transform: scale(.88); background: var(--tint); }
.done-btn.on { color: var(--primary); }
.done-btn.pop svg { animation: sv-pop .42s var(--ease-spring) both; }
@keyframes sv-pop { 0% { transform: scale(.5) rotate(-24deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) { .done-btn:hover { background: var(--tint); } }
.is-done .video-title { opacity: .62; }
.is-done .video-thumbnail-container .video-thumbnail { filter: saturate(.7); }
@media (prefers-reduced-motion: reduce) { .done-btn.pop svg { animation: none; } }

.folder-prog { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 150px; margin-top: 2px; }
.fp-bar { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--surface-variant); overflow: hidden; }
.fp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.fp-txt { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 650; color: var(--on-surface-variant); }
.fp-txt svg { width: 15px; height: 15px; color: var(--primary); }
.folder-prog.is-all .fp-txt { color: var(--primary); }

/* --- Drawer "New" pill --- */
.di-pill { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--primary-container); color: var(--on-primary-container); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }

/* --- Tall pages (Lecture Monitor, What's new) --- */
.sheet-overlay .modal-content.sheet-tall { height: 92vh; height: 92dvh; display: flex; flex-direction: column; }
.sheet-tall .sheet-body { flex: 1; min-height: 0; }
@media (min-width: 700px) { .sheet-overlay .modal-content.sheet-tall { max-width: 560px; margin: 0 auto; } }

/* --- Lecture Monitor --- */
.mon-body { gap: 14px; }
.mon-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-variant); border-radius: 16px; flex: none; }
.mon-seg button { min-height: 40px; border: none; border-radius: 12px; background: transparent; color: var(--on-surface-variant); font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.mon-seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.16); }
.mon-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 24px; background: var(--primary-container); color: var(--on-primary-container); flex: none; }
.mon-eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.mon-big { font-size: 2.6rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.mon-delta { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(255,255,255,.55); color: inherit; }
:root[data-theme="dark"] .mon-delta { background: rgba(0,0,0,.28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mon-delta { background: rgba(0,0,0,.28); } }
.mon-sub { font-size: .86rem; opacity: .85; line-height: 1.4; }
.mon-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.mon-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--surface-variant); min-width: 0; }
.mon-tile span { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); }
.mon-tile strong { font-size: 1.3rem; font-weight: 800; color: var(--on-surface); }
.mon-tile em { font-style: normal; font-size: .78rem; color: var(--on-surface-variant); }
.mon-card { padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--outline-soft); flex: none; }
.mon-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mon-card-head h3 { font-size: 1rem; font-weight: 750; color: var(--on-surface); }
.mc-read { font-size: .78rem; font-weight: 600; color: var(--on-surface-variant); text-align: right; min-width: 0; }
.mon-chart { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 150px; padding-top: 14px; }
.mon-chart.is-many { gap: 2px; }
.mc-max { position: absolute; top: -2px; left: 0; font-size: .68rem; color: var(--on-surface-variant); }
.mc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; padding: 0; border: none; background: transparent; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; min-width: 0; }
.mc-track { position: relative; flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--on-surface) 5%, transparent); overflow: hidden; }
.is-many .mc-track { border-radius: 4px; }
.mc-a, .mc-w { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 8px 8px 0 0; transition: height .45s var(--ease-out); }
.mc-a { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.mc-w { background: var(--primary); }
.mc-lab { font-size: .7rem; font-weight: 600; color: var(--on-surface-variant); height: 14px; line-height: 14px; }
.mc-col.is-today .mc-lab { color: var(--primary); font-weight: 800; }
.mc-col.sel .mc-track { box-shadow: 0 0 0 2px var(--primary); }
.mc-legend { display: flex; gap: 16px; margin-top: 10px; font-size: .74rem; color: var(--on-surface-variant); }
.mc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-w { background: var(--primary); } .lg-a { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.mon-hl, .mon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mon-hl li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid var(--outline-soft); }
.mon-hl li:first-child { border-top: none; padding-top: 0; }
.mon-hl span { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); }
.mon-hl strong { font-size: .94rem; font-weight: 650; color: var(--on-surface); word-break: break-word; }
.mon-row { display: flex; flex-direction: column; gap: 7px; padding: 8px 0; }
.mon-row-top { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; color: var(--on-surface); }
.mon-row-top strong { font-weight: 700; color: var(--on-surface-variant); white-space: nowrap; font-size: .82rem; }
.mon-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-prog { display: block; height: 8px; border-radius: 8px; background: var(--surface-variant); overflow: hidden; }
.mon-prog i { display: block; height: 100%; border-radius: 8px; background: var(--primary); transition: width .5s var(--ease-out); }
.mon-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--outline-soft); font-size: .9rem; color: var(--on-surface); }
.mon-list li:first-child { border-top: none; padding-top: 0; }
.mon-list li .mon-trunc { flex: 1; }
.mon-list li strong { font-size: .82rem; font-weight: 700; color: var(--on-surface-variant); white-space: nowrap; }
.mon-seal { width: 20px; height: 20px; flex: none; color: var(--primary); }
.mon-empty { padding: 18px; text-align: center; border-radius: 20px; background: var(--surface-variant); color: var(--on-surface-variant); font-size: .9rem; line-height: 1.5; }
.mon-note { font-size: .78rem; line-height: 1.5; color: var(--on-surface-variant); text-align: center; }
.mon-reset { align-self: center; }

/* --- What's new page --- */
.wn-body { gap: 12px; }
.wn-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: var(--primary-container); color: var(--on-primary-container); flex: none; }
.wn-hero img { width: 56px; height: 56px; border-radius: 16px; flex: none; }
.wn-hero div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wn-hero strong { font-size: 1.1rem; font-weight: 800; }
.wn-hero span { font-size: .84rem; opacity: .85; }
.wn-card { display: flex; gap: 14px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--outline-soft); flex: none; }
.wn-ic { width: 44px; height: 44px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tint-strong); color: var(--primary); }
.wn-ic svg { width: 24px; height: 24px; }
.wn-ic-green svg { width: 30px; height: 30px; }
.wn-txt { min-width: 0; }
.wn-txt h3 { font-size: 1rem; font-weight: 750; color: var(--on-surface); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wn-txt h3 em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.wn-txt p { margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--on-surface-variant); }
.wn-sub { margin-top: 8px; font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); }
.about-new-btn { margin: 4px 0 8px; width: 100%; }

/* v3.18 final touch-ups */
.mon-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.mon-card-head .mc-read { text-align: left; }
.folder-prog { align-items: flex-start; }
.folder-prog .fp-txt { align-self: flex-start; }

/* v3.18 final: PDF default cover (no cover image) */
.video-thumbnail-container:has(.pdflink-ph), .item-icon-card:has(.pdf-doc-ic) {
    background: linear-gradient(150deg, color-mix(in srgb, var(--error) 10%, var(--surface)), color-mix(in srgb, var(--error) 22%, var(--surface)));
}
.pdflink-ph, .pdf-doc-ic { width: 58px !important; height: 58px !important; color: initial; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.pdflink-ph { fill: none; }
.cf-ph:has(use[href="#s-pdf-doc"]) { background: linear-gradient(160deg, #12805a, #0a3d2b); }
.cf-ph svg { filter: drop-shadow(0 3px 8px rgba(0,0,0,.3)); }
.cf-ph:has(use[href="#s-pdf-doc"]) svg { width: 54px; height: 54px; }
.pdflink-ph, .pdf-doc-ic { width: 50px !important; height: 50px !important; top: 58% !important; }

/* v3.18 final: export review + option rows */
.opt-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface-variant); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt-row[hidden] { display: none; }
.opt-row input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.opt-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-row strong { font-size: .94rem; font-weight: 700; color: var(--on-surface); }
.opt-row em { font-style: normal; font-size: .82rem; line-height: 1.4; color: var(--on-surface-variant); }
.exp-sub { margin-top: 6px; font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); }
.exp-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--outline-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.exp-row input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--primary); cursor: pointer; }
.exp-row .imp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-row:has(input:checked) { border-color: var(--primary); background: var(--tint); }
#exp-go:disabled { opacity: .5; pointer-events: none; }

/* ==========================================================================
   v3.18 final — Material 3 checkbox + polished export / import rows
   ========================================================================== */
.opt-row input[type="checkbox"], .exp-row input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    position: relative; flex: none; width: 24px; height: 24px; margin: 0; padding: 0;
    border: 2px solid var(--on-surface-variant); border-radius: 7px; background: transparent;
    cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .24s var(--ease-out), transform .18s var(--ease-spring);
}
.opt-row input[type="checkbox"]::after, .exp-row input[type="checkbox"]::after {
    content: ""; position: absolute; inset: -2px; background: var(--on-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 12.6l4 4 7.6-8.4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 12.6l4 4 7.6-8.4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    transform: scale(.3); opacity: 0; transition: transform .26s var(--ease-spring), opacity .14s ease;
}
.opt-row input[type="checkbox"]:checked, .exp-row input[type="checkbox"]:checked {
    background: var(--primary); border-color: var(--primary);
}
.opt-row input[type="checkbox"]:checked::after, .exp-row input[type="checkbox"]:checked::after { transform: scale(1); opacity: 1; }
/* state layer (hover / press / keyboard focus) */
.opt-row:active input[type="checkbox"], .exp-row:active input[type="checkbox"] { box-shadow: 0 0 0 10px var(--tint-strong); transform: scale(.92); }
.opt-row input[type="checkbox"]:focus-visible, .exp-row input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px var(--tint-strong), 0 0 0 6px var(--primary); }
@media (hover: hover) and (pointer: fine) {
    .opt-row:hover input[type="checkbox"], .exp-row:hover input[type="checkbox"] { box-shadow: 0 0 0 9px var(--tint); }
}

/* rows: soft depth, tonal selected state, press feedback */
.exp-row, .opt-row { transition: background-color .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out), transform .16s var(--ease-out); }
.exp-row { box-shadow: var(--elevation-1); }
.exp-row:active, .opt-row:active { transform: scale(.985); }
.exp-row:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), color-mix(in srgb, var(--primary) 7%, var(--surface)));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--primary) 10%, transparent);
}
.exp-row .imp-name { font-size: .98rem; font-weight: 700; color: var(--on-surface); }
.exp-row .imp-meta { font-size: .8rem; color: var(--on-surface-variant); }
.opt-row { background: color-mix(in srgb, var(--on-surface) 5%, var(--surface)); border: 1px solid transparent; }
.opt-row:has(input:checked) { background: var(--tint); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.opt-row strong { letter-spacing: .005em; }
.imp-link { transition: background-color .2s ease, transform .14s var(--ease-out); border-radius: 999px; }
.imp-link:active { background: var(--tint-strong); transform: scale(.96); }
#exp-go, #exp-cancel { transition: opacity .2s ease, transform .14s var(--ease-out), background-color .2s ease; }
#exp-go:not(:disabled):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
    .opt-row input[type="checkbox"], .exp-row input[type="checkbox"], .opt-row input[type="checkbox"]::after, .exp-row input[type="checkbox"]::after, .exp-row, .opt-row { transition: none; }
}

/* circular M3 state layer (replaces the square glow) */
.opt-row input[type="checkbox"], .exp-row input[type="checkbox"] { overflow: visible; }
.opt-row input[type="checkbox"]::before, .exp-row input[type="checkbox"]::before {
    content: ""; position: absolute; inset: -12px; border-radius: 50%; background: var(--tint-strong);
    transform: scale(.4); opacity: 0; pointer-events: none; transition: transform .24s var(--ease-out), opacity .2s ease;
}
.opt-row:active input[type="checkbox"], .exp-row:active input[type="checkbox"] { box-shadow: none; transform: scale(.94); }
.opt-row:active input[type="checkbox"]::before, .exp-row:active input[type="checkbox"]::before { transform: scale(1); opacity: 1; }
.opt-row input[type="checkbox"]:focus-visible, .exp-row input[type="checkbox"]:focus-visible { box-shadow: none; }
.opt-row input[type="checkbox"]:focus-visible::before, .exp-row input[type="checkbox"]:focus-visible::before { transform: scale(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .opt-row:hover input[type="checkbox"], .exp-row:hover input[type="checkbox"] { box-shadow: none; }
    .opt-row:hover input[type="checkbox"]::before, .exp-row:hover input[type="checkbox"]::before { transform: scale(1); opacity: .6; }
}

/* no colored glow: selected rows use a neutral elevation only */
.exp-row:has(input:checked) { box-shadow: var(--elevation-1); }

/* v3.18 icon type badges (flat seals, no glow) */
.type-badge.tb-ic{position:absolute;top:8px;left:8px;width:34px;height:34px;padding:0;border-radius:0;background:none!important;box-shadow:none;display:block;line-height:0;pointer-events:none}
.type-badge.tb-ic svg{width:100%;height:100%;display:block}
.drawer-sep{height:1px;margin:6px 16px;background:color-mix(in srgb,var(--on-surface) 16%,transparent)}

/* ===== v3.18 Select mode & bulk delete (flat, M3, no glow) ===== */
.head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sel-entry{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px 0 10px;border:0;border-radius:99px;background:var(--primary-container);color:var(--on-primary-container);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .15s}
.sel-entry svg{width:18px;height:18px;fill:none}
.sel-entry:active{filter:brightness(.94)}
.sel-bar{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 12px;padding-top:env(safe-area-inset-top,0px);background:var(--primary-container);color:var(--on-primary-container);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:5}
.sel-bar.active{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.sel-bar .icon-btn{background:transparent;color:inherit;box-shadow:none;flex-shrink:0}
.sel-title{flex:1;min-width:0;font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-act{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border:0;border-radius:99px;background:color-mix(in srgb,var(--on-primary-container) 12%,transparent);color:inherit;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.sel-act svg{width:20px;height:20px;fill:none}
.sel-act:active{background:color-mix(in srgb,var(--on-primary-container) 20%,transparent)}
.sel-act:disabled{opacity:.45;pointer-events:none}
.sel-act.sel-del{background:var(--error);color:#fff}
@media (max-width:359px){.sel-act span{display:none}.sel-act{padding:0 10px;min-width:40px;justify-content:center}}
body.sel-mode .fab{display:none}
body.sel-mode .head-actions{visibility:hidden}
body.sel-mode .context-menu-btn,body.sel-mode .drag-handle{visibility:hidden;pointer-events:none}
body.sel-mode .done-btn{pointer-events:none}
body.sel-mode .grid-item{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.sel-mode .grid-item::after{content:"";position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--on-surface-variant);box-sizing:border-box;z-index:6;pointer-events:none;transition:background .15s,border-color .15s}
body.sel-mode .grid-item.is-sel::after{background:var(--primary);border-color:var(--primary)}
body.sel-mode .grid-item.is-sel::before{content:"";position:absolute;top:8px;right:8px;width:26px;height:26px;z-index:7;pointer-events:none;background:var(--on-primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 13.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 13.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
body.sel-mode .grid-item.is-sel{outline:3px solid var(--primary);outline-offset:-3px;border-radius:var(--radius-md,16px);transform:scale(.97)}
body.sel-mode .grid-item{transition:transform .15s}
body.sel-mode .grid-item:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.undo-snackbar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);display:flex;align-items:center;gap:8px;width:min(calc(100vw - 24px),440px);box-sizing:border-box;padding:6px 6px 6px 16px;border-radius:12px;background:var(--on-surface);color:var(--surface);opacity:0;visibility:hidden;pointer-events:none;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:3000}
.undo-snackbar.active{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:transform .2s,opacity .2s}
.us-text{flex:1;min-width:0;font-size:.9rem;font-weight:600}
.us-btn{border:0;background:transparent;color:var(--primary-container);font:inherit;font-size:.88rem;font-weight:800;min-height:40px;padding:0 14px;border-radius:99px;cursor:pointer;letter-spacing:.02em}
.us-btn:active{background:color-mix(in srgb,var(--surface) 14%,transparent)}
@media (prefers-reduced-motion:reduce){.sel-bar,.undo-snackbar,body.sel-mode .grid-item{transition:none}}

/* v3.18 fix: header actions never overlap the section title on phones */
.section-head{flex-wrap:wrap;row-gap:8px}
.section-head .section-title{flex:1 1 auto}
.head-actions{margin-left:auto}
@media (max-width:479px){.head-actions .hint-chip{padding:8px}.head-actions .hint-label{display:none}}

/* ===== v3.18 connection status bar (flat, in page flow) ===== */
.net-bar{flex:0 0 auto;overflow:hidden;max-height:0;opacity:0;transition:max-height .22s ease,opacity .18s ease}
.net-bar.show{max-height:44px;opacity:1}
.net-in{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:6px 16px;font-size:.82rem;font-weight:700;letter-spacing:.01em;text-align:center}
.net-ico svg{width:18px;height:18px;display:block}
.net-bar.is-off .net-in{background:var(--error);color:#fff}
.net-bar.is-on .net-in{background:var(--primary);color:var(--on-primary)}
@media (prefers-reduced-motion:reduce){.net-bar{transition:none}}