/* Eureka Leervideo's — video library app (scoped to #lv-app) */
#lv-app{
  --lv-bg:transparent; --lv-surface:#ffffff; --lv-surface-2:#f4f8fc; --lv-ink:#152036; --lv-muted:#5a6678;
  --lv-faint:#93a0b4; --lv-line:#e3e9f1; --lv-line-2:#d4dde9; --lv-blue:#1f6fe0; --lv-blue-deep:#12408f;
  --lv-blue-soft:#e7f0fd; --lv-r:16px; --lv-shadow:0 1px 2px rgba(20,35,65,.06),0 10px 30px rgba(20,35,65,.09);
  --lv-shadow-sm:0 1px 2px rgba(20,35,65,.05),0 3px 10px rgba(20,35,65,.06);
  color:var(--lv-ink);font-family:inherit;line-height:1.5;display:block;max-width:1080px;margin:0 auto;padding:8px 4px 40px;
}
#lv-app[data-embedded="1"]{max-width:none;margin:0;padding:4px 40px 8px}
@media(max-width:600px){#lv-app[data-embedded="1"]{padding:4px 16px 8px}}
#lv-app[data-embedded="1"] .lv-subjtile{min-height:172px;padding:24px}
#lv-app[data-embedded="1"] .lv-subjtile b{font-size:26px}
#lv-app *{box-sizing:border-box}
#lv-app button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
#lv-app a{color:var(--lv-blue);text-decoration:none}
#lv-app .lv-crumb{font-size:12px;color:var(--lv-faint);margin-bottom:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#lv-app .lv-crumb button{color:var(--lv-muted);padding:0}
#lv-app .lv-crumb button:hover{color:var(--lv-blue);text-decoration:underline}
#lv-app h1{font-family:"Manrope",ui-sans-serif,sans-serif;font-size:clamp(26px,4vw,34px);letter-spacing:normal;margin:0 0 4px;font-weight:500}
#lv-app .lv-nowtitle,#lv-app .lv-wall .wi h4{font-family:"Manrope",ui-sans-serif,sans-serif;font-weight:500}
#lv-app .lv-sub{color:var(--lv-muted);font-size:14.5px;margin:0 0 22px;max-width:64ch}

/* hub */
#lv-app .lv-hero{border-radius:20px;padding:34px;color:#fff;background:linear-gradient(120deg,#12408f,#1f6fe0 62%,#2f8fe0);box-shadow:var(--lv-shadow);margin-bottom:22px}
#lv-app .lv-hero h1{color:#fff;margin-bottom:8px}
#lv-app .lv-hero p{margin:0;opacity:.93;max-width:56ch;font-size:15px}
#lv-app .lv-hero .lv-stat{margin-top:16px;font-size:12.5px;opacity:.85;font-weight:600}
#lv-app .lv-secttl{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--lv-faint);font-weight:700;margin:30px 0 14px}
#lv-app .lv-introrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#lv-app .lv-introcard{display:flex;gap:14px;align-items:center;text-align:left;background:var(--lv-surface);border:1px solid var(--lv-line);border-radius:14px;padding:16px 18px;box-shadow:var(--lv-shadow-sm);width:100%}
#lv-app .lv-introcard:hover{border-color:var(--lv-blue)}
#lv-app .lv-introcard .ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:var(--lv-blue-soft);color:var(--lv-blue);display:flex;align-items:center;justify-content:center;font-size:20px}
#lv-app .lv-introcard b{font-size:15px;display:block} #lv-app .lv-introcard span{font-size:12.5px;color:var(--lv-muted)}
/* intro detail-page heading: match the "Leervideo's Frans, Nederlands en wiskunde" section heading */
#lv-app h1.lv-introh{font-family:"Manrope",ui-sans-serif,sans-serif;font-size:32px;font-weight:500;line-height:1.2;color:#003387;letter-spacing:normal}
:root[data-theme="dark"] #lv-app h1.lv-introh{color:var(--lv-blue-deep)}
#lv-app .lv-subjrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#lv-app .lv-subjtile{position:relative;overflow:hidden;text-align:left;border-radius:16px;padding:22px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--lv-shadow);width:100%}
#lv-app .lv-subjtile .k{position:absolute;top:16px;right:18px;font-size:12px;font-weight:700;opacity:.92;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:20px}
#lv-app .lv-subjtile b{font-size:24px;letter-spacing:-.02em} #lv-app .lv-subjtile span{font-size:12.5px;opacity:.92;margin-top:2px}
#lv-app .lv-subjtile:hover{transform:translateY(-2px);transition:.15s}

/* subject */
#lv-app .lv-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
#lv-app .lv-chip{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:20px;background:var(--lv-surface);border:1px solid var(--lv-line);color:var(--lv-muted)}
#lv-app .lv-chip.on{color:#fff;border-color:transparent}
#lv-app .lv-search{margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--lv-surface);border:1px solid var(--lv-line);border-radius:22px;padding:7px 14px;min-width:210px}
#lv-app .lv-search input{border:0;background:none;outline:none;color:var(--lv-ink);font-size:13px;width:100%}
#lv-app .lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
#lv-app .lv-card{text-align:left;background:var(--lv-surface);border:1px solid var(--lv-line);border-radius:14px;overflow:hidden;box-shadow:var(--lv-shadow-sm);width:100%;padding:0}
#lv-app .lv-card:hover{border-color:var(--lv-blue);transform:translateY(-2px);transition:.15s}
#lv-app .lv-thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-end;background-color:#0b2b57}
#lv-app .lv-thumb .lv-tov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.32))}
#lv-app .lv-play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.28);z-index:2}
#lv-app .lv-play::after{content:"";border-left:14px solid var(--lv-blue-deep);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
#lv-app .lv-badge{position:relative;z-index:2;margin:8px;font-size:10.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:3px 9px;border-radius:20px}
#lv-app .lv-cb{padding:11px 13px 13px}
#lv-app .lv-cb .t{font-size:14px;font-weight:600} #lv-app .lv-cb .s{font-size:11px;color:var(--lv-faint);margin-top:3px}
#lv-app .lv-empty{color:var(--lv-faint);font-size:14px;padding:40px;text-align:center;grid-column:1/-1}

/* topic detail */
#lv-app .lv-pl{display:grid;grid-template-columns:1fr 300px;gap:18px}
#lv-app .lv-player .scr{position:relative;border-radius:14px;aspect-ratio:16/9;overflow:hidden;box-shadow:var(--lv-shadow);background:#000}
#lv-app .lv-player .scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#lv-app .lv-nowtitle{font-size:15px;font-weight:700;margin-top:12px}
#lv-app .lv-nowsub{font-size:12px;color:var(--lv-faint);margin-top:2px}
#lv-app .lv-plist{border:1px solid var(--lv-line);border-radius:14px;background:var(--lv-surface);overflow:hidden;max-height:520px;overflow-y:auto}
#lv-app .lv-plist .h{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--lv-faint);font-weight:700;padding:12px 14px 8px}
#lv-app .lv-vrow{display:flex;gap:11px;align-items:center;padding:9px 12px;width:100%;text-align:left;border-top:1px solid var(--lv-line)}
#lv-app .lv-vrow .mini{width:46px;height:28px;border-radius:5px;flex:0 0 auto;position:relative}
#lv-app .lv-vrow .mini::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:9px solid rgba(255,255,255,.9);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:19px}
#lv-app .lv-vrow .vl{font-size:12.5px;color:var(--lv-muted)} #lv-app .lv-vrow .vn{margin-left:auto;font-size:11px;color:var(--lv-faint)}
#lv-app .lv-vrow:hover{background:var(--lv-surface-2)}
#lv-app .lv-vrow.on{background:var(--lv-blue-soft)} #lv-app .lv-vrow.on .vl{color:var(--lv-blue);font-weight:700}
#lv-app .lv-wall{display:flex;flex-direction:column;gap:22px;max-width:680px}
#lv-app .lv-wall .wi h4{margin:0 0 8px;font-size:14px;font-weight:700}
#lv-app .lv-wall .scr{position:relative;border-radius:12px;aspect-ratio:16/9;overflow:hidden;background:#000}
#lv-app .lv-wall .scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#lv-app .lv-nextbar{margin-top:26px;padding-top:16px;border-top:1px solid var(--lv-line);display:flex;justify-content:flex-end}
#lv-app .lv-nextbtn{background:var(--lv-blue);color:#fff;border-radius:22px;padding:9px 18px;font-size:13px;font-weight:600}

/* intro */
#lv-app .lv-prose{max-width:62ch}
#lv-app .lv-prose p{color:var(--lv-muted);font-size:15px;margin:0 0 12px}
#lv-app .lv-prose strong{color:var(--lv-ink)}
#lv-app .lv-prose ol,#lv-app .lv-prose ul{color:var(--lv-muted);font-size:15px;padding-left:22px}
#lv-app .lv-prose li{margin-bottom:6px}

#lv-app .lv-fade{animation:lvfi .22s ease}@keyframes lvfi{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@media(max-width:820px){#lv-app .lv-pl{grid-template-columns:1fr}}
@media(max-width:680px){#lv-app .lv-introrow,#lv-app .lv-subjrow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#lv-app .lv-fade{animation:none}#lv-app .lv-subjtile:hover,#lv-app .lv-card:hover{transform:none}}