*{box-sizing:border-box} :root{color-scheme:dark;--navy:#071a36;--panel:#0d2548;--panel2:#102e56;--blue:#3b82f6;--cyan:#59c5ff;--text:#f3f7ff;--muted:#a8bad3;--line:rgba(164,195,236,.18)}body{margin:0;background:radial-gradient(ellipse at top right,#123d70 0,#071a36 45%,#041124 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.topbar{display:flex;align-items:center;gap:13px;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(4,17,36,.65);backdrop-filter:blur(12px)}.brandmark{font-weight:950;font-size:25px;letter-spacing:-1.5px;color:#fff}.brandmark span{color:var(--cyan)}.brandcopy{display:flex;flex-direction:column;gap:3px;min-width:0}.brandcopy strong{font-size:13px}.brandcopy small{font-size:10px;color:var(--muted)}.hostlink{margin-left:auto;color:#d8e9ff;font-size:12px;text-decoration:none;border:1px solid var(--line);padding:9px 12px;border-radius:10px;white-space:nowrap}.shell{width:min(920px,100%);margin:0 auto;padding:28px 18px 50px}.panel{background:linear-gradient(145deg,rgba(16,46,86,.94),rgba(8,27,54,.97));border:1px solid var(--line);border-radius:22px;padding:clamp(20px,4vw,34px);box-shadow:0 18px 60px #0002}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--cyan);margin:0 0 12px}.panel h1,.welcome h1{font-size:clamp(28px,6vw,43px);letter-spacing:-1.4px;line-height:1.08;margin:0 0 14px}.intro,.welcome>p:last-child{font-size:14px;color:var(--muted);line-height:1.65;max-width:650px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:25px}.formgrid label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#dce8f8;font-weight:650}.formgrid input,.formgrid select,.formgrid textarea{width:100%;min-width:0;background:#06172e;color:#fff;border:1px solid #2a4568;border-radius:11px;padding:13px 14px;font:inherit;font-size:14px;outline:none}.formgrid input:focus,.formgrid select:focus,.formgrid textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #59c5ff20}.wide{grid-column:1/-1}.privacy{color:#91a8c6;font-size:11px;line-height:1.6;margin:0}.primary,.secondary{border:0;border-radius:12px;padding:14px 17px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .15s,opacity .15s}.primary{background:linear-gradient(100deg,#2563eb,#3b82f6);color:white;box-shadow:0 8px 22px #2563eb35}.primary span{float:right;font-size:18px;line-height:12px}.secondary{background:#17395f;border:1px solid var(--line);color:#e7f1ff}.primary:disabled{opacity:.6;cursor:wait}.error{color:#ff9b9b;font-size:12px;min-height:14px;margin:0}.welcome{padding:12px 2px 22px}.livecard{padding:22px;background:linear-gradient(115deg,#123e70,#0b2a50);border:1px solid #4485c655;border-radius:20px;margin-bottom:30px;box-shadow:0 14px 45px #0002}.livehead{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:850;letter-spacing:1.4px;color:#9fdcff}.livepulse{width:7px;height:7px;background:#4ade80;border-radius:50%;box-shadow:0 0 0 5px #4ade8020}.status{margin-left:auto;font-size:10px;letter-spacing:0;color:#ffd98d}.status.connected{color:#8ef0ae}.livecard h2{font-size:24px;letter-spacing:-.5px;margin:18px 0 7px}.livecard p{font-size:13px;line-height:1.6;color:#c2d5ef}.activeprompt{display:flex;flex-direction:column;gap:14px;border-top:1px solid #ffffff20;margin-top:15px;padding-top:15px}.activeprompt strong{font-size:15px;line-height:1.5}.sectionheading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 13px}.sectionheading h2{font-size:17px;margin:0}.sectionheading>span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tile{position:relative;min-height:142px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px;background:linear-gradient(145deg,#102c51,#0a203e);border:1px solid var(--line);border-radius:17px;color:#fff;cursor:pointer}.tile:hover,.tile.is-live{border-color:#55bfff;box-shadow:0 0 0 1px #55bfff22,0 12px 30px #0002}.tile.is-live:after{content:"LIVE";position:absolute;right:12px;top:12px;color:#90f3b2;font-size:9px;letter-spacing:1px;font-weight:900}.tileicon{width:34px;height:34px;display:grid;place-items:center;background:#2b65a733;border:1px solid #4b8bd455;border-radius:10px;color:#8fd9ff;font-size:21px}.tile strong{font-size:13px;line-height:1.4;max-width:90%}.tile small{font-size:11px;line-height:1.4;color:var(--muted)}.tilearrow{position:absolute;right:14px;bottom:15px;color:#77a6d8}.footnote{text-align:center;font-size:10px;color:#7189a9;margin-top:28px}.back{border:0;background:transparent;color:#9fdcff;font-size:12px;font-weight:750;padding:0 0 24px;cursor:pointer}.questionbox{margin-top:20px;background:#071a36;border:1px solid var(--line);padding:18px;border-radius:16px}.questionbox h2{font-size:19px;line-height:1.45}.option{display:flex;align-items:center;gap:10px;padding:13px;margin:8px 0;border:1px solid var(--line);border-radius:10px;font-size:13px;cursor:pointer}.option input{accent-color:#3b82f6}.option:has(input:checked){border-color:var(--cyan);background:#1b4b7a55}.questionbox button{width:100%;margin-top:12px}.profile{display:grid;gap:10px;margin-top:20px}.profile>div{display:flex;flex-direction:column;gap:5px;padding:14px;background:#06172e;border-radius:10px}.profile small{font-size:10px;color:var(--muted)}.profile strong{font-size:14px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e4f8eb;color:#12482a;padding:12px 18px;border-radius:12px;font-size:12px;font-weight:800;box-shadow:0 10px 40px #0004;transition:.2s;max-width:calc(100% - 30px)}.toast.show{opacity:1;transform:translate(-50%,0)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.stat{padding:18px;background:#0d2548;border:1px solid var(--line);border-radius:16px}.stat small{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.stat strong{font-size:24px}.hostshell>.panel{margin-bottom:18px}.statusline{font-size:12px;color:#9fdcff;min-height:16px}.results{display:grid;gap:18px}.resultgroup{border-top:1px solid var(--line);padding-top:15px}.resultgroup h3{font-size:12px;color:#9fdcff}.resultline{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin:10px 0 5px}.resultline span{overflow-wrap:anywhere}.bar{height:5px;background:#06172e;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#59c5ff);border-radius:5px}@media(max-width:560px){.topbar{padding:14px}.brandcopy small{max-width:170px;line-height:1.4}.hostlink{font-size:10px;padding:8px}.shell{padding:20px 13px 35px}.formgrid{grid-template-columns:1fr}.formgrid>*{grid-column:1/-1}.tiles{grid-template-columns:1fr}.tile{min-height:124px}.livecard{padding:18px}.stats{grid-template-columns:1fr 1fr}.stat{padding:13px}.stat strong{font-size:20px}}

/* COPE BIC I — visuele verfijning deelnemersscherm */
.cope-logo{display:block;width:auto;height:44px;max-width:150px;object-fit:contain;flex-shrink:0}
.brandcopy{gap:4px}
.brandcopy strong{font-size:14px;letter-spacing:.1px}
.brandcopy small:first-of-type{color:#79d5ff;font-size:10px;letter-spacing:.25px}
.welcome{padding-top:18px}
.welcome h1{max-width:760px}
.tiles{gap:16px}
.tile{min-height:190px;overflow:hidden;isolation:isolate;padding:20px;justify-content:flex-end;background-color:#0b2342;background-size:cover;background-position:center;border:1px solid rgba(164,195,236,.22);box-shadow:0 10px 30px rgba(0,0,0,.16);transition:transform .18s,border-color .18s,box-shadow .18s}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,14,30,.10) 0%,rgba(3,14,30,.50) 42%,rgba(3,14,30,.96) 100%)}
.tile:hover,.tile.is-live{transform:translateY(-2px);border-color:#59c5ff;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.tile .tileicon{width:38px;height:38px;background:rgba(4,24,48,.78);border-color:rgba(121,213,255,.48)}
.tile strong{font-size:15px;line-height:1.35;max-width:88%}
.tile small{font-size:12px;line-height:1.5;color:#d0e0f3;max-width:95%}
.tile-account{background-image:linear-gradient(120deg,rgba(8,33,65,.3),rgba(8,33,65,.3)),url('/images/cope-account.jpg')}
.tile-program{background-image:linear-gradient(120deg,rgba(8,33,65,.3),rgba(8,33,65,.3)),url('/images/cope-program.jpg')}
.tile-quiz{background-image:linear-gradient(120deg,rgba(8,33,65,.3),rgba(8,33,65,.3)),url('/images/cope-quiz.jpg')}
.tile-chain{background-image:linear-gradient(120deg,rgba(8,33,65,.3),rgba(8,33,65,.3)),url('/images/cope-chain.jpg')}
.tile-hybrid{background-image:linear-gradient(120deg,rgba(8,33,65,.3),rgba(8,33,65,.3)),url('/images/cope-hybrid.jpg')}
.tile-archive{background-image:linear-gradient(120deg,rgba(8,33,65,.3),rgba(8,33,65,.3)),url('/images/cope-results.jpg')}
@media(max-width:560px){
 .cope-logo{height:36px;max-width:110px}
 .brandcopy strong{font-size:12px}
 .brandcopy small:first-of-type{font-size:9px;line-height:1.5}
 .tiles{gap:12px}
 .tile{min-height:165px;padding:17px}
 .tile strong{font-size:14px}
}
/* COPE MOBILE: TWEE TEGELKOLOMMEN */
@media (max-width: 560px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tile {
    min-width: 0;
    min-height: 150px;
    padding: 12px;
    gap: 7px;
    border-radius: 13px;
  }

  .tile .tileicon {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .tile strong {
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .tile small {
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .tile.is-live:after {
    right: 7px;
    top: 7px;
    font-size: 8px;
  }
}

/* COPE MOBILE: COMPACT MENU ZONDER SCROLL */
@media (max-width: 560px) {
  .shell { padding: 8px 9px 10px; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .cope-logo { height: 30px; max-width: 95px; }
  .brandcopy strong { font-size: 11px; }
  .brandcopy small:first-of-type { font-size: 8px; line-height: 1.25; }
  .welcome { padding: 3px 2px 7px; }
  .welcome .eyebrow { font-size: 8px; margin-bottom: 4px; letter-spacing: 1px; }
  .welcome h1 { font-size: 22px; line-height: 1.05; letter-spacing: -.5px; margin-bottom: 4px; }
  .welcome > p:last-child { font-size: 10px; line-height: 1.25; margin: 0; }
  .livecard { padding: 9px; margin-bottom: 8px; border-radius: 12px; }
  .livehead { font-size: 8px; }
  .livecard h2 { font-size: 15px; line-height: 1.15; margin: 5px 0 3px; }
  .livecard p { font-size: 10px; line-height: 1.25; margin: 3px 0; }
  .activeprompt { gap: 5px; margin-top: 6px; padding-top: 6px; }
  .activeprompt strong { font-size: 10px; line-height: 1.2; }
  .activeprompt button { padding: 6px 8px; font-size: 10px; }
  .sectionheading { margin: 8px 0 6px; gap: 5px; }
  .sectionheading h2 { font-size: 12px; }
  .sectionheading > span { font-size: 8px; letter-spacing: .5px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .tile { min-width: 0; height: 86px; min-height: 86px; padding: 7px; gap: 4px; border-radius: 10px; }
  .tile .tileicon { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }
  .tile strong { font-size: 10px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
  .tile small { font-size: 8px; line-height: 1.15; overflow-wrap: anywhere; }
  .tile arrow { right: 5px; bottom: 4px; }
  .tile.is-live:after { right: 5px; top: 5px; font-size: 7px; }
  .footnote { margin-top: 8px; font-size: 8px; }
}

/* COPE PROGRAMMA — premium agenda */
.program-page { color:var(--text); }
.program-hero { position:relative; overflow:hidden; isolation:isolate; padding:26px 22px 23px; border:1px solid rgba(121,213,255,.2); border-radius:20px; background:linear-gradient(135deg,#102f55 0%,#0a203d 62%,#07182f 100%); }
.program-hero-orb { position:absolute; z-index:-1; width:230px; height:230px; right:-85px; top:-95px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,.28),rgba(59,130,246,0) 70%); }
.program-kicker,.program-overline { margin:0 0 12px; color:#79d5ff; font-size:9px; font-weight:850; letter-spacing:1.7px; }
.program-kicker span { color:#5a7799; padding:0 4px; }
.program-hero h2 { margin:0; font-size:clamp(29px,6vw,42px); line-height:1.02; letter-spacing:-1.3px; }
.program-hero h2 span { color:#79d5ff; }
.program-lead { max-width:520px; margin:14px 0 18px; color:#c4d6eb; font-size:13px; line-height:1.65; }
.program-meta { display:flex; flex-wrap:wrap; gap:8px; }
.program-meta span { padding:7px 10px; border:1px solid rgba(164,195,236,.2); border-radius:9px; background:#ffffff08; color:#d7e7f8; font-size:10px; }
.program-section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin:27px 2px 17px; }
.program-overline { margin-bottom:5px; font-size:8px; }
.program-section-head h3 { margin:0; font-size:23px; letter-spacing:-.5px; }
.program-count { color:#8fa9c8; font-size:9px; letter-spacing:1px; }
.program-timeline { display:grid; gap:12px; }
.program-item { display:grid; grid-template-columns:68px 24px minmax(0,1fr); gap:9px; align-items:stretch; }
.program-time { padding-top:16px; text-align:right; }
.program-time strong { display:block; color:#79d5ff; font-size:13px; font-variant-numeric:tabular-nums; }
.program-time span { display:block; margin-top:3px; color:#829ab8; font-size:10px; }
.program-track { position:relative; display:flex; justify-content:center; }
.program-track:before { content:""; position:absolute; top:0; bottom:-13px; left:50%; width:1px; background:linear-gradient(#3b82f6,#294463); }
.program-item:last-child .program-track:before { display:none; }
.program-dot { position:relative; z-index:1; display:grid; place-items:center; width:23px; height:23px; margin-top:15px; border:1px solid #315b85; border-radius:8px; background:#102e50; color:#8bdcff; font-size:12px; }
.program-card { min-width:0; padding:15px; border:1px solid rgba(164,195,236,.15); border-radius:14px; background:linear-gradient(145deg,#0d2747,#091d36); }
.program-card-top { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:9px; }
.program-tag { display:inline-flex; padding:5px 7px; border-radius:5px; background:#173b60; color:#9cddff; font-size:8px; font-weight:850; letter-spacing:.8px; }
.program-duration { color:#829ab8; font-size:9px; white-space:nowrap; }
.program-card h4 { margin:0 0 6px; color:#f3f7ff; font-size:15px; line-height:1.3; letter-spacing:-.2px; }
.program-card p { margin:0; color:#b3c7df; font-size:11px; line-height:1.6; }
.program-simulation .program-dot { background:#103b52; border-color:#23617a; color:#78e0f1; }
.program-simulation .program-tag { background:#12384c; color:#81deed; }
.program-break .program-card { background:#0a2038; }
.program-break .program-dot { color:#e6c88b; border-color:#6d5937; background:#3b3020; }
.program-break .program-tag { color:#e6c88b; background:#3b3020; }
.program-featured .program-card { border-color:rgba(89,197,255,.48); background:linear-gradient(145deg,#12365c,#0a203c); box-shadow:0 10px 28px #0002; }
.program-featured .program-dot { width:27px; height:27px; margin-top:13px; border-color:#59c5ff; background:#164b78; color:white; }
.program-featured .program-tag { background:#1d5684; color:#d8f4ff; }
.program-speaker { display:flex; align-items:center; gap:12px; margin-top:15px; padding:11px; border:1px solid rgba(121,213,255,.2); border-radius:11px; background:#06182c88; }
.program-speaker-photo { display:block; flex:0 0 62px; width:62px; height:76px; object-fit:cover; object-position:center 25%; border-radius:8px; background:#153354; }
.program-speaker-info { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.program-speaker-label { color:#79d5ff; font-size:8px; font-weight:850; letter-spacing:1.3px; }
.program-speaker-info strong { color:#fff; font-size:13px; }
.program-speaker-info span:last-child { color:#b8cbe4; font-size:10px; line-height:1.4; }
.program-speaker-mark { align-self:flex-start; color:#79d5ff; font-size:9px; font-weight:950; letter-spacing:1px; }
.program-network .program-card { border-color:rgba(121,213,255,.25); background:linear-gradient(120deg,#10385a,#0c2745); }
.program-network .program-dot { border-color:#3b82f6; background:#1c4c7b; color:white; }
.program-footer { display:flex; align-items:center; gap:12px; margin-top:24px; padding:16px; border:1px solid rgba(164,195,236,.14); border-radius:13px; background:#081b32; }
.program-footer-mark { color:#79d5ff; font-size:19px; font-weight:950; letter-spacing:-1px; }
.program-footer strong { display:block; color:#dceaff; font-size:10px; line-height:1.5; }
.program-footer p { margin:4px 0 0; color:#91a8c6; font-size:10px; }
@media(max-width:560px) {
  .program-hero { padding:20px 16px 17px; border-radius:15px; }
  .program-hero h2 { font-size:31px; }
  .program-lead { margin:11px 0 14px; font-size:12px; }
  .program-meta { gap:6px; }
  .program-meta span { font-size:9px; padding:6px 8px; }
  .program-section-head { margin:22px 2px 13px; }
  .program-section-head h3 { font-size:21px; }
  .program-item { grid-template-columns:53px 19px minmax(0,1fr); gap:6px; }
  .program-time { padding-top:13px; }
  .program-time strong { font-size:11px; }
  .program-time span { font-size:9px; }
  .program-dot { width:19px; height:19px; margin-top:12px; font-size:10px; border-radius:6px; }
  .program-card { padding:11px; border-radius:11px; }
  .program-card-top { align-items:flex-start; flex-direction:column; gap:5px; margin-bottom:7px; }
  .program-duration { font-size:9px; }
  .program-card h4 { font-size:13px; }
  .program-card p { font-size:10px; line-height:1.5; }
  .program-featured .program-dot { width:22px; height:22px; margin-top:10px; }
  .program-speaker { gap:9px; padding:8px; }
  .program-speaker-photo { flex-basis:52px; width:52px; height:65px; }
  .program-speaker-info strong { font-size:12px; }
  .program-speaker-info span:last-child { font-size:9px; }
  .program-speaker-mark { display:none; }
  .program-footer { padding:12px; }
  .program-footer strong { font-size:9px; }
}


/* COPE PROGRAMMA — mobiele leesbaarheid */
@media (max-width:560px) {
  .program-hero { padding:17px 14px 15px; }
  .program-hero h2 { font-size:29px; line-height:1.08; }
  .program-lead { font-size:14px; line-height:1.5; margin:9px 0 12px; }
  .program-meta { gap:5px; }
  .program-meta span { font-size:11px; padding:6px 7px; }

  .program-section-head { margin:18px 2px 10px; }
  .program-section-head h3 { font-size:22px; }
  .program-timeline { gap:8px; }
  .program-item { grid-template-columns:58px 16px minmax(0,1fr); gap:5px; }

  .program-time { padding-top:10px; }
  .program-time strong { font-size:12px; }
  .program-time span { font-size:10px; line-height:1.3; }

  .program-dot { width:16px; height:16px; margin-top:10px; font-size:9px; }
  .program-card { padding:10px; border-radius:10px; }
  .program-card-top { flex-direction:row; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
  .program-tag { font-size:9px; padding:5px 6px; }
  .program-duration { font-size:10px; white-space:normal; }
  .program-card h4 { font-size:15px; line-height:1.3; margin-bottom:5px; }
  .program-card p { font-size:13px; line-height:1.45; }

  .program-featured .program-dot { width:18px; height:18px; margin-top:9px; }
  .program-speaker { margin-top:9px; gap:9px; padding:8px; }
  .program-speaker-photo { flex-basis:50px; width:50px; height:62px; }
  .program-speaker-label { font-size:9px; }
  .program-speaker-info strong { font-size:13px; }
  .program-speaker-info span:last-child { font-size:11px; line-height:1.4; }

  .program-footer { margin-top:15px; padding:10px; gap:9px; }
  .program-footer-mark { font-size:17px; }
  .program-footer strong { font-size:11px; }
  .program-footer p { font-size:11px; line-height:1.4; }
}