/* Aanvullingen op app.css (de conceptstijl) voor het echte dashboard. */
html,body{min-height:100%}
.laden-scherm{min-height:100vh;display:grid;place-items:center}
.laden-scherm .brand{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;opacity:.7;animation:adem 1.6s ease-in-out infinite}
.brand i{font-style:normal;color:var(--accent)}
@keyframes adem{50%{opacity:.25}}

/* navigatie: links in plaats van knoppen */
.nav a{display:flex;align-items:center;gap:.6rem;width:100%;text-decoration:none;padding:.52rem .5rem;border-radius:var(--r);color:var(--ink-2);font-size:.9rem;transition:background .18s var(--ease),color .18s var(--ease)}
.nav a:hover{background:var(--panel-2);color:var(--ink)}
.nav a[aria-current]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.nav a[aria-current] .dot{opacity:1}
.side-voet{margin-top:auto;display:flex;flex-direction:column;gap:.25rem;padding:.6rem .5rem;border-top:1px solid var(--line)}
.side-voet .mono{color:var(--muted);font-size:.64rem;overflow:hidden;text-overflow:ellipsis}
.side-voet .link{align-self:flex-start}
a.btn,a.kn{text-decoration:none;display:inline-flex}
a.kn{display:flex}
.kn-uit{opacity:.7;cursor:default}

/* leeg, laden en skelet */
.leeg-blok{padding:1.4rem 1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;color:var(--ink-2);font-size:.9rem}
.leeg-blok p{max-width:60ch}
.leeg-blok.laden{flex-direction:row;align-items:center;color:var(--muted)}
.leeg-regel{padding:.8rem 1rem;color:var(--muted);font-size:.86rem;margin:0}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:draai .8s linear infinite;flex:none}
@keyframes draai{to{transform:rotate(360deg)}}
.skelet{min-height:150px;background:linear-gradient(90deg,var(--panel) 0%,var(--panel-2) 50%,var(--panel) 100%);background-size:200% 100%;animation:glans 1.4s ease-in-out infinite}
@keyframes glans{to{background-position:-200% 0}}
.toast.fout{background:var(--stop);color:#fff}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);background:var(--bg)}
.login-beeld{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 50% 42%,var(--panel-2) 0%,var(--bg) 75%);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}
.login-robot{position:absolute;inset:0 0 6rem 0}
.login-robot canvas{width:100%!important;height:100%!important;display:block}
.login-merk{position:relative;padding:2rem clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;gap:.4rem}
.login-merk .brand{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}
.login-merk p{color:var(--ink-2);max-width:38ch}
.login-vak{display:grid;place-items:center;padding:2rem 1.25rem}
.login-kaart{width:min(420px,100%);display:flex;flex-direction:column;gap:.9rem}
.login-kaart h1{font-size:clamp(2rem,4vw,2.8rem)}
.login-kaart .label{color:var(--accent)}
.login-uitleg{color:var(--ink-2);font-size:.98rem}
.login-klein{color:var(--muted);font-size:.82rem}
.login-fout{color:var(--stop);font-size:.86rem;margin:.2rem 0 .4rem}
.login .veld input{font-size:1rem;padding:.75rem .8rem}
.login-knop{width:100%;padding:.8rem 1rem;font-size:.95rem;justify-content:center}
.login-voet{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem;border-top:1px solid var(--line);margin-top:.6rem}
.login-voet .mono{color:var(--muted);font-size:.66rem}
@media (max-width:820px){.login{grid-template-columns:1fr}.login-beeld{min-height:38vh;border-right:0;border-bottom:1px solid var(--line)}.login-robot{inset:0 0 4.5rem 0}}

/* venster */
dialog#venster{max-height:88vh;overflow:auto}
dialog#venster:not(.breed){width:min(480px,94vw)}
.venster-b{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.venster-b > p{color:var(--ink-2);font-size:.9rem}
.stappen{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.stappen b{display:block;font-size:.9rem}
.stappen small{color:var(--muted);font-size:.8rem}
.apparaatcode{font-family:var(--mono);font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:.16em;text-align:center;padding:1rem;border:1px dashed var(--accent);border-radius:var(--r);color:var(--accent);user-select:all}
.sub-kop{font-size:.95rem;margin:.6rem 0 .2rem;display:flex;gap:.5rem;align-items:baseline}
.vr-in{width:5rem;font:inherit;font-size:.84rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.3rem .4rem;margin-right:.4rem}

/* studio */
.ph img,.ref img{width:100%;height:100%;object-fit:cover;display:block}
.prod .ph{background:var(--panel)}
.prod[disabled]{opacity:.5;cursor:not-allowed}
.stijl-shots{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.ref.groot{position:relative;aspect-ratio:1}
.ref-weg{position:absolute;top:.3rem;right:.3rem;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px solid var(--line);font-size:.9rem;line-height:1}
.ref-nieuw{display:grid;place-items:center;border:1px dashed var(--line);cursor:pointer;color:var(--muted);font-family:var(--mono);font-size:.7rem;text-align:center;padding:.5rem}
.ref-nieuw:hover{border-color:var(--accent);color:var(--accent)}
.keur-fout{color:var(--stop);font-size:.78rem;padding:0 .7rem .4rem;margin:0}
.pager{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:1rem;padding:.4rem 0}
.tel{display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .3rem;margin-left:.3rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.66rem;font-weight:800}
.tel:empty{display:none}
.taakbalk .link{white-space:nowrap}
.taakbalk{grid-template-columns:minmax(0,16rem) 1fr auto auto}

/* advertenties */
.analyse-tekst{padding:.9rem 1rem;color:var(--ink-2);font-size:.9rem;max-width:80ch}
.analyse-tekst p{margin:0 0 .7rem}
pre.uitwerking{white-space:pre-wrap;font-family:var(--mono);font-size:.72rem;color:var(--ink-2);margin:.5rem 0 0;max-height:280px;overflow:auto}

@media (max-width:820px){.taakbalk{grid-template-columns:1fr}.side-voet{display:none}}
.producten > .leeg-blok,.keur-grid > .leeg-blok,.modules > .leeg-blok{grid-column:1/-1}
.beheer-pagina{max-width:1100px;margin:0 auto}
.zoek-veld{font:inherit;font-size:.84rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.4rem .6rem;width:min(260px,50vw)}
.meekijkbalk{display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.45rem 1rem;background:var(--accent);color:var(--accent-ink);font-size:.82rem;font-weight:700}
.meekijkbalk a{color:inherit}
/* Het borstbeeld eindigt rafelig; laat het onder de rand doorlopen zodat die onderkant buiten beeld valt. */
#maatje{bottom:calc(-1 * clamp(34px, 3.4vw, 54px))}
.login-robot{inset:0}
.login-merk{z-index:1;background:linear-gradient(to bottom,transparent,var(--bg) 45%)}
@media (max-width:820px){.login-robot{inset:0}}