/* Anqrpoint: stijl. Staat in een eigen bestand zodat de Content-Security-Policy geen 'unsafe-inline' voor stijlen nodig heeft. */
        /* Broadway-bioscoop: diep fluweelrood, warm marquee-goud en zacht ivoor op een warm theater-charcoal */
        :root {
            --bg: #120a0d;
            --bg-raised: #1a1015;
            --bg-card: #21141a;
            --lijn: rgba(243, 233, 214, 0.09);
            --tekst: #f3e9d6;
            --tekst-zacht: #b9a995;
            --tekst-vaag: #8a7a6b;
            --accent: #f5d77f;                          /* champagnegoud: vinkjes, iconen, scores, focus */
            --accent-zacht: rgba(245, 215, 127, 0.12);
            --goud-licht: #ebd59b;                       /* subtieler goud: badges, geselecteerde tekst, randen */
            --goud-metaal: linear-gradient(135deg, #fff2c6 0%, #f5d77f 50%, #c99a3e 100%);   /* glans voor het logo en grote koppen */
            --rood: #b31b34;                            /* Broadway-rood: actieve knoppen en filters, primaire acties */
            --rood-licht: #c41e3a;
            --rood-diep: #5e1020;                       /* geselecteerd: diep fluweel */
            --op-rood: #f6ecd8;                         /* tekst op rood */
            --rood-gloed: 0 4px 14px rgba(179, 27, 52, 0.25);
            --goud-rand: rgba(245, 215, 127, 0.18);
            --goud-focus: 0 0 0 3px rgba(245, 215, 127, 0.16);
        }

        * { box-sizing: border-box; }

        /* Ingehouden overgangen bij hover en klik; elementen met een eigen transition verderop behouden die */
        button, select, input, textarea, a, .zoek-item, .lijst-kaart, .trending-poster, .cast-foto {
            transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out;
        }
        button:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
        @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

        /* Geen horizontaal scrollen of heen-en-weer slepen (ook niet in Safari op iPhone) */
        html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; overscroll-behavior-x: none; }
        body {
            overflow-x: clip; max-width: 100%; touch-action: pan-y pinch-zoom;   /* clip (geen hidden): de plakkende topbalk blijft werken */
            -webkit-tap-highlight-color: transparent;
            padding-bottom: env(safe-area-inset-bottom);   /* niet onder de iPhone-balk onderaan */
            background: var(--bg);
            color: var(--tekst);
            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            line-height: 1.5;
        }

        /* Zacht licht bovenaan, als een filmdoek */
        body::before {
            content: "";
            position: fixed;
            inset: 0 0 auto 0;
            height: 420px;
            background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(179, 27, 52, 0.16), transparent 70%);
            pointer-events: none;
            z-index: -1;
        }

        .wrapper { max-width: 1120px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }

        .logo {
            font-family: "Bebas Neue", Impact, sans-serif;
            font-size: clamp(3rem, 9vw, 4.6rem);
            font-weight: 400;
            letter-spacing: 2px;
            line-height: 1;
            margin: 0;
        }
        .logo span { background: var(--goud-metaal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
        * { -webkit-tap-highlight-color: transparent; }   /* geen blauwe tik-flits op iPhone */
        .logo-knop { font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--tekst); background: none; border: none; padding: 0; margin: 0; cursor: pointer; transition: opacity 0.15s ease; }
        .logo-knop:hover { opacity: 0.8; }
        .logo-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

        @keyframes fade-in { from { opacity: 0; } }
        .hidden { display: none !important; }

        /* ---------- Vaste kop: logo + Help me kiezen ---------- */
        .topbalk {
            padding-top: env(safe-area-inset-top);   /* de statusbalk van de telefoon ligt boven de pagina (black-translucent) */
            position: sticky; top: 0; z-index: 10;
            background: rgba(18, 10, 13, 0.9);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--lijn);
        }
        .topbalk-in { max-width: 1120px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
        .topbalk .logo { font-size: 1.9rem; margin: 0; }

        /* ---------- Landkiezer in de kop ---------- */
        .land-kiezer { position: relative; }
        .land-knop { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--tekst); background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease; }
        .land-knop[hidden] { display: none; }
        .land-knop:hover, .land-knop[aria-expanded="true"] { border-color: rgba(245, 215, 127, 0.45); }
        .land-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .land-vlag { font-size: 1.1rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
        .land-naam { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
        .land-pijl { color: var(--tekst-vaag); }
        .land-paneel { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 260px; max-width: calc(100vw - 32px); padding: 8px; background: var(--bg-card); border: 1px solid rgba(245, 215, 127, 0.3); border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55); }
        .land-paneel[hidden] { display: none; }
        .land-paneel .land-zoek { height: 40px; padding: 0 12px; font-size: 16px; border-radius: 10px; }
        .land-lijst { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
        .land-kies { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; font: inherit; font-size: 0.9rem; color: var(--tekst); background: none; border: none; border-radius: 8px; text-align: left; cursor: pointer; }
        .land-kies:hover, .land-kies:focus-visible { background: var(--accent-zacht); outline: none; }
        .land-optie[aria-selected="true"] .land-kies { color: var(--goud-licht); background: rgba(245, 215, 127, 0.1); font-weight: 700; }
        .land-leeg { padding: 10px; color: var(--tekst-vaag); font-size: 0.88rem; }

        /* ---------- Zoekveld ---------- */
        .zoekveld { position: relative; min-width: 0; }
        .zoekveld svg { position: absolute; left: 16px; top: 28px; transform: translateY(-50%); color: var(--tekst-vaag); pointer-events: none; }
        input[type=search], input[type=number] {
            width: 100%; height: 46px; background: var(--bg-raised); color: var(--tekst); font: inherit; font-size: 16px;
            border: 1px solid var(--lijn); border-radius: 10px; outline: none; transition: border-color 0.15s ease;
        }
        .veld select {
            width: 100%; height: 46px; padding: 0 14px; background: var(--bg-raised); color: var(--tekst); font: inherit; font-size: 16px;
            border: 1px solid var(--lijn); border-radius: 10px; outline: none; cursor: pointer; transition: border-color 0.15s ease;
        }
        .veld select:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        input[type=search] { padding: 0 14px 0 44px; }
        input[type=number] { padding: 0 14px; }
        input[type=search]::placeholder { color: var(--tekst-vaag); }
        input[type=search]:focus, input[type=number]:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }

        /* ---------- Startscherm (hero) ---------- */
        .hero { text-align: center; padding: clamp(48px, 14vh, 140px) 0 80px; animation: fade-in 0.35s ease-out; }
        .hero h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: clamp(2.6rem, 8vw, 4.4rem); letter-spacing: 1px; line-height: 1; margin: 0 0 10px; }
        .hero h2 span { background: var(--goud-metaal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
        .hero p { color: var(--tekst-zacht); font-size: 1.05rem; margin: 0 auto 28px; max-width: 520px; }
        .zoekveld-groot { max-width: 640px; margin: 0 auto; text-align: left; }
        .zoekveld-groot input[type=search] { height: 56px; font-size: 1.05rem; border-radius: 14px; padding-left: 48px; }

        /* ---------- Toggle Films / Series ---------- */
        .soort-toggle {
            position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0 auto 18px; padding: 4px;
            background: rgba(26, 16, 21, 0.75); border: 1px solid var(--lijn); border-radius: 999px;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        }
        .soort-pil {
            position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
            background: var(--rood); box-shadow: var(--rood-gloed);
            transition: transform 0.28s cubic-bezier(.2, .7, .2, 1);
        }
        .soort-toggle[data-soort="tv"] .soort-pil { transform: translateX(100%); }
        .soort-optie {
            position: relative; z-index: 1; min-width: 104px; padding: 8px 20px; font: inherit; font-size: 0.92rem; font-weight: 600;
            color: var(--tekst-zacht); background: transparent; border: none; border-radius: 999px; cursor: pointer; transition: color 0.2s ease;
        }
        .soort-optie:hover { color: var(--tekst); }
        .soort-optie[aria-pressed="true"] { color: var(--op-rood); }
        .soort-optie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        /* ---------- Populaire titels: één rij posters die in de achtergrond overloopt ---------- */
        .trending { max-width: 900px; margin: 44px auto 0; }
        .trending[hidden] { display: none; }
        .trending-kop { margin: 0 0 14px; color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; text-align: left; }
        .trending-rij {
            position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; text-align: left;
        }
        /* Onderkant van de posters vervaagt in de donkere achtergrond */
        .trending-rij::after {
            content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 55%; pointer-events: none;
            background: linear-gradient(to bottom, rgba(18, 10, 13, 0) 0%, rgba(18, 10, 13, 0.78) 55%, var(--bg) 100%);
        }
        .trending-poster {
            position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 2 / 3; overflow: hidden; cursor: pointer;
            background: var(--bg-card); border: none; border-radius: 10px; color: inherit; font: inherit;
            opacity: 0; animation: opkomen 0.5s ease-out forwards; animation-delay: calc(var(--n, 0) * 70ms);
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s ease;
        }
        .trending-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), filter 0.3s ease; filter: brightness(0.92); }
        .trending-poster:hover, .trending-poster:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--accent); outline: none; z-index: 2; }
        .trending-poster:hover img, .trending-poster:focus-visible img { transform: scale(1.06); filter: brightness(1.05); }
        .trending-naam {
            position: absolute; left: 0; right: 0; top: 0; padding: 22px 8px 14px; font-size: 0.78rem; font-weight: 600; line-height: 1.25; text-align: left;
            background: linear-gradient(to bottom, rgba(12, 5, 8, 0.85), transparent); opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .trending-poster:hover .trending-naam, .trending-poster:focus-visible .trending-naam { opacity: 1; transform: none; }
        .trending-leeg { background: linear-gradient(110deg, #1d1217 8%, #26171d 18%, #1d1217 33%); background-size: 200% 100%; animation: glans 1.4s linear infinite; border-radius: 10px; aspect-ratio: 2 / 3; }
        @keyframes opkomen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        @keyframes glans { to { background-position-x: -200%; } }
        @media (max-width: 760px) {
            /* Op smalle schermen: een rij die je zijwaarts schuift */
            .trending-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
            .trending-rij::-webkit-scrollbar { display: none; }
            .trending-poster, .trending-leeg { flex: 0 0 34%; max-width: 150px; scroll-snap-align: start; }
        }

        /* ---------- Details van de gekozen titel (opmaak uit het oorspronkelijke detailvenster) ---------- */
        .labels { margin-top: 2px; }
        .labels span {
            display: inline-block; background: var(--accent-zacht); color: var(--goud-licht); border-radius: 999px;
            padding: 3px 11px; margin: 0 6px 6px 0; font-size: 0.85rem; font-weight: 500;
        }
        .labels .score { color: #ffd166; background: rgba(255, 209, 102, 0.1); }
        .synopsis { color: #e4d8c3; font-size: 1rem; line-height: 1.65; margin: 10px 0 8px; }
        .synopsis[hidden], .regie[hidden] { display: none; }
        .regie { margin: 0; color: var(--tekst-zacht); font-size: 0.95rem; }
        .regie strong { color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; margin-right: 8px; }
        .minuut-blok { flex: 1 1 100%; }
        .minuut-blok h3 { margin: 0; font-size: 1rem; font-weight: 700; }
        .minuut-blok p { margin: 2px 0 0; color: var(--tekst-vaag); font-size: 0.85rem; }
        input[type=range] {
            -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; margin: 22px 0 6px;
            background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--voortgang, 0%), #2d1b22 var(--voortgang, 0%));
        }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 12px rgba(245, 215, 127, 0.45); transition: transform 0.1s ease; }
        input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 12px rgba(245, 215, 127, 0.45); }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
        input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(245, 215, 127, 0.4); outline-offset: 2px; }
        .tijd-rij { display: flex; justify-content: space-between; color: var(--tekst-vaag); font-size: 0.8rem; }
        .tijd-weergave { font-size: 1.6rem; font-weight: 700; color: var(--accent); text-align: center; margin: 4px 0 0; font-variant-numeric: tabular-nums; }

        /* ---------- Spoilervrije chat (opmaak uit het oorspronkelijke detailvenster) ---------- */
        .chat-blok { margin-top: 22px; padding: 24px 26px 26px; background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 18px; }
        .chat-blok[hidden] { display: none; }
        @media (max-width: 600px) { .chat-blok { padding: 18px 16px 20px; } }
        .chat-titelrij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
        .chat-titelrij h3 { margin: 0; font-size: 1rem; font-weight: 700; }
        .chat-titelrij p { margin: 0; color: var(--tekst-vaag); font-size: 0.85rem; }
        .chat-modus { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; background: rgba(243, 233, 214, 0.06); color: var(--tekst-zacht); }
        .chat-modus:empty { display: none; }
        .chat-modus.live { background: var(--accent-zacht); color: var(--goud-licht); }
        .chat-modus.test { background: rgba(250, 204, 21, 0.12); color: #fde68a; }

        /* ---------- Contextscherm (na het kiezen van een titel) ---------- */
        .context-scherm { padding: 28px 0 80px; animation: fade-in 0.3s ease-out; }
        .terug-knop {
            font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--tekst-zacht);
            background: transparent; border: 1px solid var(--lijn); border-radius: 999px; padding: 8px 16px; transition: all 0.2s ease-out;
        }
        .terug-knop:hover { color: var(--tekst); border-color: rgba(243, 233, 214, 0.25); }
        .terug-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .context-kaart { display: flex; gap: 28px; margin-top: 18px; padding: 26px; background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 18px; }
        .context-poster {
            flex: 0 0 220px; align-self: flex-start; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden;
            background: linear-gradient(165deg, #2d1b22, #120a0d); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
            display: flex; align-items: center; justify-content: center; color: var(--tekst-vaag);
        }
        .context-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .context-info { flex: 1; min-width: 0; }
        .context-info h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 2.8rem; letter-spacing: 0.5px; line-height: 1; margin: 10px 0 6px; }
        .context-jaar { color: var(--tekst-zacht); margin: 0; }
        .context-velden { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
        .veld { flex: 1 1 140px; display: flex; flex-direction: column; gap: 5px; }
        .veld label { color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }
        .actie-knop {
            font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer; height: 54px; padding: 0 28px;
            color: var(--op-rood); background: var(--rood); border: none; border-radius: 12px;
            box-shadow: var(--rood-gloed); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out, background-color 0.2s ease-out;
        }
        .actie-knop:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(179, 27, 52, 0.38); background: var(--rood-licht); }
        .actie-knop:focus-visible { outline: 3px solid rgba(245, 215, 127, 0.4); outline-offset: 3px; }
        .actie-knop:disabled { opacity: 0.6; cursor: progress; }
        .context-uitkomst {
            margin-top: 22px; padding: 20px 24px; background: rgba(48, 28, 34, 0.6); border-left: 4px solid var(--accent);
            border-radius: 12px; color: #ecdfca; line-height: 1.7; animation: fade-in 0.25s ease-out;
        }
        .context-uitkomst.fout { border-left-color: #f87171; color: #fca5a5; }
        .context-uitkomst { height: auto; max-height: none; overflow: visible; overflow-wrap: anywhere; }
        .context-uitkomst p { margin: 0 0 8px; }
        .context-uitkomst p:last-child { margin-bottom: 0; }
        .tijdlijst { display: flex; flex-direction: column; gap: 10px; }
        .tijdregel { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; column-gap: 16px; align-items: baseline; line-height: 1.55; }
        .tijdlabel { color: var(--accent); font-weight: 700; font-size: 0.88rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
        .tijdtekst { overflow-wrap: anywhere; }
        @media (max-width: 520px) { .tijdregel { grid-template-columns: 1fr; row-gap: 1px; } }
        @media (max-width: 640px) {
            .context-kaart { flex-direction: column; padding: 18px; gap: 18px; }
            .context-poster { flex-basis: auto; width: 170px; }
            .context-info h2 { font-size: 2.2rem; }
        }

        /* ---------- Inloggen, account en lijstknoppen ---------- */
        .topbalk-rechts { display: flex; align-items: center; gap: 10px; }
        .auth-knop {
            flex: 0 0 auto; height: 40px; padding: 0 16px; max-width: 190px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
            color: var(--tekst); background: transparent; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            transition: all 0.2s ease-out;
        }
        .auth-knop:hover { border-color: rgba(243, 233, 214, 0.3); }
        .auth-knop[data-ingelogd="true"] { border-color: rgba(245, 215, 127, 0.35); color: var(--accent); }
        .auth-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .auth-knop[hidden] { display: none; }
        dialog.auth-dialog { width: min(420px, calc(100% - 24px)); }
        .auth-in { padding: 26px 26px 24px; }
        .auth-in h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 0.5px; line-height: 1; margin: 0 40px 16px 0; }
        .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 14px; background: var(--bg); border: 1px solid var(--lijn); border-radius: 999px; }
        .auth-tab { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 10px; cursor: pointer; color: var(--tekst-zacht); background: transparent; border: none; border-radius: 999px; transition: all 0.2s ease-out; }
        .auth-tab[aria-selected="true"] { background: var(--rood); color: var(--op-rood); box-shadow: var(--rood-gloed); }
        .auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .auth-in label { display: block; margin: 12px 0 5px; color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }
        .auth-in input[type=email], .auth-in input[type=password] {
            width: 100%; height: 46px; padding: 0 14px; background: var(--bg); color: var(--tekst); font: inherit; font-size: 16px;
            border: 1px solid var(--lijn); border-radius: 10px; outline: none; transition: border-color 0.15s ease;
        }
        .auth-in input:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .auth-in input[aria-invalid="true"] { border-color: #f87171; }
        .auth-intro { margin: 0 0 4px; color: var(--tekst-zacht); font-size: 0.92rem; }
        .auth-intro[hidden] { display: none; }
        .auth-melding { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; line-height: 1.45; color: #fca5a5; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.25); }
        .auth-melding.ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); }
        .auth-melding[hidden] { display: none; }
        .auth-verstuur { width: 100%; margin-top: 16px; height: 48px; font-size: 1rem; }
        .wachtwoord-eisen { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--tekst-vaag); }
        .auth-ingelogd-tekst { margin: 0 0 8px; overflow-wrap: anywhere; }
        .auth-form[hidden] { display: none; }
        .auth-tabs[hidden] { display: none; }
        .auth-in input[type=email], .auth-in input[type=password] { margin: 0; }
        .auth-link { display: inline-block; margin: 8px 0 0; padding: 2px 0; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; color: var(--accent); background: none; border: none; text-decoration: underline; text-underline-offset: 3px; }
        .auth-link:hover { filter: brightness(1.15); }
        .auth-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
        .auth-link[hidden] { display: none; }
        .auth-terug { margin: 0 0 12px; text-decoration: none; color: var(--tekst-zacht); }
        .auth-verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
        /* ---------- Filters en ontdekken ---------- */
        .filters { max-width: 900px; margin: 22px auto 0; text-align: left; }
        .genre-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; flex-wrap: wrap; justify-content: center; }
        .genre-chips::-webkit-scrollbar { display: none; }
        .genre-chip {
            flex: 0 0 auto; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; color: var(--tekst-zacht);
            background: transparent; border: 1px solid var(--lijn); border-radius: 999px; padding: 6px 14px; transition: all 0.2s ease-out;
        }
        .genre-chip:hover { color: var(--tekst); border-color: rgba(243, 233, 214, 0.25); }
        .genre-chip[aria-pressed="true"] { background: var(--rood); border-color: var(--rood-licht); color: var(--op-rood); box-shadow: var(--rood-gloed); }
        .genre-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .filter-rij { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
        .jaar-filter { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-vaag); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
        .jaar-filter select {
            width: auto; height: 36px; padding: 0 30px 0 12px; font: inherit; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
            color: var(--accent); background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 10px; outline: none; cursor: pointer;
        }
        .jaar-filter select:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .filter-rij { flex-wrap: wrap; }

        /* Sorteren: balkje boven zoekresultaten en filterresultaten (alleen bij meerdere resultaten) */
        .sorteer-balk { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--lijn); color: var(--tekst-vaag); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
        .sorteer-balk select {
            min-width: 0; max-width: 100%; flex: 0 1 auto;
            height: 32px; padding: 0 28px 0 10px; font: inherit; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
            color: var(--accent); background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 8px; outline: none; cursor: pointer;
        }
        .sorteer-balk select:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .ontdek-sorteer { margin: 0 0 10px; }
        .ontdek-sorteer[hidden] { display: none; }
        .ontdek-sorteer .sorteer-balk { padding: 0; border-bottom: none; }

        /* Taalschakelaar NL | EN in de header */
        .taal-schakelaar { display: inline-flex; flex: 0 0 auto; height: 40px; padding: 3px; gap: 2px; background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 999px; }
        .taal-schakelaar button {
            min-width: 36px; padding: 0 8px; font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
            color: var(--tekst-zacht); background: transparent; border: none; border-radius: 999px; transition: all 0.2s ease-out;
        }
        .taal-schakelaar button:hover { color: var(--tekst); }
        .taal-schakelaar button[aria-pressed="true"] { color: var(--op-rood); background: var(--rood); box-shadow: var(--rood-gloed); }
        .taal-schakelaar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
        .ontdek { max-width: 900px; margin: 30px auto 0; text-align: left; }
        .ontdek[hidden] { display: none; }
        .ontdek-grid { margin-top: 6px; }
        .ontdek-meer { margin: 26px auto 0; display: block; }
        .ontdek-meer[hidden] { display: none; }

        /* ---------- Acteurs en regisseurs ---------- */
        .persoon-link { font: inherit; color: #ecdfca; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(245, 215, 127, 0.4); text-underline-offset: 3px; transition: color 0.15s ease; }
        .persoon-link:hover, .persoon-link:focus-visible { color: var(--accent); text-decoration-color: var(--accent); outline: none; }
        .cast-blok { margin-top: 16px; }
        .cast-blok[hidden] { display: none; }
        .cast-kop { color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; margin-bottom: 8px; }
        .cast-rij { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: #2d1b22 transparent; }
        .cast-kaart { flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; font: inherit; color: inherit; text-align: center; background: none; border: none; cursor: pointer; }
        .cast-foto, .persoon-foto-in { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--bg-card); color: var(--tekst-vaag); font-weight: 700; }
        .cast-foto { width: 64px; height: 64px; font-size: 1.05rem; transition: box-shadow 0.2s ease, transform 0.2s ease; }
        .cast-foto img, .persoon-foto-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cast-kaart:hover .cast-foto, .cast-kaart:focus-visible .cast-foto { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-2px); }
        .cast-kaart:focus-visible { outline: none; }
        .cast-naam { font-size: 0.8rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
        .cast-rol { font-size: 0.72rem; color: var(--tekst-vaag); line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .persoon-scherm { padding: 28px 0 80px; animation: fade-in 0.3s ease-out; }
        .persoon-kop { display: flex; align-items: center; gap: 22px; margin: 22px 0 28px; }
        .persoon-foto-in { width: 110px; height: 110px; font-size: 2rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
        .persoon-foto { flex: 0 0 auto; }
        .persoon-info { min-width: 0; }
        .persoon-info h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 2.6rem; letter-spacing: 0.5px; line-height: 1; margin: 0; }
        .persoon-rol { margin: 6px 0 0; color: var(--accent); font-weight: 600; font-size: 0.92rem; }
        .persoon-rol:empty { display: none; }
        .persoon-bio { margin: 10px 0 0; color: var(--tekst-zacht); font-size: 0.95rem; line-height: 1.6; max-width: 640px; }
        .persoon-bio[hidden] { display: none; }
        @media (max-width: 520px) { .persoon-kop { flex-direction: column; align-items: flex-start; } .persoon-foto-in { width: 90px; height: 90px; } }

        /* ---------- Profiel ---------- */
        .profiel-scherm { padding: 28px 0 80px; animation: fade-in 0.3s ease-out; }
        .profiel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; }
        .stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 14px; }
        .stat-getal { font-family: "Bebas Neue", Impact, sans-serif; font-size: 2.4rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
        .stat-naam { font-size: 0.88rem; font-weight: 600; }
        .stat-detail { font-size: 0.78rem; color: var(--tekst-vaag); }
        .stat-detail:empty { display: none; }
        .profiel-lijsten { margin-top: 14px; }
        .profiel-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; align-items: start; }
        .profiel-kaart { padding: 22px 24px; background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 16px; }
        .profiel-kaart h3 { margin: 0 0 14px; font-size: 1rem; }
        .profiel-gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 0.92rem; }
        .profiel-gegevens dt { color: var(--tekst-vaag); }
        .profiel-gegevens dd { margin: 0; overflow-wrap: anywhere; }
        .profiel-kaart label { display: block; margin: 12px 0 5px; color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }
        .profiel-kaart input[type=email], .profiel-kaart input[type=password] {
            width: 100%; height: 44px; padding: 0 14px; background: var(--bg); color: var(--tekst); font: inherit; font-size: 16px;
            border: 1px solid var(--lijn); border-radius: 10px; outline: none; transition: border-color 0.15s ease;
        }
        .profiel-kaart input:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .profiel-kaart input[aria-invalid="true"] { border-color: #f87171; }
        .knop-accent { font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; color: var(--op-rood); background: var(--rood); border: 1px solid var(--rood-licht); border-radius: 10px; padding: 0 18px; height: 44px; transition: filter 0.15s ease, opacity 0.15s ease; }
        .knop-accent:hover:not(:disabled) { filter: brightness(1.1); }
        .knop-accent:disabled { opacity: 0.6; cursor: progress; }
        .profiel-knop { margin-top: 16px; }
        .profiel-wacht { margin: 0 0 8px; padding: 10px 12px; font-size: 0.88rem; color: #fde68a; background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.25); border-radius: 10px; }
        .profiel-wacht[hidden] { display: none; }
        .profiel-uitleg { margin: 0 0 14px; color: var(--tekst-zacht); font-size: 0.9rem; }
        .profiel-uit-rij { display: flex; flex-wrap: wrap; gap: 10px; }

        /* ---------- Overzicht: mijn lijsten ---------- */
        .lijsten-scherm { padding: 28px 0 80px; animation: fade-in 0.3s ease-out; }
        .lijsten-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
        .lijsten-kop-rij h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 2.4rem; letter-spacing: 0.5px; line-height: 1; margin: 0; }
        .lijst-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 20px 0 6px; padding: 4px; background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 999px; }
        .lijst-tab { font: inherit; font-size: 0.92rem; font-weight: 600; min-width: 130px; padding: 8px 18px; cursor: pointer; color: var(--tekst-zacht); background: transparent; border: none; border-radius: 999px; transition: all 0.2s ease-out; }
        .lijst-tab:hover { color: var(--tekst); }
        .lijst-tab[aria-selected="true"] { background: var(--rood); color: var(--op-rood); box-shadow: var(--rood-gloed); }
        .lijst-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .lijst-tab-aantal { margin-left: 5px; font-size: 0.78rem; font-weight: 700; opacity: 0.75; font-variant-numeric: tabular-nums; }
        .lijsten-status { margin: 12px 0 0; color: var(--tekst-vaag); font-size: 0.9rem; }
        .lijsten-status.fout { color: #fca5a5; }
        .lijsten-status[hidden] { display: none; }
        .lijsten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 18px; margin-top: 22px; align-items: start; }
        .lijst-kaart { display: flex; flex-direction: column; gap: 10px; opacity: 0; animation: opkomen 0.4s ease-out forwards; animation-delay: calc(var(--n, 0) * 40ms); transition: opacity 0.2s ease, transform 0.2s ease; }
        .lijst-kaart-weg { opacity: 0 !important; transform: scale(0.94); }
        .lijst-open { display: block; padding: 0; text-align: left; font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
        .lijst-poster { display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 10px; background: var(--bg-card); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
        .lijst-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
        .lijst-geen-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tekst-vaag); font-size: 0.8rem; }
        .lijst-open:hover .lijst-poster, .lijst-open:focus-visible .lijst-poster { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--accent); }
        .lijst-open:hover img { transform: scale(1.05); }
        .lijst-open:focus-visible { outline: none; }
        .lijst-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-weight: 600; font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
        .lijst-meta { display: block; margin-top: 2px; color: var(--tekst-vaag); font-size: 0.82rem; }
        .lijst-weg { align-self: flex-start; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--tekst-zacht); background: transparent; border: 1px solid var(--lijn); border-radius: 999px; padding: 5px 12px; transition: all 0.2s ease-out; }
        .lijst-weg:hover:not(:disabled) { color: #fca5a5; border-color: rgba(248, 113, 113, 0.5); }
        .lijst-weg:disabled { opacity: 0.5; cursor: progress; }
        .lijst-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .lijst-skelet { aspect-ratio: 2 / 3; border-radius: 10px; background: linear-gradient(110deg, #1d1217 8%, #26171d 18%, #1d1217 33%); background-size: 200% 100%; animation: glans 1.4s linear infinite; }
        .lijsten-leeg { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 36px 4px; color: var(--tekst-zacht); }
        .lijsten-leeg strong { color: var(--tekst); font-size: 1.15rem; }
        .lijsten-leeg .terug-knop { margin-top: 10px; }
        @media (max-width: 520px) { .lijsten-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } .lijst-tab { min-width: 110px; padding: 8px 12px; } #lijsten-knop { padding: 0 12px; } }

        .knop-zacht { font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; border-radius: 10px; padding: 0 16px; height: 42px; color: var(--tekst-zacht); background: transparent; border: 1px solid var(--lijn); transition: all 0.2s ease-out; }
        .knop-zacht:hover { color: var(--tekst); border-color: rgba(243, 233, 214, 0.2); }
        .lijst-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
        .lijst-acties[hidden] { display: none; }
        .bieb-knop {
            font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; color: var(--tekst-zacht); background: transparent;
            border: 1px solid var(--lijn); border-radius: 999px; padding: 8px 15px; transition: all 0.2s ease-out;
        }
        .bieb-knop:hover:not(:disabled) { color: var(--tekst); border-color: rgba(245, 215, 127, 0.35); background: rgba(179, 27, 52, 0.1); }
        .bieb-knop[aria-pressed="true"] { background: var(--rood-diep); border-color: rgba(245, 215, 127, 0.35); color: var(--goud-licht); box-shadow: var(--rood-gloed); }
        .bieb-knop.bezig { opacity: 0.8; cursor: progress; }
        .bieb-knop:disabled { opacity: 0.55; cursor: progress; }
        .bieb-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .lijst-melding { margin: 10px 0 0; font-size: 0.88rem; color: #fca5a5; }
        .lijst-melding.ok { color: var(--tekst-zacht); }
        .lijst-melding[hidden] { display: none; }

        /* ---------- Zoekresultaten (TMDB) onder de zoekbalk ---------- */
        .zoek-resultaten {
            position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
            min-width: min(340px, calc(100vw - 32px));
            max-height: min(420px, 70vh); overflow-y: auto;
            background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 12px;
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); padding: 6px;
            animation: fade-in 0.15s ease-out;
        }
        .zoek-resultaten[hidden] { display: none; }
        .zoek-item {
            display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; text-align: left;
            font: inherit; color: var(--tekst); background: transparent; border: none; border-radius: 8px; cursor: pointer;
        }
        .zoek-item:hover, .zoek-item:focus-visible, .zoek-item[aria-selected="true"] { background: var(--accent-zacht); outline: none; }
        .zoek-poster { flex: 0 0 36px; width: 36px; height: 54px; border-radius: 5px; object-fit: cover; background: var(--bg-card); }
        .zoek-poster.leeg-poster { display: flex; align-items: center; justify-content: center; color: var(--tekst-vaag); font-size: 0.7rem; }
        .zoek-titel { flex: 1; min-width: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
        .zoek-label {
            flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
            padding: 3px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-zacht);
        }
        .zoek-label[data-type="tv"] { color: var(--goud-licht); background: rgba(245, 215, 127, 0.12); }
        .zoek-melding { padding: 14px 12px; color: var(--tekst-zacht); font-size: 0.92rem; text-align: center; }

        /* ---------- AI-Kijkwijzer ("Help me kiezen") ---------- */
        .keuze-knop {
            flex: 0 0 auto; height: 40px; padding: 0 14px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
            color: var(--accent); background: var(--accent-zacht); border: 1px solid rgba(245, 215, 127, 0.35); border-radius: 999px;
            transition: all 0.2s ease-out; white-space: nowrap;
        }
        .keuze-knop:hover { background: rgba(245, 215, 127, 0.2); border-color: var(--accent); }
        .keuze-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        dialog.keuzehulp { width: min(760px, calc(100% - 24px)); }
        .keuze-in { padding: 26px 26px 24px; }
        .keuze-in h2 { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 0.5px; line-height: 1; margin: 0 40px 4px 0; }
        .keuze-in h2 span { background: var(--goud-metaal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
        .keuze-sub { margin: 0; color: var(--tekst-vaag); font-size: 0.88rem; }
        .chat-venster.keuze-venster { min-height: 200px; max-height: 75vh; }   /* groeit mee met lange antwoorden; sleep rechtsonder om hem groter te maken */
        .keuze-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
        .keuze-chip {
            font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--tekst-zacht);
            background: transparent; border: 1px solid var(--lijn); border-radius: 999px; padding: 6px 13px; transition: all 0.2s ease-out;
        }
        .keuze-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-zacht); }
        .keuze-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .aanraders { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
        .aanrader {
            font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-align: left;
            color: var(--accent); background: var(--accent-zacht); border: 1px solid rgba(245, 215, 127, 0.3); border-radius: 10px; padding: 7px 12px;
            transition: all 0.2s ease-out;
            white-space: normal; overflow-wrap: anywhere; max-width: 100%;
        }
        .aanrader:hover { background: rgba(245, 215, 127, 0.22); border-color: var(--accent); transform: translateY(-1px); }
        .aanrader:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .aanrader small { color: var(--tekst-zacht); font-weight: 500; margin-left: 4px; }
        @media (max-width: 520px) { .keuze-in { padding: 22px 16px 18px; } .keuze-knop span { display: none; } .keuze-knop { padding: 0 12px; } }

        dialog {
            width: min(820px, calc(100% - 24px));
            max-height: calc(100% - 24px);
            padding: 0;
            border: 1px solid var(--goud-rand);
            border-radius: 18px;
            background: rgba(26, 16, 21, 0.9);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            color: var(--tekst);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(179, 27, 52, 0.08);
        }
        dialog { overflow-y: auto; overscroll-behavior: contain; }   /* is de inhoud langer dan het scherm, dan scrolt het venster */
        dialog::backdrop { background: rgba(10, 4, 7, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
        dialog[open] { animation: openen 0.28s cubic-bezier(.2, .7, .2, 1); }
        dialog[open]::backdrop { animation: fade-in 0.28s ease-out; }
        @keyframes openen { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

        .sluit-knop {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--lijn);
            background: rgba(18, 10, 13, 0.7);
            color: var(--tekst);
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            z-index: 2;
        }
        .sluit-knop:hover { border-color: var(--accent); color: var(--accent); }

        .chat-venster {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 64px;                  /* klein zolang er (bijna) niets in staat */
            max-height: min(62vh, 560px);      /* groeit mee met de berichten en scrolt pas daarna */
            overflow-y: auto;
            resize: vertical;                  /* handmatig groter of kleiner te slepen */
            overscroll-behavior: contain;      /* scrollen in het venster scrolt niet ook de pagina */
            margin-top: 14px;
            padding: 14px;
            border: 1px solid var(--lijn);
            border-radius: 12px;
            background: rgba(48, 28, 34, 0.45);
        }
        .bericht {
            max-width: 85%;
            padding: 10px 14px;
            border-radius: 14px;
            font-size: 0.95rem;
            line-height: 1.55;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            flex: 0 0 auto;                    /* een bericht krimpt nooit in het venster: het venster groeit of scrolt */
            overflow: visible;
        }
        .bericht.gebruiker { align-self: flex-end; background: var(--rood); color: var(--op-rood); border-bottom-right-radius: 4px; }
        .bericht.bot { align-self: flex-start; background: var(--bg-card); color: #ecdfca; border: 1px solid var(--lijn); border-bottom-left-radius: 4px; }
        .bericht.systeem { align-self: center; max-width: 100%; padding: 4px 8px; color: var(--tekst-vaag); font-size: 0.85rem; text-align: center; }
        .bericht.fout { align-self: center; color: #fca5a5; font-size: 0.88rem; text-align: center; }
        .minuut-tag { display: block; font-size: 0.7rem; font-weight: 700; opacity: 0.65; margin-bottom: 2px; letter-spacing: 0.03em; }

        .bericht.laden { display: flex; gap: 5px; padding: 14px 16px; }
        .bericht.laden span { width: 7px; height: 7px; border-radius: 50%; background: var(--tekst-zacht); animation: stip 1.2s infinite ease-in-out; }
        .bericht.laden span:nth-child(2) { animation-delay: 0.15s; }
        .bericht.laden span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes stip { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

        .chat-invoer { display: flex; gap: 10px; margin-top: 12px; }
        .chat-invoer input {
            flex: 1;
            min-width: 0;
            height: 46px;
            padding: 0 14px;
            background: var(--bg-raised);
            color: var(--tekst);
            font: inherit;
            font-size: 16px;
            border: 1px solid var(--lijn);
            border-radius: 10px;
            outline: none;
            transition: border-color 0.15s ease;
        }
        .chat-invoer input::placeholder { color: var(--tekst-vaag); }
        .chat-invoer input:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .chat-invoer button {
            flex: 0 0 auto;
            height: 46px;
            padding: 0 20px;
            font: inherit;
            font-weight: 700;
            color: var(--op-rood);
            background: var(--rood);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: opacity 0.15s ease;
        }
        .chat-invoer button:disabled { opacity: 0.45; cursor: not-allowed; }

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

        /* ---------- App-gedrag (PWA): meldingen en geïnstalleerde weergave ---------- */
        .statusbalk {
            position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
            display: flex; align-items: center; gap: 14px; max-width: calc(100% - 24px); padding: 11px 16px;
            font-size: 0.9rem; line-height: 1.4; color: var(--tekst); background: rgba(26, 16, 21, 0.96);
            border: 1px solid rgba(243, 233, 214, 0.12); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade-in 0.25s ease-out;
        }
        .statusbalk[hidden] { display: none; }
        .statusbalk-knop { flex: 0 0 auto; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--op-rood); background: var(--rood); border: none; border-radius: 999px; padding: 7px 14px; }
        .statusbalk-knop[hidden] { display: none; }
        .statusbalk-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        @media (display-mode: standalone) {
            html, body { overscroll-behavior-y: none; }   /* geen "trek-om-te-vernieuwen"-sprong in de app */
        }

        /* ---------- Smalle schermen (telefoon): een compacte kop die niet breder wordt dan het scherm ---------- */
        #lijsten-knop .kort { display: none; }
        @media (max-width: 520px) {
            .topbalk-in { gap: 8px; min-width: 0; }
            .topbalk-rechts { min-width: 0; }
            .topbalk .logo { font-size: 1.55rem; }
            .topbalk-rechts { gap: 6px; }
            .keuze-knop { height: 38px; padding: 0 11px; }
            .land-knop { height: 38px; padding: 0 9px; gap: 5px; }
            .land-naam { display: none; }
            .land-kiezer { position: static; }
            .land-paneel { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; }   /* breed paneel onder de kop; de top zet app.js */
            .taal-schakelaar { height: 38px; }
            .taal-schakelaar button { min-width: 30px; padding: 0 6px; }
            .auth-knop { height: 38px; padding: 0 11px; font-size: 0.8rem; max-width: 96px; }
            #lijsten-knop .lang { display: none; }
            #lijsten-knop .kort { display: inline; }
        }
        @media (max-width: 400px) {   /* te smal voor alles op één rij: de knoppen komen onder het logo */
            .topbalk-in { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
            .topbalk-rechts { width: 100%; justify-content: space-between; }
            .auth-knop { max-width: 120px; }
        }
        @media (max-width: 350px) {
            .topbalk .logo { font-size: 1.35rem; }
            .auth-knop { padding: 0 8px; max-width: 80px; }
            .keuze-knop { padding: 0 9px; }
        }

        /* ---------- Tijdlijn, samenvatting en voorlezen ---------- */
        .tijd-stap-rij { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
        .tijd-stap-rij .tijd-weergave { margin: 0; font-size: 1.4rem; }
        .stap-knop { min-width: 52px; min-height: 40px; padding: 0 12px; font: inherit; font-weight: 700; color: var(--accent); background: var(--bg-card); border: 1px solid var(--lijn); border-radius: 10px; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; }
        .stap-knop:hover { border-color: var(--accent); }
        .stap-knop:active { transform: scale(0.96); }
        .stap-knop:focus-visible, .paneel-tab:focus-visible, .voorlees-knop:focus-visible, .tijdlijn-toggle:focus-visible { outline: 3px solid rgba(245, 215, 127, 0.4); outline-offset: 2px; }
        .tijd-paneel { margin-top: 22px; }
        .paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .paneel-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
        .paneel-tab { padding: 8px 14px; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--tekst-zacht); background: var(--bg-card); border: 1px solid var(--lijn); border-radius: 999px; cursor: pointer; }
        .paneel-tab[aria-selected="true"] { color: var(--op-rood); background: var(--rood); border-color: var(--rood-licht); box-shadow: var(--rood-gloed); }
        .voorlees-knop { flex: none; width: 40px; height: 40px; font-size: 1.15rem; line-height: 1; background: var(--bg-card); border: 1px solid var(--lijn); border-radius: 50%; cursor: pointer; }
        .voorlees-knop[hidden] { display: none; }
        .voorlees-knop[aria-pressed="true"] { border-color: var(--accent); }
        .blok-kop { color: var(--accent); font-weight: 700; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
        .tijdlijn-toggle { margin-top: 10px; padding: 8px 2px; font: inherit; font-size: 0.9rem; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        .tijdlijst[hidden] { display: none; }
        #tijdlijn-volledig { margin-top: 6px; }
        .tijdregel.huidig .tijdtekst { font-weight: 600; }
        .paneel-noot { margin: 8px 0 0; color: var(--tekst-vaag); font-size: 0.78rem; }
        #paneel-tekst:empty { display: none; }

        /* ---------- Eigen lijsten ---------- */
        .auth-in input[type=text] {
            width: 100%; height: 46px; padding: 0 14px; background: var(--bg); color: var(--tekst); font: inherit; font-size: 16px;
            border: 1px solid var(--lijn); border-radius: 10px; outline: none; transition: border-color 0.15s ease;
        }
        .eigen-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
        .eigen-tabs:empty { display: none; }
        .eigen-tab { font: inherit; font-size: 0.88rem; font-weight: 600; max-width: 100%; padding: 7px 14px; cursor: pointer; color: var(--tekst-zacht); background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .eigen-tab:hover { color: var(--tekst); }
        .eigen-tab[aria-selected="true"] { background: var(--rood); border-color: var(--rood-licht); color: var(--op-rood); box-shadow: var(--rood-gloed); }
        .eigen-tab.nieuw { border-style: dashed; color: var(--accent); background: transparent; }
        .eigen-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .eigen-form label { display: block; margin: 14px 0 5px; color: var(--tekst-vaag); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }
        .eigen-form-los { max-width: 420px; margin: 12px 0 4px; }
        .eigen-form[hidden] { display: none; }
        .eigen-rij { display: flex; gap: 8px; }
        .eigen-rij input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--tekst); background: var(--bg); border: 1px solid var(--lijn); border-radius: 10px; outline: none; }
        .eigen-rij input:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .eigen-rij .bieb-knop { flex: 0 0 auto; }
        .eigen-opties { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
        .eigen-opties .bieb-knop { width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .eigen-leeg { margin: 0; color: var(--tekst-vaag); font-size: 0.9rem; }
        .eigen-kop-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 4px; }
        .eigen-kop-rij h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }

        /* ---------- Waar was ik gebleven? ---------- */
        .gok-knop { margin-top: 12px; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; color: var(--goud-licht); background: transparent; border: 1px solid rgba(245, 215, 127, 0.28); border-radius: 999px; padding: 7px 14px; }
        .gok-knop:hover { background: var(--accent-zacht); border-color: rgba(245, 215, 127, 0.5); }
        .gok-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .gok-tekst { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--tekst); background: var(--bg); border: 1px solid var(--lijn); border-radius: 10px; outline: none; resize: vertical; min-height: 84px; }
        .gok-tekst:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        .gok-verstuur { margin-top: 12px; }
        /* in het venster horen de knoppen bij de rustige secundaire stijl (goud, geen felrood) */
        #gok-verstuur, #gok-zet { color: var(--goud-licht); background: var(--accent-zacht); border: 1px solid rgba(245, 215, 127, 0.35); }
        #gok-verstuur:hover:not(:disabled), #gok-zet:hover:not(:disabled) { filter: none; background: rgba(245, 215, 127, 0.2); border-color: rgba(245, 215, 127, 0.6); }
        #gok-verstuur:focus-visible, #gok-zet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .gok-verstuur:disabled, #gok-zet:disabled { opacity: 0.6; cursor: progress; }
        .gok-antwoord { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--accent-zacht); border: 1px solid rgba(245, 215, 127, 0.22); }
        .gok-antwoord p { margin: 0 0 10px; color: var(--tekst); line-height: 1.5; }
        .gok-antwoord p:last-child { margin-bottom: 0; }
        .gok-antwoord .knop-accent { width: 100%; }

        /* ---------- Mijn lijsten: zoeken en sorteren ---------- */
        .lijsten-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 0; }
        .lijsten-balk input[type=search] { flex: 1 1 200px; width: auto; min-width: 0; height: 40px; padding: 0 14px; font-size: 15px; }
        .lijsten-sorteer { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-vaag); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
        .lijsten-sorteer select { height: 40px; max-width: 100%; padding: 0 28px 0 12px; font: inherit; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--accent); background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 10px; outline: none; cursor: pointer; }
        .lijsten-sorteer select:focus { border-color: rgba(245, 215, 127, 0.55); box-shadow: var(--goud-focus); }
        @media (max-width: 520px) { .lijsten-sorteer { width: 100%; justify-content: space-between; } .lijsten-sorteer select { flex: 1 1 auto; } }

        /* ---------- Installeren (PWA) ---------- */
        .installeer-banner { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 55; width: min(460px, calc(100% - 24px));
            display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; background: rgba(26, 16, 21, 0.94); border: 1px solid var(--goud-rand);
            border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
        .installeer-banner[hidden] { display: none; }
        .installeer-icoon { flex: 0 0 auto; border-radius: 10px; }
        .installeer-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--tekst-zacht); line-height: 1.35; }
        .installeer-tekst strong { color: var(--tekst); font-size: 0.88rem; }
        .installeer-knop { flex: 0 0 auto; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; color: var(--op-rood); background: var(--rood); border: 1px solid var(--rood-licht); border-radius: 999px; padding: 8px 14px; box-shadow: var(--rood-gloed); }
        .installeer-knop[hidden] { display: none; }
        .installeer-sluit { flex: 0 0 auto; width: 32px; height: 32px; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--tekst-vaag); background: transparent; border: none; border-radius: 50%; }
        .installeer-sluit:hover { color: var(--tekst); }
        .installeer-knop:focus-visible, .installeer-sluit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        /* ---------- Streamingaanbieders ---------- */
        .streaming { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn); }
        .streaming[hidden] { display: none; }
        .streaming-rij { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
        .streaming-rij::-webkit-scrollbar { display: none; }
        .streaming-badge { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; text-decoration: none; color: var(--tekst); background: var(--bg-raised); border: 1px solid var(--lijn); border-radius: 999px; transition: border-color 0.15s ease, background 0.15s ease; }
        .streaming-badge:hover { border-color: rgba(245, 215, 127, 0.4); background: var(--accent-zacht); }
        .streaming-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .streaming-badge img { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bg-card); }
        .streaming-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .streaming-naam { font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
        .streaming-soorten { display: flex; gap: 4px; }
        .streaming-soort { padding: 1px 7px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; }
        .streaming-soort.stream { color: #1d1408; background: var(--accent); }
        .streaming-soort.huur { color: var(--goud-licht); border-color: rgba(245, 215, 127, 0.5); }
        .streaming-soort.koop { color: var(--op-rood); background: var(--rood); }
        .streaming-kop { margin: 0 0 10px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tekst-vaag); }
        .streaming-leeg { margin: 0; padding: 10px 12px; color: var(--tekst-zacht); font-size: 0.9rem; background: var(--bg-raised); border: 1px dashed var(--lijn); border-radius: 10px; }
        .streaming-leeg[hidden] { display: none; }

        /* ---------- Delen ---------- */
        .lijst-delen, .deel-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
        .lijst-delen-melding { font-size: 0.86rem; color: var(--goud-licht); overflow-wrap: anywhere; }
        .lijst-delen-melding.fout { color: #fca5a5; }
        .lijst-delen .auth-link { margin: 0; }
        .deel-rij { margin-top: 14px; }