:root { --accent:#5b6ee1; --mark:#fff2a8; --warn:#b9770e; --muz:#8457c9; --ok:#2e7d32; }
* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #1d1f24;
       background: #f6f7f9; line-height: 1.5; }
header { display: flex; gap: 1rem; align-items: center; height: 3rem; padding: 0 1rem;
         background: #fff; border-bottom: 1px solid #e3e6ea; position: sticky; top: 0; z-index: 6; }
.merk { font-weight: 700; color: var(--accent); text-decoration: none; font-size: 1.1rem; }
.zoek { margin-left: auto; display: flex; gap: .4rem; flex: 1; max-width: 520px; }
.zoek input { flex: 1; padding: .5rem .7rem; border: 1px solid #ccd2da; border-radius: 8px; }
.zoek button { padding: .5rem .9rem; border: 0; background: var(--accent); color: #fff;
               border-radius: 8px; cursor: pointer; }
main { max-width: 860px; margin: 0 auto; padding: 1.2rem 1rem 4rem; }
h1 { font-size: 1.5rem; margin: .3rem 0; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; color: #3a3f47; }
a { color: var(--accent); }
.terug a, .subtitel { color: #6b7280; }
.subtitel { font-size: .9rem; }

.medialijst { list-style: none; padding: 0; margin: 0; }
.medialijst li { display: flex; align-items: center; gap: .6rem; padding: .55rem .2rem;
                 border-bottom: 1px solid #eceef1; }
.medialijst a { display: flex; gap: .6rem; align-items: baseline; text-decoration: none; flex: 1; }
.mid { font-variant-numeric: tabular-nums; color: #8a909a; font-size: .85rem; min-width: 3.3rem; }
.titel { color: #1d1f24; }
.meta { margin-left: auto; display: flex; gap: .5rem; align-items: center; color: #8a909a;
        font-size: .85rem; }
.badge { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; background: #eceef1; color: #555; }
.badge.ok { background: #e4f3e5; color: var(--ok); }
.badge.warn { background: #fbeacd; color: var(--warn); }
.badge.muz { background: #efe6fb; color: var(--muz); }

/* Vastgezette bovenbalk: speler + foto's blijven in beeld; transcript rolt eronder langs. */
.top-zone { position: sticky; top: 3rem; z-index: 4; background: #f6f7f9;
            padding: .5rem 0 .4rem; border-bottom: 1px solid #e3e6ea; }
audio { width: 100%; display: block; }
.context { background: #fff; border: 1px solid #e7eaee; border-radius: 10px; padding: .7rem .9rem;
           color: #444; font-size: .92rem; margin: .8rem 0; }
.fotos { display: flex; gap: .5rem; overflow-x: auto; margin: .5rem 0 0; padding-bottom: .2rem; }
.fotos img { height: 78px; border-radius: 8px; border: 1px solid #e0e3e8; object-fit: cover; }

.hint { color: #8a909a; font-size: .85rem; margin: .2rem 0 .6rem; }
.transcript { background: #fff; border: 1px solid #e7eaee; border-radius: 10px; padding: .4rem .8rem; }
.spreker { font-weight: 600; color: var(--accent); margin: .9rem 0 .1rem; font-size: .85rem; }
.seg { margin: .15rem 0; padding: .15rem .4rem; border-radius: 6px; cursor: pointer; }
.seg:hover { background: #f0f2ff; }
.seg.actief { background: var(--mark); }
.seg .t { color: #aab; font-size: .78rem; font-variant-numeric: tabular-nums; margin-right: .3rem; }

.treffers { list-style: none; padding: 0; }
.treffers li { padding: .55rem .2rem; border-bottom: 1px solid #eceef1; }
.treffers a { display: inline-flex; gap: .5rem; text-decoration: none; }
.treffers .t { color: #8a909a; font-size: .82rem; }
.fragment { display: block; color: #333; font-size: .92rem; margin-top: .15rem; }
mark { background: var(--mark); }

/* nav gebruiker */
.wie { font-size:.85rem; color:#6b7280; white-space:nowrap; }

/* inlog */
.login { max-width:340px; margin:3rem auto; background:#fff; border:1px solid #e7eaee;
         border-radius:12px; padding:1.4rem; }
.login label { display:block; margin:.6rem 0; font-size:.9rem; color:#444; }
.login input { width:100%; padding:.5rem .6rem; border:1px solid #ccd2da; border-radius:8px; margin-top:.2rem; }
.login button { margin-top:.8rem; width:100%; padding:.55rem; border:0; background:var(--accent);
                color:#fff; border-radius:8px; cursor:pointer; }
.fout { color:#b3261e; background:#fde8e6; padding:.5rem .7rem; border-radius:8px; font-size:.9rem; }
.melding { color:var(--ok); background:#e4f3e5; padding:.5rem .7rem; border-radius:8px; font-size:.9rem; }

/* hartjes-rating */
.rating { display:flex; align-items:center; gap:.7rem; margin:.3rem 0 .6rem; }
.rating form { display:inline; }
.hartjes { display:inline-flex; align-items:center; }
.hartrij { display:inline-flex; flex-direction:row-reverse; }   /* DOM 5..1 -> links naar rechts 1..5 */
.hartjes button { border:0; background:none; cursor:pointer; font-size:1.3rem; padding:0 .05rem; line-height:1; }
.hart.vol { color:#e0245e; } .hart.leeg { color:#d6d9df; }
.hartrij:hover .hart { color:#d6d9df; }                          /* reset tijdens hover */
.hartrij .hart:hover, .hartrij .hart:hover ~ .hart { color:#f5a3bb; }  /* vult naar links */
.hartjes .wis { font-size:1rem; color:#aab; }
.gem { font-size:.82rem; color:#8a909a; }

/* correctie-knop per segment */
.seg { position:relative; }
.corr { display:inline; }
.corr > summary { cursor:pointer; color:#c3c7cf; font-size:.8rem; list-style:none; margin-left:.3rem; }
.corr[open] > summary { color:var(--accent); }
.corr form { display:block; margin:.3rem 0 .5rem; background:#f3f5ff; border:1px solid #d9def7;
             border-radius:8px; padding:.5rem; }
.corr input, .corr textarea { width:100%; padding:.35rem .5rem; border:1px solid #ccd2da;
             border-radius:6px; margin-bottom:.35rem; font:inherit; }
.corr textarea { min-height:3.2rem; }
.corr button { border:0; background:var(--accent); color:#fff; padding:.35rem .7rem; border-radius:6px; cursor:pointer; }

/* annotaties */
.anno-form { background:#fff; border:1px solid #e7eaee; border-radius:10px; padding:.7rem; margin:.4rem 0 1rem; }
.anno-form textarea { width:100%; min-height:3.2rem; padding:.5rem; border:1px solid #ccd2da;
             border-radius:8px; font:inherit; }
.anno-opties { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.5rem; }
.anno-opties input[type=url] { flex:1; min-width:140px; padding:.4rem .6rem; border:1px solid #ccd2da; border-radius:8px; }
.anno-opties button[type=submit] { margin-left:auto; border:0; background:var(--accent); color:#fff;
             padding:.45rem .9rem; border-radius:8px; cursor:pointer; }
.klein { border:1px solid #ccd2da; background:#fff; border-radius:8px; padding:.4rem .6rem; cursor:pointer; font-size:.85rem; }
.klein.aan { border-color:var(--accent); color:var(--accent); }

.annos { list-style:none; padding:0; }
.annos li { background:#fff; border:1px solid #e7eaee; border-radius:10px; padding:.6rem .8rem; margin:.5rem 0; }
.annos li.leeg { color:#8a909a; background:none; border:0; }
.anno-kop { display:flex; gap:.6rem; align-items:baseline; font-size:.85rem; color:#6b7280; }
.anno-kop .tijd { margin-left:auto; color:#aab; }
.anno-tekst { margin:.3rem 0; }
.anno-img { max-height:150px; border-radius:8px; border:1px solid #e0e3e8; margin-top:.3rem; }
.bijlage { display:inline-block; font-size:.85rem; margin-top:.2rem; }
.like-form { display:inline; }
.like { border:1px solid #e7eaee; background:#fff; color:#8a909a; border-radius:999px;
        padding:.15rem .6rem; cursor:pointer; font-size:.85rem; margin-top:.4rem; }
.like.vol { color:#e0245e; border-color:#f5c0d0; }

/* tijdlijn */
.navlink { color:#6b7280; text-decoration:none; font-size:.9rem; white-space:nowrap; }
.navlink:hover { color:var(--accent); }
.tl-form-wrap { margin:.4rem 0 1rem; }
.tl-form-wrap > summary { display:inline-block; list-style:none; }
.tl-rij { display:flex; gap:.6rem; flex-wrap:wrap; }
.tl-rij label { flex:1; min-width:140px; }
.anno-form label { display:block; font-size:.85rem; color:#444; margin:.3rem 0; }
.anno-form input, .anno-form select { width:100%; padding:.4rem .6rem; border:1px solid #ccd2da;
             border-radius:8px; font:inherit; margin-top:.15rem; }
#tijdlijn { background:#fff; border:1px solid #e7eaee; border-radius:10px; padding:.3rem;
            width:94vw; max-width:1600px; position:relative; left:50%; transform:translateX(-50%); }
.vis-item.it-band { background:#eef1ff; border-color:#b8c0f0; color:#2c3350; }
.vis-item.it-event { background:#fff6da; border-color:#e6c766; color:#5a4a12; }
.vis-item.vis-selected { box-shadow:0 0 0 2px var(--accent); }
.tl-detail { background:#fff; border:1px solid #e7eaee; border-radius:10px; padding:.8rem 1rem;
             margin-top:.8rem; }
.tl-detail h3 { margin:.1rem 0 .2rem; font-size:1.05rem; }
.tl-datum { color:#8a909a; font-size:.85rem; margin:.1rem 0 .5rem; }
.tl-besch { margin:.3rem 0 .6rem; white-space:pre-wrap; }
.tl-wis { margin-top:.7rem; }
.tl-wis-knop { border:1px solid #f1c3c0; background:#fff; color:#b3261e; border-radius:8px;
             padding:.3rem .7rem; cursor:pointer; font-size:.85rem; }

/* 2FA */
.tfa .qr { text-align:center; }
.tfa .qr svg { width:190px; height:190px; display:inline-block; margin:.4rem 0; }
.tfa .secret { font-size:.8rem; color:#6b7280; text-align:center; }
.tfa .secret code { background:#f0f2f6; padding:.1rem .35rem; border-radius:5px; }
.login input[name=code] { letter-spacing:.25em; font-size:1.15rem; text-align:center; }