/* ==========================================================================
   Vrij.land — video website
   Premium kanaal-uitstraling, licht en donker thema, desktop en mobiel.
   ========================================================================== */
:root{
  --bg:#ffffff;--surface:#ffffff;--raised:#ffffff;--soft:#f2f2f2;--soft-2:#e9e9e9;--hover:#e5e5e5;
  --text:#0f0f0f;--muted:#606060;--faint:#8c8c8c;--line:#e5e5e5;--line-strong:#d0d0d0;
  --brand:#ef171d;--brand-dark:#c90e14;--brand-soft:#ffeaea;--brand-ink:#a5080d;
  --accent:var(--brand);--on-accent:#ffffff;
  --chip-on-bg:#0f0f0f;--chip-on-fg:#ffffff;
  --ok-bg:#e6f6ec;--ok-fg:#146c3b;--warn-bg:#fff5d6;--warn-fg:#6f5300;--info-bg:#e5f1ff;--info-fg:#145d99;
  --overlay:rgba(15,15,15,.5);--glass:rgba(255,255,255,.86);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --shadow-lg:0 24px 60px rgba(0,0,0,.18);
  --radius:12px;--radius-lg:16px;--radius-xl:22px;
  --topbar:56px;--rail:240px;--rail-mini:72px;
  /* oudere namen blijven werken */
  --red:var(--brand);--red-dark:var(--brand-dark);--shadow:var(--shadow-md);
  font-family:"Roboto","Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f0f0f;--surface:#0f0f0f;--raised:#212121;--soft:#272727;--soft-2:#303030;--hover:#3a3a3a;
    --text:#f1f1f1;--muted:#aaaaaa;--faint:#7d7d7d;--line:#2e2e2e;--line-strong:#3d3d3d;
    --brand-soft:#3a1517;--brand-ink:#ff8a8e;
    --chip-on-bg:#f1f1f1;--chip-on-fg:#0f0f0f;
    --ok-bg:#12301f;--ok-fg:#7fd6a2;--warn-bg:#352b0c;--warn-fg:#f0d27a;--info-bg:#10273d;--info-fg:#8cc4f5;
    --overlay:rgba(0,0,0,.66);--glass:rgba(15,15,15,.86);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow-md:0 10px 30px rgba(0,0,0,.45);--shadow-lg:0 24px 70px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{--bg:#0f0f0f;--surface:#0f0f0f;--raised:#212121;--soft:#272727;--soft-2:#303030;--hover:#3a3a3a;--text:#f1f1f1;--muted:#aaaaaa;--faint:#7d7d7d;--line:#2e2e2e;--line-strong:#3d3d3d;--brand-soft:#3a1517;--brand-ink:#ff8a8e;--chip-on-bg:#f1f1f1;--chip-on-fg:#0f0f0f;--ok-bg:#12301f;--ok-fg:#7fd6a2;--warn-bg:#352b0c;--warn-fg:#f0d27a;--info-bg:#10273d;--info-fg:#8cc4f5;--overlay:rgba(0,0,0,.66);--glass:rgba(15,15,15,.86);color-scheme:dark}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body,button,input,textarea,select{font:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
[hidden]{display:none!important}
.spacer{flex:1}
.grow{flex:1}
.shell{width:100%;max-width:1680px;margin:auto;padding:0 24px}
.ui-icon{display:block;width:1.25em;height:1.25em;fill:currentColor;flex:0 0 auto}
.lock-icon{display:block;width:24px;height:24px;fill:currentColor}
.meta{color:var(--muted);font-size:13px}
.eyebrow{color:var(--brand);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}

/* ---------- Bovenbalk ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:50;height:var(--topbar);background:var(--glass);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px)}
.topbar .shell{height:100%;display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,640px) minmax(0,1fr);align-items:center;gap:16px;max-width:none;padding:0 16px}
.topbar-start{display:flex;align-items:center;gap:8px;min-width:0}
.topbar-end{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.brand{display:flex;align-items:center;flex:0 0 auto;border:0;padding:0 4px;border-radius:8px}
.brand img{display:block;width:124px;height:36px;object-fit:contain;object-position:left center;transition:opacity .15s}
.brand:hover img{opacity:.85}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1) contrast(.95)}}
.brand img.own-dark{filter:none!important}
.menu-button,.iconbtn{width:40px;height:40px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--text);transition:background .15s}
.menu-button:hover,.iconbtn:hover{background:var(--soft)}
.menu-button svg{width:22px;height:22px;fill:currentColor}
.iconbtn .ui-icon{width:20px;height:20px}
.search{position:relative;display:flex;width:100%;margin:0}
.search input{flex:1;min-width:0;height:40px;padding:0 16px 0 18px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-right:0;border-radius:40px 0 0 40px;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.05);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search input:focus{border-color:#1c62b9;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.search-button{flex:0 0 64px;height:40px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:0 40px 40px 0;background:var(--soft);cursor:pointer;color:var(--text);transition:background .15s}
.search-button:hover{background:var(--hover)}
.search-button svg{width:22px;height:22px;fill:currentColor}
.nav{display:none}

/* ---------- Zijbalk ---------- */
.app-layout{min-height:100vh;padding-top:var(--topbar)}
.side-rail{position:fixed;left:0;top:var(--topbar);bottom:0;z-index:30;width:var(--rail);padding:12px;background:var(--bg);overflow-y:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}
.side-rail:hover{scrollbar-color:var(--line-strong) transparent}
.rail-nav{display:grid;gap:2px}
.rail-link{display:flex;align-items:center;gap:22px;min-height:40px;padding:0 12px;border-radius:10px;color:var(--text);font-weight:400;font-size:14px;transition:background .15s}
.rail-link svg{width:22px;height:22px;flex:0 0 auto;fill:currentColor}
.rail-link:hover{background:var(--soft)}
.rail-link.active{background:var(--soft);font-weight:600}
.rail-link.active:hover{background:var(--hover)}
.rail-divider{height:1px;background:var(--line);margin:12px 4px}
.rail-label{margin:6px 12px 6px;color:var(--text);font-size:16px;font-weight:600}
.rail-brand{display:flex;align-items:center;gap:14px;padding:6px 12px;border-radius:10px;color:var(--text);font-size:14px}
.rail-categories{display:grid;gap:2px;margin-bottom:4px;max-height:340px;overflow-y:auto}
.category-link{width:100%;border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;gap:16px}
.category-link .cat-dot{width:8px;height:8px;margin:0 7px;border-radius:50%;flex:0 0 auto;background:var(--line-strong);transition:background .15s}
.category-link .cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-link .cat-count{color:var(--muted);font-size:12px}
.category-link.active .cat-dot{background:var(--brand)}
.content{min-width:0;margin-left:var(--rail);padding:0 32px 72px}
body.sidebar-collapsed .side-rail{width:var(--rail-mini);padding:4px}
body.sidebar-collapsed .rail-link{flex-direction:column;justify-content:center;gap:6px;min-height:74px;padding:14px 0 12px;font-size:10px}
body.sidebar-collapsed .rail-link.active{font-weight:400}
body.sidebar-collapsed .rail-label,body.sidebar-collapsed .rail-brand,body.sidebar-collapsed .rail-divider,body.sidebar-collapsed .rail-categories{display:none}
body.sidebar-collapsed .content{margin-left:var(--rail-mini)}

/* ---------- Avatars ---------- */
.avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:15px;font-weight:700;overflow:hidden}
.avatar.has-photo,.channel-avatar.has-photo{background:var(--soft)}
.avatar.has-photo img,.channel-avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rail-brand .avatar{width:26px;height:26px;font-size:12px}

/* ---------- Kanaalkop (zoals een YouTube-kanaal) ---------- */
.channel{max-width:1284px;margin:0 auto}
.channel-banner{position:relative;margin-top:16px;aspect-ratio:6.2/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft)}
.channel-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.2s ease,transform 6s ease}
.channel-banner img.active{opacity:1;transform:scale(1)}
.channel-head{display:flex;align-items:center;gap:24px;padding:24px 0 8px}
.channel-head.no-banner{padding-top:32px}
.channel-avatar{flex:0 0 auto;width:160px;height:160px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--brand);color:#fff;font-size:64px;font-weight:700;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.channel-info{min-width:0;flex:1}
.channel-title{margin:0;font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.channel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:8px 0 0;color:var(--muted);font-size:14px}
.channel-meta strong{color:var(--text);font-weight:500}
.channel-meta .dot{opacity:.8}
.channel-about{display:flex;align-items:baseline;width:100%;max-width:720px;margin:10px 0 0;padding:0;border:0;background:transparent;color:var(--muted);font-size:14px;text-align:left;cursor:pointer}
.about-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.about-more{flex:0 0 auto;margin-left:2px;color:var(--text);font-weight:600}
.channel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border:0;border-radius:18px;background:var(--soft);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,transform .08s}
.pill-btn:hover{background:var(--hover)}
.pill-btn:active{transform:scale(.97)}
.pill-btn .ui-icon{width:20px;height:20px}
.pill-btn.icon-only{width:36px;padding:0}
.pill-btn.subtle{background:transparent;border:1px solid var(--line-strong)}
.pill-btn.subtle:hover{background:var(--soft)}
.channel-tabs{position:sticky;top:var(--topbar);z-index:20;display:flex;gap:4px;margin-top:8px;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto;scrollbar-width:none}
.channel-tabs::-webkit-scrollbar{display:none}
.channel-tabs button{position:relative;height:48px;padding:0 12px;border:0;background:transparent;color:var(--muted);font-size:16px;font-weight:500;cursor:pointer;white-space:nowrap;transition:color .15s}
.channel-tabs button:hover{color:var(--text)}
.channel-tabs button:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:transparent;transition:background .15s}
.channel-tabs button:hover:after{background:var(--line-strong)}
.channel-tabs button.active{color:var(--text)}
.channel-tabs button.active:after{background:var(--text)}
.tab-panel{max-width:1284px;margin:0 auto;padding-top:24px}

/* ---------- Uitgelichte video ---------- */
.featured{display:grid;grid-template-columns:minmax(0,424px) minmax(0,1fr);gap:24px;align-items:start;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.featured-thumb{border-radius:var(--radius)}
.featured-play{position:absolute;z-index:4;right:10px;bottom:10px;display:none}
.featured-copy{min-width:0;padding-top:2px}
.featured-copy .eyebrow{display:block;margin-bottom:6px}
.featured-copy h2{margin:0 0 6px;font-size:20px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.featured-copy p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;white-space:pre-line}
.featured-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.featured-actions .btn{height:36px;padding:0 16px;border-radius:18px}

/* ---------- Planken (horizontaal scrollen) ---------- */
.shelf{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.shelf:last-child{border-bottom:0}
.shelf-head,.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.shelf-head h2,.section-head h2{margin:0;font-size:20px;line-height:1.3;font-weight:700}
.shelf-nav{display:flex;align-items:center;gap:6px}
.shelf-all{margin-right:6px;padding:8px 14px;border-radius:18px;color:var(--text);font-size:14px;font-weight:500;transition:background .15s}
.shelf-all:hover{background:var(--soft)}
.shelf-arrow{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--soft);color:var(--text);cursor:pointer;transition:background .15s,opacity .15s}
.shelf-arrow:hover{background:var(--hover)}
.shelf-arrow:disabled{opacity:.35;cursor:default;background:var(--soft)}
.shelf-arrow .ui-icon{width:22px;height:22px}
.shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:none;padding-bottom:4px}
.shelf-track::-webkit-scrollbar{display:none}
.shelf-track .card{scroll-snap-align:start}
.video-count{color:var(--muted);font-size:14px;white-space:nowrap}

/* ---------- Chips (mobiel) ---------- */
.chip-row{display:flex;align-items:center;gap:10px;max-width:1284px;margin:0 auto;overflow-x:auto;scrollbar-width:none;padding:14px 0 2px}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--soft);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.chip:hover{background:var(--hover)}
.chip.active{background:var(--chip-on-bg);color:var(--chip-on-fg)}
.category-chip-row{display:none}

/* ---------- Raster en kaarten ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 16px;max-width:1284px;margin:auto}
.card{min-width:0;position:relative}
.thumb{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius);background:var(--soft);isolation:isolate}
.thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .2s ease,transform .3s ease}
.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);pointer-events:none}
.placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#ff6a6e,var(--brand) 45%,#9e070b)}
.placeholder span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;padding-left:3px;background:#fff;color:var(--brand);box-shadow:0 10px 30px rgba(80,0,3,.25)}
.placeholder .ui-icon{width:24px;height:24px}
.duration{position:absolute;z-index:3;right:8px;bottom:8px;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:500;line-height:18px;letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:opacity .2s}
.card-body{display:flex;gap:12px;padding:12px 0 0}
.card-copy{min-width:0;flex:1}
.card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 4px;font-size:15px;line-height:1.4;font-weight:600;letter-spacing:0}
.channel-name{color:var(--muted);font-size:13px}
.card-menu{flex:0 0 auto;align-self:flex-start;width:34px;height:34px;margin:-6px -8px 0 0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.card:hover .card-menu,.card-menu:focus-visible,.card-menu[aria-expanded="true"]{opacity:1}
.card-menu:hover{background:var(--soft)}
.card-menu .ui-icon{width:22px;height:22px}
@media (hover:none){.card-menu{opacity:1}}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap}

/* Videovoorbeeld: hover (desktop) of automatisch in beeld (mobiel) */
.thumb .preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;background:#000;transition:opacity .25s ease}
.thumb.preview-playing .preview{opacity:1}
.thumb.preview-playing img{opacity:0}
.thumb.preview-playing .duration{opacity:0}
.preview-ui{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s}
.thumb.preview-playing .preview-ui{opacity:1}
.preview-ui .ui-icon{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:5px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff}
.preview-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.3)}
.preview-bar i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.card:hover .thumb:not(.preview-playing) img{transform:scale(1.02)}
.card:hover .thumb{border-radius:var(--radius)}

/* Beveiligde video's */
.is-locked .thumb img,.thumb.is-locked img{filter:blur(12px) brightness(.62);transform:scale(1.08)}
.lock-badge{position:absolute;z-index:3;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:rgba(15,15,15,.78);color:#fff;font-size:13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 25px rgba(0,0,0,.22)}
.lock-badge b{font-weight:500}
.lock-badge svg{width:17px;height:17px}
.lock-badge.icon-only{padding:9px}

/* Leeg / laden */
.empty{grid-column:1/-1;padding:64px 24px;text-align:center;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.empty.small{padding:28px 18px}
.empty-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.empty-icon .ui-icon{width:28px;height:28px}
.empty strong{display:block;color:var(--text);font-size:19px;margin-bottom:4px}
.empty a{color:var(--brand)}
.skeleton{max-width:1284px;margin:0 auto}
.skeleton i,.sk-banner,.sk-avatar{display:block;background:linear-gradient(90deg,var(--soft) 25%,var(--soft-2) 37%,var(--soft) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}
.sk-banner{margin-top:16px;aspect-ratio:6.2/1;border-radius:var(--radius-lg)}
.sk-head{display:flex;align-items:center;gap:24px;padding:24px 0}
.sk-avatar{width:160px;height:160px;border-radius:50%;flex:0 0 auto}
.sk-lines{flex:1;display:grid;gap:12px}
.sk-lines i{height:18px;border-radius:6px}
.sk-lines i:first-child{width:40%;height:32px}
.sk-lines i:nth-child(2){width:55%}
.sk-lines i:nth-child(3){width:30%}
.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 16px;margin-top:32px}
.sk-grid i{aspect-ratio:16/9;border-radius:var(--radius)}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Over-tab ---------- */
.about-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.rich{font-size:15px;line-height:1.65}
.rich h1,.rich h2,.rich h3{margin:0 0 12px;line-height:1.2;letter-spacing:-.01em}
.rich h1,.rich h2{font-size:24px}
.rich p{margin:0 0 12px}
.rich a{color:#3ea6ff;text-decoration:none}
.rich a:hover{text-decoration:underline}
.about-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:24px}
.about-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.about-stats{display:grid;gap:14px;padding-top:4px}
.about-stats h3{margin:0 0 4px;font-size:16px}
.about-stats div{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:14px}
.about-stats .ui-icon{width:20px;height:20px;color:var(--muted)}
.about-stats .pill-btn{justify-self:start}

/* ---------- Knoppen en velden ---------- */
.field{width:100%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:10px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.field:focus{border-color:#1c62b9;box-shadow:0 0 0 3px rgba(28,98,185,.14)}
select.field{appearance:auto}
.btn{border:0;border-radius:18px;height:40px;padding:0 18px;background:var(--brand);color:#fff;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background .15s,transform .08s,box-shadow .15s}
.btn:hover{background:var(--brand-dark)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn .ui-icon{width:18px;height:18px}
.btn.secondary{background:var(--soft);color:var(--text)}
.btn.secondary:hover{background:var(--hover)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--soft)}
.btn.dark{background:var(--chip-on-bg);color:var(--chip-on-fg)}

/* ---------- Videopagina ---------- */
body.watch-mode .side-rail{display:none}
body.watch-mode .content{margin-left:0;max-width:1760px;margin-inline:auto;padding:24px 24px 64px}
.watchlayout{display:grid;grid-template-columns:minmax(0,1fr) 402px;gap:24px}
.watch-main{min-width:0}
.videoBox{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius);background:#000}
.videoBox video{width:100%;height:100%;display:block}
.videoBox video-player,.videoBox video-skin,.videoBox hlsjs-video,.videoBox #playerMedia{display:block;width:100%;height:100%;border-radius:0!important}
.videoBox video-player{--media-accent:#fff;--media-focus:var(--accent);--media-border-radius:0px;--media-video-border-radius:0px;background:#000}
.videoBox video-skin{width:100%;height:100%}
.videoBox hlsjs-video,.videoBox #playerMedia{object-fit:contain}
.sound-start{position:absolute;inset:50% auto auto 50%;z-index:8;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 22px;background:rgba(15,15,15,.9);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.sound-start span{font-size:14px}
.sound-start>.ui-icon{width:18px;height:18px}
.watchtitle{margin:14px 0 10px;font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.005em}
.watch-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.channel-row{display:flex;align-items:center;gap:12px;min-width:0}
.channel-row .avatar{width:40px;height:40px}
.channel-row strong{display:block;font-size:16px;font-weight:600;line-height:1.3}
.channel-row small{display:block;color:var(--muted);font-size:12px}
.watch-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.like-btn .ui-icon{transition:transform .2s}
.like-btn.is-liked{color:var(--accent)}
.like-btn.is-liked span{color:var(--text)}
.like-btn.pop .ui-icon{animation:like-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes like-pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-12deg)}100%{transform:scale(1)}}
.description-box{position:relative;margin-top:12px;padding:12px 14px;border-radius:var(--radius);background:var(--soft);font-size:14px;transition:background .15s}
.watchmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-weight:600;font-size:14px}
.quality-pill{padding:1px 8px;border-radius:999px;background:var(--info-bg);color:var(--info-fg);font-size:11px;font-weight:600}
.watch-tags{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.hashtag{color:#1c62b9;font-weight:500}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hashtag{color:#3ea6ff}}
.hashtag:hover{text-decoration:underline}
.description{margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.description-box.is-collapsible:not(.expanded) .description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.desc-toggle{display:none;margin-top:6px;padding:0;border:0;background:transparent;color:var(--text);font-weight:600;cursor:pointer}
.description-box.is-collapsible .desc-toggle{display:inline-block}
/* Persoonlijke header per video */
.video-hero{position:relative;display:flex;align-items:flex-end;min-height:220px;margin-bottom:16px;padding:32px;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#000));background-color:var(--accent);background-size:cover;background-position:center;color:#fff}
.video-hero.no-image:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.22),transparent 45%),radial-gradient(circle at 10% 110%,rgba(0,0,0,.35),transparent 50%)}
.video-hero-inner{position:relative;max-width:760px}
.hero-channel{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);font-size:13px;font-weight:600}
.hero-channel .avatar{width:24px;height:24px;font-size:11px}
.video-hero h2{margin:0;font-size:clamp(26px,3.2vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.025em;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.video-hero p{margin:10px 0 0;max-width:620px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.92);white-space:pre-line}
.video-page-header{display:none}
/* Reacties */
.comments{margin-top:28px}
.sectionhead{display:flex;align-items:center;justify-content:space-between}
.sectionhead h2{margin:0 0 18px;font-size:20px;font-weight:700}
.count-soft{color:var(--muted);font-weight:400}
.commentform{display:grid;grid-template-columns:40px 170px minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:10px}
.commentform .comment-avatar{color:var(--muted)}.comment-avatar .ui-icon{width:22px;height:22px}
.commentform .btn{height:40px}
.comment{display:flex;gap:14px;padding:14px 0}
.comment-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft-2);color:var(--text);font-weight:600}
.comment-head{display:flex;align-items:baseline;gap:8px}
.comment-head strong{font-size:13px;font-weight:600}
.comment time{color:var(--muted);font-size:12px}
.comment p{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
/* Meer video's */
.sidebar h3{margin:0 0 12px;font-size:16px;font-weight:700}
.sidecard{display:grid;grid-template-columns:168px minmax(0,1fr);gap:8px 10px;margin-bottom:8px;padding:4px;margin-inline:-4px;border-radius:10px;transition:background .15s}
.sidecard:hover{background:var(--soft)}
.sidecard .thumb{border-radius:8px}
.sidecard .duration{right:4px;bottom:4px;font-size:11px;line-height:16px}
.sidecard h4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 4px;font-size:14px;line-height:1.35;font-weight:600}
.sidecard .channel-name,.sidecard .meta{font-size:12px}
/* Beveiligde speler */
.locked-player{position:relative;min-height:clamp(300px,50vw,640px);overflow:hidden;border-radius:var(--radius);display:grid;place-items:center;background:#29292e}
.locked-player:before{content:"";position:absolute;inset:-24px;background-image:linear-gradient(rgba(10,10,12,.3),rgba(10,10,12,.62)),var(--poster);background-size:cover;background-position:center;filter:blur(18px);transform:scale(1.08)}
.lock-panel{position:relative;z-index:1;width:min(430px,calc(100% - 32px));padding:30px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(20,20,24,.74);color:#fff;text-align:center;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.28)}
.lock-panel>svg{width:38px;height:38px;margin:0 auto 8px}
.lock-panel h2{margin:0 0 6px;font-size:22px}
.lock-panel p{margin:0 0 18px;color:#d0d0d6}
.lock-panel form{display:grid;grid-template-columns:1fr auto;gap:9px}
.lock-panel .field{background:rgba(255,255,255,.96);color:#111;border-color:transparent}
.form-error{grid-column:1/-1;color:#ffb4b7;font-size:13px;text-align:left}
/* Muziek */
.related-music{margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.music-heading{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.music-heading h2{margin:0;font-size:17px}
.music-heading p{margin:1px 0 0;color:var(--muted);font-size:13px}
.music-icon,.album-art{display:grid;place-items:center;background:linear-gradient(145deg,#ff555a,var(--brand-dark));color:#fff}
.music-icon{width:42px;height:42px;border-radius:12px}
.music-icon .ui-icon{width:24px;height:24px}
.album-art .ui-icon{width:22px;height:22px}
.music-list{display:grid;gap:10px}
.music-track{display:grid;grid-template-columns:46px minmax(130px,1fr) minmax(220px,360px);align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--soft)}
.album-art{width:46px;height:46px;border-radius:9px}
.track-info{min-width:0}
.track-info strong,.track-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-info span{color:var(--muted);font-size:12px}
.music-track audio{width:100%;height:38px}
/* Oudere Video.js-klassen (behouden) */
.video-js .vjs-airplay-button,.video-js .vjs-cast-button{width:4em;cursor:pointer}
.video-js .vjs-play-progress{background:var(--brand)}
.video-js .vjs-big-play-button{top:50%;left:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border:0;border-radius:50%;background:rgba(239,23,29,.95);line-height:66px}

/* ---------- Deelvenster, menu en melding ---------- */
.share-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:var(--overlay);opacity:0;transition:opacity .18s}
.share-modal.open{opacity:1}
.share-card{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px 22px;border-radius:var(--radius-xl);background:var(--raised);color:var(--text);box-shadow:var(--shadow-lg);transform:translateY(10px) scale(.98);transition:transform .2s}
.share-modal.open .share-card{transform:none}
.share-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.share-head h2{margin:0;font-size:18px;font-weight:600}
.share-preview{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:10px;border-radius:12px;background:var(--soft)}
.share-preview img,.share-preview-empty{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:0 0 auto}
.share-preview-empty{display:grid;place-items:center;background:var(--soft-2);color:var(--muted)}
.share-preview strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.35}
.share-preview small{color:var(--muted);font-size:12px}
.share-targets{display:flex;gap:18px;margin-bottom:18px;overflow-x:auto;padding-bottom:2px}
.share-target{display:grid;justify-items:center;gap:6px;min-width:64px;font-size:12px;color:var(--text)}
.share-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px;transition:transform .15s}
.share-target:hover .share-icon{transform:scale(1.06)}
.share-icon .ui-icon{width:28px;height:28px}
.share-icon.whatsapp{background:#25d366}
.share-icon.facebook{background:#1877f2}
.share-icon.facebook b{font-family:Georgia,serif;font-size:30px;line-height:1}
.share-icon.x{background:#0f0f0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.share-icon.mail{background:#737373}
.share-link{display:flex;gap:8px;padding:6px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface)}
.share-link .field{border:0;box-shadow:none;background:transparent;padding:8px;font-size:14px;text-overflow:ellipsis}
.share-link .btn{flex:0 0 auto}
.share-start{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;cursor:pointer}
.share-start input{width:18px;height:18px;accent-color:var(--accent)}
.popover{position:fixed;z-index:180;min-width:230px;padding:8px 0;border-radius:12px;background:var(--raised);color:var(--text);box-shadow:var(--shadow-lg);border:1px solid var(--line);animation:pop-in .12s ease}
.popover button,.popover a{display:flex;align-items:center;gap:14px;width:100%;padding:9px 16px;border:0;background:transparent;font-size:14px;text-align:left;cursor:pointer}
.popover button:hover,.popover a:hover{background:var(--soft)}
.popover .ui-icon{width:22px;height:22px}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}}
.toast{position:fixed;left:24px;bottom:24px;z-index:250;max-width:calc(100vw - 48px);padding:12px 18px;border-radius:10px;background:#1f1f1f;color:#fff;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);animation:toast-in .2s ease}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}

/* ==========================================================================
   Beheer
   ========================================================================== */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:96px 24px 30px;background:radial-gradient(1000px 500px at 50% -10%,var(--brand-soft),transparent)}
.login{width:min(420px,100%);padding:34px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--raised);box-shadow:var(--shadow-md)}
.login h1{margin:6px 0 8px;font-size:28px;letter-spacing:-.02em}
.login p{margin:0 0 22px;color:var(--muted)}
.login .field{margin-bottom:12px}
.login .btn{width:100%;height:44px}
.topbar .shell.admin-top{display:flex}
.admin{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;padding-top:var(--topbar)}
.adminnav{position:sticky;top:var(--topbar);align-self:start;height:calc(100vh - var(--topbar));padding:12px;background:var(--bg);border-right:1px solid var(--line);overflow:auto}
.adminnav button{width:100%;display:flex;align-items:center;gap:20px;border:0;border-radius:10px;min-height:42px;padding:0 12px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer;transition:background .15s}
.adminnav button:hover{background:var(--soft)}
.adminnav button.active{background:var(--soft);font-weight:600}
.adminnav .ui-icon{width:20px;height:20px}
.adminnav .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.adminnav #logout{margin-top:12px;color:var(--muted)}
.adminmain{min-width:0;padding:28px 32px 64px}
.adminhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.adminhead h1{margin:2px 0 0;font-size:28px;letter-spacing:-.02em}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.stat,.panel{background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.stat{padding:18px;border-radius:14px}
.stat span{display:block;color:var(--muted);font-size:13px}
.stat strong{display:block;margin-top:4px;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.panel{padding:20px;border-radius:var(--radius-lg);margin-bottom:18px}
.panel h2{margin:0 0 16px;font-size:17px}
.chart{height:210px;display:flex;align-items:end;gap:9px;padding-top:16px;border-bottom:1px solid var(--line)}
.barwrap{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px}
.bar{width:100%;max-width:29px;min-height:3px;border-radius:6px 6px 0 0;background:linear-gradient(#ff5055,var(--brand))}
.barwrap small{color:var(--muted);font-size:10px;white-space:nowrap}
.twocol{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.listrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.listrow:last-child{border:0}
.listrow .grow{flex:1;min-width:0}
.listrow .grow strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listrow small{color:var(--muted)}
.videoTable{width:100%;border-collapse:collapse}
.videoTable th,.videoTable td{padding:12px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.videoTable th{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.videoTable tbody tr{transition:background .12s}
.videoTable tbody tr:hover{background:var(--soft)}
.mini{display:block;width:96px;aspect-ratio:16/9;border-radius:8px;object-fit:cover;background:var(--soft)}
.locked-mini{filter:blur(3px) brightness(.8)}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--ok-bg);color:var(--ok-fg);font-size:12px;font-weight:500;white-space:nowrap}
.badge.off{background:var(--soft);color:var(--muted)}
.badge.warn{background:var(--warn-bg);color:var(--warn-fg)}
.badge.info{background:var(--info-bg);color:var(--info-fg)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions button,.actions a,.order-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border:1px solid var(--line-strong);border-radius:9px;padding:6px 10px;background:var(--raised);color:var(--text);font-size:13px;cursor:pointer;transition:background .15s}
.actions button:hover,.actions a:hover{background:var(--soft)}
.actions button:disabled{opacity:.5;cursor:default}
.icon-action{display:grid;place-items:center;min-width:36px}
.icon-action .ui-icon{width:18px;height:18px}
.order-actions{display:flex;align-items:center;gap:5px}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:var(--overlay);backdrop-filter:blur(3px)}
.modalcard{width:min(640px,100%);max-height:92vh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--raised);box-shadow:var(--shadow-lg)}
.modalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modalhead h2{margin:0;font-size:20px}
.formgrid{display:grid;gap:14px}
.formgrid label{color:var(--text);font-size:13px;font-weight:600}
.formgrid label .field{display:block;margin-top:6px;font-weight:400}
.formgrid .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-section{margin-top:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.form-section>h3{margin:0 0 4px;font-size:15px}
.form-section>p{margin:0 0 12px;color:var(--muted);font-size:13px}
.form-section .field{background:var(--raised)}
.form-section .switchrow{background:var(--raised)}
.slug-field{display:flex;align-items:stretch;margin-top:6px;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--raised)}
.slug-field span{display:flex;align-items:center;padding:0 10px;background:var(--soft-2);color:var(--muted);font-size:13px;font-weight:400;white-space:nowrap}
.slug-field .field{margin:0!important;border:0;border-radius:0}
.color-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.color-row input[type=color]{width:46px;height:38px;padding:2px;border:1px solid var(--line-strong);border-radius:10px;background:var(--raised);cursor:pointer}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}
.switchrow input{width:20px;height:20px;accent-color:var(--brand);flex:0 0 auto}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.site-settings{max-width:1000px}
.profile-settings{display:flex;align-items:flex-start;gap:22px}
.profile-preview{width:112px;height:112px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--soft)}
.profile-preview.fallback{display:grid;place-items:center;background:var(--brand);color:#fff;font-size:34px;font-weight:700}
.banner-preview{width:100%;aspect-ratio:6.2/1;margin-bottom:12px;border-radius:12px;object-fit:cover;background:var(--soft)}
.wysiwyg-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;background:var(--soft)}
.wysiwyg-toolbar button{border:1px solid var(--line-strong);border-radius:7px;padding:6px 10px;background:var(--raised);color:var(--text);cursor:pointer}
.wysiwyg{min-height:190px;padding:18px;border:1px solid var(--line);border-radius:0 0 11px 11px;background:var(--raised);outline:none}
.wysiwyg:empty:before{content:attr(data-placeholder);color:var(--faint)}
.wysiwyg h2{font-size:26px}
.upload-block{display:block;margin-top:17px;font-size:14px;font-weight:600}
.upload-block .field{display:block;margin-top:6px}
.current-home-images{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.current-home-images img{width:100%;aspect-ratio:16/9;border-radius:9px;object-fit:cover}
.icon-action.is-spinning .ui-icon,.btn.is-spinning .ui-icon{animation:ui-spin .85s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.upload-progress{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.upload-progress-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:9px;font-size:14px}
.upload-progress-head span{font-weight:600}
.upload-progress-head strong{color:var(--brand);font-variant-numeric:tabular-nums}
.upload-progress-track{height:8px;overflow:hidden;border-radius:999px;background:var(--soft-2)}
.upload-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--brand);transition:width .18s}
.upload-progress-track span.processing{width:38%!important;animation:hls-progress 1.15s ease-in-out infinite alternate}
.upload-progress small{display:block;margin-top:8px;color:var(--muted)}
.batch-error{color:var(--brand-ink)}
@keyframes hls-progress{from{transform:translateX(-75%)}to{transform:translateX(165%)}}
.iconbtn#close{font-size:0;background-repeat:no-repeat;background-position:center;background-size:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='m6.7 5.3 5.3 5.3 5.3-5.3 1.4 1.4-5.3 5.3 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.3-5.3-5.3-5.3 1.4-1.4Z'/%3E%3C/svg%3E")}
.admin-track-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand)}
.status-note{margin:-8px 0 18px;padding:11px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn-fg);font-size:13px}
.status-note.ok{background:var(--ok-bg);color:var(--ok-fg)}
.file-hint{display:block;margin-top:5px;color:var(--muted);font-size:12px;font-weight:400}
.import-result{margin-top:10px;color:var(--muted);font-size:13px}
.music-admin-list{display:grid;gap:10px}
.music-admin-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px}
.music-admin-row small{color:var(--muted)}
.admin-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.admin-tags .tag{font-size:10px;padding:1px 8px}
.video-cell strong{display:block}
.submitted{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--info-bg);color:var(--info-fg);font-size:11px;font-weight:600}
.wysiwyg-toolbar [data-command="insertUnorderedList"]{display:flex;align-items:center;gap:6px}
/* Uploadverzoeken in beheer */
.request-list{display:grid;gap:14px}
.request-card{padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--raised);box-shadow:var(--shadow-sm)}
.request-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.request-top h3{margin:0 0 4px;font-size:17px}
.request-meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:13px}
.request-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;padding:12px;border-radius:12px;background:var(--soft)}
.request-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:700;letter-spacing:.12em}
.request-code .request-url{flex:1;min-width:200px;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.request-subs{display:grid;gap:8px;margin-top:12px}
.request-sub{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:10px;background:var(--soft)}
.request-sub img,.request-sub .mini{width:80px}
.request-sub small{display:block;color:var(--muted);font-size:12px}
.request-sub q{display:block;color:var(--muted);font-size:12px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-box{display:grid;justify-items:center;gap:10px;padding:10px}
.qr-box img,.qr-box svg{width:240px;height:240px;background:#fff;padding:10px;border-radius:12px}

/* ==========================================================================
   Openbare uploadpagina
   ========================================================================== */
.upload-page{max-width:720px;margin:0 auto;padding:24px 16px 64px}
.upload-hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:linear-gradient(125deg,#19191d,#4a1215);background-size:cover;background-position:center;color:#fff;min-height:170px;display:flex;align-items:flex-end;padding:24px}
.upload-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.1))}
.upload-hero>*{position:relative}
.upload-hero .hero-channel{margin:0}
.upload-card{margin-top:-28px;position:relative;padding:26px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--raised);box-shadow:var(--shadow-md)}
.upload-card h1{margin:0 0 6px;font-size:26px;line-height:1.2;letter-spacing:-.02em}
.upload-card .lead{margin:0 0 18px;color:var(--muted);white-space:pre-line}
.upload-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.dropzone{display:grid;place-items:center;gap:8px;padding:32px 18px;border:2px dashed var(--line-strong);border-radius:16px;background:var(--soft);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .ui-icon{width:40px;height:40px;color:var(--brand)}
.dropzone strong{font-size:16px}
.dropzone small{color:var(--muted)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.file-list{display:grid;gap:10px;margin-top:14px}
.file-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px}
.file-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.file-item small{color:var(--muted);font-size:12px}
.file-item .upload-progress-track{grid-column:1/-1}
.file-item.done .upload-progress-track span{background:#1f9d55}
.file-item.failed small{color:var(--brand-ink)}
.file-item .remove{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px}
.code-entry{display:grid;gap:12px;max-width:380px;margin:0 auto;text-align:center}
.code-entry .field{text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:24px;letter-spacing:.2em;text-transform:uppercase}
.success-state{display:grid;justify-items:center;gap:10px;padding:18px 0;text-align:center}
.success-state .empty-icon{background:var(--ok-bg);color:var(--ok-fg);margin:0}

/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width:1500px){.shelf-track{grid-auto-columns:calc((100% - 2*16px)/3)}}
@media (max-width:1320px){.grid,.sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.watchlayout{grid-template-columns:minmax(0,1fr) 350px}.sidecard{grid-template-columns:150px minmax(0,1fr)}}
@media (max-width:1100px){.content{padding:0 24px 72px}.featured{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.about-layout{grid-template-columns:1fr;gap:28px}}
@media (max-width:1050px){.grid,.sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shelf-track{grid-auto-columns:calc((100% - 16px)/2)}.watchlayout{grid-template-columns:1fr}.watchlayout>.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}.watchlayout>.sidebar h3{grid-column:1/-1}.twocol{grid-template-columns:1fr}.channel-avatar,.sk-avatar{width:120px;height:120px;font-size:48px}.channel-title{font-size:30px}}
@media (max-width:820px){
  :root{--topbar:56px}
  .topbar .shell{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:0 12px}
  .topbar-end{display:none}
  .brand img{width:104px;height:32px}
  .menu-button{display:none}
  .search-button{flex-basis:48px}
  .app-layout{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .side-rail{inset:auto 0 0;top:auto;width:auto;height:calc(58px + env(safe-area-inset-bottom));padding:4px 8px env(safe-area-inset-bottom);border-top:1px solid var(--line);overflow:hidden;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .rail-nav{grid-template-columns:repeat(3,1fr)}
  .rail-link{flex-direction:column;justify-content:center;gap:3px;min-height:50px;padding:4px;font-size:10px}
  .rail-link.active{background:transparent;font-weight:600}
  .rail-divider,.rail-label,.rail-brand,.rail-categories,#categoryLabel,#categoryDivider{display:none!important}
  body.sidebar-collapsed .side-rail{width:auto;padding:4px 8px env(safe-area-inset-bottom)}
  body.sidebar-collapsed .rail-link{min-height:50px;padding:4px}
  .content,body.sidebar-collapsed .content{margin-left:0;padding:0 16px 48px}
  .category-chip-row:not([hidden]){display:flex}
  body[data-tab="about"] .category-chip-row,body[data-tab="home"] .category-chip-row{display:none}
  .watch-mode .app-layout{padding-bottom:0}
  .channel-banner{margin-top:12px;border-radius:12px;aspect-ratio:4/1}
  .channel-head,.sk-head{align-items:center;gap:16px;padding:16px 0 4px}
  .channel-avatar,.sk-avatar{width:72px;height:72px;font-size:30px;align-self:flex-start}
  .channel-title{font-size:24px}
  .channel-meta{font-size:13px;margin-top:4px}
  .channel-about{font-size:13px;margin-top:6px}
  .channel-actions{margin-top:12px}
  .channel-tabs{margin-inline:-16px;padding:0 8px}
  .channel-tabs button{height:44px;font-size:15px}
  .tab-panel{padding-top:16px}
  .featured{grid-template-columns:1fr;gap:12px}
  .shelf-track{grid-auto-columns:72%;margin-inline:-16px;padding-inline:16px;scroll-padding:0 16px}
  .shelf-arrow{display:none}
  .commentform{grid-template-columns:1fr}
  .commentform .comment-avatar{display:none}
  .commentform .btn{width:100%}
  .admin{display:block}
  .adminnav{position:sticky;top:var(--topbar);z-index:10;display:flex;gap:4px;height:auto;overflow-x:auto;padding:8px;border:0;border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px)}
  .adminnav button{width:auto;white-space:nowrap;gap:8px}
  .adminnav #logout{margin-top:0}
  .adminmain{padding:20px 16px 48px}
  .videoTable{min-width:620px}
  .panel:has(.videoTable){overflow-x:auto!important}
  .modal{padding:8px;align-items:end}
  .modalcard{max-height:94vh;border-radius:20px 20px 16px 16px}
  .home-header{grid-template-columns:1fr}
  .profile-settings{flex-direction:column}
  .admin-actions{width:100%;justify-content:stretch}
  .admin-actions .btn{flex:1}
  .current-home-images{grid-template-columns:repeat(2,1fr)}
  .toast{left:16px;right:16px;bottom:calc(70px + env(safe-area-inset-bottom));max-width:none;text-align:center}
  .formgrid .two{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid,.sk-grid{grid-template-columns:1fr;gap:24px}
  #tabPanel>.grid .thumb,#tabPanel>.featured .thumb{margin-inline:-16px;border-radius:0}
  #tabPanel>.grid .card-body{padding-inline:0}
  .section-head h2,.shelf-head h2{font-size:18px}
  .shelf-all{display:none}
  body.watch-mode .content{padding:0 0 42px}
  .watchlayout{gap:16px}
  .watch-main>*:not(.videoBox):not(.locked-player):not(.video-hero){margin-inline:12px}
  .videoBox,.locked-player{border-radius:0}
  .video-hero{min-height:170px;margin-bottom:0;padding:20px 16px;border-radius:0}
  .video-hero p{font-size:14px}
  .watchtitle{font-size:18px;margin-top:12px}
  .watch-bar{gap:12px}
  .watch-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .watch-actions::-webkit-scrollbar{display:none}
  .watchlayout>.sidebar{display:block;padding:0 12px}
  .sidecard{grid-template-columns:150px minmax(0,1fr)}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px}
  .stat strong{font-size:22px}
  .adminhead{align-items:flex-start;flex-direction:column}
  .adminhead .btn{width:100%}
  .chart{gap:4px}
  .barwrap small{font-size:9px;transform:rotate(-38deg);transform-origin:center;min-height:24px}
  .login{padding:26px 22px}
  .lock-panel form{grid-template-columns:1fr}
  .music-track{grid-template-columns:42px minmax(0,1fr)}
  .music-track audio{grid-column:1/-1}
  .music-admin-row{grid-template-columns:auto 1fr auto}
  .music-admin-row small{grid-column:2/-1;grid-row:2}
  .current-home-images{grid-template-columns:1fr 1fr}
  .share-modal{align-items:end;padding:0}
  .share-card{width:100%;border-radius:20px 20px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .request-sub{grid-template-columns:64px minmax(0,1fr)}
  .request-sub .actions{grid-column:1/-1}
  .upload-card{padding:20px}
}
@media (max-width:360px){.brand img{width:88px}.search input::placeholder{color:transparent}.stats{grid-template-columns:1fr}.channel-title{font-size:21px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.topbar .shell>.btn{justify-self:end}
.upload-block .field{font-weight:400}
.dropzone small{font-weight:400}