.veurhof-picker-button { background:#6355ad; color:#fff; border:1px solid #b6aaff80; border-radius:8px; padding:9px 12px; font:inherit; font-size:14px; cursor:pointer; }
.veurhof-picker { color:#f8f6ff; background:#141c31; border:1px solid #b7a0e855; border-radius:20px; width:min(1100px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 36px); padding:24px; box-sizing:border-box; overflow:auto; box-shadow:0 24px 100px #000a; font:16px/1.45 system-ui,sans-serif; }
.veurhof-picker::backdrop { background:#020616cc; }
.veurhof-picker * { box-sizing:border-box; }
.veurhof-picker-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.veurhof-picker h2 { font-size:24px; margin:0; color:#fff; }
.veurhof-close { background:#ffffff10; border:1px solid #ffffff50; color:#fff; padding:8px 14px; border-radius:8px; cursor:pointer; }
.veurhof-intro { color:#cbd5e1; margin:12px 0 20px; }
.veurhof-theme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.veurhof-theme-card { display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:0 0 12px; border:2px solid #ffffff24; border-radius:12px; overflow:hidden; background:#1b2941; color:#fff; cursor:pointer; min-width:0; font:inherit; position:relative; }
.veurhof-theme-card[aria-pressed="true"] { border-color:#f8cb75; box-shadow:0 0 0 1px #f8cb75; }
.veurhof-theme-card[aria-pressed="true"]::after { content:'✓ Gekozen'; position:absolute; top:8px; right:8px; background:#f8cb75; color:#1a1720; border-radius:20px; font-size:12px; font-weight:750; padding:4px 10px; }
.veurhof-thumbnail { display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#1e293b,#0f172a); font-weight:700; color:#cbd5e1; }
.veurhof-thumbnail img { width:100%; height:100%; object-fit:cover; }
.veurhof-theme-card strong { padding:10px 12px 2px; font-size:17px; }
.veurhof-theme-description { color:#cbd5e1; font-size:13px; padding:0 12px; }
.veurhof-theme-card[data-theme="standard"] { grid-column:1/-1; display:grid; grid-template-columns:100px 1fr; grid-template-rows:auto auto; padding:0; }
.veurhof-theme-card[data-theme="standard"] .veurhof-thumbnail { grid-row:1/3; width:100px; height:100%; min-height:66px; font-size:12px; }
.veurhof-theme-card[data-theme="standard"] strong { padding:8px 12px 0; }
.veurhof-theme-card[data-theme="standard"] .veurhof-theme-description { padding:0 12px 8px; }
.veurhof-motion-label { display:flex; align-items:center; gap:10px; margin-top:20px; font-weight:650; }
.veurhof-motion-label input { width:20px; height:20px; accent-color:#f8cb75; }
.veurhof-motion-hint { font-size:12px; color:#b5c3d6; margin:6px 0 16px; }
.veurhof-picker-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; bottom:-24px; background:#141c31; padding:14px 0 4px; border-top:1px solid #ffffff20; }
.veurhof-save-status { margin:0; color:#d6e4dc; font-size:13px; max-width:570px; }
.veurhof-save-status.error { color:#ffb4ad; }
.veurhof-apply { flex-shrink:0; background:#f8cb75; color:#211c20; border:0; border-radius:10px; font:700 15px system-ui,sans-serif; padding:13px 18px; cursor:pointer; }
.veurhof-picker button:disabled { opacity:.55; cursor:wait; }
.veurhof-picker button:focus-visible,.veurhof-picker input:focus-visible,.veurhof-picker-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.display-page[data-veurhof-theme] { isolation:isolate; background:#0b1222; }
.display-page[data-veurhof-theme] .display-header h1 { background:none; -webkit-text-fill-color:#fff; color:#fff; text-shadow:0 3px 16px #000; }
.display-page[data-veurhof-theme] .display-main { text-shadow:0 2px 8px #000a; }
.display-page[data-veurhof-theme] .timeline-card { background-color:#102b31f2; }
.display-page[data-veurhof-theme] .ra-card.revealed { background:#0d2932ed; }
.display-page[data-veurhof-theme] .ra-card-title { color:#f0fff8; }
.display-page[data-veurhof-theme] .ra-card-artist { color:#d4dfeb; }
.veurhof-background { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:#0b1222; }
.veurhof-picture,.veurhof-shade,.veurhof-glow,.veurhof-particles { position:absolute; inset:0; }
.veurhof-picture { background-size:cover; background-position:center; }
.veurhof-shade { background:linear-gradient(180deg,#02071777,#02071770 30%,#020717a6 74%,#0207178c); }
.veurhof-glow { opacity:.3; background:radial-gradient(ellipse at 3% 35%,#ffbd4c77,transparent 48%),radial-gradient(ellipse at 98% 78%,#ffc86566,transparent 43%); animation:veurhof-glow-drift 18s ease-in-out infinite alternate; }
.veurhof-particle { position:absolute; left:var(--x); top:var(--y); width:5px; height:5px; border-radius:50%; background:#ffd990; box-shadow:0 0 12px #ffc75aaa; opacity:.4; animation:veurhof-float var(--duration) ease-in-out var(--delay) infinite alternate; }
.veurhof-background[data-theme="disco"] .veurhof-glow { opacity:.4; transform-origin:50% 100%; background:conic-gradient(from 10deg at 8% 100%,transparent 0 3deg,#e5acff5c 5deg,transparent 9deg 55deg,#b193ff55 58deg,transparent 65deg),conic-gradient(from 280deg at 92% 100%,transparent 0 4deg,#ff97dc55 8deg,transparent 14deg); animation:veurhof-beams 20s ease-in-out infinite alternate; }
.veurhof-background[data-theme="disco"] .veurhof-particle { background:#f0cfff; border-radius:1px; width:4px; height:4px; }
.veurhof-background[data-theme="neon"] .veurhof-glow { opacity:.48; background:radial-gradient(ellipse at 5% 50%,#00dcff66,transparent 45%),radial-gradient(ellipse at 100% 25%,#f000ff55,transparent 48%); animation:veurhof-neon-drift 16s ease-in-out infinite alternate; }
.veurhof-background[data-theme="neon"] .veurhof-particle { background:#73efff; box-shadow:0 0 12px #04cdff; }
.veurhof-background[data-theme="finale"] .veurhof-particle { width:5px; height:10px; top:-10%; border-radius:1px; animation:veurhof-confetti var(--duration) linear var(--delay) infinite; }
.veurhof-background[data-theme="finale"] .veurhof-particle:nth-child(3n) { background:#72e7d8; }
.veurhof-background[data-motion="false"] * { animation:none!important; }
.veurhof-background[data-motion="false"] .veurhof-particle { top:var(--y); }
@keyframes veurhof-glow-drift { to { transform:translateY(-3%) scale(1.08); opacity:.5; } }
@keyframes veurhof-float { to { transform:translate(18px,-35px); opacity:.15; } }
@keyframes veurhof-beams { to { transform:rotate(-9deg) scale(1.08); opacity:.2; } }
@keyframes veurhof-neon-drift { to { transform:translateY(5%) scale(1.1); opacity:.25; } }
@keyframes veurhof-confetti { to { transform:translate(35px,112vh) rotate(220deg); opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .veurhof-background * { animation:none!important; } .veurhof-background .veurhof-particle { top:var(--y); } }
@media (max-width:900px) { .veurhof-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .veurhof-thumbnail { aspect-ratio:16/7; } }
@media (max-width:600px) { .veurhof-picker { padding:16px; border-radius:14px; max-height:calc(100dvh - 20px); } .veurhof-picker h2 { font-size:20px; } .veurhof-theme-grid { grid-template-columns:1fr; } .veurhof-picker-footer { bottom:-16px; flex-direction:column; align-items:stretch; gap:10px; } .veurhof-apply { width:100%; } .veurhof-theme-card strong { font-size:16px; } }
