:root{
  --bg:#090b0e;--panel:#11161c;--panel2:#151b22;--line:#27303a;--muted:#9ca8b6;
  --text:#f5f7fa;--gold:#ffbf16;--gold2:#ffd86b;--red:#ff6b6b;--green:#49d17d;
  --shadow:0 18px 50px rgba(0,0,0,.28);--sidebar:360px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input,select{font:inherit} button,a{outline-offset:3px}
.app-shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--line);background:#0b0f14;padding:28px 22px;z-index:30}
.brand{display:flex;align-items:center;gap:16px;margin-bottom:28px}.brand img{width:82px;height:82px;object-fit:contain}
.brand strong{display:block;font-size:23px}.brand span{display:block;margin-top:5px;letter-spacing:.22em;color:var(--muted);font-size:14px}
.all-chapters{width:100%;display:flex;gap:14px;align-items:center;padding:17px 18px;border-radius:14px;border:1px solid #5f4a13;background:#14140f;color:#ffe180;font-weight:800;font-size:18px;cursor:pointer}
.all-chapters.active{box-shadow:inset 0 0 30px rgba(255,191,22,.05)}
.side-label{margin:30px 8px 12px;color:#8f9aa8;letter-spacing:.14em;font-size:13px}
#chapterNav{display:grid;gap:4px}.chapter-link{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;width:100%;padding:12px 9px;border:0;background:none;color:#aeb8c4;text-align:left;border-radius:10px;cursor:pointer;font-weight:700}
.chapter-link:hover,.chapter-link.active{background:#121820;color:#fff}.chapter-link .count{color:#f7ca4d;font-size:13px}
.side-jump{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}.side-jump label{font-size:12px;letter-spacing:.14em;color:#8995a3}.side-jump div{display:flex;margin-top:9px}
.side-jump input{min-width:0;flex:1;background:#0b0f14;color:#fff;border:1px solid #34404b;border-radius:10px 0 0 10px;padding:12px}.side-jump button{border:1px solid #6b5314;background:#18160e;color:var(--gold);border-radius:0 10px 10px 0;padding:0 16px;cursor:pointer}
.side-help{display:grid;gap:8px;margin-top:22px;padding:14px;background:#10161c;border:1px solid var(--line);border-radius:12px;color:#9facb9;font-size:12px}.side-help strong{color:#fff}.side-help span{display:flex;gap:5px;align-items:center}kbd{padding:2px 5px;border:1px solid #39434e;border-bottom-width:2px;border-radius:5px;background:#171d24;color:#d8dee5}
.main{min-width:0}.topbar{position:sticky;top:0;height:96px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:rgba(8,10,13,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.topbar nav{display:flex;gap:34px;height:100%;align-items:center}.topbar nav a{height:100%;display:flex;align-items:center;color:#aeb7c3;text-decoration:none;font-size:17px;border-bottom:3px solid transparent}.topbar nav a.active{color:#fff;border-color:var(--gold)}
.top-actions{display:flex;gap:12px}.top-actions button,.back-site{border:1px solid #2d3742;border-radius:12px;background:#151b22;color:#fff;padding:12px 16px;text-decoration:none;cursor:pointer}.top-actions button.active{border-color:#806416;color:#ffe174}
.mobile-menu{display:none}
.hero{position:relative;min-height:430px;padding:75px 48px 55px;background:radial-gradient(circle at 85% 48%,rgba(185,110,0,.20),transparent 31%),linear-gradient(120deg,#090b0e 35%,#151109 100%);border-bottom:1px solid #3d3114;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,var(--gold),#7d5900,var(--gold))}
.hero-copy{max-width:690px;position:relative;z-index:2}.eyebrow{color:var(--gold);font-size:13px;letter-spacing:.18em;font-weight:900;text-transform:uppercase}.hero h1{font-size:68px;line-height:.96;margin:18px 0 20px;letter-spacing:-.045em}.hero h1 span{color:#ffda63}.hero p{font-size:20px;line-height:1.5;color:#aeb7c3;max-width:590px}
.hero-logo{position:absolute;right:7%;top:52%;transform:translateY(-50%);width:min(34vw,430px);height:min(34vw,430px);object-fit:contain;filter:drop-shadow(0 25px 50px rgba(255,159,0,.12))}
.searchbox{margin-top:28px;max-width:650px;display:flex;align-items:center;border:1px solid #705812;background:#0a0d11;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.searchbox span{padding-left:18px;color:var(--gold);font-size:22px}.searchbox input{flex:1;min-width:0;padding:18px 16px;background:transparent;border:0;color:#fff;font-size:18px;outline:0}.shortcut{margin-right:14px;color:#8e9aa6;background:#161c22;border:1px solid #303944;border-radius:8px;padding:6px 8px;font:12px monospace}
.content-wrap{padding:28px 36px 60px;max-width:1500px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.stat{display:flex;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;min-height:120px}.stat-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:#211d12;color:var(--gold);font-size:25px}.stat small{display:block;color:#9eb0c4;letter-spacing:.1em;text-transform:uppercase}.stat strong{display:block;margin-top:8px;font-size:27px}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.dash-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.dash-card h2{margin:0;padding:22px;border-bottom:1px solid var(--line);font-size:20px}.chips{padding:20px;display:flex;gap:10px;flex-wrap:wrap}.chip{border:1px solid #6b5413;background:#14140f;color:#fff;border-radius:12px;padding:11px 15px;cursor:pointer}.chip:hover{border-color:var(--gold)}
.change-list{display:grid}.change-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:17px 22px;border-bottom:1px solid var(--line);cursor:pointer}.change-row:last-child{border-bottom:0}.change-row strong{display:block}.change-row span{color:#94a5b5;font-size:13px;margin-top:5px;display:block}.change-row time{color:#9db6cf;font-size:13px}
.important{display:flex;gap:18px;margin-top:22px;padding:24px;background:linear-gradient(90deg,#19170e,#11110d);border:1px solid #6e5610;border-radius:16px}.important .ico{font-size:30px;color:var(--gold)}.important strong{display:block;color:#ffdc66;text-transform:uppercase;letter-spacing:.05em}.important p{margin:8px 0 0;color:#b9c4cf;font-size:17px;line-height:1.5}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:30px 0 18px}.tools .grow{flex:1;min-width:260px;position:relative}.tools input,.tools select{width:100%;background:#10151b;color:#fff;border:1px solid #34404b;border-radius:12px;padding:14px 16px;outline:0}.tools input:focus,.tools select:focus{border-color:#967318;box-shadow:0 0 0 3px rgba(255,191,22,.08)}.tool-btn{padding:13px 15px;background:#131920;border:1px solid #35404a;border-radius:11px;color:#dfe5ea;cursor:pointer}.tool-btn.active{color:#ffe074;border-color:#806314}
.result-head{display:flex;justify-content:space-between;align-items:end;margin:28px 0 14px}.result-head h2{font-size:30px;margin:0}.result-head span{color:#9aa7b5}
.chapter-section{margin-top:20px;border:1px solid var(--line);background:#0e1318;border-radius:16px;overflow:hidden}.chapter-head{display:flex;align-items:center;gap:15px;padding:19px 22px;background:linear-gradient(90deg,#282313,#13181d 60%);border-bottom:1px solid var(--line)}.chapter-head .icon{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#38301a}.chapter-head h3{margin:0;font-size:22px}.chapter-head p{margin:5px 0 0;color:#9ba9b7;font-size:13px}
.article{border-bottom:1px solid var(--line);background:#11171d}.article:last-child{border-bottom:0}.article-summary{display:grid;grid-template-columns:92px minmax(0,1fr) auto auto 42px;gap:12px;align-items:center;padding:17px 22px;cursor:pointer}.article-num{color:#ffd34d;border:1px solid #665111;border-radius:9px;padding:9px 10px;text-align:center;font-weight:900;font-size:13px}.article-title{font-weight:800;font-size:17px}.penalty-pill{border:1px solid #303a44;background:#161c23;border-radius:9px;padding:9px 12px;color:#b9cad9;font-size:13px;white-space:nowrap}.expand{color:var(--gold);font-size:20px}
.article-details{display:none;padding:3px 22px 22px 126px}.article.open .article-details{display:block}.detail-text{color:#b7c3cf;line-height:1.6;margin:12px 0 18px}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.detail-box{background:#161c23;border:1px solid #303a44;border-radius:12px;padding:16px}.detail-box span{display:block;color:#9eb2c4;font-size:12px;text-transform:uppercase}.detail-box strong{display:block;margin-top:8px;font-size:19px}.article-actions{display:flex;gap:10px;margin-top:14px}.article-actions button{background:#161c23;color:#e4e9ee;border:1px solid #34404b;border-radius:9px;padding:9px 12px;cursor:pointer}.article-actions .fav.active{color:#ffd756;border-color:#756016}
.note{margin-top:13px;padding:12px 14px;border-left:3px solid var(--gold);background:#18170f;color:#d1c18d;border-radius:0 8px 8px 0}.new-badge{display:inline-block;margin-left:8px;font-size:11px;color:#92efae;border:1px solid #285b39;background:#102318;border-radius:6px;padding:3px 6px}
.empty{padding:50px;text-align:center;color:#9aa6b3}.empty strong{display:block;color:#fff;font-size:22px;margin-bottom:8px}
.view-title{padding:40px 36px 0;max-width:1500px;margin:auto}.view-title .eyebrow{margin-bottom:10px}.view-title h1{font-size:44px;margin:0}.view-title p{color:#aab5c0;font-size:17px}
.change-page{padding:20px 36px 60px;max-width:1500px;margin:auto}.change-card{display:grid;grid-template-columns:100px minmax(0,1fr) 1fr;gap:20px;align-items:center;padding:18px 20px;margin:10px 0;background:var(--panel);border:1px solid var(--line);border-radius:13px}.oldnew{display:flex;gap:8px;flex-wrap:wrap}.old{color:#ff9c9c;text-decoration:line-through}.new{color:#8ee6a9}.tag-new{color:#8ee6a9;border:1px solid #2d6c41;border-radius:6px;padding:3px 7px;font-size:12px}
.calc{padding:20px 36px 60px;max-width:1200px;margin:auto}.calc-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}.calc-list,.calc-total{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:20px}.calc-total{position:sticky;top:118px;height:max-content}.calc-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.calc-item:last-child{border-bottom:0}.total-big{font-size:42px;color:#ffda64}.warning{margin-top:15px;color:#d6c485;background:#1c190e;border:1px solid #5e4c17;border-radius:10px;padding:12px;line-height:1.5}
.guide{padding:20px 36px 60px;max-width:1100px;margin:auto}.guide-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:24px;margin:14px 0}.guide-card h2{margin-top:0}.guide-card p,.guide-card li{color:#b0bdc8;line-height:1.6}
footer{border-top:1px solid var(--line);padding:25px 36px;color:#7f8b98;text-align:center}
.compact .article-summary{padding:10px 17px;grid-template-columns:78px minmax(0,1fr) auto auto 32px}.compact .chapter-head{padding:12px 17px}.compact .chapter-head .icon{width:36px;height:36px}.compact .article-details{padding-left:106px}
mark{background:#79611e;color:#fff;border-radius:3px;padding:0 2px}
.toast{position:fixed;right:25px;bottom:25px;z-index:99;background:#192119;color:#a9edba;border:1px solid #326d43;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow)}
@media(max-width:1100px){:root{--sidebar:300px}.hero h1{font-size:54px}.stats{grid-template-columns:1fr 1fr}.hero-logo{opacity:.34}.dashboard-grid{grid-template-columns:1fr}.article-summary{grid-template-columns:78px minmax(0,1fr) auto 36px}.article-summary .fine-summary{display:none}.article-details{padding-left:112px}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;left:-330px;width:320px;transition:.2s}.sidebar.open{left:0;box-shadow:20px 0 60px #000}.mobile-menu{display:block;background:none;border:0;color:#fff;font-size:22px}.topbar{height:70px;padding:0 14px}.topbar nav{gap:12px;overflow:auto}.topbar nav a{font-size:0}.topbar nav a::first-letter{font-size:20px}.top-actions button{display:none}.back-site{padding:9px 11px;font-size:13px}.hero{padding:55px 22px 38px;min-height:390px}.hero h1{font-size:46px}.hero-logo{right:-90px;width:360px;height:360px}.content-wrap,.change-page,.calc,.guide{padding-left:15px;padding-right:15px}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px;min-height:95px}.stat-icon{width:44px;height:44px}.stat strong{font-size:21px}.article-summary{grid-template-columns:70px minmax(0,1fr) 32px}.penalty-pill{display:none}.article-details{padding:0 14px 18px}.detail-grid{grid-template-columns:1fr 1fr}.calc-grid{grid-template-columns:1fr}.calc-total{position:static}.change-card{grid-template-columns:80px 1fr}.change-card>div:last-child{grid-column:2}.view-title{padding:30px 15px 0}}
@media(max-width:520px){.stats{grid-template-columns:1fr}.hero h1{font-size:40px}.hero p{font-size:16px}.hero-logo{opacity:.22}.detail-grid{grid-template-columns:1fr}.tools{display:grid}.tools .grow{min-width:0}.change-card{display:block}.change-card>*{margin-bottom:10px}}

/* V5.1 logo fix */
.brand img{width:112px!important;height:90px!important;object-fit:contain!important;filter:drop-shadow(0 8px 18px rgba(255,166,0,.16))}
.brand{gap:13px!important}
.hero-logo{object-fit:contain!important;max-width:430px!important;max-height:430px!important}
@media(max-width:820px){.brand img{width:88px!important;height:72px!important}}


/* =====================================================
   V5.2 - POLISH + ECHTE DIENSTMODUS
   ===================================================== */

html,body{max-width:100%;overflow-x:hidden}
.main,#view{min-width:0}

/* Logo: niet meer over de titel heen */
.hero-copy{max-width:720px;width:64%}
.hero-logo{
  right:1.5%!important;
  top:51%!important;
  width:min(29vw,360px)!important;
  height:min(29vw,360px)!important;
  max-width:360px!important;
  max-height:360px!important;
  z-index:1;
}
.hero-copy{z-index:2}
.hero h1{position:relative;z-index:3}

/* Zoekveld duidelijker */
.searchbox{
  border:2px solid #9a7310!important;
  box-shadow:0 0 0 4px rgba(255,191,22,.045),0 18px 48px rgba(0,0,0,.38)!important;
}
.searchbox:focus-within{
  border-color:var(--gold)!important;
  box-shadow:0 0 0 4px rgba(255,191,22,.10),0 18px 48px rgba(0,0,0,.45)!important;
}

/* Compact = echte dienstmodus */
.compact{
  --sidebar:250px;
}
.compact .sidebar{
  padding:16px 13px;
}
.compact .brand{
  margin-bottom:14px;
}
.compact .brand img{
  width:72px!important;
  height:58px!important;
}
.compact .brand strong{font-size:18px}
.compact .brand span{font-size:11px}
.compact .all-chapters{
  padding:11px 12px;
  font-size:15px;
}
.compact .side-label{
  margin:18px 5px 7px;
  font-size:11px;
}
.compact .chapter-link{
  padding:8px 6px;
  grid-template-columns:19px 1fr auto;
  gap:7px;
  font-size:13px;
}
.compact .side-jump{
  margin-top:15px;
  padding-top:13px;
}
.compact .side-help{
  display:none;
}
.compact .topbar{
  height:64px;
  padding:0 20px;
}
.compact .topbar nav{
  gap:21px;
}
.compact .topbar nav a{
  font-size:14px;
}
.compact .top-actions button,
.compact .back-site{
  padding:9px 12px;
  font-size:13px;
}

/* Dienstmodus inhoud */
.service-mode{
  max-width:1500px;
  margin:0 auto;
  padding:14px 22px 45px;
}
.service-search{
  position:sticky;
  top:64px;
  z-index:15;
  display:grid;
  grid-template-columns:minmax(330px,1fr) minmax(210px,300px) auto auto;
  gap:9px;
  align-items:center;
  padding:12px 0 14px;
  background:linear-gradient(#090b0e 78%,rgba(9,11,14,.90));
}
.service-search-main{
  min-width:0;
  display:flex;
  align-items:center;
  height:52px;
  border:2px solid #8b6910;
  background:#0d1217;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.service-search-main:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,191,22,.09),0 10px 26px rgba(0,0,0,.34);
}
.service-search-main>span{
  color:var(--gold);
  padding-left:15px;
  font-size:19px;
}
.service-search-main input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 13px;
  background:transparent;
  border:0;
  color:#fff;
  outline:0;
  font-size:16px;
}
.service-search-main b{
  margin-right:11px;
  color:#8fa0b0;
  border:1px solid #34404a;
  border-radius:7px;
  padding:5px 7px;
  font:11px monospace;
}
.service-search select{
  height:52px;
  background:#10161c;
  color:#fff;
  border:1px solid #34404a;
  border-radius:11px;
  padding:0 12px;
}
.service-search>.tool-btn{
  height:52px;
  white-space:nowrap;
}
.service-recent{
  display:flex;
  gap:7px;
  align-items:center;
  min-height:34px;
  margin:0 0 8px;
  color:#8594a3;
  font-size:12px;
}
.service-recent button{
  color:#e7edf2;
  background:#11161c;
  border:1px solid #594712;
  border-radius:8px;
  padding:5px 9px;
  cursor:pointer;
}
.service-result-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:42px;
  padding:3px 3px 8px;
}
.service-result-head strong{
  color:#ffe074;
  font-size:15px;
}
.service-result-head span{
  color:#92a2b2;
  font-size:13px;
}
.service-section{
  margin:8px 0;
  border:1px solid #26303a;
  border-radius:10px;
  overflow:hidden;
  background:#0f1419;
}
.service-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 13px;
  color:#b8c5d0;
  background:#151b21;
  border-bottom:1px solid #27313b;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.service-section-title small{
  margin-left:auto;
  color:#e9be43;
}
.favorites-section .service-section-title{
  color:#ffe176;
  background:#1a180f;
}
.service-row{
  border-bottom:1px solid #242e37!important;
  background:#0f151a!important;
}
.service-row:last-child{
  border-bottom:0!important;
}
.service-row-main{
  display:grid!important;
  grid-template-columns:75px minmax(180px,1fr) 22px 105px 105px 25px!important;
  gap:9px!important;
  align-items:center!important;
  min-height:45px!important;
  padding:5px 12px!important;
}
.service-row-main:hover{
  background:#151b21;
}
.service-art{
  color:#ffd34d;
  font-size:12px;
  font-weight:900;
}
.service-row-main strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}
.service-star{
  color:#ffd45a;
  font-size:13px;
  text-align:center;
}
.service-jail,.service-fine{
  justify-self:end;
  color:#c3d0dc;
  font-size:12px;
  white-space:nowrap;
}
.service-row .expand{
  justify-self:end;
  font-size:14px;
}
.service-details{
  padding:10px 12px 12px 96px!important;
  background:#11171c;
}
.service-details .detail-text{
  margin:0 0 9px;
  font-size:13px;
}
.service-details .article-actions{
  margin-top:7px;
}
.service-details .article-actions button{
  padding:6px 9px;
  font-size:12px;
}

/* oude compact CSS overschrijven */
.compact .article-summary{
  padding:5px 12px;
}
.compact .article-details{
  padding-left:96px;
}

/* Brede resoluties: voorkom horizontaal scrollen */
.service-mode,.service-section,.service-row,.service-row-main{min-width:0;max-width:100%}

@media(max-width:1200px){
  .hero-copy{width:69%}
  .hero-logo{
    width:min(27vw,320px)!important;
    height:min(27vw,320px)!important;
    opacity:.65!important;
  }
  .service-search{
    grid-template-columns:minmax(280px,1fr) 220px auto auto;
  }
  .service-row-main{
    grid-template-columns:70px minmax(150px,1fr) 20px 92px 92px 22px!important;
  }
}

@media(max-width:900px){
  .compact{--sidebar:300px}
  .service-mode{padding:10px 12px 35px}
  .service-search{
    position:static;
    grid-template-columns:1fr 1fr;
  }
  .service-search-main{
    grid-column:1/-1;
  }
  .service-row-main{
    grid-template-columns:66px minmax(120px,1fr) 18px 84px 22px!important;
  }
  .service-fine{display:none}
}

@media(max-width:620px){
  .service-search{grid-template-columns:1fr}
  .service-search-main{grid-column:auto}
  .service-row-main{
    grid-template-columns:62px minmax(100px,1fr) 18px 22px!important;
  }
  .service-jail,.service-fine{display:none}
  .service-details{padding-left:12px!important}
}