/* Login */
body.auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #0b0c0f;
    color: #ffffff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-card {
    width: min(360px, 92vw);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
}

.auth-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.auth-sub {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.4;
}

.auth-error {
    margin: 10px 0 0;
    color: #ff5a6a;
    font-size: 13px;
}

.auth-page form {
    margin-top: 12px;
}

.auth-page input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    outline: none;
    font-size: 14px;
}

.auth-page input[type="password"]:focus {
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

.auth-page button {
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(96, 165, 250, 0.55);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.95), rgba(37, 99, 235, 0.9));
    color: #06121f;
    font-weight: 800;
    cursor: pointer;
}

.auth-page button:hover {
    filter: brightness(1.03);
}

/* App */
.badge.video {
    top: 3px;
    right: 3px;
}
button.lb-nav.prev { z-index: 100000; }
button.lb-nav.next { z-index: 10000; }

        :root{
            --bg: #f6f7fb;
            --bg-2:#eef1f7;
            --panel:#ffffff;
            --panel-2:#f3f5f9;
            --text:#0f172a;
            --muted: rgba(15,23,42,0.62);
            --border: rgba(15,23,42,0.12);
            --accent:#2563eb;
            --accent-2:#60a5fa;
            --radius:6px;
            --shadow: 0 16px 48px rgba(2,6,23,0.12);
            --sidebar-w: 150px;
            --topbar-h: 62px;
            --grid-size: 70px;
            --list-thumb-size: 46px;

            --fs-item-w: 74px;
            --fs-item-h: 52px;
            --fs-gap: 8px;
            --safe-b: env(safe-area-inset-bottom);
            --safe-t: env(safe-area-inset-top);
        }
        [data-theme="dark"]{
            --bg: #0b0c0f;
            --bg-2:#0f1116;
            --panel:#141824;
            --panel-2:#0f1420;
            --text:#ffffff;
            --muted: rgba(255,255,255,0.62);
            --border: rgba(255,255,255,0.12);
            --accent:#60a5fa;
            --accent-2:#22d3ee;
            --shadow: 0 18px 60px rgba(0,0,0,0.55);
        }

        *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
        html,body{height:100%;}
        body{
            margin:0;
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:var(--bg);
            color:var(--text);
            overflow-x:hidden;
        }

        a{color:inherit;}

        /* Layout */
        .app{display:flex; min-height:100vh;}
        .sidebar{
            width: var(--sidebar-w);
            position: sticky; top: 0;
            height: 100vh;
            background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.55));
            border-right: 1px solid var(--border);
            backdrop-filter: blur(10px);
            display:flex; flex-direction:column;
            z-index:50;
        }
        [data-theme="dark"] .sidebar{
            background: linear-gradient(180deg, rgba(20,24,36,0.80), rgba(15,17,22,0.65));
        }
        .sidebar .brand{
            height: var(--topbar-h);
            padding: 0 18px;
            display:flex; align-items:center; justify-content:space-between;
            border-bottom:1px solid var(--border);
        }
        .brand-title{font-weight:800; letter-spacing:0.2px; font-size:16px; display:flex; gap:10px; align-items:center;}
        .brand-dot{width:10px; height:10px; border-radius:50%; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow:0 0 0 6px rgba(96,165,250,0.12)}

        .side-scroll{padding:14px; overflow:auto; flex:1;}

        .stat{
            display:flex; justify-content:space-between; align-items:center;
            padding:10px 12px;
            border-radius: 12px;
            border:1px solid var(--border);
            background: rgba(255,255,255,0.60);
            margin-bottom: 14px;
        }
        [data-theme="dark"] .stat{background: rgba(0,0,0,0.22);}
        .stat strong{font-size:12px; letter-spacing:0.2px;}
        .pill{font-size:11px; color:var(--muted); padding:3px 8px; border-radius:999px; border:1px solid var(--border);}

        .nav-head{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin: 10px 2px 10px;}
        .nav{
            display:flex; flex-direction:column; gap:6px;
        }
        .nav a{
            text-decoration:none;
            display:flex; align-items:center; justify-content:space-between;
            padding:10px 12px;
            border-radius: 12px;
            border:1px solid transparent;
            color: var(--muted);
        }
        .nav a:hover{background: rgba(255,255,255,0.55); border-color: var(--border); color: var(--text);}
        [data-theme="dark"] .nav a:hover{background: rgba(255,255,255,0.06);}
        .nav a.active{background: linear-gradient(180deg, rgba(37,99,235,0.95), rgba(37,99,235,0.72)); color: white; border-color: rgba(255,255,255,0.18);}
        .nav a.active .pill{color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.18);}

        .side-footer{
            padding: 12px 14px calc(12px + var(--safe-b));
            border-top: 1px solid var(--border);
            background: rgba(255,255,255,0.45);
        }
        [data-theme="dark"] .side-footer{background: rgba(0,0,0,0.20)}
        .logout{
            width:100%;
            display:flex; align-items:center; justify-content:center;
            padding:10px 12px;
            border-radius: 12px;
            border:1px solid var(--border);
            background: rgba(255,255,255,0.55);
            text-decoration:none;
            font-weight:700;
        }
        [data-theme="dark"] .logout{background: rgba(255,255,255,0.06)}
        .logout:hover{filter:brightness(1.02)}

        /* Main */
        .main{flex:1; min-width:0; display:flex; flex-direction:column;}
        .topbar{
            height: var(--topbar-h);
            position: sticky; top: 0;
            z-index: 40;
            display:flex; align-items:center; gap:12px;
            padding: 0 14px;
            border-bottom: 1px solid var(--border);
            background: rgba(255,255,255,0.70);
            backdrop-filter: blur(10px);
        }
        [data-theme="dark"] .topbar{background: rgba(15,17,22,0.72)}

        .mobile-toggle{display:none;}
        .titlewrap{display:flex; flex-direction:column; gap:2px; min-width: 160px;}
        .title{font-weight:900; letter-spacing:0.2px; font-size:16px; line-height:1.1;}
        .subtitle{font-size:12px; color: var(--muted);}

        .spacer{flex:1;}

        .search{
            display:flex; align-items:center; gap:8px;
            padding: 8px 10px;
            border-radius: 999px;
            border:1px solid var(--border);
            background: rgba(255,255,255,0.55);
            min-width: 260px;
        }
        [data-theme="dark"] .search{background: rgba(0,0,0,0.22)}
        .search input{
            border:none; outline:none; background: transparent;
            color: var(--text);
            width: 220px;
            font-size: 13px;
        }
        .search input::placeholder{color: rgba(127,127,127,0.8)}
        .search button{
            border:none; background: transparent; cursor:pointer;
            color: var(--muted);
            font-size: 16px;
            padding:0 4px;
        }

        .search{position:relative;}
        .scopeBtn{opacity:0.9}
        .scopeBtn.on{color: var(--accent);}

        .search-suggest{
            position:absolute;
            top: calc(100% + 8px);
            left: 10px;
            right: 10px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: var(--shadow);
            overflow:hidden;
            z-index: 80;
        }
        [data-theme="dark"] .search-suggest{background: rgba(20,24,36,0.98)}
        .search-suggest .s-item{
            padding: 10px 12px;
            font-size: 13px;
            cursor: pointer;
            display:flex;
            justify-content:space-between;
            gap:10px;
        }
        .search-suggest .s-item:hover,
        .search-suggest .s-item.active{background: rgba(96,165,250,0.12)}
        .search-suggest .s-hint{color: var(--muted); font-size: 11px;}

        .inp{
            width: 100%;
            padding: 8px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.55);
            color: var(--text);
            outline: none;
            font-size: 13px;
        }
        [data-theme="dark"] .inp{background: rgba(0,0,0,0.22)}
        textarea.inp{resize: vertical; min-height: 44px;}
        .mini{
            border: 1px solid rgba(96,165,250,0.55);
            background: rgba(96,165,250,0.16);
            color: var(--text);
            font-weight: 900;
            border-radius: 12px;
            padding: 8px 10px;
            cursor: pointer;
        }
        .hint{margin-left:10px; font-size:12px; color: var(--muted)}
        .chipbar{
            display:grid; align-items:center; gap:10px;
            padding: 12px 14px;
            flex-wrap: wrap;
        }
        .chipbar {
            padding: 10px;
        }
        .seg{
            display: inline-flex;
            gap: 5px;
            margin: 4px;
            padding: 5px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, 0.55);
        }
        [data-theme="dark"] .seg{background: rgba(0,0,0,0.22)}
        .seg button{
            border:none; cursor:pointer;
            padding: 8px 12px;
            border-radius: 999px;
            background: transparent;
            color: var(--muted);
            font-weight: 800;
            font-size: 12px;
        }
        .seg button.active{background: rgba(37,99,235,0.16); color: var(--text);}
        [data-theme="dark"] .seg button.active{background: rgba(96,165,250,0.16)}

        .btn{
            height: 40px; min-width: 40px;
            border-radius: 999px;
            border:1px solid var(--border);
            background: rgba(255,255,255,0.55);
            color: var(--text);
            cursor:pointer;
            display:flex; align-items:center; justify-content:center;
            font-size: 16px;
            transition: transform .12s ease, filter .12s ease;
        }
        [data-theme="dark"] .btn{background: rgba(0,0,0,0.22)}
        .btn:hover{transform: translateY(-1px); filter:brightness(1.03)}

        .top-actions{display:flex; gap:8px; align-items:center;}
        .mobile-only{display:none;}

        /* Chipbar als drawer (altijd; op desktop ook via knop) */
        .chipdrawer{
            position:fixed;
            right:0; top:0;
            width: min(380px, 92vw);
            height:100vh;
            transform: translateX(102%);
            transition: transform .22s ease;
            z-index: 70;
            background: linear-gradient(180deg, rgba(20,24,36,0.86), rgba(15,17,22,0.70));
            border-left: 1px solid var(--border);
            box-shadow: -18px 0 60px rgba(0,0,0,0.45);
            backdrop-filter: blur(10px);
            display:flex;
            flex-direction:column;
        }
        [data-theme="light"] .chipdrawer{
            background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72));
            box-shadow: -18px 0 60px rgba(2,6,23,0.18);
        }
        .chipdrawer.on{transform: translateX(0)}
        .chipdrawer-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding: calc(10px + var(--safe-t)) 14px 10px;
            border-bottom:1px solid var(--border);
        }
        .chipdrawer-title{font-weight:900; letter-spacing:0.2px;}
        .chipdrawer .chipbar{padding: 12px 14px calc(14px + var(--safe-b)); overflow:auto;}

        google-cast-launcher{width:40px; height:40px; display:block !important; --connected-color: var(--accent); --disconnected-color: var(--muted);}
        google-cast-launcher[style*="display: none"]{display:block !important; opacity:0.55;}

        .slider{
            display:inline-flex; align-items:center; gap:10px;
            padding: 8px 12px;
            border-radius: 999px;
            border:1px solid var(--border);
            background: rgba(255,255,255,0.55);
        }
        [data-theme="dark"] .slider{background: rgba(0,0,0,0.22)}
        input[type=range]{-webkit-appearance:none; appearance:none; background:transparent; width: 180px;}
        input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:999px; background: rgba(127,127,127,0.35)}
        input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%; background: var(--accent); margin-top:-6px; border: 2px solid rgba(255,255,255,0.65)}

        /* Content */
        .content{padding: 0 14px 20px;}
        .empty-state{
            margin: 18px 0 0;
            padding: 24px 20px;
            border: 1px solid var(--border);
            border-radius: 20px;
            background: rgba(255,255,255,0.45);
            display: grid;
            gap: 6px;
            text-align: center;
            color: var(--muted);
        }
        [data-theme="dark"] .empty-state{background: rgba(255,255,255,0.04)}
        .empty-state strong{
            color: var(--text);
            font-size: 16px;
            letter-spacing: 0.2px;
        }
        .section-head{
            padding: 14px 0 10px;
            font-weight: 900;
            letter-spacing:0.2px;
            z-index: 5;
        }
        .grid{
            display:grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr));
            gap: 3px;
        }
        .card{
            position:relative;
            aspect-ratio: 1 / 1;
            border-radius:var(--radius);
            overflow:hidden;
            background: rgba(127,127,127,0.15);
            cursor:pointer;
            border: 1px solid rgba(255,255,255,0.00);
            transition: transform .14s ease, border-color .14s ease, filter .14s ease;
            content-visibility: auto;
            contain-intrinsic-size: 120px 120px;
        }
        .card:hover{transform: translateY(-2px); border-color: rgba(96,165,250,0.45); filter: brightness(1.03)}
        .card img{
            width:100%; height:100%; object-fit:cover;
            display:block;
        }
        .badge{
            position: absolute;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 6px;
            border-radius: 999px;
            font-size: 11px;
            background: rgba(0, 0, 0, 0.50);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .location_name {
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 11px;
            line-height: 1.2;
            text-align: center;
        }
        .badge.bottom{
            top: auto;
            bottom: 3px;
            left: 3px;
            max-width: calc(100% - 3px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 700;
            opacity: 0.92;
        }
        .badge.owner{
            left: 3px;
            top: 3px;
            font-weight: 900;
            width: 22px;
            height: 22px;
            padding: 0;
            justify-content:center;
            letter-spacing: 0.2px;
            background: rgba(0, 0, 0, 0.55);
        }

        /* Selectie: vinkje links-boven over de user-letter */
        .badge.owner{position:absolute; z-index: 6;}
        .badge.owner .owner-initial{position:relative; z-index:1; line-height:1}
        .badge.owner .sel-check{
            position:absolute;
            top:-5px; left:-5px;
            width: 16px; height: 16px;
            display:none;
            align-items:center; justify-content:center;
            font-weight: 900;
            font-size: 11px;
            background: rgba(96,165,250,0.95);
            color: #06121f;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.35);
            box-shadow: 0 6px 14px rgba(0,0,0,0.35);
            z-index:2;
            pointer-events:none;
        }
        .card.is-selected .badge.owner .sel-check{display:flex;}
        .card.is-selected{outline: 2px solid rgba(96,165,250,0.75); outline-offset:-2px;}

        .selbar{
            position: fixed;
            left: 10px; right: 10px;
            bottom: calc(10px + var(--safe-b, 0px));
            z-index: 9999;
            display: none;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(12,13,16,0.82);
            backdrop-filter: blur(10px);
            color: #fff;
            box-shadow: 0 18px 50px rgba(0,0,0,0.55);
        }
        [data-theme="light"] .selbar{
            background: rgba(255,255,255,0.86);
            color: var(--text);
            border-color: rgba(0,0,0,0.08);
        }
        .selbar.on{display:flex;}
        .sel-left{display:flex; align-items:baseline; gap:8px; font-weight:900}
        .sel-count{font-size:18px;}
        .sel-text{font-size:12px; opacity:0.75; font-weight:800}
        .sel-actions{margin-left:auto; display:flex; gap:8px; align-items:center;}
        .sel-btn{
            height: 38px; min-width: 38px;
            padding: 0 10px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.16);
            background: rgba(255,255,255,0.10);
            color: inherit;
            font-weight: 900;
            cursor: pointer;
        }
        [data-theme="light"] .sel-btn{border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.04)}
        .sel-btn:hover{filter: brightness(1.05);}
        .sel-btn.danger{border-color: rgba(255,90,106,0.35); background: rgba(255,90,106,0.12)}
        .sel-status{
            width: 100%;
            max-width: 320px;
            flex: 1 1 260px;
            font-size: 12px;
            opacity: 0.75;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: none;
        }
        .selbar.on .sel-status{display:block;}
        @media (max-width: 520px){
            .selbar{flex-wrap:wrap; gap:8px;}
            .sel-actions{margin-left:0; width:100%; justify-content:flex-end;}
            .sel-status{
                display:block !important;
                flex-basis:100%;
                max-width:none;
                white-space:normal;
                overflow:visible;
                text-overflow:clip;
            }
        }



        /* List view */
        .table-scroll{
            overflow-x:auto;
            -webkit-overflow-scrolling: touch;
            border-radius: var(--radius);
        }
        .list{
            width:100%;
            border-collapse: collapse;
            overflow:hidden;
            border-radius: var(--radius);
            border:1px solid var(--border);
            background: rgba(255,255,255,0.55);
        }
        [data-theme="dark"] .list{background: rgba(0,0,0,0.18)}
        .list th, .list td{
            padding: 10px 10px;
            font-size: clamp(11px, 1.6vw, 13px);
            border-bottom: 1px solid var(--border);
            text-align:left;
            white-space: nowrap;
        }
        .list th{
            font-size: clamp(10px, 1.4vw, 11px);
            letter-spacing:0.8px;
            text-transform:uppercase;
            color: var(--muted);
            background: rgba(255,255,255,0.35);
            position: sticky;
            top: 0;
            z-index: 2;
        }
        [data-theme="dark"] .list th{background: rgba(255,255,255,0.06)}
        .list tr{cursor:pointer;}
        .list tr:hover{background: rgba(96,165,250,0.10)}
        .mono{font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;}

        /* Default: verberg optionele kolommen al vóór JS */
        .list [data-col][data-default="0"]{display:none;}

        .th-link{
            color: inherit;
            text-decoration: none;
            font-weight: 900;
        }
        .th-link:hover{ text-decoration: underline; }

        .t-thumb{
            width: var(--list-thumb-size);
            height: var(--list-thumb-size);
            border-radius: 12px;
            object-fit: cover;
            display:block;
        }
        .lt-thumb{
            position: relative;
            width: var(--list-thumb-size);
            height: var(--list-thumb-size);
        }
        .lt-thumb .t-play{
            position:absolute;
            right: 6px;
            bottom: 6px;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.18);
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size: 11px;
            font-weight: 900;
            backdrop-filter: blur(6px);
        }

        .td-filename{
            max-width: min(62vw, 520px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 800;
        }

        /* Kolommen dropdown */
        .colmenu{ position: relative; }
        .colpanel{
            position: fixed;
            right: 0;
            top: 48px;
            width: min(280px, 88vw);
            max-height: 62vh;
            overflow: auto;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: var(--shadow);
            padding: 10px;
            display: none;
            z-index: 60;
        }
        .colpanel.on{ display:block; }

        .coltitle{
            font-weight: 900;
            font-size: 12px;
            letter-spacing: 0.6px;
            color: var(--muted);
            text-transform: uppercase;
            margin: 4px 6px 8px;
        }

        .colitem{
            display:flex;
            align-items:center;
            gap:10px;
            padding: 7px 8px;
            border-radius: 10px;
            border: 1px solid transparent;
            cursor: pointer;
        }
        .colitem:hover{
            background: rgba(127,127,127,0.10);
            border-color: var(--border);
        }
        .colitem input{ accent-color: var(--accent); }

        .colactions{
            display:flex;
            gap:8px;
            padding: 10px 6px 6px;
        }
        .colbtn{
            flex:1;
            padding: 10px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,0.55);
            color: var(--text);
            font-weight: 900;
            cursor: pointer;
        }
        [data-theme="dark"] .colbtn{ background: rgba(0,0,0,0.22); }
        .colbtn:hover{ filter: brightness(1.03); }

        /* Mobile sidebar overlay */
        .overlay{position:fixed; inset:0; background: rgba(0,0,0,0.55); z-index:45; opacity:0; pointer-events:none; transition: opacity .2s ease; backdrop-filter: blur(2px)}
        .overlay.on{opacity:1; pointer-events:auto;}

        /* ========================
           Stats modal (samenvatting)
           ======================== */
        .statsmodal{
            position:fixed;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%) scale(.98);
            width:min(980px, 94vw);
            max-height: min(84vh, 720px);
            overflow:hidden;
            background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
            border:1px solid var(--border);
            border-radius: 18px;
            box-shadow: 0 30px 120px rgba(0,0,0,0.65);
            backdrop-filter: blur(12px);
            z-index: 80;
            opacity:0;
            pointer-events:none;
            transition: opacity .18s ease, transform .18s ease;
            display:flex;
            flex-direction:column;
        }
        .statsmodal.on{
            opacity:1;
            pointer-events:auto;
            transform: translate(-50%,-50%) scale(1);
        }
        [data-theme="light"] .statsmodal{
            background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.78));
            box-shadow: 0 18px 70px rgba(2,6,23,0.20);
        }
        .stats-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding: calc(12px + var(--safe-t)) 14px 12px;
            border-bottom:1px solid var(--border);
        }
        .stats-title{font-weight: 950; letter-spacing: .2px;}
        .stats-body{padding: 12px 14px calc(14px + var(--safe-b)); overflow:auto; text-align:left;}
        .kpis{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:12px;}
        .kpi{
            background: var(--panel);
            border:1px solid var(--border);
            border-radius: 14px;
            padding: 10px 12px;
                    text-align:left;
        }
        .kpi .lab{color: var(--muted); font-size:12px}
        .kpi .val{font-size:18px; font-weight:900; margin-top:4px}
        .kpi .sub{margin-top:6px; color: var(--muted); font-size:12px}
        .stats-table-wrap{overflow:auto; border:1px solid var(--border); border-radius: 14px; background: var(--panel);}
        table.stats-table{width:100%; border-collapse: collapse; min-width: 920px;}
        .stats-table th, .stats-table td{padding: 10px 10px; border-bottom:1px solid rgba(255,255,255,0.10); text-align:left; white-space:nowrap;}
        [data-theme="light"] .stats-table th, [data-theme="light"] .stats-table td{border-bottom:1px solid rgba(2,6,23,0.08);}
        .stats-table thead th{font-size:12px; color: var(--muted); font-weight:900; background: rgba(0,0,0,0.12); position: sticky; top: 0; z-index:1;}
        [data-theme="light"] .stats-table thead th{background: rgba(2,6,23,0.04);}
        .stats-table td:first-child, .stats-table th:first-child{text-align:left;}
        .stats-owner{display:flex; align-items:center; gap:10px;}
        .stats-badge{width:26px; height:26px; border-radius: 999px; background: rgba(96,165,250,0.18); border:1px solid rgba(96,165,250,0.35); display:inline-flex; align-items:center; justify-content:center; font-weight:900; color: var(--text);}
        .stats-foot{margin-top: 10px; color: var(--muted); font-size:12px;}
.stats-loading{padding: 12px 10px; color: var(--muted); text-align:left;}
.stats-error{margin: 0 0 10px; color:#ff5a6a; font-size:13px; font-weight:700;}
        @media (max-width: 760px){
            .kpis{grid-template-columns: 1fr;}
            .statsmodal{top: 50%; max-height: 88vh;}
            table.stats-table{min-width: 860px;}
        }


        /* Lightbox */
        .lightbox{
            position:fixed; inset:0;
            background: rgba(0,0,0,0.92);
            z-index: 2000;
            opacity:0; pointer-events:none;
            transition: opacity .16s ease;
        }
        .lightbox.on{opacity:1; pointer-events:auto;}
        .lb-shell{position:absolute; inset:0; display:flex; flex-direction:column;}

        .lb-top{
            height: 62px;
            padding: calc(10px + var(--safe-t)) 12px 10px;
            display:flex; align-items:center; gap:10px;
            color:#fff;
        }
        .lb-top .lb-btn{
            width:42px; height:42px;
            border-radius: 999px;
            border:1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.10);
            color:#fff;
            cursor:pointer;
            backdrop-filter: blur(8px);
            display:flex; align-items:center; justify-content:center;
            font-size: 18px;
        }
        .lb-top .lb-btn:hover{background: rgba(255,255,255,0.14)}
        .lb-top .lb-meta{min-width:0; display:flex; flex-direction:column; gap:1px;}
        .lb-top .lb-title{font-weight:900; font-size:13px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 56vw;}
        .lb-top .lb-sub{font-size: 12px; opacity: 0.72; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; max-width: 56vw;}
        .lb-top .lb-right{margin-left:auto; display:flex; gap:8px; align-items:center;}
        .lb-btn.is-active{background: rgba(96,165,250,0.22); border-color: rgba(96,165,250,0.55);}

        .lb-section{display:none;}
        .lb-section.on{display:block;}
        .lb-pop-title{font-size:13px; font-weight:900; letter-spacing:0.2px; margin:0 0 4px;}
        .lb-pop-sub{font-size:12px; color:var(--muted); line-height:1.4; margin:0 0 12px;}
        .lb-pop-grid{display:grid; gap:12px;}
        .lb-pop-row{display:grid; gap:7px;}
        .lb-pop-label{font-size:11px; font-weight:900; letter-spacing:0.7px; text-transform:uppercase; color:var(--muted);}
        .lb-pop-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
        .lb-pop-seg{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:6px;
        }
        .lb-pop-seg button,
        .lb-pop-action{
            min-height: 38px;
            padding: 9px 10px;
            border-radius: 12px;
            border:1px solid var(--border);
            background: rgba(127,127,127,0.08);
            color:var(--text);
            font-size:12px;
            font-weight:800;
            cursor:pointer;
        }
        .lb-pop-seg button.active,
        .lb-pop-action.primary{
            background: rgba(96,165,250,0.20);
            border-color: rgba(96,165,250,0.58);
        }
        .lb-pop-speed{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;}
        .lb-pop-speed input[type=range]{width:100%; margin:0;}
        .lb-pop-chip{
            min-width:64px;
            text-align:center;
            padding:8px 10px;
            border-radius:12px;
            background: rgba(127,127,127,0.08);
            border:1px solid var(--border);
            font-size:12px;
            font-weight:900;
            color:var(--text);
        }
        .lb-pop-actions{display:grid; grid-template-columns: 1fr 1fr; gap:8px;}
        .lb-pop-note{font-size:11px; line-height:1.4; color:var(--muted);}
        .lb-owner-actions{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
        .lb-owner-toggle{
            min-height: 28px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(127,127,127,0.08);
            color: var(--text);
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
        }
        .lb-owner-toggle.active{
            background: rgba(96,165,250,0.20);
            border-color: rgba(96,165,250,0.58);
        }
        .lb-owner-grid{
            display:grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap:8px;
        }
        .lb-owner-option{position:relative; display:block;}
        .lb-owner-option input{
            position:absolute;
            opacity:0;
            pointer-events:none;
        }
        .lb-owner-pill{
            display:flex;
            align-items:center;
            gap:8px;
            min-height: 42px;
            padding: 9px 10px;
            border-radius: 12px;
            border:1px solid var(--border);
            background: rgba(127,127,127,0.08);
            color:var(--text);
            cursor:pointer;
            transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
        }
        .lb-owner-option input:checked + .lb-owner-pill{
            background: rgba(96,165,250,0.20);
            border-color: rgba(96,165,250,0.58);
        }
        .lb-owner-option input:focus-visible + .lb-owner-pill{
            box-shadow: 0 0 0 3px rgba(96,165,250,0.18);
        }
        .lb-owner-option:hover .lb-owner-pill{
            transform: translateY(-1px);
        }
        .lb-owner-initial{
            width: 24px;
            height: 24px;
            display:grid;
            place-items:center;
            border-radius:999px;
            background: rgba(96,165,250,0.16);
            color: var(--accent);
            font-size: 11px;
            font-weight: 900;
            flex: 0 0 24px;
        }
        .lb-owner-name{
            min-width: 0;
            flex: 1 1 auto;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lb-owner-count{
            flex: 0 0 auto;
            min-width: 24px;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            font-size: 11px;
            font-weight: 900;
            text-align: center;
        }
        [data-theme="light"] .lb-owner-count{
            background: rgba(15,23,42,0.08);
        }
        .lb-owner-hint{font-size:11px; line-height:1.4; color:var(--muted);}

        .lb-body{flex:1; min-height:0; display:grid; grid-template-columns: 1fr 360px;}
        .lb-body.info-closed{grid-template-columns: 1fr 0px;}

        .lb-stage{position:relative; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; padding: 0 12px;}
        .lb-media-wrap{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;}

        .lb-media{
            width:100%; height:100%; object-fit: contain;
            max-width: 100%; max-height: 100%;
            user-select:none; -webkit-user-drag:none;
            touch-action:none;
            transform-origin: center center;
            will-change: transform;
            cursor: grab;
            transition: transform .22s cubic-bezier(0.2,0,0.2,1);
        }
        .lb-media.is-interacting{cursor: grabbing; transition:none !important;}

        .lb-nav{
            position:absolute; top:50%; transform: translateY(-50%);
            width: 52px; height: 52px;
            border-radius: 999px;
            border:1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.08);
            color:#fff;
            cursor:pointer;
            backdrop-filter: blur(8px);
            display:flex; align-items:center; justify-content:center;
            font-size: 22px;
            opacity: 0.85;
        }
        .lb-nav:hover{opacity: 1; background: rgba(255,255,255,0.12)}
        .lb-nav.prev{left: 14px;}
        .lb-nav.next{right: 14px;}

        .lb-counter{
            position:absolute; bottom: calc(12px + var(--safe-b)); left: 50%; transform: translateX(-50%);
            padding: 7px 12px;
            border-radius: 999px;
            background: rgba(0,0,0,0.55);
            border: 1px solid rgba(255,255,255,0.16);
            color:#fff;
            font-size: 12px;
            font-weight: 800;
            backdrop-filter: blur(6px);
            pointer-events:none;
        }

        .lb-inspector{
            min-width:0; min-height:0;
            background: var(--panel);
            color: var(--text);
            border-left: 1px solid rgba(255,255,255,0.10);
            transform: translateX(100%);
            transition: transform .2s ease;
            overflow-y: auto;
            padding: 12px 12px 12px;
        }
        .lb-inspector.open {
            transform: translateX(0);
        }
        .insp-title{margin: 4px 0 8px; font-weight: 950; font-size: 13px; letter-spacing:0.2px;}
        .group{border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px;}
        .group:first-child{border-top:none; padding-top:0; margin-top:0;}
        .g-head{font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 950; color: var(--muted); margin-bottom: 6px;}
        .row{display:flex; justify-content:space-between; gap:10px; padding: 4px 0; font-size: 12px;}
        .lbl{color: var(--muted);}
        .val{font-weight: 750; text-align:right; word-break: break-word; width: 100%;}
        .act-row{display:flex; gap:8px; flex-wrap:wrap;}
        .act-row .mini{padding: 8px 10px; border-radius: 12px; font-size: 12px;}
        .map{height: 150px; border-radius: 14px; overflow:hidden; border:1px solid var(--border); background: rgba(127,127,127,0.15); margin-top: 10px; display:none;}
        .map iframe{width:100%; height:100%; border:none;}

        .lb-film{
            height: calc(86px + var(--safe-b));
            padding: 10px 12px calc(10px + var(--safe-b));
            border-top: 1px solid rgba(255,255,255,0.12);
            background: rgba(0,0,0,0.25);
            backdrop-filter: blur(10px);
        }
        .film-wrap{
            position:relative;
            height: 66px;
            border-radius: 14px;
            border:1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
            overflow:hidden;
        }
        .film-scroll{position:absolute; inset:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
        .film-scroll::-webkit-scrollbar{display:none;}
        .film-track{position:relative; height:100%;}

        .fs-item{
            position:absolute; top: 7px;
            width: var(--fs-item-w);
            height: var(--fs-item-h);
            padding:0;
            border-radius: 12px;
            border:1px solid rgba(255,255,255,0.10);
            overflow:hidden;
            background: rgba(255,255,255,0.05);
            cursor:pointer;
            transition: transform .12s ease, border-color .12s ease;
        }
        .fs-item:hover{transform: translateY(-1px); border-color: rgba(96,165,250,0.55)}
        .fs-item img{width:100%; height:100%; object-fit:cover; display:block;}
        .fs-item.active{border-color: rgba(96,165,250,0.95); box-shadow: 0 0 0 3px rgba(96,165,250,0.16);}
        .fs-item .fs-video{
            position: absolute;
            right: 2px;
            top: 2px;
            width: 15px;
            height: 15px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.50);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7px;
        }

        
        .fs-item .fs-owner{
            position: absolute;
            left: 2px;
            top: 2px;
            width: 15px;
            height: 15px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.50);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 900;
            letter-spacing: 0.2px;
        }

/* Responsive */
        @media (max-width: 700px){
            .sidebar{position:fixed; left:0; top:0; height:100vh; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 60px rgba(0,0,0,0.35)}
            .sidebar.on{transform: translateX(0)}
            .mobile-toggle{display:flex}
            .mobile-only{display:flex}
            .topbar{padding-left: 10px}
            .titlewrap{min-width: 0}
            .subtitle{display:none}
            .spacer{display:none}
            .search{display:flex; min-width:0; flex:1; max-width:none;}
            .search input{width:100%; min-width:0;}
            .top-actions{margin-left:auto;}
            .chipbar{padding-top: 10px}

            .chipdrawer{width:min(360px, 92vw);}

            /* Kolommen menu: als sheet binnen beeld + goed scrollbaar */
            .colpanel{
                position: fixed;
                left: 10px;
                right: 10px;
                top: auto;
                bottom: calc(10px + var(--safe-b));
                width: auto;
                max-height: min(70vh, 520px);
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                z-index: 90;
            }
            .colactions{position: sticky; bottom: 0; background: var(--panel); padding-top: 10px;}
            .content{ padding: 0 10px 16px; }
            .chipbar{ padding: 10px 10px; gap:8px; }
            .chipdrawer .seg{width:100%;}
            .chipdrawer .seg button{inline-flex:1; text-align:center; justify-content:center; min-width:0;}
            .chipdrawer .slider{width:100%;}
            .chipdrawer input[type=range]{width:100%;}
            .chipdrawer .colmenu{width:100%; display:flex; justify-content:flex-end;}
            .list th, .list td{ padding: 8px 8px; }
            .td-filename{ max-width: 70vw; }

            /* Lightbox: split-view in rows (niet over de foto heen) */
            .lb-body{display:grid; grid-template-columns: 1fr; grid-template-rows: 1fr 44vh;}
            .lb-body.info-closed{grid-template-rows: 1fr 0vh;}
            .lb-inspector{border-left:none; border-top:1px solid rgba(255,255,255,0.10)}
            .lb-nav{width:44px; height:44px}
        }

        @media (prefers-reduced-motion: reduce){
            *{scroll-behavior:auto !important; transition:none !important;}
        }
    

        /* Toast (status) */
        .toast{
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(72px + var(--safe-b, 0px));
            width: min(820px, calc(100vw - 22px));
            padding: 10px 12px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(15,17,22,0.85);
            color: #fff;
            font-weight: 800;
            font-size: 13px;
            display: none;
            z-index: 10000;
            box-shadow: 0 18px 60px rgba(0,0,0,0.45);
            backdrop-filter: blur(10px);
            text-align: center;
        }
        .toast.show{display:block;}