:root {
  --geel: #FFC000; --rood: #F23F55; --paars: #6C4CF1; --creme: #FFF6E8; --inkt: #17111a;
  --grijs: #6b6470; --rand: #e6e0d6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #16111a; color: var(--creme); }
body.editor-body { background: #0c080b url('/static/achtergrond-editor.jpg') center -80px / 100% auto no-repeat fixed; }
body.editor-body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(12,8,11,.78) 0%, rgba(12,8,11,.93) 40%, #100b12 100%); pointer-events: none; z-index: 0; }
body.editor-body > * { position: relative; z-index: 1; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; overflow: hidden; }
.login-foto { position: fixed; inset: 0; background: url('/static/achtergrond.jpg') center 35% / cover no-repeat; }
.login-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,11,.72) 0%, rgba(12,8,11,.82) 55%, #0c080b 100%); }
.login-body::before { content: ''; position: fixed; top: 0; right: 0; width: 17vw; height: 17vw; background: var(--geel); clip-path: polygon(100% 0, 0 0, 100% 100%); z-index: 1; }
.login-body::after { content: ''; position: fixed; bottom: 0; left: 0; width: 13vw; height: 13vw; background: var(--geel); clip-path: polygon(0 0, 0 100%, 100% 100%); z-index: 1; }
.login-kaart { position: relative; z-index: 2; background: var(--creme); color: var(--inkt); padding: 36px 40px 40px; border-radius: 26px; width: 380px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.login-logo { display: block; width: 240px; max-width: 100%; margin: 0 auto 6px; }
.login-kaart .sub { margin: 0 0 26px; color: var(--grijs); font-weight: 800; text-align: center; letter-spacing: .5px; }
.login-kaart label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.login-kaart input { width: 100%; padding: 12px; border: 2px solid var(--rand); border-radius: 12px; font-size: 16px; }
.login-kaart button { width: 100%; margin-top: 16px; padding: 13px; border: 0; border-radius: 12px; background: var(--geel); color: var(--inkt); font-weight: 800; font-size: 16px; cursor: pointer; }
.fout { background: #ffe3e7; color: #a11227; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }

.balk { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #0c080b; border-bottom: 2px solid #241a26; position: sticky; top: 0; z-index: 5; }
.merk { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 17px; color: var(--creme); }
.merk img { height: 30px; display: block; }
.merk span { color: var(--geel); }
.balk-rechts { display: flex; gap: 8px; align-items: center; }
.balk-rechts select { padding: 8px 10px; border-radius: 10px; border: 0; font-size: 13px; max-width: 260px; }

.lay { display: grid; grid-template-columns: minmax(560px, 1fr) 420px; gap: 20px; padding: 20px; align-items: start; }
@media (max-width: 1200px) { .lay { grid-template-columns: 1fr; } }

.formulier { display: flex; flex-direction: column; gap: 16px; }
.blok { background: var(--creme); color: var(--inkt); border-radius: 20px; padding: 18px 20px; }
.blok h2 { margin: 0 0 14px; font-size: 17px; }
.telling { font-weight: 600; font-size: 13px; color: var(--grijs); margin-left: 8px; }
.blok label { display: block; font-size: 12px; font-weight: 800; color: #4b4453; margin-bottom: 10px; }
.blok input[type=text], .blok input:not([type]), .blok select { width: 100%; padding: 9px 11px; border: 2px solid var(--rand); border-radius: 10px; font-size: 14px; font-family: inherit; margin-top: 4px; }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rij3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.hint { font-size: 12px; color: var(--grijs); margin: 6px 0 0; }
.schuif input[type=range] { width: 100%; }
.vink { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 12px; }
.vink input { width: auto; }

.gigs-kop, .gig { display: grid; grid-template-columns: 1.1fr 1.1fr 1.3fr .75fr .75fr 34px 72px 30px; gap: 6px; align-items: center; }
.gigs-kop { font-size: 11px; font-weight: 800; color: var(--grijs); text-transform: uppercase; margin-bottom: 6px; }
.gig { margin-bottom: 6px; }
.gig input[type=text] { width: 100%; padding: 7px 8px; border: 2px solid var(--rand); border-radius: 8px; font-size: 13px; margin: 0; }
.gig .plaats-veld { position: relative; }
.gig .plaats-veld.ok input { border-color: #9ad0a6; }
.gig .plaats-veld.leeg input { border-color: #f0b6be; }
.gig .weg { border: 0; background: #f1ebe1; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 0; }
.gig .uit { justify-self: center; }
.gig .kant { width: 100%; padding: 6px 4px; border: 2px solid var(--rand); border-radius: 8px; font-size: 12px; font-family: inherit; background: #fff; }
.telling.waarschuwing { color: #b1421f; }
.opties { position: absolute; z-index: 4; top: 100%; left: 0; right: 0; background: #fff; border: 2px solid var(--rand); border-radius: 10px; max-height: 190px; overflow: auto; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.opties div { padding: 7px 10px; font-size: 12px; cursor: pointer; }
.opties div:hover { background: #fdf3dd; }

.knop { border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 800; font-size: 14px; cursor: pointer; background: var(--geel); color: var(--inkt); font-family: inherit; }
.knop.klein { padding: 8px 12px; font-size: 13px; }
.knop.grijs { background: #2c2331; color: var(--creme); }
.knop.groot { background: var(--rood); color: #fff; padding: 13px 26px; }
.knop:disabled { opacity: .5; cursor: default; }
.knoppen { display: flex; gap: 10px; margin-top: 4px; }
.render-status { margin-top: 12px; font-size: 13px; font-weight: 600; }
.balkje { height: 10px; background: #eee5d6; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.balkje i { display: block; height: 100%; background: var(--geel); width: 0; transition: width .4s; }
.render-status a { color: var(--paars); font-weight: 800; }

.voorbeeld { position: sticky; top: 76px; }
.voorbeeld-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; }
.telefoon { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.telefoon iframe { width: 1080px; height: 1920px; border: 0; transform-origin: 0 0; }