*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* App-wiel in dezelfde stijl als de startpagina (kleuren uit de huisstijl, lettertype Plus Jakarta Sans) */
:root{
  --sidebar:250px;
  --panel:480px;
  --hh:#3787f5;
  --hh-deep:#1d63d6;
  --hh-night:#164ea8;
  --g1:#0fe8be; --g2:#fadc32; --g3:#a05aff; --kl:#ff4b5a;
  --ink:#1b2333;
  --muted:#5b6475;
  --line:#e3e7ee;
  --paper:#f5f7fb;
  --text:var(--ink);
  --font:'Plus Jakarta Sans',system-ui,'Segoe UI',Arial,sans-serif;
  --font-bold:var(--font);
  --ease:cubic-bezier(0.4,0,0.2,1);
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);color:var(--ink);background:var(--paper);display:flex;flex-direction:column;height:100vh;-webkit-font-smoothing:antialiased}
body::before{content:'';display:block;height:4px;flex-shrink:0;background:linear-gradient(90deg,var(--hh) 0 52%,var(--g1) 52% 64%,var(--g2) 64% 76%,var(--g3) 76% 88%,var(--kl) 88%)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hh-deep);outline-offset:2px}
b,strong,h2,.btn,.nav-item,.sb-btn,.sb-suggest,.menu a{font-family:var(--font-bold);font-weight:700}

/* Kop, zoals de startpagina */
.top{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:42px;width:auto;display:block}
.tag{font-family:var(--font-bold);font-weight:700;font-size:0.95rem;color:var(--hh-deep);border-left:1px solid var(--line);padding-left:14px}
.menu{display:flex;gap:28px}
.menu a{text-decoration:none;font-size:0.98rem;color:var(--muted);display:inline-flex;align-items:center;gap:5px;padding:24px 0 22px;border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a[aria-current]{color:var(--ink);border-bottom-color:var(--hh)}
.ext{width:12px;height:12px}

.layout{flex:1;min-height:0;display:flex}

/* Zijbalk */
.sidebar{width:var(--sidebar);flex-shrink:0;background:#fff;border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column}
.sb-group{padding:18px 14px 6px}
.sb-group[hidden]{display:none}
.sb-head{font-size:0.8rem;color:var(--muted);padding:0 10px 8px}
.sb-nav{display:flex;flex-direction:column}
.nav-item,.sb-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;cursor:pointer;font-size:0.93rem;color:var(--ink);padding:9px 10px;border-radius:6px;border-left:3px solid transparent}
.nav-item:hover,.sb-btn:hover{background:var(--paper)}
.nav-item.active,.sb-btn.on{background:#eef4fe;color:var(--hh-deep);border-left-color:var(--hh);border-radius:0 6px 6px 0}
.sb-suggest{width:100%;border:1px solid #b9cdf0;background:#fff;color:var(--hh-deep);border-radius:6px;padding:10px 12px;font-size:0.93rem;cursor:pointer;text-align:left}
.sb-suggest:hover{border-color:var(--hh-deep);background:#f7faff}
.count{margin-left:auto;background:var(--hh-deep);color:#fff;border-radius:10px;padding:0 7px;font-size:0.75rem;line-height:1.6}
.sb-legend{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sb-legend .sb-head{padding-bottom:2px}
.leg-row{display:flex;gap:9px;align-items:flex-start;font-size:0.82rem;color:var(--muted);line-height:1.35;padding:0 10px}
.leg-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:2px}
.d1{background:#c8dff0;box-shadow:inset 0 0 0 1.5px #7bafd4}
.d2{background:#5b9bd5;box-shadow:inset 0 0 0 1.5px #2c7ab5}
.d3{background:#2c4a8f;box-shadow:inset 0 0 0 1.5px #1a2e60}
.sb-user{margin-top:auto;padding:14px 24px 18px;font-size:0.8rem;color:var(--muted);border-top:1px solid var(--line);line-height:1.5}
.sb-user a,.sb-user button{color:var(--hh-deep);background:none;border:none;font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* Hoofdvlak */
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.wiel-view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;position:relative;overflow:hidden;transition:transform 0.45s var(--ease)}
.wiel-view.shifted{transform:translateX(calc(var(--panel)*-0.4))}
.wheel-wrap{position:relative;height:min(calc(100vh - 150px),calc((100vw - var(--sidebar) - 60px) * 1.2));aspect-ratio:750/900;flex-shrink:0;border-radius:8px;overflow:hidden;box-shadow:0 12px 36px rgba(20,50,110,0.14);border:4px solid #fff;background:#fff}
.wheel-img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.app-btn{position:absolute;border-radius:50%;background:transparent;border:none;cursor:pointer;transform:translate(-50%,-50%);z-index:10}
.app-btn:focus-visible{outline:3px solid var(--g2)}
.hint{font-size:0.88rem;color:var(--muted)}

/* Overzicht per categorie */
.overview-view{flex:1;overflow-y:auto;padding:36px clamp(16px,4vw,40px) 60px;display:none}
.overview-view.on{display:block}
.ov-title{font-size:1.8rem;color:var(--hh-deep);line-height:1.15}
.ov-sub{font-size:0.95rem;color:var(--muted);margin:6px 0 24px}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;max-width:72rem}
.app-card{background:#fff;border-radius:8px;padding:18px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s}
.app-card:hover{border-color:var(--hh);box-shadow:0 6px 18px rgba(20,50,110,0.08)}
.card-top{display:flex;align-items:center;gap:12px}
.card-icon{width:46px;height:46px;border-radius:8px;flex-shrink:0;background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center}
.card-icon img{width:100%;height:100%;object-fit:contain;padding:6px}
.av{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-bold);font-weight:700;font-size:1.2rem;color:#fff}
.card-name{font-family:var(--font-bold);font-weight:700;font-size:1rem;line-height:1.2;margin-bottom:4px}
.card-badge,.p-badge{display:inline-block;font-size:0.74rem;font-family:var(--font-bold);font-weight:700;padding:2px 8px;border-radius:4px}
.card-desc{font-size:0.9rem;line-height:1.55;color:var(--muted)}
.card-link{font-size:0.88rem;font-family:var(--font-bold);font-weight:700;text-decoration:none;color:var(--hh-deep);margin-top:auto}
.card-link:hover{text-decoration:underline}

/* Paneel rechts */
.panel{position:fixed;top:0;right:calc(var(--panel)*-1 - 20px);width:var(--panel);height:100vh;background:#fff;box-shadow:-10px 0 40px rgba(20,50,110,0.14);z-index:400;transition:right 0.4s var(--ease);display:flex;flex-direction:column}
.panel.on{right:0}
.p-bar{height:4px;flex-shrink:0}
.p-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 0}
.p-close,.p-edit{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 12px;font-size:0.85rem;cursor:pointer;color:var(--ink)}
.p-close:hover,.p-edit:hover{border-color:var(--hh-deep);color:var(--hh-deep)}
.p-edit{display:none}
.is-admin .p-edit.show{display:block}
.p-body{flex:1;overflow-y:auto;padding:8px 28px 32px}
.p-head{display:flex;align-items:center;gap:14px;margin:8px 0 18px}
.p-icon-wrap{width:58px;height:58px;border-radius:10px;flex-shrink:0;background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center}
.p-icon-wrap img{width:100%;height:100%;object-fit:contain;padding:7px}
.p-name{font-family:var(--font-bold);font-weight:700;font-size:1.35rem;line-height:1.2;margin:6px 0 2px}
.p-cat{font-size:0.88rem;color:var(--muted)}
.lbl{font-size:0.8rem;color:var(--muted);margin:18px 0 6px}
.p-desc{font-size:0.98rem;line-height:1.65}
.p-desc p{margin:0 0 14px}
.p-desc p:last-child{margin-bottom:0}
.p-desc a{color:var(--hh-deep);font-family:var(--font-bold);font-weight:700}
.p-tip{margin-top:18px;padding:12px 16px;background:var(--paper);border-left:3px solid var(--hh);border-radius:0 6px 6px 0}
.p-tip .lbl{margin-top:0}
.p-tip-txt{font-size:0.94rem;line-height:1.55}
.p-link{display:inline-flex;margin-top:22px;padding:12px 20px;border-radius:6px;background:var(--hh-deep);color:#fff;text-decoration:none;font-family:var(--font-bold);font-weight:700;font-size:0.95rem}
.p-link:hover{background:var(--hh-night)}
.backdrop{position:fixed;inset:0;background:rgba(15,30,70,0.18);z-index:399;opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease)}
.backdrop.on{opacity:1;pointer-events:all}

/* Formulieren in het paneel */
.p-title{font-family:var(--font-bold);font-weight:700;font-size:1.35rem;margin:8px 0 6px}
.p-intro{font-size:0.95rem;color:var(--muted);line-height:1.55;margin-bottom:6px}
.f{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.f label{font-size:0.82rem;color:var(--muted)}
.f input[type=text],.f input[type=url],.f input[type=email],.f select,.f textarea{font:inherit;font-size:0.95rem;color:var(--ink);border:1px solid #cfd7e4;border-radius:6px;padding:9px 11px;background:#fff;width:100%}
.f textarea{min-height:90px;resize:vertical;line-height:1.5}
.f textarea.big{min-height:200px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--hh-deep);box-shadow:0 0 0 3px rgba(55,135,245,0.15)}
.f .help,.help{font-size:0.8rem;color:var(--muted)}
.row{display:flex;gap:10px}.row>*{flex:1}
.check{display:flex;gap:8px;align-items:flex-start;font-size:0.9rem;margin-top:14px;line-height:1.4}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.btn{font-size:0.92rem;border:1px solid #cfd7e4;border-radius:6px;padding:9px 16px;cursor:pointer;background:#fff;color:var(--ink)}
.btn:hover{border-color:var(--hh-deep);color:var(--hh-deep)}
.btn.primary{background:var(--hh-deep);border-color:var(--hh-deep);color:#fff}
.btn.primary:hover{background:var(--hh-night)}
.btn.danger{color:#b4232f;border-color:#f0c4c8}
.btn.danger:hover{border-color:#b4232f;color:#b4232f}
.btn.small{padding:5px 10px;font-size:0.82rem}
.msg{margin-top:12px;font-size:0.9rem;border-radius:6px;padding:10px 12px}
.msg.ok{background:#e7f6ee;color:#11603a}.msg.err{background:#fdecee;color:#9b1c28}
.icon-pick{display:flex;align-items:center;gap:12px}
.icon-pick .p-icon-wrap{width:50px;height:50px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.item{border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:0.9rem;line-height:1.5}
.item .t{font-family:var(--font-bold);font-weight:700;font-size:1rem}
.item .meta{font-size:0.8rem;color:var(--muted);margin-top:3px}
.item.done{opacity:0.6}
.tag{font-family:var(--font-bold);font-weight:700}
.item .tag{display:inline-block;font-size:0.72rem;padding:1px 7px;border-radius:4px;background:var(--paper);color:var(--muted);margin-left:8px;border:none}
.item .tag.nieuw{background:#fff6cc;color:#7a5d00}
.tabs{display:flex;gap:18px;margin:4px 0 6px;border-bottom:1px solid var(--line)}
.tabs button{border:none;background:none;padding:8px 0;font-size:0.9rem;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--hh);font-family:var(--font-bold);font-weight:700}
.catrow{display:grid;grid-template-columns:1fr 44px auto;gap:6px;align-items:center}
.catrow input{font:inherit;border:1px solid #cfd7e4;border-radius:6px;padding:6px 8px;width:100%}
.catrow input[type=color]{padding:2px;height:34px}

/* Bewerkmodus op het wiel */
.edit-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:20;background:var(--ink);color:#fff;font-size:0.86rem;padding:8px 10px 8px 16px;border-radius:6px;display:none;gap:12px;align-items:center;white-space:nowrap}
.editing .edit-banner{display:flex}
.edit-banner button{background:#fff;border:none;border-radius:4px;padding:3px 10px;cursor:pointer;color:var(--ink);font-size:0.82rem}
.placing .wheel-wrap{cursor:crosshair}
.placing .edit-banner{background:var(--hh-deep)}
.app-ov{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:5;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center}
.app-ov img{width:100%;height:100%;object-fit:contain;padding:8%}
.editing .app-btn{border:2px dashed rgba(29,99,214,0.8);background:rgba(255,255,255,0.18);cursor:grab}
.editing .app-btn:hover{background:rgba(250,220,50,0.35)}
.editing .app-btn.dragging{cursor:grabbing;background:rgba(250,220,50,0.5)}
.unplaced{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);z-index:20;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;box-shadow:0 6px 20px rgba(20,50,110,0.12);font-size:0.84rem;color:var(--muted);display:none;max-width:90%;flex-wrap:wrap;gap:6px;align-items:center}
.editing .unplaced.has{display:flex}
.chip{border:1px solid #cfd7e4;background:#fff;border-radius:4px;padding:3px 10px;cursor:pointer;font-size:0.84rem}
.chip:hover{border-color:var(--hh-deep)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:6px;font-size:0.9rem;z-index:1000;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:1}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Gsm en smalle schermen */
@media (max-width:820px){
  :root{--panel:100vw}
  html,body{overflow:auto;height:auto}
  body{height:auto;min-height:100vh}
  .top{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px 0}
  .brand img{height:38px}
  .menu{gap:20px}
  .menu a{padding:10px 0 12px}
  .layout{flex-direction:column}
  .sidebar{width:100%;border-right:none;border-bottom:1px solid var(--line);overflow:visible}
  .sb-group{padding:12px 16px 4px}
  .sb-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .sb-wiel{margin-bottom:6px}
  .nav-item{width:auto;border:1px solid var(--line);border-radius:6px}
  .nav-item.active{border-radius:6px;border-color:var(--hh)}
  .sb-legend,.sb-user{display:none}
  .main{overflow:visible}
  .wiel-view{padding:16px}
  .wiel-view.shifted{transform:none}
  .wheel-wrap{height:auto;width:100%}
  .overview-view{padding:24px 16px 40px}
  .p-body{padding:8px 16px 32px}
}