*{box-sizing:border-box}
html,body{margin:0;background:#111;color:#fff;font-family:"Courier New",monospace}
body{min-height:100vh}.screen{width:100%;min-height:100vh;background:#000}
header{height:72px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 18px;border-bottom:3px solid #fff}
.heading{text-align:left;font-size:28px;font-weight:bold;letter-spacing:1px}.datetime{display:flex;gap:18px;align-items:center;color:#ff0;font-size:17px;font-weight:bold}
#date{color:#0ff}.bar{padding:9px 18px;background:#00e;color:#fff;font-size:16px;font-weight:bold}.bar span{float:right;color:#0ff}
.mode-switch{display:grid;grid-template-columns:180px 180px 180px 1fr;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid #444;background:#050505}
button,.settings summary,.settings select{font-family:"Courier New",monospace}.mode-button,.toolbar button,.settings summary{background:#001b24;color:#0ff;border:2px solid #0ff;padding:10px 14px;font-weight:700;cursor:pointer}
.mode-button:hover,.mode-button:focus,.toolbar button:hover,.toolbar button:focus,.settings summary:hover,.settings summary:focus{color:#ff0;border-color:#ff0}.mode-button.active{background:#0ff;color:#000}.mode-current{text-align:right;color:#fff;font-size:14px}.mode-current strong{color:#ff0}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid #444;background:#090909}.toolbar button{padding:7px 10px;border-width:1px;font-size:13px}.toolbar button.active{background:#ff0;color:#000;border-color:#ff0}
.settings{position:relative}.settings summary{list-style:none;padding:7px 10px;border-width:1px;font-size:13px}.settings summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;right:0;z-index:20;min-width:260px;background:#050505;border:1px solid #0ff;padding:12px;display:grid;gap:10px;box-shadow:0 8px 24px #000}.settings-panel label{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:8px;font-size:13px}.settings-panel select{background:#001b24;color:#fff;border:1px solid #0ff;padding:6px}.settings-panel .check{grid-template-columns:auto 1fr;justify-content:start}.settings-panel input{accent-color:#0ff}
.notice{display:none;margin:0;padding:7px 14px;background:#3a2c00;color:#ff0;border-bottom:1px solid #a80;font-size:13px}.notice.show{display:block}
.ticker{height:clamp(68px,7.4vh,90px);display:grid;grid-template-columns:58px minmax(145px,190px) 1fr 95px;align-items:center;border-bottom:1px solid #555;overflow:hidden}.page{color:#ff0;text-align:center;font-size:16px;font-weight:bold}.source{padding:0 6px}.source-select{width:100%;background:#001b24;color:#0ff;border:1px solid #0ff;padding:7px 4px;font:700 13px "Courier New",monospace;cursor:pointer;outline:none}.source-select:focus{background:#003647;color:#fff;border-color:#ff0}.source-select option:disabled{color:#888}
.news{height:100%;overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}.track{display:flex;width:max-content;flex:none;white-space:nowrap;will-change:transform;animation:marquee var(--speed,120s) linear infinite}.loop{display:flex;flex:none;align-items:center}.item{display:inline-flex;align-items:center;margin-right:95px;font-size:var(--ticker-font,20px);line-height:1.25;font-weight:bold}.item:before{content:"▶";color:#f00;margin-right:12px;font-size:.85em}.item a{color:#fff;text-decoration:none}.item a:hover{color:#ff0}.time{color:#0f0;margin-left:14px;font-size:.9em;font-weight:normal}
.status{font-size:12px;text-align:center;font-weight:bold;line-height:1.2}.status-dot{display:inline-block;margin-right:5px;font-size:14px}.status-live{color:#0f0}.status-cache{color:#0ff}.status-stale{color:#fa0}.status-error{color:#f55}.status-loading{color:#ff0}.refreshing .status{opacity:.65}.error .track,.loading .track{animation:none!important}.stale .news{opacity:.82}.paused .track{animation-play-state:paused!important}
body[data-font-size="normal"]{--ticker-font:18px}body[data-font-size="large"]{--ticker-font:22px}body[data-font-size="xlarge"]{--ticker-font:27px}
footer{display:flex;justify-content:space-between;gap:20px;padding:10px 14px;color:#0ff;border-top:3px solid #fff;font-size:12px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){header{height:58px;padding:0 8px}.heading{font-size:19px}.datetime{font-size:11px;gap:7px}.bar{font-size:12px;padding:7px 8px}.mode-switch{grid-template-columns:1fr 1fr 1fr;padding:7px 8px;gap:5px}.mode-button{font-size:11px;padding:8px 3px}.mode-current{grid-column:1/-1;text-align:center;font-size:10px}.toolbar{padding:6px 8px;gap:5px}.toolbar button,.settings summary{font-size:10px;padding:6px}.settings-panel{right:auto;left:0}.ticker{grid-template-columns:38px 100px 1fr 63px;height:68px}.page{font-size:12px}.source{padding:0 2px}.source-select{font-size:10px;padding:5px 2px}.item{margin-right:60px}.status{font-size:9px}footer{font-size:9px;padding:7px;flex-direction:column;gap:3px}}

/* iPad / Safari + Citrix compatibiliteit 2.6.5 */
html{-webkit-text-size-adjust:100%;height:100%}
body{min-height:100vh;min-height:-webkit-fill-available;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.screen{min-height:100vh;min-height:-webkit-fill-available}
.news{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
button,.source-select,.settings select{-webkit-appearance:none;border-radius:0}
@media (hover:hover) and (pointer:fine){}
@media (hover:none),(pointer:coarse){.ticker:hover .track{animation-play-state:running}.paused .track{animation-play-state:paused!important}}
@media (min-width:761px) and (max-width:1024px){
  header{height:64px;padding:0 10px}.heading{font-size:23px}.datetime{font-size:14px;gap:10px}
  .mode-switch{grid-template-columns:1fr 1fr 1fr;padding:8px 10px}.mode-current{grid-column:1/-1;text-align:center}
  .toolbar{padding:7px 10px}.ticker{grid-template-columns:46px 150px 1fr 78px;height:72px}
  .source-select{font-size:11px}.status{font-size:10px}.item{margin-right:70px}
}

/* Citrix/RDP fallback: JS-marquee neemt over als CSS-animatie niet beweegt. */
.track.js-marquee-fallback{animation:none!important;will-change:transform}
.paused .track.js-marquee-fallback{animation:none!important}


/* 2.6.5: alle categoriekeuzeknoppen exact even groot */
.mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mode-button {
  box-sizing: border-box;
  flex: 0 0 190px;
  width: 190px;
  min-width: 190px;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 2.6.5 - lange categorienaam volledig zichtbaar binnen dezelfde knopmaat */
.mode-button {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
}
.mode-button[data-mode="intellectueeleigendom"] {
  font-size: 0.82em;
  letter-spacing: -0.02em;
}

/* 2.6.5 - vijf categorieknoppen, allemaal even groot en responsief */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.mode-button {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 48px;
  padding: 7px 8px;
}
.mode-button[data-mode="filmsseries"] {
  font-size: 0.92em;
}
@media (max-width: 900px) {
  .mode-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mode-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 2.6.5: eigen scrollbare bronkiezer - betrouwbaar op iPad/Citrix/desktop */
.source-select{
  display:block;
  text-align:left;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  touch-action:manipulation;
}
.source-select:after{content:" ▼";float:right;color:#ff0}
.source-picker[hidden]{display:none!important}
.source-picker{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.source-picker-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.source-picker-panel{
  position:relative;
  z-index:1;
  width:min(760px,96vw);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  background:#050505;
  border:2px solid #0ff;
  box-shadow:0 12px 40px #000;
}
.source-picker-head{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #0ff;
  color:#ff0;
}
.source-picker-head button{
  background:#001b24;color:#0ff;border:1px solid #0ff;
  padding:7px 10px;font-weight:bold;cursor:pointer
}
.source-picker-list{
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:8px;
}
.source-picker-option{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  text-align:left;
  margin:0 0 6px;
  padding:12px 14px;
  background:#001b24;
  color:#fff;
  border:1px solid #0ff;
  font:700 14px "Courier New",monospace;
  cursor:pointer;
}
.source-picker-option:hover,.source-picker-option:focus{color:#ff0;border-color:#ff0;background:#002d3a}
.source-picker-option.selected{background:#0ff;color:#000}
.source-picker-option small{font-size:10px;font-weight:normal;color:#ff0}
.source-picker-option.selected small{color:#000}
.source-picker-option:disabled{opacity:.45;cursor:not-allowed}
body.source-picker-open{overflow:hidden}
@media(max-width:760px){
  .source-picker{padding:8px}
  .source-picker-panel{width:100%;max-height:92vh}
  .source-picker-option{font-size:12px;padding:11px 10px}
}

/* 2.6.5: alle hoofdrubrieken compact op één regel */
.mode-switch{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  padding:7px 10px;
  overflow-x:hidden;
}
.mode-button{
  flex:1 1 0;
  min-width:0;
  padding:8px 6px;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mode-current{
  flex:0 0 auto;
  font-size:11px;
  white-space:nowrap;
  padding-left:4px;
}
@media(max-width:760px){
  .mode-switch{gap:3px;padding:5px 4px}
  .mode-button{padding:7px 2px;font-size:8px;letter-spacing:-.25px}
  .mode-current{display:none}
}
@media(min-width:761px) and (max-width:1024px){
  .mode-switch{display:flex;flex-wrap:nowrap;gap:5px;padding:6px}
  .mode-button{font-size:10px;padding:7px 4px}
  .mode-current{font-size:10px}
}

/* 2.6.5: CYBERSECURITY + compactere bronknoppen */
.ticker{
  grid-template-columns:58px minmax(175px,230px) 1fr 95px;
}
.source-select{
  min-height:40px;
  font-size:11px;
  line-height:1.15;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
  padding:6px 22px 6px 6px;
  position:relative;
}
.source-select:after{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
}
@media(max-width:760px){
  .ticker{grid-template-columns:36px 125px 1fr 58px}
  .source-select{
    min-height:38px;
    font-size:9px;
    line-height:1.1;
    padding:5px 16px 5px 4px;
  }
}
@media(min-width:761px) and (max-width:1024px){
  .ticker{grid-template-columns:46px 175px 1fr 78px}
  .source-select{font-size:10px}
}